CARA MEMBUAT RELATED POST BERGAMBAR DI BAWAH POSTINGAN

Usep Suryana 18 Apr 2014 16 comments
Membuat Artikel Terkait atau Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

 Membuat Artikel Terkait / Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Artikel Terkait / Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='https://bfcsarif.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.
<!-- Marquee Kompiajaib 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://sarifpbg.blogspot.com/2012/12/cara-membuat-related-post-bergambar-di.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.


Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

Sumber :  http://www.tips-caramudah.com/2012/12/cara-membuat-related-post-bergambar-di.html

Artikel Terkait

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
thumbnail Judul: CARA MEMBUAT RELATED POST BERGAMBAR DI BAWAH POSTINGAN
| Twitter | Facebook Page
Published :18 Apr 2014 Jam 21.50
Rating: 4.5 Reviewer: 7
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.

Pin It

Silahkan tentukan pilihan komentar anda!



atau

16 komentar:

  1. Mantap......, thanks sharenya, sukses selalu.

    BalasHapus
    Balasan
    1. amin.
      makasih gan
      mudah-mudahan jadi do'a buat blog ini

      Hapus
  2. Artikel yang cantik gan.. bermanfaat sekali ..
    mohon izin coba gan buat ganti yang saya punya..
    Salam kenal.. ditunggu kunjungan baliknya di:
    http://miniblogger28.blogspot.com

    BalasHapus
    Balasan
    1. selamat mencoba mas dan terimakasih atas kunjungannya
      semoga bermanfaat buat sobat blogger

      Hapus
    2. gan, ga jalan, bolak balik ga bisa jg, semua yg diatas ada di html, masalahnya biasanya apa to ya???

      Hapus
  3. Mas saya kok ga nemu kode yang kedua di template html saya?

    BalasHapus
  4. mantap.........http://www.anekakreasi.com/

    BalasHapus
  5. Makasih gan untuk informasi tutornya :)
    http://goo.gl/yeUiCg

    BalasHapus
  6. Keren sobat artikelnya, bermanfaat sekali dan sangat membantu saya jadi tambah wawasan ini :)
    Izin nyimak saja ya
    http://goo.gl/H7Ty07

    BalasHapus
  7. Terimakasih, ilmu yang sangat bermanfaat nih :)
    http://jellygamatgoldg31.com/obat-herbal-batu-ginjal/

    BalasHapus
  8. Tips mempercantik blog yang bagus dengan related post bergambar dan bisa bergerak pula .....

    BalasHapus
  9. Terimakasih Bang

    http://www.kliktau.blogspot.com

    BalasHapus
  10. mantap x gan artikelnya sangat membantu sekali.
    makasih gan.

    BalasHapus
  11. artikel bagus sanagat membantu salam kenal semua muanya
    -title keyword blog uang

    BalasHapus

Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih

Pasang Iklan

Pengikut

Statistik

Page Rank
blogger-copast.blogspot.com Webutation

ping fast  my blog, website, or RSS feed for Free Blog Directory & Search engine blog search directory Personal Blogs - Blog Rankings Technology Blogs Blog Directory My Zimbio My Ping in TotalPing.com I ♥ Validator GeoURL Blogger Copast Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Personal - Top Blogs Philippines Blog Search: The Source for Blogs
Link Centre Directory and Search Engine
Active Search Results blogger-copast.blogspot.com trustrank blogger-copast.blogspot.com Real PageRank

http://blogger-copast.blogspot.com$3,065$3,065How much is yours?

Waudit score SEO Reports for blogger-copast.blogspot.com Top SEO Sites Blogarama - The Blog Directory IndoUrl - indonesian directory, webmaster friendly
blogger-copast.blogspot.com CoolSocial.net Badge
dirbit.com free search engine submission Link Exchange with BLOGGER COPAST how to create a website AskDirectory.com - FREE Web Directory Blog Directory Blog Search Links Exchange Blog Directory | Submit to Directories and Promote your Blogs Frety Webengine bloggercopast's Profile on Ping.sg  Ping Url ping.sg - the community meta blog for singapore bloggers blogger-copast.blogspot.com-Google pagerank and Worth Personal Blogs
Online Marketing
Feedage Grade B rated
eXTReMe Tracker
Amfibi Web Search & Directory Sistema Enlaces Reciprocos Search Engine Submission and Marketing Services ExactSeek: Relevant Web Search waplog
blognation.com
Submit Blog Directory Situs Monitor Backlinks Site Meter

Enter your email address:

Delivered by FeedBurner