Sunday, 15 February 2015

Cara Membuat Artikel Terkait Dengan Gambar Dibawah Posting Blog

Kemarin saya pernah mendapat usulan dari pengunjung saya untuk membuat related post di blog saya dan saya berfikir boleh juga untuk menambahkan hal tsb untuk memudahkan pengunjung mencari ulasan informasi yang berkaitan dengan apa yang mereka cari.

Nah pada kesempatan kali ini saya akan membagikan cara bagaimana membuat related posts tsb.


Berikut tampilan yang baru saya tambahkan : 
Langkah-Langkah :
1. Masuk Blogger > Template > Edit HTML


2. Tekan CTRL + F untuk mencari, lalu tuliskan kode </head>
Lalu copy kode yang ada bawah ini di atas kode </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: #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-->


3. Cari kode  <div class='post-footer'> lalu copy kode dibawah ini tepat di atas  <div class='post-footer'>
Note penting! : Jika anda menemukan 2 kode <div class='post-footer'> maka anda harus meng-copy kode dibawah ini 2x tepat di atas ke 2 kode <div class='post-footer'> tsb



<!-- 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=6;
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='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Untuk var maxresults=6; anda bisa mengubah angka 6 menjadi jumlah related posts yang  ingin anda tampilkan pada setiap post.

4. Save Template

Selamat Mencoba..

2 comments:

  1. Assalamualaikum Salam sejahtera untuk kita semua, Sengaja ingin menulis
    sedikit kesaksian untuk berbagi, barangkali ada teman-teman yang sedang
    kesulitan masalah keuangan, Awal mula saya mengamalkan Pesugihan Tanpa
    Tumbal karena usaha saya bangkrut dan saya menanggung hutang sebesar
    1M saya sters hampir bunuh diri tidak tau harus bagaimana agar bisa
    melunasi hutang saya, saya coba buka-buka internet dan saya bertemu
    dengan KYAI SOLEH PATI, awalnya saya ragu dan tidak percaya tapi selama 3 hari
    saya berpikir, saya akhirnya bergabung dan menghubungi KYAI SOLEH PATI
    kata Pak.kyai pesugihan yang cocok untuk saya adalah pesugihan
    penarikan uang gaib 4Milyar dengan tumbal hewan, Semua petunjuk saya ikuti
    dan hanya 1 hari Astagfirullahallazim, Alhamdulilah akhirnya 4M yang saya
    minta benar benar ada di tangan saya semua hutang saya lunas dan sisanya
    buat modal usaha. sekarang rumah sudah punya dan mobil pun sudah ada.
    Maka dari itu, setiap kali ada teman saya yang mengeluhkan nasibnya, saya
    sering menyarankan untuk menghubungi KYAI SOLEH PATI Di Tlp 0852-2589-0869
    Atau Kunjungi Situs KYAI www.pesugihan-uang-gaib.blogspot.co.id/ agar di
    berikan arahan. Supaya tidak langsung datang ke jawa timur, saya sendiri dulu
    hanya berkonsultasi jarak jauh. Alhamdulillah, hasilnya sangat baik, jika ingin
    seperti saya coba hubungi KYAI SOLEH PATI pasti akan di bantu Oleh Beliau

    ReplyDelete
  2. terimakasih min artikelnya, sangat membantu sekali...
    blower hp

    ReplyDelete

Tolong tinggalkan comment yang sopan.
Kunjungi terus blog saya, dan jangan lupa tinggalkan komentar agar ane menjadi semangat untuk posting hal-hal baru ^.^