Scrolling Recent Posts Widget For Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_Squh9emaFblQrBe80EwsMIwlCfgDbH-pee5NWxqyS1vNMCLflZ_C7-yiwkNLAnfs4jmUrRw2wN_q3pV_SW5UXYAyZqztrCk_Kuv04sMPdMGBobX2tB9-y5_HaQ_7rqnlELdbWU9Dw/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/s1600/otowebsite-no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0-wlwsWSKQUjdGWYYkDlD1XmCGWjnOp5L7FyCuRZNqd_g3tghpJrJTyfZ34Uw5owKoyWui-JIxli4dMzMM7BLNJXf-wrfvYP9BmDUgHWQcq8fEZy-gFE9Nm-6gEDJZo8whmttNdRLg/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.