Posting Auto Read-More Tanpa JavaScript

Image Read More
Cara ini dapat membuat tampilan blog terlihat lebih rapi dan elegan serta membuat blog akan terlihat cuplikan artikel ketika membuka blog pada halaman depan (homepage) dan juga akan membuat template blog menjadi lebih SEO Friendly karena langsung masuk ke script HTML blogger dengan memanfaatkan <data:post.snippet/> untuk Mengambil Ringkasan Posting dan <img expr:src='data:post.thumbnailUrl'/> untuk Mengambil Thumbnail Posting, berbeda dengan Read More Otomatis dengan Thumbnail Blogger dengan Javascript yang memanfaatkan pihak ketiga tempat penyimpanan data script yang membuat beban loading blog.
  • Terlebih dahulu masukkan kode CSS dibawah ini pada template yang penempatanya diatas kode </b:skin>, sesuaikan dengan template anda :
    .readmore{float:left;width:200px;line-height:20px;margin-right:15px;}
    .readmore img{background-image: url('https://lh4.googleusercontent.com/-wxD_93A9meY/T9YV80IuQGI/AAAAAAAAAgY/p4Mql4p4wiE/s25/putih.png'); border:1px solid #ccc;padding:5px;height:120px;width:95%;}
    .readmore .isi{border:1px solid #000;}
    
  • Template Standart Blogger → Jika template blogger belum memanfaatkan auto read more, silahkan cari code <data:post.body/> kemudian ganti dengan kode dibawah ini :
    <div class='post-body'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='readmore'>
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
    <b:else/>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' src='http://2.bp.blogspot.com/-T35hHb1U34o/Uk2Q6XVpO0I/AAAAAAAAAsg/W8LNJO_zkIA/s320/no-thumbnail.jpg'/></a>
    </b:if>
    </b:if>
    </div>
    <div class='isi'><data:post.snippet/></div>
    <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    <b:else/>
    <data:post.body/>
    </b:if>
    <b:else/>
    <data:post.body/>
    </b:if>
    </div>
  • Template Blogger yang terpasang Read More Javascript → Temukan kode dibawah ini kemudian silahkan dihapus dan ganti dengan kode diatas :
    
    <b:if cond='data:blog.pageType != "item"'>
    .......
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    .......
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    

Terdapat 7 komentar pada " Posting Auto Read-More Tanpa JavaScript ".

  1. TengKyu, Gan. Langsung coba.

    BalasHapus
  2. wah bakal ane terapin nih di template modifan ane http://fastsensetemplate.blogspot.com/ biar tambah wussss

    BalasHapus
  3. Bagaimana caranya agar cuplikannya sedikit banyak ?

    BalasHapus

Silahkan tulis komentar.

Sahabat Blogger

Google Plus

Copyright © 2010 Style Blogger Template. All Rights Reserved.
Download Remove