Cara Menciptakan Auto Readmore - Meringkas Goresan Pena Halaman Depan Blog
Jumat, 17 April 2015
Edit
Summary: Cara Membuat Auto Readmore -Mengubah Halaman Depan Blog Menjadi Ringkas (Post Snippet plus Gambar Thumbnail). Posisi judul posting sejajar dengan gambar thumbnail (judul di samping image).
Auto Read More ialah sebutan bagi tampilan halaman depan (homepage) dan halaman label (label pages) blog berupa judul, gambar thumbnail, dan ringkasan posting (snippet/summary) yang diambil dari alinea pertama tulisan.
Jika sehabis membuat blog di blogger Anda memakai template bawaan blogger, maka tampilan di halaman utama blog Anda berupa goresan pena penuh (full post). Di bawah ini ialah cara meringkasnya secara otomatis yang disebut menciptakan auto read more blogger.
Demonya dapat dilihat di halaman depan blog ini, atau jurnalistik template, atau blog Ahmad Fulan. Ini penampakkannya:
Tips Cara Membuat Auto Readmore berikut ini akan menghasilkan tampilan halaman depan blig menyerupai di atas. Gambar sejajar dengan judul posting atau judul di samping gambar thumbnail.
Sudah banyak Cara Membuat Auto Readmore, namun kebanyakan kodenya menghasilkan tampilan judul di atas gambar atau image di bawah judul.
Ada sih beberapa tips menciptakan auto read more dengan judul sejajar dengan gambar, namun cukup ribet juga mengeditnya semoga tampilan sesuai selera.
Kode berikut ini saya modifikasi dari kode-kode yang sudah beredar dan viral di kalangan blogger, diutak-atik (modif) dengan mengintip kode-kode auto read more yang menampilkan judul sejajar gambar.
Cara Membuat Auto Readmore - Meringkas Tulisan Halaman Depan Blog.
Langsung saja. Langkah awal banget, pilih dulu atau ganti template blog Anda dengan template bawaan blogge yang berjulukan Simple.
Langkah berikutnya:
1. Klik Tema > Edit HTML
2. Copas isyarat CSS berikut ini, impan di atas isyarat </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
Angka di isyarat warna merah ialah ukuran gambar. Bisa diubah menjadi lebih kecil atau lebih besar. Jika ingin gambar penuh, ubah saja keduanya jadi 100%.
3. Cari (Ctrl+F) dan ganti isyarat <data:post.body/> yang kedua dengan isyarat berikut ini.
<b:if cond='data:blog.pageType == "static_page"'>
<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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
Jika ingin ada suplemen teks Read more di bawahnya, maka tambahkan isyarat berikut ini di bawah isyarat <data:post.snippet/>
<b:if cond='data:post.jumpLink != 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>
4. Cari dan temukan kode <a expr:name='data:post.id'/>
Di bawah isyarat tersebut, ada isyarat html judul posting berikut ini:
<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 dan ganti isyarat tersebut dengan isyarat ini:
<b:if cond='data:blog.pageType == "item"'>
<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>
Kode tersebut untuk mengubah heading tags judul halaman depan menjadi h2 dan halaman postingan menjadi h1. Baca juga: Cara Membuat Heading Tags Dinamis untuk SEO Blog.
5. Simpan Template!
Save template Anda. Lihat hasilnya. Jika gagal, coba lagi. Pasti berhasil jikalau dilakukan dengan benar. Sebelum saya share, tips Cara Membuat Auto Readmore (Meringkas Tulisan Halaman Depan Blog) ini sudah diterapkan dan berhasil.
OPTIONAL
Ini isyarat untuk menyembunyikan tanggal di atas judul posting, icon obeng & tang, dan link subscribe. Simpan di atas isyarat ]]></b:skin>
.date-header,.quickedit,.feed-links {display:none}
Itu ia Cara Membuat Auto Readmore - Meringkas Tulisan Halaman Depan Blog. Ga mau capek? Ribet? Yawdah, pakai saja salah satu Koleksi Template Blog Simple Responsive Gratis. Wasalam. ().*