Cara Membuat Recent Post Jquery

Berikut Cara Membuat Recent Post Jquery. dengan menggunakan jquery recent post akan terlihat cantik sehingga juga memudahkan pengunjung untuk mengetahui apa yang baru saja di posting, Cara Membuat Recent Post Jquery, Cara membuat recent post slider jquery, jquery slider recent post....

Cara Membuat Recent Post Jquery

Langsung saja,langkah-langkahnya sebagai berikut:


1. Login ke akun Blogger Anda
2. Klik Rancangan/Tata Letak
3. Klik Edit HTML
4. Back up template Anda dahulu Klik Download Full Template
5. Klik Expand Widget Templates

6. Letakan kode berikut tepat di atas kode ]]></b:skin>

    <script>

    function split_date(d){

    var da = d.split(' ');

    day = "<strong class='day'>"+da[0]+"</strong>";

    month = "<strong class='month'>"+da[1].slice(0,3)+"</strong>";

    document.write(day+month);

    }

    </script>

    <link href='http://www.blogger.com/static/v1/widgets/119427095-widget_css_bundle.css' rel='stylesheet' type='text/css'/>

    <!-- Jquery library -->

    <script src='http://www.google.com/jsapi?autoload=%7B%22modules%22+%3A+%5B%7B%22name%22+%3A+%22jquery%22%2C%22version%22+%3A+%221.4.2%22%7D%5D%7D' type='text/javascript'></script>

    <!-- End Jquery library -->

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

7. Lalu simpanlah Template anda/Save Template

Langkah Ke dua:

1. Klik Page Elements/Elemen Laman
2. Klik Add gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

    <style type="text/css">

    #rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;}

    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}

    #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

    #rp_plus_img li{height:60px;padding:5px;list-style:none;}

    #rp_plus_img a{color:#FFF;}

    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}

    #rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}

    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}

    </style>

    <script type="text/javascript" src="http://sodiycxacun.googlecode.com/files/rpplusimgnt-v1.js"></script>

    <script type="text/javascript">

    var speed = 400;

    var pause = 2500;

    $(document).ready(function(){

    rpnewsticker();

    interval = setInterval(rpnewsticker, pause);

    });

    </script>

    <ul id="rp_plus_img">

    <script style="text/javascript">

    var numposts = 10;

    var numchars = 75;

    </script>

    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

5. Klik Save