Cara Membuat Related Post atau Artikel Terkait dengan Gambar - Sebelumnya kita telah mencar ilmu bagaimana cara menciptakan related post atau artikel terkait sederhana. Dalam artian, tampilannya benar-benar sederhana, hanya berupa link menuju artikel-artikel dalam satu label dengan artikel yang sedang dibaca.
Nah, kali ini blog akan membuatkan tutorial bagaimana cara menciptakan artikel terkait yang dilengkapi dengan gambar thumbnail masing-masing artikel terkait. Bahkan bukan hanya dilengkapi dengan gambar thumbnail saja, namun juga ringkasan postingan.
Artikel terkait yang dilengkapi dengan gambar visual menciptakan pengunjung lebih tertarik untuk melaksanakan klik. Dengan begitu, page view blog Anda pun meningkat.
Untuk misalnya sendiri sanggup dilihat pada blog ini, letaknya sempurna di bawah postingan.
1. Pada Dashboard Blogger Anda, masuk ke Template, pilih Edit HTML.
2. Pasang CSS untuk mengatur tampilan related post dengan gambar.
Letakkan sebelum arahan ]]></b:skin> yang sanggup dicari dengan Ctrl+F.
Nah, kali ini blog akan membuatkan tutorial bagaimana cara menciptakan artikel terkait yang dilengkapi dengan gambar thumbnail masing-masing artikel terkait. Bahkan bukan hanya dilengkapi dengan gambar thumbnail saja, namun juga ringkasan postingan.
Artikel terkait yang dilengkapi dengan gambar visual menciptakan pengunjung lebih tertarik untuk melaksanakan klik. Dengan begitu, page view blog Anda pun meningkat.
Untuk misalnya sendiri sanggup dilihat pada blog ini, letaknya sempurna di bawah postingan.
Cara Membuat Artikel Terkait dengan Gambar
1. Pada Dashboard Blogger Anda, masuk ke Template, pilih Edit HTML.
2. Pasang CSS untuk mengatur tampilan related post dengan gambar.
Letakkan sebelum arahan ]]></b:skin> yang sanggup dicari dengan Ctrl+F.
Agar lebih maksimal, CSS-nya sanggup diletakkan pada bab posting.
CSS
#related_posts{margin-top:15px}
#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:80%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}
#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}
#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:80%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}
#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}
3. Berikutnya memasang script yang akan memanggil related post dengan gambar.
Cari arahan <data:post.body/> di dalam template. Saya menemukan 2 buah arahan di template saya. Letakkan script di bawah arahan yang pertama.
Patokan lain yakni arahan <div class='post-footer'> yang kurang lebih mempunyai arti bab bawah postingan. Letakkan sebelum arahan tersebut.
Script
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<script src='https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost_gambar.js' style='text/javascript'/>
<div style='clear:both;'/>
<div id='related_posts'>
<h4>Artikel Terkait :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
<!-- Related Post Widget End -->
<b:if cond='data:blog.pageType == "item"'>
<script src='https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost_gambar.js' style='text/javascript'/>
<div style='clear:both;'/>
<div id='related_posts'>
<h4>Artikel Terkait :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
<!-- Related Post Widget End -->
Silahkan ubah goresan pena berwarna merah. Beberapa yang sering dipakai antara lain Related Post, Artikel Terkait, You Might Also Like, Artikel yang Berhubungan, dan masih banyak lagi.
4. Save Template.
Sekian tutorial Cara Membuat Related Post atau Artikel Terkait dengan Gambar. Jika gagal silahkan sampaikan keluhan Anda di kotak komentar di bawah. Saya akan coba membantu untuk menemukan solusinya.
Sumber https://duarupa.blogspot.com/
<div style='clear:both;'/>
<div id='related_posts'>
<h4>Artikel Terkait :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
<!-- Related Post Widget End -->
Silahkan ubah goresan pena berwarna merah. Beberapa yang sering dipakai antara lain Related Post, Artikel Terkait, You Might Also Like, Artikel yang Berhubungan, dan masih banyak lagi.
4. Save Template.
Sekian tutorial Cara Membuat Related Post atau Artikel Terkait dengan Gambar. Jika gagal silahkan sampaikan keluhan Anda di kotak komentar di bawah. Saya akan coba membantu untuk menemukan solusinya.
Sumber https://duarupa.blogspot.com/
<div id='related_posts'>
<h4>Artikel Terkait :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
<!-- Related Post Widget End -->
Silahkan ubah goresan pena berwarna merah. Beberapa yang sering dipakai antara lain Related Post, Artikel Terkait, You Might Also Like, Artikel yang Berhubungan, dan masih banyak lagi.
4. Save Template.
Sekian tutorial Cara Membuat Related Post atau Artikel Terkait dengan Gambar. Jika gagal silahkan sampaikan keluhan Anda di kotak komentar di bawah. Saya akan coba membantu untuk menemukan solusinya.
Sumber https://duarupa.blogspot.com/
Related Posts
- Cara Menciptakan Sitemap (Daftar Isi) Di Blog Versi LengkapApa itu sitemap? Sitemap jikalau diterjemahkan ke dalam Bahasa Indonesia berarti Peta Situs, yakni kumpulan link atau tautan yang mengarah ke posting ...
- Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
- Cara Menonaktifkan Pemberitahuan Email Dari Google+ (Plus) google+ (plus) Cara menonaktifkan email google+ diharapkan alasannya adanya email-email pemberitahuan yang sangat banyak dan selalu masuk setiap ...
- Cara Menciptakan Web Push Notifications Di BloggerWeb push notifications merupakan pesan atau notifikasi pop-up yang muncul pada layar desktop maupun smartphone Anda dikala membuka halaman website at ...
- Cara Menciptakan Table Of Contents (Menu Daftar Isi) Di Postingan Blogger - Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) yaitu daftar yang terdiri dari poin atau bab dari subjek yang terkandung d ...
- Cara Mengatasi Tidak Dapat Masuk Ke Akun Blogger Penyebab tidak dapat masuk ke akun blogger yaitu lantaran Anda masih memakai profile Google+ pada akun blogger Anda. Google telah mengirimkan pes ...
