Post Snippet Blogger - IdBlogDesign

Begitu banyaknya langkah atau cara untuk memotong posting pada blogger sering kali membuat kita sedikit binggung untuk memilih cara mana yang cocok untuk kita terapkan dalam template blogger kesayangan kita. Diantaranya yaitu dengan menggunakan metode script auto read more dan bahkan ada yang menggunakan kode <!--more--> dalam mode posting html setiap ingin memotong posting artikel pada blogger. Seiring dengan berjalannya waktu, mungkin cara-cara tersebut sedikit kurang asyik jika kita terapkan pada template blogger, karena tentunya cara-cara tersebut selain memiliki kelebihan tersendiri, pasti juga memiliki beberapa kelamahan.

Belum lama ini blogger menambahkan fitur baru pada layanan blogspot mereka yaitu fitur snippet pada posting artikel, sehingga kita tidak perlu lagi menggunakan metode script auto read more atau metode <!--more--> untuk memotong posting artikel kita. Namun fitur tersebut tidak bisa secara otomatis kita nikmati, melainkan kita harus sedikit melakukan oprek pada template kita.



Langsung saja jika Anda ingin mencobanya silahkan ikuti langkah-langkah berikut ini:

1. Masuk akun blogger Anda. Pilih tab menu Rancangan -> Edit HTML.
2. Beri centang pada 'Expand Widget Templates'.
3. Masukan kode css berikut sebelum kode ]]></b:skin>
   

   .thumb img{float:left; margin:0 10px 10px 0}

4. Setelah itu cari kode <data:post.body/>
   Mungkin Anda akan menemukan 2 kode yang sama, untuk itu pilih urutan yang pertama saja.
5. Ganti kode tersebut 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/>
   <b:if cond='data:post.hasJumpLink'>
   <data:post.body/>
   <b:else/>
   <b:if cond='data:post.snippet'>
   <b:if cond='data:post.thumbnailUrl'>
   <div class='Image thumb'>
   <img expr:src='data:post.thumbnailUrl'/>
   </div>
   </b:if>
   <data:post.snippet/>
   <div class='jump-link'>
   <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
   <div class='post-comment-link'>
           <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
               <b:if cond='data:post.allowComments'>
                 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if 
   cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> 
   <data:top.commentLabelPlural/></b:if></a>
               </b:if>
             </b:if>
           </b:if>
         </div> 
   </div>
   <b:else/>
   <data:post.body/>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
   

   
   Kode post snippet blogger tersebut sudah IdBlogDesign modifikasi sehingga dapat sekalian menampilkan jumlah komentar dalam post snippet dan tidak mengalami error pada saat menampilkan halaman statis atau static page.
   
6. Sebelum Anda menyimpan template Anda, silahkan preview terlebih dahulu hasil modifikasi template blogger Anda.

Jangan lupa sebelum melakukan cara tersebut diatas, alangkah baiknya jika Anda melakukan backup template Anda terlebih dahulu. Dan sekedar untuk informasi, langkah-langkah tersebut sudah dilakukan uji coba pada sebagian template blogger buatan IdBlogDesign dengan menggunakan template yang diluncurkan tahun 2006 bawaan blogger. Selamat mencoba dan semoga bermanfaat.