Home » » Thumbnail Related Post (Artikel Terkait Menggunakan Gambar)

Thumbnail Related Post (Artikel Terkait Menggunakan Gambar)

Bagi anda yang sudah menggunakan atau  ingin menggunakan Thumbnail Related Posts (artikel terkait bergambar), tentu akan lebih tertarik menggunakannya, karen tampilannya cukup menarik dengan adanya gambar,yang pada postingan sebelumnya  Cara Membuat Scroll Pada Related Post dan Cara Meningkatkan Page View Blog dengan Widget dari Linkwithin

Nah, untuk contoh Thumbnail Related Posting
undefinedOke, cara untuk membuat Related posting ini sebagai berikut :
  • Login dahulu ke Blogger
  • Masuk pada Tata Letak/Layout
  • Lalu pilih Edit HTML
  • Centang tulisan Expand Widget Template
  • Kemudian cari code ini </head>
  • Letakkan code dibawah ini sebelum code </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: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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  • Langkah selanjutnya, cari code ini
<div class='post-footer-line post-footer-line-1'>
  • Jika tidak menemukannya coba cari yang ini
<p class='post-footer-line post-footer-line-1'>
  • Jika sudah ketemu, letakkan code dibawah ini Setelah code diatas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.oktri.co.cc/2010/07/thumbnail-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

  • Untuk code jumlah related post yang berwarna merah bisa anda sesuaikan dengan blog anda
  • Untuk tulisan Related Post bisa anda ganti sesuai selera anda, seperti Posting terkait, Artikel terkait, dll.
  • Simpan hasil kreatifitas anda, coba lihat hasilnya.

Jika anda ingin merubah warna atau yang lainnya, anda bisa merubah dibagian CSS.

Jika blog anda  tidak menggunakan sistem Read More, dan anda ingin menampilkan Related Posting ini di seluruh halaman, tidak hanya di postingan pertama saja, silakan hapus code yang diberi tanda keterangan
pada code di dalam kotak yang pertama dan kedua

Selamat mencoba
Semoga bermanfaat
Terima Kasih
(Sumber : http://www.bloggerplugins.org)





Artikel Terkait:

10 komentar:

  1. numpang baca dlu y, kunjungn pertama nih gan..

    BalasHapus
  2. wow, artikel ny berguna bgt nih sob.. cocok bgt bwt mnmbh wawasan ku seputar tema ini..

    sob, mengingt blog ni sngt bermanfaat bgt q.. tukeran link yok!!

    link blog kamu sudah terpasang di blogku, link balik yach :) silahkan di liat di blogku!!

    ntar pasang link ku dengan anchor text "Game Naruto" yach,

    dan jdi follower q juga y, siapa thu aja dgn kehadiran blogger se-hebat kamu, blog ku bisa
    sedikit rame dan berwibawa gtu.he3

    ntar secara berkala q bakal sering-2 silaturahmi kesini..

    d tunggu kehdirannya yach :D

    salam dari blogger indonesia setengah bule.he3

    makasih..

    BalasHapus
  3. bos ... cara buat follow tyang kaya punya kamu gimana ya????

    bisa di kirim ke tyrsrd@gmail.com

    BalasHapus
  4. slm knl, sob aq uda nh cobain cara ni, tp knp g bisa ya? mhn bantuan donk sekalian y g bs jg adalah cara bikin relatd post, uda dipraktekkan di edit html, trus gmn?
    tq ya, silahkn mampir biar jelas kondisinya, bolh tukern link g? rank alexa sampean uda kcil(biar ktularan....)

    BalasHapus
  5. mas aq ajari bikin background efek????

    tolong comfrim yahooku
    xxxhellxb_d@yahoo.com

    BalasHapus
  6. mau tanya,aku kan pakai related post thumbnail dari linkwithin,nah ada beberapa postingan yang udah aku hapus..tapi ko tetep muncul ya di related post nya...emang klo udah gitu gak bisa hilang ya???

    BalasHapus
  7. thanks ya buat share ilmunyaaa :DD
    bagus buat pemula seperti saya, hohoho

    BalasHapus
  8. sip gan, dah ane cobain n' ternyata berhasil
    maen2 ketempat ane gan!!!

    BalasHapus
  9. kalau di kasih EFEK MARQUE gerak kekiri
    atau kekanan gimana caranya kk ?

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri