Cara membuat Readmore di Blogger. Ok sahabat seocips.com saat ini tentang Cara membuat Readmore Ringan Tanpa Java Script. Untuk template Bawaan standar Blogger di tampilan homepagenya keseluruhan postingan artikel akan ditampilkan sehingga memakan ruang yang banyak dan tentusaja memperberat loading Blog.

Cara membuat Readmore Ringan Tanpa Java Script

Loading Blog yang lama akan membuat bosan pengunjung Blog anda, apalagi jika yang berkunjung jaringannya Laload atau lama loading, seperti di tempat saya yang jaringannya "kadanga-kadang". Beberapa situs juga dapat anda singgahi untuk mengetest kecepatan loading template blog anda. Karena alasan itu kita membuat readmore untuk mempersingkat postingan di Homepage agar lebih singkat dan agar loading Blog lebih ringan.

Beberapa template Blogger Seo Friendly juga telah otomatis terpasang readmore tanpa perlu anda pasang sendiri. Tapi jika anda ingin mencoba memasang readmore otomatis yang lebih ringan tanpa java script dibawah ini maka berikut ini adalah tutorialnya.

Cara Membuat Auto Readmore di Blog - Blogger

Jika sebelumnya anda menggunakan auto read-more menggunakan javascript Anda bisa memodifikasinya pada formulir HTML Temlpate, temukan kode ini:

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

Jangan lupa untuk menghapus script auto read-more link yang biasanya terletak di atas </head>. Kalau udah ketemu hapus semua kode tersebut kemudian Anda ganti dengan kode di bawah ini :

<b:if cond="data:post.firstImageUrl">
  <a expr:href="data:post.url"><img class="thumbnail-post" expr:src="data:post.firstImageUrl" expr:title="data:post.title" /></a>
<b:else>
  <a expr:href="data:post.url"><img class="thumbnail-post" src="http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg" expr:title="data:post.title" /></a>
</b:else></b:if>
<div class='post-snippet'><data:post.snippet/></div>

Jika template blog Anda masih berupa posting dan belum menggunakan readmore,  berikut tutorial lengkap membuat Auto Read More Thumbnail Tanpa Javascript!.

  • Login Ke Blogger
  • Klik Edit Template
  • Cari kode ]]></b:skin>
  • Silahkan Copy kode Css Berikut ini di atas kode tersebut.

.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;

Setelah itu Cari kode <data:post.body/> yang ke 2 atau 3 atau ke 4, ganti dengan kode ini
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
  </b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
Keterangan:

  • Thumbnail menggunakan <data:post.firstImageUrl>
  • Snippet di ambil dari Referensi pada Popular Post <data:post.snippet/>
  • kemudian Save Template anda.

Demikian tutorial Cara membuat Readmore Ringan Tanpa Java Script - Cara Membuat Auto Readmore di Blog, semoga tutorial diatas mudah dipahami, semoga berhasil dan selamat menerapkannya ke template sobat.
1 Komentar untuk "Cara membuat Readmore Ringan Tanpa Java Script"

terima kasih infonya..sangat berguna untuk blogger pemula seperti saya