Home »»Widget Recent Post dengan Animasi

Widget Recent Post dengan Animasi

Posted on 4:30 PM by Damar Yosa Aji

 Untuk contohnya lihat recent post blog saya di bawah (footer). Jika tertarik ingin membuat yang seperti itu silahkan ikuti langkah-langkah berikut :

1. Login ke blogger anda tentunya
2. Klik Design > Add a Gadget >> HTML/JavaScript
3 Copy paste code berikut dan letakan pada kotak konten




        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <style type="text/css" media="screen">
        <!--

        #spylist {
        overflow:hidden;
        margin-top:5px;
        padding:0px 0px;
        height:350px;
        }
        #spylist ul{
        width:220px;
        overflow:hidden;
        list-style-type: none;
        padding: 0px 0px;
        margin:0px 0px;
        }
        #spylist li {
        width:208px;
        padding: 5px 5px;
        margin:0px 0px 5px 0px;
        list-style-type:none;
        float:none;
        height:70px;
        overflow: hidden;
        background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
        border:1px solid #ddd;
        }

        #spylist li a {
        text-decoration:none;
        color:#4B545B;
        font-size:11px;
        height:18px;
        overflow:hidden;
        margin:0px 0px;
        padding:0px 0px 2px 0px;
        }
        #spylist li img {
        float:left;
        margin-right:5px;
        background:#EFEFEF;
        border:0;
        }
        .spydate{
        overflow:hidden;
        font-size:10px;
        color:#0284C2;
        padding:2px 0px;
        margin:1px 0px 0px 0px;
        height:15px;
        font-family:Tahoma,Arial,verdana, sans-serif;
        }

        .spycomment{
        overflow:hidden;
        font-family:Tahoma,Arial,verdana, sans-serif;
        font-size:10px;
        color:#262B2F;
        padding:0px 0px;
        margin:0px 0px;
        }

        -->
        </style>

            <script language='JavaScript'>

        imgr = new Array();

        imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

        imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

        imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

        imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

        imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
        showRandomImg = true;

        boxwidth = 255;

        cellspacing = 6;

        borderColor = "#232c35";

        bgTD = "#000000";

        thumbwidth = 70;

        thumbheight = 70;

        fntsize = 12;

        acolor = "#666";

        aBold = true;

        icon = " ";

        text = "comments";

        showPostDate = true;

        summaryPost = 40;

        summaryFontsize = 10;

        summaryColor = "#666";

        icon2 = " ";

        numposts = 10;

        home_page = "http://indose7en.blogspot.com/";

        limitspy=4
        intervalspy=4000

        </script>

        <div id="spylist">
            <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
        </div>

Ganti kode yang berwarna merah dengan alamat blog anda

4. Save

Selesai. mudahkan? SANGAT MUDAH. terima kasih karena telah membaca postingan saya, saya akhiri salam blogger indonesia

Kritik komentar dan saran kalian sangat ditunggu bro, Bagi yang lebih mengetahui bisa share, ok..

page Number