Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

| 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 :

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/AVvXsEjTi_ILV9qbVP1rHnKXrsDF4F2LRfTKIVqmU5E9rdS7tCnP0q1D_CaPpgJudcpynZNUgjGRuPQ3HkVROkxnmxqjbHCGm17U_vf0ipkwArtcCHagpUI8LCURWyiRJWKsd-8mezFuwJWY7PrA/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

Anda sedang membaca artikel tentang Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script dan anda bisa menemukan artikel Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script ini dengan url http://it-kopl4k.blogspot.com/2013/02/cara-membuat-auto-readmore-dengan.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script sumbernya.