CARA MENAMBAH RELATED POST BERGAMBAR DI DALAM BLOGSPOT

Assalamualaikum dan salam sejahtera.

Contoh widget artikel berkaitan.

Okay hari ini saya nak berkongsi cara menambah RELATED POST atau Artikel Berkaitan di dalam blog anda. Saya tahu ada dalam kalangan kalian yang masih baharu dalam bidang penulisan blog pasti tidak tahu menambah Related Post dalam blog masing-masing. Sebenarnya related post ni agak penting dalam menaikkan jumlah pengunjung di blog anda. Jika ada widget ini, pengunjung akan menghabiskan masa mereka lebih lama untuk membaca penulisan kalian.

Okay, marilah kita mulakan langkah-langkah menambah widget Related Post ke blog anda. Sedia, mula!

BAGAIMANA MENAMBAH WIDGET RELATED POST KE DALAM BLOG ANDA?

LANGKAH 1 - Pergi ke Blogger Dashboard > Theme > HTML

LANGKAH 2 - Tekan CTRL + F untuk membuka kotak carian dan cari tag </head> yang terdapat dalam coding HTML itu.  

LANGKAH 3 - Copy dan Paste atau tampalkan code di bawah di atas  </head>.

<!--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://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Nota kaki 1 : Jika anda mahu menukar panjang dan lebar kotak widget Related Post tu, anda boleh edit value atau angka yang berwarna merah. Misalnya width:100px; height:100px .

Nota kaki 2 : Jika anda mahu menukar warna dan saiz tulisan  bagi tajuk Related Post, anda boleh edit value atau angka yang berwarna biru. Misalnya color:#222 dan font-size:14px.

Nota kaki 3 : Padamkan kod yang berwarna hijau jika anda mahu Widget Related Post ini mucul di Homepage atau Laman Utama

LANGKAH 4 - Cari kod berikut yang terdapat dalam HTML blog anda dengan menggunakan kotak carian CTRL + F. Hasil carian, anda akan mendapati kod yang sama dipaparkan sebanyak dua kali. Anda perlulah berhenti pada kod yang kedua.

<div class='post-footer'>

LANGKAH 5 - Selepas itu, anda perlulah copy dan paste kod di bawah di atas kod <div class='post-footer'>

<!-- 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();

</div><div class='clear'/>

</script>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ZQDcXiKgvvdUyfc7E1EMSIK9VfR8PqR9F8sKseVWE0SJUIKS-MeG0KBdX6fg93xpStneRKU3ZrCsKVwqHqGqhFa_oX1nnZsVScmrRBk0TNLTamOaPhciw3qg9jH_dRY3b47i6sqCU12_/s1600/best+blogger+tips.png'/></a>

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

<!-- Related Posts with Thumbnails Code End-->

Nota kaki 1: Tukarkan atau edit value 5 yang terdapat pada maxresult=5. Value 5 menunjukkan bilangan Recent Post yang anda ingin paparkan dalam blog anda. 

Nota kaki 2 : Jika anda mahu menukar tajuk Related Post kepada ARTIKEL BERKAITAN, anda boleh edit kod perkataan Related Posts yang berwarna biru. 

Nota kaki 3 : Padamkan kod yang berwarna hijau jika anda mahu Widget Related Post ini mucul di Homepage atau Laman Utama

LANGKAH 6 - Simpan atau Save perubahan pada template blog anda!

Itu sahaja perkongsian saya pada hari ini mengenai cara menambah Related Post di dalam blog kalian. Saya berharap perkongsian saya pada hari ini bermanfaat kepada pembaca semua. Selamat mencuba ya!

Sekian dan wassalam.