Cara Mengubah Desain Tampilan Halaman Depan Blog dengan Auto Read More

Baca Juga

Desain Tampilan Halaman Depan Blog dengan Auto Read More maksudnya menampilkan tulisan di homepage berupa judul, gambar, dan ringkasan postingan.

Template blog umumnya begitu tampilannya. Hal itu akan memudahkan pembaca memilih tulisan yang ada.

Auto read more sendiri maksudnya link ke postingan yang biasanya berupa anchor text "read more" atau "baca selengkapnya".

Kode-kode berikut ini bisa digunakan untuk Mengubah Desain Tampilan Halaman Depan Blog dengan Auto Read More template bawaan Blogger.

Dengan memasang kode-kode di bawah ini, tampilan blog yang menggunakan template bawaan blogger akan menjadi berupa judul, gambar thumbnail, dan ringkasan yang diambil dari alinea pertama postingan blog.

Cara Membuat Auto Read More

1.Pasang dulu template Simple (Sederhana).

2. Klik Tema > Edit HTML
3. Pilih salah satu style auto read more berikut ini

Style 1 : Judul di atas Gambar & Snippet

Simpan kode berikut ini di atas kode ]]></b:skin>

.thumbnail-post {width:140px !important; height:80px !important;float:left;margin:0px 10px 0px 0px;}

Cari (Ctrl+F) dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- Auto Read More start -->
<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:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8TyI1YaEiITMk6pPHsqEt73PKnlwP5cayQDebs-LD_9qHPpU269PTSPbotio4kLP0UIUZwpKa-2JJFI3hOKGHd4Bnx9AZeAn41Ib1wxye8wtwKsZozX1PU9Vc3rI-9CA8w5wc4tunPfN/s220-Ic42/noimage.png'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </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>
<!-- Auto Read More end -->

4. Save!

Style 2 : Judul di Samping Gambar & Snippet

Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.thumb img {float: left;margin: 0 20px 5px 0;width: 180px;height: 110px;box-shadow:0;border:0;padding:0;background:#fff}
h2.post-title {font-size: 18px;margin-bottom: 8px;}
.post-body {font-size: 97%;line-height:1.3;position: relative;}
.post-footer {display:none}
.post {margin: 0 0 15px 0;border-bottom: 1px solid #f1f1f1;padding-bottom: 15px;}
</style>
</b:if>
</b:if>

Cari (Ctrl+F) dan kode <data:post.body/> yang kedua dengan kode berikut ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<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>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>

Cari kode <a expr:name='data:post.id'/> yang kedua. Di bawahnya pasti ada kode seperti :

<b:if cond='data:post.title'><h3 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h3></b:if>

Hapus kode tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.title'><h1 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h1></b:if></b:if>

Save! Simpan template

Itu dia dua desain tampilan auto read more blogger. 

Setelah memasang salah satu style di atas, tambahkan kode berikut ini di atas kode </body> untuk mengatasi gambar buram (blur).

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Save! Simpan template. Beres!

Itu dia cara mengubah desain tampilan halaman depan blog dengan Auto Read More. Kode-kodenya saya hasil "mengintip" dari desain blog yang sudah memasangnya.*