Langsung ke konten utama

Memasang Related Post Thumbnails di Blogger

Perlunya Memasang Related Post

Artikel terkait (related post) adalah fitur yang berguna untuk menampilkan posting blog yang memiliki kesamaan label. Kalau posting anda belum memiliki label, tentunya widget ini tidak akan tampil. Selain itu label merupakan fitur penting untuk memilah topik dari suatu konten, jadi anda harus menggunakan label pada setiap konten yang anda publikasikan. Sehingga memungkinkan pengunjung untuk tertarik membaca posting dengan label terkait yang tertera pada related post. Maka dari itu perlunya anda memasang related post dengan gambar (thumbnail) dibawah postingan blog yang dapat meningkatkan akses ke artikel lainnya. Untuk memasang related post tanpa thumbnails atau tulisan saja dapat Anda baca di Memasang Related Post atau Artikel yang berkaitan.

related post thumbnails

Bagaimana cara memasang related post thumbnails di blogger?

Langkah 1. Template --> Edit HTML

Edit HTML

Langkah 2. Klik kiri pada area kosong kotak Edit HTML --> Cari (CRTL+F)
</head>
Langkah 3. Paste kode berikut di atasnya
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://dewainside.googlecode.com/svn/trunk/[dewainside.blogspot.com]related_post_thumbnails.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Catatan:
Mengganti ukuran tinggi dan lebar :100px
Mengganti warna: #222
Mengganti font: 14px

Langkah 4. Cari kode CRTL+F (Mungkin Anda akan dapat 2x kodenya. Pilih yang kedua)
<div class='post-footer'>
Langkah 5. Paste kode berikut diatasnya
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Catatan:
Mengganti jumlah post: maxresults=5
Mengganti tulisan Related posts

Langkah 6. Simpan Template

Apabila anda mengalami error saat menerapkannya di blog anda, silahkan tinggalkan pesan di kotak komentar atau laman Hubungi.
Good luck dan selamat mencoba.

Komentar

Postingan populer dari blog ini

Mod Immortal Treasure Trove Carafe 2018

Mod immortal Treasure Trove Carafe 2018. This treasure contain of : Huskar - The Spoils of Dezun, Ogre Magi - Gimlek Decanter, Pangolier - Mask of Confidant, Venomancer - Cult of Aktok, Rubick - Crux of Perplex, Disruptor - Orb of Deliverance, Silencer - Glaive of Oscilla, Storm Spirit - Mandate of the Stormborn, Windranger - Sylvan Vedette and Mirana mount - Axia of Metira. Hope you guys like this mods cosmetic skin and support our favorite game Dota 2 in steam community market. No money? Just mods! Enjoy the game and boost your Matchmaking Ratings MMR and Seasonal Rankings Medals !

Rubick - Rambling Fatebender

Mod Rubick - Rambling Fatebender rare item Dota 2 Reborn from Treasure of the Emerald Revival. This item consists of : Staff of the Rambling Fatebender Cape of the Rambling Fatebender Pauldrons of the Rambling Fatebender Mask of the Rambling Fatebender Rubick - Rambling Fatebender Hope you guys like this mod and support our favorite game in steam community market. No money? Just mods! Enjoy your game!

Broodmother - Epoch of the Abysm

Black Arachnia, the Broodmother - Epoch of the Abysm mods rare item Dota 2 Reborn from Fortivus 2017 Treasure. This item consists of : Eyes of the Abysm Abdomen of the Abysm Anterior of the Abysm Legs of the Abysm Creepling of the Abysm Broodmother - Epoch of the Abysm Hope you guys like this mods and support our favorite game in steam community market. No money? Just mods! Enjoy your game!