Share tutorial menarik dan tips unik seputar blogger.

Saturday, 27 April 2013

Cara membuat Auto Readmore Dengan Gambar Tanpa JavaScript


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,
  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/AVvXsEjX1on2esS1bfxjlGKoBKafWKZfALhHXclGSMf8TV71xQoJPy36I3jnhUBu9gSanCuRaagU3ubBPU48pc5JTx02K8fUGy_TKvQBO1o8TWBXZf2zSenJZzYU24rzUTa43axS-ssqtfDSmhAM/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.

 -GOOD LUCK-

Share on Facebook
Share on Twitter
Share on Google+

Related : Cara membuat Auto Readmore Dengan Gambar Tanpa JavaScript

6 comments:

Tidak boleh spam
tidak boleh ceplas ceplos

berkomentarlah dengan baik, karena kriteria orang bisa di nilai dari apayang dia komentari :)