Sunday, December 22, 2013

Membuat Auto read more di Blogspot


Membuat Read More Otomatis Di Blogspot (Automatic Read More + Thumbnail Image)


Read more otomatis (Automatic
Read more ) adalah read more atau baca selengkapnya dengan secara
otomatis mengambil ringkasan dari blog kita di tambah lagi read more otomatis ini juga dapat menampilkan gambar dengan ukuran yang kita inginkan selain itu kita dapat menentukan jumlah  karakter yang akan kita tampilkan. 






Berikut caranya : 


1. Login di Blogger > pada Dasboard pilih Layout > Edit HTML

2. Centang / Check List dulu "expand widget templates"

3. Cari kode </head> kemudian copy - paste kode di bawah ini sebelum kode tersebut





<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://googlecode.com/files/summarypost.js type=text/javascript/>



4. Sekarang cari kode<data:post.body/> dan ganti kode tersebut dengan kode 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> Read More </a></span>

</b:if>

<b:if cond=data:blog.pageType == "item"><data:post.body/></b:if>



5. Klik "simpan template"





Keterangan :


summary_noimg = 430; Menentukan jumlah ringkasan tanpa gambar

summary_img = 340; Menentukan umlah ringkasan dengan gambar

img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya

img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya




Bagaimana jika telah menggunakan readmore verssi lama?


Jika kamu sebelumnya telah menggunakan readmore versi lama silahkan kembalikan dulu kodenya caranya perhatikan kode dibawah ini, ini kode readmore versi lama:


   
<div class=post-header-line-1/>



    <div class=post-body entry-conten>

    <b:if cond=data:blog.pageType == "item">

    <style>.fullpost{display:inline;}</style>

    <p><data:post.body/></p>

    <b:else/>

    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>

    <a expr:href=data:post.url>Read More......</a>

    </b:if>



Hapuslah kode yang dicetak tebal kemudian simpan template.

No comments:

Post a Comment