Cara Membuat Related Post dengan Gambar (Thumbnail) di Blog
Related Post
merupakan widget blogger yang dapat diartikan sebagai artikel atau
postingan terkait. Gunanya widget ini adalah untuk menampilkan kepada
pengunjung postingan-postingan yang memiliki keterkaitan atau hubungan
dengan postingan yang sedang dibaca, dan masuk ke dalam kategori atau
label yang sama atau sesuai.
Widget ini sangatlah penting, tidak hanya menampilkan artikel terkait saja tapi dapat berpengaruh terhadap SEO Blog kita. Apalagi jika widget tersebut disematkan atau disisipkan gambar didalamnya, tentu akan menarik para pengunjung untuk mengunjungi dan membaca postingan terkait tersebut.
Berikut langkah-langkahnya:
1. Login ke Akun Blogger.
2. Masuk ke Dasbor, pilih menu Template > Edit HTML.
3. Cari kode ]]></b:skin>, kemudian salin dan letakkan kode berikut ini diatasnya.
4. Cari kode <data:post.body/>, lalu salin dan letakkan kode dibawah ini dibawahnya.
5. Terakhir klik Simpan template.
6. Selesai dan lihat hasilnya pada blog sobat.
Demikian tutorial blogger singkat untuk kesempatan kali ini, semoga cara ini dapat bermanfaat bagi sobat blogger semua.
Sekian, terima kasih.
Widget ini sangatlah penting, tidak hanya menampilkan artikel terkait saja tapi dapat berpengaruh terhadap SEO Blog kita. Apalagi jika widget tersebut disematkan atau disisipkan gambar didalamnya, tentu akan menarik para pengunjung untuk mengunjungi dan membaca postingan terkait tersebut.
Berikut langkah-langkahnya:
1. Login ke Akun Blogger.
2. Masuk ke Dasbor, pilih menu Template > Edit HTML.
3. Cari kode ]]></b:skin>, kemudian salin dan letakkan kode berikut ini diatasnya.
.related-post{ margin:2em auto 0; font:normal normal 11px/1.4 Arial,Sans-Serif}
.related-post h4{ font-size:150%; margin:0 0 .5em}
.related-post-style-2,
.related-post-style-2 li{ margin:0; padding:0; list-style:none}
.related-post-style-2 li{ padding:10px; border-top:1px solid #eee; overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{ width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; float:left; margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{ font-weight:bold; font-size:110%}
.related-post-style-2 .related-post-item-summary{ display:block; overflow:hidden}
.related-post-style-2 .related-post-item-more{}
4. Cari kode <data:post.body/>, lalu salin dan letakkan kode dibawah ini dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig ={ homePage:"<data:blog.homepageUrl/>", widgetTitle:"<h4>Lihat Artikel Menarik Lainnya:</h4>", numPosts:5, summaryLength:400, titleLength:"auto", thumbnailSize:80, noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId:"related-post", newTabLink:true, moreText:"Baca Selengkapnya", widgetStyle:2, callBack:function(){} }; </script> <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>
5. Terakhir klik Simpan template.
6. Selesai dan lihat hasilnya pada blog sobat.
Demikian tutorial blogger singkat untuk kesempatan kali ini, semoga cara ini dapat bermanfaat bagi sobat blogger semua.
Sekian, terima kasih.
Categories:
Seputar Blog
:a
:b
:c
:d
:e
:f
:g
:h
:i
:j
:k
:l
:m
:n
:o
:p
:q
:r
:s
:t
0 komentar:
Posting Komentar
Peraturan Berkomentar Di Blog Ini :
» Berkomentarlah dengan baik dan sopan.
» Dilarang spam, sara, junk.
» Jangan membuat keributan/kekacauan.
» Jangan mencantumkan LIVE LINK di komentar ini.
» Jika ingin copy-paste dari blog ini ke blog kamu silahkan aja.
Terima kasih atas pengertiannya.