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
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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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 == "item"'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7zFza0OStaBSfoJCpy079n-1EJGiI4HL4UvelyGem50aqxK91N9JgQzh-UupJ9XpkQrdkvTAgeWiAuMhe_OleXjwNM5mqEVdTr-N3vZ6BvQrSfIxAfApmN72XgKp_9LoxGEWU6H17NU/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Lainnya";
</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-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7zFza0OStaBSfoJCpy079n-1EJGiI4HL4UvelyGem50aqxK91N9JgQzh-UupJ9XpkQrdkvTAgeWiAuMhe_OleXjwNM5mqEVdTr-N3vZ6BvQrSfIxAfApmN72XgKp_9LoxGEWU6H17NU/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Lainnya";
</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 !!!
51 komentar:
mau di coba,ah
Silahkan kang
kalo vertikal gimana ??
nanti dikesempatan yang lain akan coba saya share kang
makassih tipsnya bang :D
blog aye mah baru 1 hari jd lom ada related post nya gan. Tp gpp juga ya, akn aye cobain pasang
ha3x... langsung ke tkp Gan... Keren gk hasilnya?
coba ah :D
:)] 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
makasih infonya gan,bermanfaat sekali buat saya .by jurnaldunia
banyak amat kodenya sob...apa gak ngaruh ke berat loading blog tuh..?
langsung dicoba aja ..biar gak banyak cingcong sob...hehe,,,mantap
Oom.. kalo untuk WP ada gak Oom? boleh di share donk.
anyway thanks
wah mantap, terimakasih kk
infonya mantap gan
infonya mantap gan...
ane mau coba gan....makasih buat infonya
udh dicoba,tp blm b'hasil....
thanks yah....
kalau untuk loading blog gimana apakah juga akan memberi pengaruh terhadap blog kita nantinya ?
trims atas tutorialnya.. :)
okee, praktekin dulu ya...
mantap nih sob ;)
mantap gan infonya
makasih sob tutorialnya, langsung praktek... :)
gan..
script : nya ga' ada di blog saya gan.
beri solusi ny donk gan.. trims
:D
cari kodenya itu di mana boos
diseduh dulu gan ilmunya.. thanks.. saya juga sempat coba linkwithin.. lamreta jadinya
bro,, sy coba kodenya ko ga jalannya
trims
kalo untuk wordpres gmana ya mas ya.??????
mantap tutorialnya sob, makasih ya
keren bro, udah di coba dan berhasil,
tengkyuu ilmunya bermanfaat banget,
terus berkarya ^^
roemdhan.blogspot.com
bgus gn udh ane coba
belum berasil ane gan gimana ??
padahal sudah dipasang...atau templatenya gak cocok ?? :(
nyimak dulusob,saya pelajari dulu.:)
nice share mas, sangat bermanfaat ;)
Lets Learn, Earn and Share
waw... mantabzz buka www.ravictory.co.cc DOFOLLOW BLOG
gan saya data post body nya ada 4
iya, gan post bodynya gak nemu.. Jadi gimana donk, gan? By kamen rider
dicoba dulu ah,,
ihvanpradana.blogspot.com
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
wah makasih banyak infonya ya,,, lihat blogku sekarang udah agak baikan tampilanya
http://bilogizma.blogspot.com
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
Manfaat...
Kenapa gak berfungsi di blog saya YANG INI ya... Aneh !!! hehehheee
thx masbro..
berhasil juga bikin artikel terkait
seklai lagi makasih ya:D
@Ryano Azumi Kunnichiwa Kunnichiwa : ok selamat gan sudah bisa membuat Artikel Terkait Horizontal dengan Thumbnail
nais inpoh gan :))
jangan lupa berkunjung di http://glankitugilang.blogspot.com/
Kok gak muncul di bawah gan?
Kode Rusak gan... tdk bisa di copy...!!!
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