Kalau ada link atau artikel yang sudah usang (tidak work). Dimohon untuk berkomentar. Thanks for your attention.

Cara Membuat Recent Post Thumbnail dengan jQuery

Cara Membuat Recent Post Thumbnail dengan jQueryCara Membuat Recent Post Thumbnail dengan jQuery - Assalamu'alaikum! Halo sob, apa kabar? Sebelumnya saya sempat membuat artikel tentang cara setup blogspot menjadi co.cc. Dan sekarang, Insya Allah saya akan membahas tentang sebuah widget. Dab widget yang akan saya bahas ini adalah recent post/artikel terbaru.

Widget recent post, memiliki banyak manfaat sob. Salah satunya adalah membuat tampilan menjadi lebih menarik. Kenapa? Karena widget ini dapat bergerak (bergerak dalam arti bukan berkeliaran). Lalu, selain bergerak, widget ini pun dapat memasukkan gambar yang ada di posting ke dalam widget sesuai posting agar tampilan menjadi lebih bagus. Oke sob, langsung aja saya kasih script-nya ..




<!-- Recent Post Script Start -->
<script src="blog-caratrikblog.googlecode.com/files/widget-recentpost.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://caratrikblog.blogspot.com/";
    limitspy=4
    intervalspy=4000
    </script>
    <div id="spylist">
        <script src='http://blog-caratrikblog.googlecode.com/files/widget-recentpost1.js' type='text/javascript'></script>
    </div>
<!-- Recent Post Script (http://caratrikblog.blogspot.com) End -->   

- Angka yang berwarna biru adalah jumlah post yang tampil di widget
- Silahkan ganti link url yang berwarna merah dengan link blog sobat.
- Letakkan script ini di HTML/JavaScript

Selesai

Cara membuat widget recent post thumbnail, script recent post di atas saya ambil dari blog seseorang (maaf saya lupa dapat dari mana). Tapi yang pasti, script tersebut punya Abu Farhan. Oke sob, sekian saja untuk kali ini. Wassalam!

Credit : Abu Farhan


Anda baru saja membaca Cara Membuat Recent Post Thumbnail dengan jQuery yang ditulis oleh . Jika ingin copy paste artikel ini, dimohon agar mencantumkan link http://caratrikblog.blogspot.com/2012/05/trik-pasang-widget-artikel-terbaru.html

Klik apabila artikel bermanfaat :

1 komentar:

Posting Komentar

Berkomentar dengan menggunakan kalimat yang baik dan santun. Dimohon untuk tidak berkomentar SPAM, karena komentar akan dihapus!
Tips:" Berlangganan Via Email " terlebih dahulu agar komentar cepat dibalas!

Langganan via Email :

Pengikut

Link Teman

 
Kembali ke atas