Cara Membuat Auto Readmore Keren Otomatis

Zona Internetku No Comment September 07, 2018

Cara Membuat Auto Readmore Keren Otomatis Pada Bagian Homepage Blog. Biasanya pada halaman homepage suatu blog kebanyakan sudah menggunakan auto readmore karena di anggap lebih ringkas dan lebih keren. Untuk kali saya akan menunjukkan caranya untuk membuat auto readmore tanpa menggunakan kode javascript yang bisa menimbulkan dan juga menambah beban loading blog.

Cara Membuat Auto Readmore Keren Otomatis Tanpa Kode Javascript Pada Homepage

1. Masuk ke blog kalian dan pilih menu "Tema" dan klik "Edit HTML"
2. Cari kode ]]></b:skin> dan letakkan kode ini di atasnya

.post-title a, .post-title{
font-size: 20px;
text-decoration: none;
color: #f8695e;
}
.thumbnail-post {
width:160px;
height:130px;
float:left;
display:block;
margin:0px 10px 0px 0px;
}
.post-snippet{   
float: left;
display: block;
width: calc(100% - 170px);
word-wrap: break-word;
}

Keterangan :
(post-title) font-size: berfungsi untuk mengubah ukuran font atau huruf pada judul postingan
(thumbnail-post) Width: Untuk mengubah ukuran lebar gambar
(thumbnail-post) Height: berguna sebagai mengubah ukuran tinggi gambar

3. Cari kode <data:post.body/> yang ada di dalam <b:includable id='post' var='post'>...</b:includable> dan ganti kode tersebut dengan kode berikut

<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='read_more_btn'>
      <a class='button' expr:href='data:post.url'>Read More</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>