Senin, 29 Agustus 2011

Cara membuat Recent Post berjalan ala Ari Software

Recent Post ala Ari Software
Halo sobat blogger. Apa kabar? pastinya baik. ok tutorial kali ini saya memberikan tutorial mengenai Recent Post. Tentunya para blogger sekalian sudah tau apa itu recent post. Itu,,tuh,, daftar posting terbaru sobat blogger sekalian. Nah memang blogger sudah menyediakan widget Recent Post yang standar, tetapi ini berbeda Recent Post ini bergerak dari atas ke bawah jika ingin demonya silahkan liat sendiri di blog saya. Berhubung saya tidak pandai berbicara panjang lebar kita langsung aja PRAKTEK.

  1. Login ke akun blogger masing masing
  2. Dari dashboard ke Rancangan
  3. Klik Add Gadget/Tambah Gadget
  4. Pilih HTML/Javascript
  5. Masukkan 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:285px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:273px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = 290;

    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 = 15;

    home_page = "http://ari-software.blogspot.com/";

    limitspy=4
    intervalspy=4000

    </script>

    <div id="spylist">
    <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
    </div>
  6. Ganti http://ari-software.blogspot.com/ dengan url blog sobat
  7. Jika sudah silahkan klik Simpan
  8. Lihat hasilnya
Kalau masih belum ngerti liat screenshot ini aja

.....:::::Sekian tutorial dari saya. Semoga bermanfaat:::::.....

18 komentar:

  1. recent post seperti gimana ya? ada thumbnailnya gak? Jangan lupa demonya ya biar pengunjjung lain bisa memahami.

    BalasHapus
  2. yang ane tunggu - tunggu ada juga.

    BalasHapus
  3. nah baru diberi screenshot, kemaren gak ada :D

    BalasHapus
  4. bagus recent post nya

    BalasHapus
  5. yang pasti itu akan memperberat loading blog mas,tapi boleh juga triknya

    BalasHapus
  6. @DENY hhe lupa mas padahal dah ada SS nya cuman lupa ngasih :D

    @Daeng iya sih mas :(

    @Trisna bner ;;)

    BalasHapus
  7. Wah bagus nih .. Boleh Di Coba nih . tq tutorny yh kang :)

    BalasHapus
  8. terimakasih artikelnya bos,udah saya pasang bos...dan berhasil

    BalasHapus