Kukuh Cakra Darma

Recent Post Animated With jQuery

Salah satu pengunjung saya bertanya mengenai Cara "Membuat Recent Post Animated". Ia mengatakan
mo tanya nich...klo mo buat resent post dengan konsep bergerak tu bagaimana? mohon untuk diajari donk....
Nah, oke, saatnya untuk berbagi.. Kalau tidak salah saya telah memposting artikel ini (maklum ingatan sedikit kurang tajam) tapi tidak apa apalah, apa salahnya coba buat berbagi? hehe
Oke. Berikut adalah tampilannya..
Oke, lets we create it
1. Login ke blog anda --> Layouts --> Tambah Gadget --> HTML/JavaScript
2. Letakkan kode berikut

    <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://kukuhcdh.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>
*NOTE: Ganti text yang bewarna merah dengan alamat blog anda
3. Save

Selamat, anda mendapatkan recent post yang menawan ini..



Artikel Terkait:

8 Comments:

bagus | 07 October, 2010 12:18 | [Reply]

sip Boss....aq dah coba praktekkan n berhasil. trimakasih ya n sukses terus.....

Kukuh Cakra | 07 October, 2010 16:16 | [Reply]

@bagus yoi gan!

enda fiVers | 08 October, 2010 19:11 | [Reply]

Mantap nih bro...
triknya sangat simple :)
mudah dipraktekkan :)



"Semoga sukses slalu yaa"

Raharjo Ismail | 08 October, 2010 19:15 | [Reply]

info menarik nih mas, nanti sy coba praktekkan.

Kukuh Cakra | 09 October, 2010 19:15 | [Reply]

@enda @raharjo ismail oke silahkan

coretan blogger | 10 October, 2010 01:34 | [Reply]

kunjungan tengah malam sob,artikelnya bagus"+temlate yg tak kalah bagusnya,slam kenal sob,kalo ada waktu,mampir ke saya ya,salam persaudaraan..

Kukuh Cakra | 10 October, 2010 17:11 | [Reply]

@coretan blogger yoi gan.. salam kenal juga

Tenfinity X.8 | 10 October, 2010 20:42 | [Reply]

thanks infonya.. keep blogging!

Post a Comment | Classic Comment's Form