Saturday, 28 August 2010

New !! Cara Membuat Related Post Keren Dengan Tampilan Image

:

related Post

Lanjutan dari Cara Membuat Related Post (artikel Yang Berkaitan),dengan Scroll, Dan Menampilkan Related Post Dengan Thumbnails  JQuery, Ternyata ada juga cara membuat Related post yang lebih keren dengan tampilan Image Postiingannya,
 
Mau ?! langsung aja Langkah pertama seperti biasa masuk blog, jangan ketuk pintu dan teriakan salam, kalo gak ada yg ngejawab langsung saja masuk ruangan edit HTML, jangan lupa centang Expand Widget Templete.
Kemudian cari Code </head>, lalu letakan kode berikut sebelum Code </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-->

Kemudian cari code <div class=’post-footer-line post-footer-line-1’>
Masukan code 2, dibawah code <div class=’post-footer-line post-footer-line-1’>

<!-- 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 widgets</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-->

Finish n Selamat Mencoba dan Juga jangan Lupa Meninggalkan jejak dengan Komentar ya !!!
286FE7F


New !! Cara Membuat Related Post Keren Dengan Tampilan Image 9 out of 10 based on 10 ratings. 9 user reviews.


Artikel Terkait

cElOTEh sObAT BLOGGER :

Ada 4 komentar ke “New !! Cara Membuat Related Post Keren Dengan Tampilan Image”
Makhasin said...
 

bagus banget sob infonya, masih newbie mo banyak belajar. ingin pasang related postnya tp di area html ga jumpa <div class ..., bingung nih sob, infonya
Oia sy dah follow no 11 sob follow balik ya

Imdad_Gresik said...
 

thanks Sob !! lam kenal z
coba aja cari kode yang mirip cb di search (post-footer-line post-footer) aj.. mngkn punya ente udah di modif !!

oc la klw bgt.. tak follow blog ente jg .. :53

Al-Faiz Arbaz said...
 

Maaf Sob.. mungkin bisa di tinjau ulang ttg artikel ini.. spertinya tdk brhasil atau saya yg salah menterjrmahkan maksud kalimat diatas. mksih.. :68

Imdad_Gresik said...
 

coba ente ikuti prosedurnya lgi sob !! udh tak coba n bisa ko'..!

:cendolbig :batabig :najis :marah :repost :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :nosara :berduka :hoax :dp :cekpm :thumbup :kr :nohope :ngacir :salahkamar :cool :mewek :babyboy :babygirl :95

ASSALAMU'ALAIKUM WR WB

BLOG ini DOFOLLOW _ Berkomenarlah Yang Baik Dan Sopan Zaaaa !!
Kalo Mau Pake EMOTICONS, sObat Hanya Cukup Menulisan Kodenya Saja... !! ( :10 :11 :13 :16 - :101 / :najis :travel :rate5 ) BE A FRIENDLY !