Para sobat
bloger yang saya sayangi ,pada kesempatan ini saya akan memberikan tips
cara membuat read more otomatis menggunakan gambar atau teks,penasran ga?
he...he...,untuk yang belum pernah pasti penasaran,bagi yang sudah pernah ya
pasti biasa sajalah tentunya....,untuk contohnya kalian bisa melihat pada homepage blog ini atau kalian bisa lihat
gambar di atas.
OK....setelah
kalian lihat contohnya dan tertarik untuk menerapkanya di blog kalian maka
sekarang langsung kita mulai saja untuk membuatnya;
* Pertama tama kalian login dulu ke
akun bloger kalian,
* Masuk DESAIN >> TEMPELATE
>> Edit HTML >> centang Expand Tempelate Widget,
* Setelah itu cari script </head> gunakan CTRL + F untuk
memudahkan dalam pencarian kalian,
* Setelah ketemu Copykan Script
dibawah ini tepat berada dibawah </head>;
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
Keterangan:
- summary_noimg = 430 ; adalah jumlah karakter yang akan ditampilkan jika tidak mempergunakan gambar,kalian bisa merubah dan menyesuaikan menurut selera kalian.
- summary_img = 340 ; adalah jumlah karakter yang akan ditampilkan jika mempergunakan gambar/thumbnail.
- img_thumb_height = 100 ; adalah ukuran tinggi gambar/thumbnail yang akan ditampilkan.
- img_thumb_width = 120 ; adalah ukuran lebar gambar/thumbnail yang akan ditampilkan.
*Setelah selesai dengan langkah2 di
atas selanjutnya kalian cari sricpt <data:post.body/>
atau <p><data:post.body/></p>,
jika kalian menemukan 2 pilih saja yang pertama.
* Dan jika sudah ketemu kalian ganti
kode tersebut dengan script dibawah ini;
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXd4eUHZb3CQiHRRtpH5T_RvdtCSxjVhraxdKUhQhspRufLl2hPt5mYDB-CvhUi4ZwpQCKIXfSDlW8dGH6K8Vkr2wso9UEXEnc-CQI1MPPct_BDdROYo5L4NBZ1YcwujJxLc-Y_sHzYXD9/h101/Read+more+26.png"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Keterangan:
- http://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png adalah kode Icon yang bisa kalian rubah.
- Jika kalian menghendaki ingin mengganti dengan tulisan/teks maka hapus script <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXd4eUHZb3CQiHRRtpH5T_RvdtCSxjVhraxdKUhQhspRufLl2hPt5mYDB-CvhUi4ZwpQCKIXfSDlW8dGH6K8Vkr2wso9UEXEnc-CQI1MPPct_BDdROYo5L4NBZ1YcwujJxLc-Y_sHzYXD9/h101/Read+more+26.png"></img> dan gantikan dengan teks kalian,misalkan READ MORE >>> atau apalah terserah kalian...
0 comments:
Post a Comment