hracie automaty

Pages

Sabtu, 14 Agustus 2010

Widget Recent Post Animasi Dengan JQuery


Untuk contohnya lihat recent post blog saya di bawah (footer) di sini. 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://amatullah83.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





    <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://amatullah83.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>






Artikel Terkait:












Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

Sample text

Sample Text

Sample Text