Cara Terbaru Menciptakan Artikel Terkait Bergambar Di Bab Bawah Blog

Hai... Akhirnya kembali lagi bersama saya Hendri Kusnadi si admin blog ini.

Pada kesempatan ini saya ingin menunjukkan tips lagi mengenai mengelola blog anda dan kali pada khususnya saya bakal memberi isu mengenai trik menambahkan artikel terkait yang disertakan gambar dibawah blog anda (kebetulan gue lagi buat ni, hehe), oh iya anda tau kenapa menambah artikel terkait itu penting bagi saya???, berdasarkan saya dikala kita sedang ingin mengetahui niscaya kita ingin mengetahuinya sejelas dan selengkapnya oleh dari itu kita pas baca ketemu artikel yang terkait dengan apa yang kita inginkan niscaya deh kita bakal klik lagi dan lagi oleh dari itu dengan menambahkan artikel terkait pastinya bakal meningkatkan traffic blog kita 

Untuk mempersingkat waktu anda yang lelah membaca kata-kata saya yang begitu indah ini saya bakal eksklusif memberi step-stepnya, ikutin ya!!
Berikut langkah-langkah menambah Artikel terkait di bab bawah blog kita
1.       Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2.       Klik dan masuk ke sajian Template dan pilih edit HTML
3.       Centang  EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger kini gak ada n perlu lagi jadi kalau no 3 gak ada eksklusif no 4 aja ya)
4.       Di kotak yang berisi kode-kode HTML itu klik Ctrl+f dan bakal muncul kotak pencarian di pojok kanan atas itu dan cari </head> tekan enter dan lihat bakal ada tanda di kata yang anda cari tadi
5. Dan selanjutnya copy instruksi dibawah ini sempurna diatas atau sebelum kata </head> tadi

<!--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: #EEEEEE;}
#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'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6.       Setelah selesai, cari kode <div class='post-footer'> seperti trik tadi (jika ada dua instruksi yang sama pilih aja yang kedua ya)
7.       Nah kalau sudah ketemu langkah selanjutnya ialah copy script berikut diatas <div class='post-footer'> yang pertama anda temukan tadi

<!-- 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=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
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'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxPAhPnIAjaCQQh-YBHCGw1KemFzZ6rKKR117kaSsg7aKOOHBuDmTVJIAihodVsKlYsVAbvVzCnv_jwwQPbr5sMgU7z4fwp7RNDJo5YSK2g3fuyXbWbev0eT-wCJ1UjM01JyZeIqZt4Z2_/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Ket: ubah maxresult = 4 dengan jumlah artikel terkait maksimal yang ingin ditampilkan

8.       Ok, selesai, upsss belum.. jangan lupa klik simpan Template

Semoga berhasil ya gue juga agak galau nih.. hehe.. Jika anda jawaban dan yang ingin tanyakan silahkan coment aj dibawah gue balas kok dan kita sama- sama mencar ilmu deh.. Terima Kasih

Update: instruksi html dan css sudah di tes bekerja dengan baik

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: