Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks

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 = &quot;no-float&quot; ; 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 != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</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/AVvXsEjc10zPOiWCozqFBJ4Utyt-waUox276f4VyYXt1t4hbDh5vtYOStbxFg2lfXmErv5CvDNkoS8GhwiTruUqfLtI7z_cE6JzjiS1omgZgkkz6IiNeE1_pSj5_RVO2faxDhqxrlkxG3AnEne8x/h101/Read+more+26.png"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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/AVvXsEjc10zPOiWCozqFBJ4Utyt-waUox276f4VyYXt1t4hbDh5vtYOStbxFg2lfXmErv5CvDNkoS8GhwiTruUqfLtI7z_cE6JzjiS1omgZgkkz6IiNeE1_pSj5_RVO2faxDhqxrlkxG3AnEne8x/h101/Read+more+26.png"></img> dan gantikan dengan teks kalian,misalkan READ MORE >>> atau apalah terserah kalian...

 * Ok...setelah selesai dengan langkah di atas kalian PRATINJAU dulu dan apabila sukses dan kalian suka bisa langsung di simpan.selesai.