menambahkan slide recent post dengan jquery di bloga

sedikit berbagi tips tentang cara membuat slide resent post dengan jquery keren untuk blogger kalian. ini akan membantu Anda untuk menampilkan posting terbaru Anda dengan slider effect. tidak sulit bagaimna untuk menambahkannya ke blog Anda. dengan mengikuti langkah-langkah dibawah ini insya'allah akan berhasil

Cara Instalasi ke blog
1. Masuk ke akun blogger dan Pergi ke Desain >> Edit HTML
    * (pastikan backup dulu template anda)

2. Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F untuk mempercepat pencarian anda

3. Paste kode di bawah Sebelum]]> </ b: skin> tag

#slide-container {
    height: 300px;
    position: relative;
    width: 480px;
}
#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;}
.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}
.slide-desc h2 {
    display: block;
}
.crosscol .widget-content {
    position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#slider2 {
    margin-top: 1em;
}
#slider li, #slider2 li {

    width: 480px;
    height: 360px;
    overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}
#nextBtn, #slider1next {
    left: 520px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;}
ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;}
ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;}
ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;}

 * By tutorial-smk4u.blogspot.com */

4. Sekarang Cari tag </ body> dengan menggunakan Ctrl + F

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- by tutorial-smk4u.blogspot.com -->

5. Klik Simpan Template

6. Sekarang Pergi ke Desain >> Elemen Halaman

7. Klik Tambah Gadget dan pilih 'HTML / Javascript'

8. Paste kode di bawah ini.

<div id="slider">
<script style="text/javascript" src="http://btrixx.googlecode.com/files/recentslider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://tutorial-smk4u.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

* Anda dapat mengubah nomor untuk menunjukkan posting dengan Mengubah 6
* Anda dapat mengubah nomor pasca karakter dengan Mengubah 150

   Ganti http://tutorial-smk4u.blogspot.com dengan situs / URL

9. Sekarang menyimpan HTML / Javascript '. Anda selesai.