Translate This

->

Sunday, March 25, 2012

Cara Membuat Excerpt Thumbnail Postingan Blogspot

Tidak hanya WordPress yang bisa menggunakan fitur excerpt lengkap dengan Thumbnail, namun blogspot juga bisa. Fungsi excerpt adalah untuk memotong postingan kita yang panjang di halaman index, jadi di halaman index kita bisa menampilkan beberapa Judul posting yang lebih banyaknamun tetap tidak menghabiskan scroll page yang panjang pula sampai kebawah sehingga memperlambat loading akses blogspot kita.
Fitur excerpt ini menurut saya pribadi sangat menguntungkan, terutama untuk blog yang menyajikan postingan – postingan yang update secara berkala, semisalnya tip – tip dan berita, tentuny akan menjadi nilai tambah para pembaca setia anda merasa nyaman. Baiklah, tidak usah bertele – tele lagi ya, berikut saya berikan tutorial pemasangan script excerpt pada Blogspot, simak sodara – sodara, pastikan ikuti petunjuknya dengan benar hehe:

1. Pertama login ke Blogger, lalu ke bagian Design -> Edit HTML, lalu centang opsi Expand Widget Templates

2. Selanjutnya cari kode:</head>



- Lalu replace/ timpa dengan kode berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>
3. Selanjutnya cari baris perintah:

<data:post.body/>

sama seperti langkah tadi, silahkan replace/ timpa dengan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>
4. Lalu SAVE TEMPLATE.
….Dan Tadaaa, selesai sudah sodara – sodara, silahkan coba lihat halaman index/ homepage, halaman seach/ pencarian, Arsip, dan label sudah mempunyai fitur excertp thumbnail cantik.
Note: Untuk parameter setting ukuran image, jumlah karakter yang ditampilkan dapat anda rubah sesuai selera anda, namun berhati2 jangan sampai ada yang salah…nanti jadinya error hehe
dan juga saran, sebaiknya Backup dulu template anda sebelumnya untuk mengaktisipasi kesalahan, dan gunakan preview sebelum menyimpan/ Save perubahan.

Demikian, semoga artikel ini bermanfaat.
Penulis: Lilis Mayasari/ AKA. LieZMaya.
Source: bloggerplugins.org
Image: Potter.web.id, dari Liezmaya.web.id

2 comments:

  1. saya coba praktekkan kok mesti error, yg betul th ditimpa atau di paste dibawah /head ?

    ReplyDelete

Jangan Lupa Berilah Komentar!!
Trimakasih atas kunjungannnya.

Related Posts Plugin for WordPress, Blogger...