Join us on Facebook

Please wait..10
Blogger WidgetsBlog statistics Widget For Blogger Ping your blog, website, or RSS feed for Free

Cara Buat "Related Post" Slider Style


Related Post Dengan Fungsi Slide Lebih Mudah Untuk Pelawat Blog Anda Mencari Artikel Yang Dikehendaki,Dengan Fungsi Automatik Related Post Anda Bergerak Sendiri Tanpa Perlu Kita Memilih Artikel.



1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi  Ctrl+F 
4.Cari Kode ]]></b:skin>
5.Copy Kode Dibawah Dan Pastekan Sebelum ]]></b:skin>

                                                                                                                                                                 /* Related Post CSS Start (www.trickiezone.com) 
---------------------------------------------*/  
#tl-related{  
    list-style:none;  
    margin:0;  
    padding:0;  
    font-size:13px;  
    font-family:Times New Roman;  
    position:absolute;  
    left:0;  
    top:0;  
}  
  
#tl-related li{  
    width:72px;  
    padding:2px;  
    float:left;  
}  
  
#tl-related li .image{  
    width:72px;  
    height:72px;  
    padding-bottom:2px;  
}  
  
#tl-related li .title{  
    width:72px;  
    height:16px;  
    overflow:hidden;  
}  
  
#expand{  
    width:152px;  
    display:none;  
    position:absolute;  
    top:0;  
    left:0;  
    box-shadow:0 0 13px #565755;  
    padding:5px;background:white;z-index:500;  
}  
  
#result{  
    position:relative;  
}  
  
#result img {  
     border-radius: 0px 0px 0px 0px;  
     border: medium none;  
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);  
     padding: 0px;  
}  
/* Related Post CSS End (www.trickiezone.com) 
---------------------------------------------*/  
6.Cari Kode </head>
7.Copy Kode Dibawah Dan Pastekan Sebelum Kode </head>

                                                                                                                                                                    <!--Related Post jQuery Start (www.trickiezone.com)-->  
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>   
<!--Related Post jQuery End (www.trickiezone.com)-->
8.Cari Kode <data:post.body/>.
9.Copy Kode Dibawah Dan Pastekan Selepas Kode <data:post.body/>.

                                                                                                                                                              <!--Related Post Start (www.trickiezone.com)-->  
<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<b:loop values='data:post.labels' var='label'>  
<b:if cond='data:label.isLast == &quot;true&quot;'>  
<h2 style='margin-top:28px;'>Related Posts</h2>  
    <script src='http://plugin-codes.googlecode.com/files/threelasrelatedposts-v-2.js'/>  
<script type='text/javascript'>  
var widthplugin = 532;  
var feedUri = &quot;<data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/>?alt=json-in-script&amp;max-results=9&amp;callback=?&quot;;  
</script>      
<div id='result'/>  
</b:if>  
</b:loop>  
</b:if>    
<!--Related Post End (www.trickiezone.com)--> 

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.
0 Komen La Bro!
Komen La Bro!
Komen La Bro!

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...