Cara Membuat Dan Memasang Artikel Horizontal Terkait Dengan Gambar (Thumbnail) Baca Tutorial Blog Tutorial

Artikel Terkait Gambar (thumbnail)

Assalamualaikum Wr. Wb.

Di kesempatan kali ini saya akan menjelaskan tentang Membuat Artikel Terkait Dengan Gambar (Thumbnail).

Tahukah anda jika menyisipkan artikel terkait pada tiap postingan dapat memberikan manfaat yang besar kepada pengunjung blog. Mengapa? Karena dengan adanya artikel terkait, pengunjung blog akan membaca artikel yang berhubungan dengan yang sedang dia baca. sehingga pengunjung blog tersebut akan terasa terbantu dalam menyelesaikan masalah yang sedang dia alami.

Bagaimana Cara Membuat Dan Memasang Artikel Horizontal Terkait Dengan Gambar (Thumbnail) ?

Kenapa saya berkata seperti itu, karena pengunjung yang datang ke blog kita dan membaca artikel-artikel kita adalah pengunjung yang sedang mencari solusi untuk permasalahan yang sedang dihadapi. Bukankah kita membuat artikel untuk menyelesaikan suatu permasalahan? Ya, benar kita membuat artikel itu untuk membantu menyelesaikan permasalahan orang banyak.

Baca Juga : Cara Melayani Pengunjung Blog Dengan Baik

Jadi seperti yang sudah saya katakan tadi, Jika kita memasang artikel terkait denhan gambar (thumbnail) pada blog. Maka Pengunjung blog tersebut akan mengunjungi artikel yang berhubungan dengan yang sedang di baca tersebut, untuk mempercepat membantu menyelesaikan permasalahanya. Kalau begitu kamu harus membuat artikel-artikel berkualitas yang berhubungan dan berkaitan dengan yang pengunjung cari-cari.

Lalu Bagaimana Membuat Artikel Terkait Pada Blog?

Sebenarnya artikel terkait pada blog ada yang bermacam-macam atau bervariasi. Kenapa saya bilang begitu? karena yang saya tahu artikel terkait/Related Post itu biasanya ada di bawah postingan artikel dan ada yang berbentuk Horizontal dan Vertikal yang biasanya di sertai dengan gambar atau Thumbnail. Namun tidak jarang juga ada artikel terkait sederhana yang biasanya di sertai Scrolling. Namun pada artikel saya kali ini saya akan Membuat Artikel Terkait Dengan Gambar (Thumbnail)

• Pertama Login dengan akun blog kamu, pilih menu template, lalu klik tombol Edit HTML, Cari Kode <data:post.body/> Arahkan pointer pada kolom HTML kemudian klik mouse, setelah itu tekan Ctrl + F atau F3 Untuk mempermudah pencarian kode. Simpan script di bawah ini tepat di bawah 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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='Isi dengan alamat link posting yang dituju'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='Isi dengan alamat gambar/thumbnail' style='border: 0'/></a>
</b:if></b:if>

Kalau sudah, cari lagi kode </head> Copy kode berikut tepat di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5ZrWJfEDvF3ebdethv0pdhfcluCum_iOnxJgWVeRuJaqNyFcnxo-1drQFpqVY833AJZJrCTKU5rVtH-1y2cqpLz3Od6OAy37vmCDFf-yaRxtzQfNp1TW43jkalJjlz-rCUzhLLEEoj8/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Lainnya";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Lalu Klik Simpan Template.

Artikel Terbaru :
1. Cara Menulis Artikel Berkualitas Berstandart Seo
2. Cara Menghapus Kolom Komentar Pada Blog

Nahh kira-kira seperti itu penjelasan tentang Cara Membuat Dan Memasang Artikel Horizontal Terkait Dengan Gambar (Thumbnail) semoga dengan memasang widget artikel horizontal terkait gambar (thumbnail) ini bisa menambah jumlah pageview blog anda dan meningkatkan traffic lebih dari sebelumnya.

Sekian, semoga bermanfaat. salam