Berikut ini cara membuat Auto Readmore blog dengan posisi gambar di samping judul atau judul di kanan gambar thumbnail.
Sebelumnya saya sudah share cara menciptakan auto readmore lainnya, namun semuanya posisi gambar di bawah judul.
Seperti dijelaskan sebelumnya, auto read more yakni istilah di dunia blogging atau kalangan blogger merujuk pada tampilan halaman depan (homepage) blog berupa judul, gambar kecil (thumbnail), dan ringkasan goresan pena (cuplikan aliena pertama postingan).
Dianamakan Auto Read More alasannya yakni biasanya ada link/tulisan Read More atau Baca Selengkapnya di bab akhir. Disebut Auto karena arahan di bawah ini secara otomatis meringkas postingan, tanpa cara manual dengan klik "insert jump break" ketika menulis postingan.
Lebih jelasnya, lihat halaman depan blog ini, atau menyerupai screenshot gambar auto readmore blogger di bawah ini.
Nah, tutorial dengan arahan auto readmore yang sudah saya modifikasi di bawah ini akan menampilkan halaman depan blogger jadi menyerupai gambar di atas.
Cara meringkas goresan pena di halaman depan blog ini khususnya untuk template blog bawaan blogger versi simple (sederhana) yang masih menampilkan goresan pena 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 gres atau ganti template dengan versi Simple. Lakukan langkah berikut ini:1. Klik Tema > Edit HTML
1. Klik Tema > Edit HTML
2. Cari (Ctrl+F) arahan </head>
3. Copas/simpan arahan berikut ini di atas arahan </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 arahan berikut ini yang ada di bawah arahan <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 arahan berikut ini:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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/AVvXsEgEEcPmczPI5bjSwkBVk34hVAFvJyOsamWykCcfYtCoYKH9jHGBfWIGQWCs3RMqxgxAcOJmAn3g8520_bMJNXfg3UWGigvV3anNnDxIRobyetzm-oSeU2oSy3cSe-32QmgtXR70XNLmTeo/s200-c/last%2528gr%2529256.jpg' width='180px'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 arahan berikut ini:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<data:post.snippet/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
7. HAPUS juga arahan 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 + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
8. Simpan arahan javascript berikut ini di atas arahan </body>
Kode ini untuk mengatasi gambar buram jikalau 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 ia Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul. Semoga berfungsi dengan baik di blog Anda. Wasalam. (blogromeltea.blogspot.com).*
0 comments: