Membuat Artikel Terkait Horizontal dengan Thumbnail

Artikel Terkait Horizontal dengan Thumbnail - Sudah banyak blog yang membahas tentang Cara Membuat widget artikel terkait dan tentunya dengan membaca juduk artikel diatas pasti sudah sangat umum buat anda.
Tetapi ketika saya coba hampir semua tutorial diblog-blog lain widget artikel terkait tersebut akan berbentuk seperti artikel terkait punya blog ini di bawah.

Tetapi kali ini saya akan membahas Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Biar lebih jelas liat di bawah
Artikel Terkait Horizontal dengan Thumbnail
Tenang saja sob, ini tidak menggunakan Widget otomatis seperti dari LinkWithin kok, karena setelah saya cek Widget artikel terkait LinkWithin tersebut ternyata Redirect terlebih dahulu dari situs LinkWithin sebelum di arahkan ke artikel kita lainnya, dan lebih gak enaknya lagi Link tersebut nempel di blog kita DOFOLLOW, pasti cukup berpengaruh pada blog.

Nah langsung ke topik utamanya aja deh Membuat Artikel Terkait Horizontal dengan Thumbnail
Disini kita hanya memerlukan sedikit langkah otak-atik HTML
1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di bawah <data:post.body/>

 <!-- 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'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas 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:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
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 type='text/javascript'>
var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Lainnya&quot;;
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


CATATAN : Kode diatas inilah yang mempengaruhi tampilan Artikel Terkait Horizontal dengan Thumbnail di blog anda, bisa anda ganti sesuai keinginan anda
Artikel Lainnya : Judul pada widget
var maxresults=6: Jumlah artikel yang di tampilkan

Demikian tutorial singkat saya tentang Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Semoga bermanfaat !!!

53 komentar:

uzumakiakram mengatakan...

mau di coba,ah

Dhika mengatakan...

Silahkan kang

sukague.com mengatakan...

kalo vertikal gimana ??

Dhika mengatakan...

nanti dikesempatan yang lain akan coba saya share kang

Browniez mengatakan...

makassih tipsnya bang :D

blog kontroversi indonesia mengatakan...

blog aye mah baru 1 hari jd lom ada related post nya gan. Tp gpp juga ya, akn aye cobain pasang

Tips dan Trik Facebook Terbaru 2012 mengatakan...

ha3x... langsung ke tkp Gan... Keren gk hasilnya?

Fandi Adhitya mengatakan...

coba ah :D

Buddy Penta mengatakan...

:)] gan untuk menampilkan di post home blog bisa gak gan??
tirknya bisa tapi tidak tampil di Home gan, bagai mana solusinya gan??

langsung aja cek di TKP gan
www.pentaunira.blogspot.com

www.jurnaldunia.com mengatakan...

makasih infonya gan,bermanfaat sekali buat saya .by jurnaldunia

sekedar wawasan mengatakan...

banyak amat kodenya sob...apa gak ngaruh ke berat loading blog tuh..?

sekedar wawasan mengatakan...

langsung dicoba aja ..biar gak banyak cingcong sob...hehe,,,mantap

bang kaus mengatakan...

Oom.. kalo untuk WP ada gak Oom? boleh di share donk.
anyway thanks

Mr-Anu mengatakan...

wah mantap, terimakasih kk

Mr-Anu mengatakan...

mantap infonya

Nokatra Altijd mengatakan...

infonya mantap gan

Nokatra Altijd mengatakan...

infonya mantap gan...

Awing's Blog mengatakan...

ane mau coba gan....makasih buat infonya

Didi SPriady mengatakan...

udh dicoba,tp blm b'hasil....

Fathur Rahman mengatakan...

thanks yah....

Irawan mengatakan...

kalau untuk loading blog gimana apakah juga akan memberi pengaruh terhadap blog kita nantinya ?
trims atas tutorialnya.. :)

ristizona mengatakan...

okee, praktekin dulu ya...

Tulisan Rizal mengatakan...

mantap nih sob ;)

maruf mengatakan...

mantap gan infonya

Nor Azmi Abdi F mengatakan...

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

Saddam mengatakan...

