Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Baca Juga

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul Halaman Depan Blogger.
 
Berikut ini cara membuat Auto Readmore blog dengan posisi gambar di samping judul atau judul di kanan gambar thumbnail.

Sebelumnya saya sudah share cara membuat auto readmore lainnya, namun semuanya posisi gambar di bawah judul.

Seperti dijelaskan sebelumnya, auto read more adalah istilah di dunia blogging atau kalangan blogger merujuk pada tampilan halaman depan (homepage) blog berupa judul, gambar kecil (thumbnail), dan ringkasan tulisan (cuplikan aliena pertama postingan).

Dianamakan Auto Read More karena biasanya ada link/tulisan Read More atau Baca Selengkapnya di bagian akhir. Disebut Auto karena kode di bawah ini secara otomatis meringkas postingan, tanpa cara manual dengan klik "insert jump break" saat menulis postingan.

Lebih jelasnya, lihat halaman depan blog ini, atau seperti screenshot gambar auto readmore blogger di bawah ini.

Nah, tutorial dengan kode auto readmore yang sudah saya modifikasi di bawah ini akan menampilkan halaman depan blogger jadi seperti gambar di atas.

Cara meringkas tulisan di halaman depan blog ini khususnya untuk template blog bawaan blogger versi simple (sederhana) yang masih menampilkan tulisan secara utuh (full post) di halalaman depan.

Pilih Template Blog Bawaan Blogger versi Simple (Sederhana)

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Login ke Blogger Anda. Buat blog baru atau ganti template dengan versi Simple. Lakukan langkah berikut ini:

1. Klik Tema > Edit HTML

 

1. Klik Tema > Edit HTML
2. Cari (Ctrl+F) kode </head>
3. Copas/simpan 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>
.post-thumbnail{float:left;margin-right:20px;background:#fff;margin-bottom: 5px;}
.post h2{font-size:20px;font-weight:normal;line-height:1.2em;margin-bottom:10px;margin-top:0}
.post h2 a,.post h3 a:visited{color:#0060A6;display:block;text-decoration:none}
.post h2 a:hover{color:#FF0084}
.post-footer,.date-header,.feed-links {display:none}
</style>
</b:if>
</b:if>

4. Cari dan HAPUS kode berikut ini yang ada di bawah kode <a expr:name='data:post.id'/> yang kedua.

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

5. Ganti dengan kode berikut ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='140px' width='180px'/>
   <b:else/>
    <img alt='no image' class='post-thumbnail' height='140px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Q6iLBEWBF9HiVRsw4iIBjX5rQ_Qp9vkKEsNo7_jis9sGRVHgH2NxxMGYmRffFpbxXpk-R1BtULG7c5Ki16rW1-OIGaxgCh1-tRbUjgpMsXXmdXlm7za04sZ2N4a7Ddta6KxyzABGMNk/s200-c/last%2528gr%2529256.jpg' width='180px'/>
   </b:if>
</b:if>
</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'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

6. HAPUS dan GANTI kode  <data:post.body/> yang kedua dengan kode berikut ini:

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

7. HAPUS juga kode berikut ini yang ada di atas kode  <div class='post-footer'>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

8. Simpan kode javascript berikut ini di atas kode </body>

Kode ini untuk mengatasi gambar buram jika ukuran thumbnail imagenya lebih dari 72 pixel

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

9. Save! Simpan Tempate Anda.

Itu dia Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul. Semoga berfungsi dengan baik di blog Anda. Wasalam. (blogromeltea.blogspot.com).*