Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas auto readmore dengan javascript namun kali ini kita akan membahas tanpa javascipt.

*Apa sih perbedaan menggunakan javascipt dengan tanpa javascript? Auto readmore dengan javascipt memakan waktu loading yang lebih lama lagi ketimbang tanpa java script. Nah, 1 lagi, katanya javascript membuat duplikat kontent yang akan membuat masalah lebih banyak lagi yang akan diberitahukan di Google Web Master.

Langkah Membuat Auto Readmore Dengan Gambar Tanpa Java Script :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, centang expand template widget
3. Cari kode dibawah ini :

<data:post.body/>

Catatan : Biasanya kode diatas ada 3 sampai 4 pada template blogger, silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4.

     4.  Ganti kode diatas, dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qrZmEA5RBpPv9-c28kbkOYuWJ1Jd1d1bFBwG4ev8Y6WbJGPSyXv4FekYkff0P1JrsV3DDVtp1hL8koBUrNIXw7FnyB8DUfeNtI-60pHMmIKMW6zeaRR319qh5daOGrTu6ZaWiV9Qkw3n/s0/no-image.png'/></a>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore &#187;</a>
</div></b:if><b:else/>
<data:post.body/></b:if><b:else/>
<data:post.body/></b:if></b:if>

     5.  Cari kode dibawah ini :

]]></b:skin>

     6.  Pastekan CSS dibawah ini diatas pada kode diatas :

.post-thumbnail {width:72px; height:72px; float:left; margin:0px 10px 0px 0px;}

     7.  Preview dahulu template Anda, dan save.

Catatan : Pada langkah 7 diatas, saat Anda preview pastikan sudah sesuai dengan yang Anda harapkan. Jika belum perhatikan langkah 3 diatas.