makasih sob tutorialnya, langsung praktek... :)

fuji flantoge mengatakan...

gan..
script : nya ga' ada di blog saya gan.

beri solusi ny donk gan.. trims

Admin mengatakan...

:D

alden abednego mengatakan...

cari kodenya itu di mana boos

Hidup Sehat mengatakan...

diseduh dulu gan ilmunya.. thanks.. saya juga sempat coba linkwithin.. lamreta jadinya

infinityreloadpulsa.com mengatakan...

bro,, sy coba kodenya ko ga jalannya
trims

Edso212 mengatakan...

kalo untuk wordpres gmana ya mas ya.??????

A. Antos mengatakan...

mantap tutorialnya sob, makasih ya

Achmad Romdhansyah mengatakan...

keren bro, udah di coba dan berhasil,
tengkyuu ilmunya bermanfaat banget,
terus berkarya ^^




roemdhan.blogspot.com

rizal faperta mengatakan...

bgus gn udh ane coba

BocahUpdate mengatakan...

belum berasil ane gan gimana ??
padahal sudah dipasang...atau templatenya gak cocok ?? :(

Agriculturproduct mengatakan...

nyimak dulusob,saya pelajari dulu.:)

aziz mengatakan...

nice share mas, sangat bermanfaat ;)
Lets Learn, Earn and Share

Ravictory mengatakan...

waw... mantabzz buka www.ravictory.co.cc DOFOLLOW BLOG

hakim mengatakan...

gan saya data post body nya ada 4

mas arkanda mengatakan...

iya, gan post bodynya gak nemu.. Jadi gimana donk, gan? By kamen rider

Ihvan Mulya Pradana mengatakan...

dicoba dulu ah,,

ihvanpradana.blogspot.com

Yan Sardika mengatakan...

sama kayak hakim gan, udah tak taruh dibawah yang tampa embel2. tapi tetwp gak bisa gak. mohon pencerahan!
ke email ane: dharmawangsa88@gmail.com
http://ysardika.blogspot.com

bilogizma mengatakan...

wah makasih banyak infonya ya,,, lihat blogku sekarang udah agak baikan tampilanya

http://bilogizma.blogspot.com

download film mengatakan...

artikel yg cukup bagus dan juga ulasannya cukup bagus dan detail bro karena itu aku suka sekali loe, dan salam kenal dari mico mas, dan juga sekalian bagi teman2 yg suka dengan film terbaru box office,horor,romantis,action,dan anime silakan kunjungi situs nya loe, karena itu gue dapat dari google dan menariknya di update tiap hari filmnya. dan makasi juga untuk admin disini bro sudah berkenan memberikan saya berkomentar loe, keep blogging bro, dan juga makasi ya,thanks gbu

Bule mengatakan...

Manfaat...

Dede Yusuf Iskandar mengatakan...

Kenapa gak berfungsi di blog saya YANG INI ya... Aneh !!! hehehheee

Ryano Azumi Kunnichiwa Kunnichiwa mengatakan...

thx masbro..
berhasil juga bikin artikel terkait
seklai lagi makasih ya:D

Andhika Hutomo mengatakan...

@Ryano Azumi Kunnichiwa Kunnichiwa : ok selamat gan sudah bisa membuat Artikel Terkait Horizontal dengan Thumbnail

Gilang Yandeza mengatakan...

nais inpoh gan :))
jangan lupa berkunjung di http://glankitugilang.blogspot.com/

Rasyid Miftahul I mengatakan...

Kok gak muncul di bawah gan?

Andi Akbar Muzfa mengatakan...

Kode Rusak gan... tdk bisa di copy...!!!

Tomy Aksel mengatakan...

bisa bantu saya gan ??
ini saya punya masalah dengan artikel terkait pada blog sy. yaitu jumlahnya terlalu banyak dan sy tak tahu cara menguranginya. tolong yah caranya
.
http://theakspenz2010.blogspot.com/2013/08/manycam-pro-v31594123-multibahasa-full.html

Posting Komentar

 
Copyright © 2011 Andhika Hutomo Blogdhika.com. Powered by Blogger™