Scrolling Recent Posts Widget For Blogger adalah widget terbaik untuk memamerkan postingan aatau artikel terbaru dari blog Anda widget ini dilengkapi dengan efek gulir menggunakan jQuery, yang dapat meraih perhatian pengunjung yang sangat banyak dari blog/situs Anda.

Saya pernah berbagi widget Scrolling Recent Posts Widget For Blogger ini di postingan Oto Website tetapi beberapa dari Anda menghadapi beberapa masalah ketika menginstalnya, itulah mengapa di sini saya berbagi Scrolling Recent Posts Widget For Blogger di postingan terbaru ini, yang bekerja dengan efek Spy jQuery , ini adalah fitur terbaik dari ini widget ini.

Widget ini dilengkapi dengan judul posting, thumbnail pos, tanggal ketika pos itu diterbitkan dan jumlah komentar pada post. Jadi bahwa semua pilihan di atas sepenuhnya disesuaikan, sehingga Anda dapat dengan mudah menyesuaikan widget ini. Di atas adalah beberapa fitur widget ini sekarang mari kita lihat kode apa saja yang di gunakan untuk membuat widget ini. Pemasang widget ini sama dengan pemasang widget sebelumnya.

Sebelumnya widget ini sudah saya guanakan anda bisa melihatnya di widget blog ini, jika widget ini sudah tidak saya guanakan silahkan Anda lihat dulu demonya di bawah ini.

Live Demo Widget ▼



Kode yang di gunakan
jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

JavaScrip yang di gunakan

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By otowebsite.blogspot.com ======== */

#otowebsite-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#otowebsite-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#otowebsite-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(http://1.bp.blogspot.com/-Je_RI6e7dog/ULzUCZnaWPI/AAAAAAAAF-Y/gUZyxT_ZFo8/s1600/otowebsite.blogspot.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#otowebsite-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#otowebsite-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#otowebsite-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#otowebsite-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.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;
}

/* ========== Scrolling Recent Posts Widget By otowebsite.blogspot.com ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-zIl2qO72Nno/ULzSXYovakI/AAAAAAAAF-I/v8ffwA1kkCM/s1600/otowebsite-no-thumbnail.png";
imgr[1] = "http://4.bp.blogspot.com/-zIl2qO72Nno/ULzSXYovakI/AAAAAAAAF-I/v8ffwA1kkCM/s1600/otowebsite-no-thumbnail.png";
imgr[2] = "http://4.bp.blogspot.com/-zIl2qO72Nno/ULzSXYovakI/AAAAAAAAF-I/v8ffwA1kkCM/s1600/otowebsite-no-thumbnail.png";
imgr[3] = "http://4.bp.blogspot.com/-zIl2qO72Nno/ULzSXYovakI/AAAAAAAAF-I/v8ffwA1kkCM/s1600/otowebsite-no-thumbnail.png";
imgr[4] = "http://4.bp.blogspot.com/-zIl2qO72Nno/ULzSXYovakI/AAAAAAAAF-I/v8ffwA1kkCM/s1600/otowebsite-no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.otowebsite.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="otowebsite-widget">
<script src='http://www.otowebsite.16mb.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Cukup sekian untuk kali ini, jika ada pertanyaan silahkan tinggalkan komentar Anda.

Posting Komentar Blogger Disqus

  1. Mas kalau di blogku uda terpasang jquery 7 dari tutorial mas yg lain, trus aku pasang jquery yg ditutorial ini juga bisa gak ya? jadi nanti ada 2 jquery yg terpasang?

    BalasHapus
  2. @Saputra MZCukup 1 jQury saja.
    Setiap jQuery ada perbedaannya, sperti jQery 7.0 dan 7.4

    BalasHapus
  3. @dek rif Makasih banget mas wkwkwkw, sorry jadul hehe

    BalasHapus
  4. Kok ga jelas banget sih. ga di tulis langkah2 nya dan tempat peletakan code.

    BalasHapus
  5. diharapkan agar diperjelas tempat peletakan code nya gan

    BalasHapus
  6. @Rohan ajaMaaf baru sempat membalas!

    1. Letakkan kode pertama di atas tag </head>
    2. Letakka kode ke dua di elemen HTML/JavaScript (Tambah gadget)
    3. Simpan.

    BalasHapus
  7. Klau dipasang di website statis seperti wordpress atau php bisa tidak ya mas, di website saya ini misalnya http://tokoonlinebaru.com

    BalasHapus
  8. Salam kenal Sobat..? saya coba simak artikel Anda..dan mencoba pasang di blog saya.
    Tapi koq gak bekerja..malahan gak muncul sama sekali widgate scrolling recent post nya
    Sampai saya coba pasang 3 blog saya. tapi tetep gak ada yang bekerja oftimal widgate
    Padahal prosedur pemasangan, saya ikuti petunjuk dari komentar balasan Sobat..
    Mohon Keterangan nya.. Sob.? so,al nya saya suka sekali dengan Artikel yang Sobat posting.
    Terima kasih sebelum nya. frm : Karrysta http://karristaent.blogspot.com

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top