Trik Cara Membuat Artikel Terkait di Posting Blogspot Dengan Gambar

Trik Cara Membuat Artikel Terkait di Posting Blogspot Dengan Gambar - Trik dan tips blogspot ini sudah umum dan sudah sering kita gunakan. Namun cara membuat artikel terkait di blogspot yang ini lain, yaitu adanya tampilan gambar disetiap artikel terkait yang muncul. Gambar ini berdasarkan gambar pertama yang anda upload dari artikel yang bersangkutan. Nah, asyik bukan ?
Cara membuat artikel terkait dengan gambar di setiap posting blogspot ini sangat berperan dalam meningkatkan pageview dari tampilan blog anda. Dan tentunya dengan bertambahnya pageview ini, maka akan semakin meningkatkan penghasilan kita.
Oya, sebelumnya mohon maaf kalau tulisan saya untuk kali ini agak sedikit kacau, dikarenakan ada sekelompok orang di sekeliling saya lagi kecanduan game PB yang sekarang ini sudah dijadikan game online andalan di setiap warnet dan game onliner. Maklum, saya posting artikel di warnet, karena koneksi internet didaerah saya lumayan Luemot abis kalau memakai Jaringan. Sebenarnya bisa diakali dengan memakai antena penguat signal 3G dan HSDPA yang dulu pernah saya posting disini, disini, dan disini. Karena alasan waktu dan kesibukan yang akhir-akhir ini semakin menyiksaku…hehehehe (Narsis mode=ON) maka hal tersebut urung saya lakukan.
Jika anda masih awam dengan blogspot, maka sebaiknya gunakan template blogspot yang simple-simple dulu, soalnya template blogspot yang simple maka teks html lebih sedikit dan tentunya kode dari setiap html dari artikel terkait di blogspot ini akan semakin mudah di input.
Gak usah panjang lebar lagi, Berikut cara membuat artikel terkait di posting blogspot dengan gambar :
1. Masuk ke akun blogger.
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>

<!–Related Posts with thumbnails Scripts and Styles Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=”text/css”>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
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 src=’http://belajarblogging.googlecode.com/files/releatedimage.js’ type=’text/javascript’/>
</b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>

Dan lihat hasilnya, eitsss !!!!! tunggu dulu masih ada tambahannya…
Cari kode berikut untuk menambahkan artikel terkait di blogspot secara lengkap :

<div class=’post-footer-line post-footer-line-1′>

Jika belum tahu cara mencari kode setiap halaman teks html tersebut, silakan ikuti langkah-langkah menemukan kode html setiap halaman dengan cara pilih menu ‘edit’ di toolbar atas dari browser kamu dan pilih ‘find’. Maka kotak pencarian akan muncul di bawah pojok kiri dari browser. Ketikkan kode yang akan di cari, maka kode akan ditemukan dengan ditandai blok berwarna biru (biru ato ijo ya ?) Sorry lupa.
Nah jika sudah ditemukan, maka tambahkan kode dibawah ini. Penempatannya ada di BAWAH kode diatas.

<!– 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=6&quot;’ type=’text/javascript’/></b:if></b:loop><a href=’http://cossierandi.com/trik-cara-membuat-artikel-terkait-di-posting-blogspot-dengan-gambar.html’ style=’display:none;’>Related Posts with thumbnails for blogger</a><a href=’http://www.bloggerplugins.org/’ style=’display:none;’>blogger widgets</a>
<script type=’text/javascript’>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=”Artikel Terkait”;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>
<!– Related Posts with Thumbnails Code End–>

Nah, jika semua sudah ditambahkan, anda tinggal ‘SIMPAN’ dan sekarang silakan lihat hasil dari Trik Cara Membuat Artikel Terkait di Posting Blogspot Dengan Gambar