Cara Mudah Membuat Artikel Terkait Thumbnail Di Bawah Postingan

Artikel Terkait merupakan salah satu hal terpenting dalam sebuah blog, karena hal ini akan mempermudah pengunjung untuk melihat artikel lain yang berkaitan dengan artikel yang telah dibacanya. Berikut ini 'CS mau memberikan trik cara membuat artikel terkait. Ada baiknya sobat membackup dulu template agar tidak terjadi kerusakan pada saat editing, berikut langkah-langkah cara mudah membuat artikel terkait di bawah postingan, silahkan disimak.

Baca juga cara mudah backup template blog

1. Pertama sobat login dulu ke Blogger

2. Pilih Template

3.Pilih Edit HTML

4. Cari Kode </head>

5. Pasang kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #c9e2f1;}
#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;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style><script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
</b:if>

6. Selanjutnya cari kode <data:post.body/>

7. Pasangkan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'>

var currentposturl="<data:post.url/>";

var maxresults=4;

var relatedpoststitle="<b>Tutorial Terkait</b>";

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'>

<a href='http://copassange.blogspot.com'><img alt='Berbagi Macam-Macam Cerita' src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh96Dkqd4UIG5RggyAndUO1McpyMHp_hhCDYjWvL2U02ZKUpvxojU4YVGPuhtGNmLnbj41rUOxAFRGE8pmUMGXqtMHSr7BVA_jHrlq0icyIfKCk2fsl5IqH2-QgkSV4T_dC0Y5bUSGRShE/s1600/artikel+terkait+copassange01.png’/></a>

</b:if></b:if>

Keterangan:

Biasanya disini sering terjadi kesalahan, karena <data:post.body/> terkadang jumlahnya lebih dari satu (tergantung template). Jika ada 4, pasangkan kode dibawah yang ke-3. Tapi bila ada 2, maka kode dipasangkan dibawah yang ke-2.

8. Simpan

Demikian cara mudah membuat artikel terkait bawah postingan, semoga dapat membantu dan bermanfaat. Terima kasih atas kunjungannya.

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Membuat Artikel Terkait Thumbnail Di Bawah Postingan. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

<a href="http://copasange.blogspot.com/2016/04/cara-mudah-membuat-artikel-terkait-di.html" target="_blank">Cara Mudah Membuat Artikel Terkait Thumbnail Di Bawah Postingan</a>

:: Salam Blogger ! ::