Artikel Terkait Pengganti LinkWithin

Widget artikel terkait (related posts) yang disertai dengan thumbnail ini memang sangat mirip dengan widget dari LinkWithin. Sudah pernah menggunakan LinkWithin ? jika belum, sobat bisa lihat contoh gambar dibawah, nah seperti itu kira-kira bentuknya. Setiap bagian akan disorot dalam warna pelengkap ketika mouse berada di atasnya, dan ketika seluruh bagian ini di klik akan mengarah ke URL dari "pos terkait" yang ditampilkan.

 

pict 

Berbeda dengan LinkWithin yang mengacak semua post yang ada untuk ditampilkan, widget ini sesuai dengan label atau kategori dari blog kita. Jadi sama halnya dengan artikel terkait yang pernah saya jelaskan dulu, disini dan nengkene. Namun artikel terkait model pertama yang sekarang masih saya gunakan tersebut, tidak menggunakan thumbnail.

 

Gambar thumbnail ditampilkan untuk masing-masing pos terkait yang dihasilkan dari thumbnail posting yang bersangkutan. Oleh karena itu, hanya gambar yang telah Anda upload ke setiap blog post yang akan ditampilkan. Secara keseluruhan, saya sangat suka dengan script buatan Aneesh ini, selain bagus dan rapi, script ini tidak membuat blog menjadi berat.

 

Oke deh, langsung ke lokasi aja. Seperti biasa silahkan login dulu ke Blogger. Sip ! sekarang ikuti langkah-langkahnya berikut ini :

 

  1. Sekarang tuju Edit HTML.

     

  2. Jangan lupa backup template sobat dulu dengan mengklik Download Template Lengkap.

     

  3. Klik Expand Template Widget.

     

  4. Kemudian letakkan kode berikut ini, tepat diatas kode </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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->


  5. Kemudian cari kode berikut ini :
    <div class='post-footer-line post-footer-line-1'>

    atau jika tidak ada, cari kode seperti dibawah ini :

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


  6. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah 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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
    <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'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->

  7. Setelah selesai semua, jangan lupa Simpan Template.

Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog sobat. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang sobat inginkan.


Semoga bermanfaat ! Open-mouthed



 



“Gambar diambil dari biens-naturels

Berlangganan artikel terbaru via Email
Artikel Lainnya :

21 comments

13 November 2009 15.13

yoyoyoyooo langsung sedoot yaa..lama nggak mampir nich

13 November 2009 15.14

ini yang dalam bentuk thumbnail yah?coba deh

13 November 2009 15.14

alhamdulillah bisa mampir lagi. nambah ilmu dan mudahan menjadi amal, amin

13 November 2009 21.22

Aku udah baca ttg pengganti artikel terkait dg thumbnail yg lain ini Bos di Amanda itu loh....ihihihihi, Sama enggak yah ini dg yg dicanah...sip sip

14 November 2009 09.29

keliatannya bagus jadi bingung mau pake artikel terkait yang kemarin atau yang ini.. makasih boz...

4 Maret 2010 02.53

mantaaaaaaaf beneeeeeeer ,...

gue udah coba, eeeh berhasil ...


makasih ya ...

27 April 2010 17.55

bang ijin nyoba yah... he... makasih

30 September 2010 16.35

kalo udah pake linkwithin, trus mau ganti gimana caranya ...

7 November 2010 11.26

wah...
ada info baru lagi nih...
makasih bro...

28 Februari 2011 01.11

mantab mas miscah.......ini yang ane cari2.....thanks...........

29 Mei 2011 18.31

terimakasih mas, saya juga lagi kepingin cari panduan buat artikel terkait he.he..

22 Juli 2011 08.27

thanks for the tutorial, good luck:)

21 September 2011 00.59

thanks atas tutorialnya sangat membantu.
tp bisa gak dirubah agar tampil dihalaman depan..??
soalnya nih cuma terlihat didlm postingan.
linkwithin kan tampil dihalaman depan.

8 Oktober 2011 21.07

Langsung Dipasang Mas Doddy...

Halo teman bloggers.. Kunjungi situs kami ya.. trims..

22 Oktober 2011 21.32

langsung dipraktekkan.. Sobat blogger, mampir juga di blog ku ya..

26 Oktober 2011 06.33

Asslm. Udah dimasukin kedua script html tsb. tapi kok nggak muncul ya Dod, gimana tuh...
Kamu udah nyoba script ini sebelumnya??

Terima Kasih kalau mau jawab.

Salam

http://www.djadoelpost.com

19 November 2011 16.03

oke ... makasih infonya ... mau tanya juga ... bagaimana caranya mengubah jumlah link within

12 Maret 2012 22.40

alhamdulillah uda saya praktekkan mas dan berhasil. :)

6 Juli 2012 13.52

Ternyata tidak kompatibel dg template yg saya pakai, tapi utk template lain berhasil :)

3 April 2013 15.45

wah mantap sob infonya..
saya praktek dulu..

27 Mei 2013 12.47

tutor yang keren sob..
http://mymedian.blogspot.com/

Poskan Komentar

Reader Community

Recent Comments