Abangbloger.Blogspot.Com

Langkah 1 :-
Widget ini bekerja dengan jQuery spy effect jadi jika anda sudah punya atau sudah menempatkan jQuery pada template abaikan langkah ini. Namun jika tidak ikuti langkah berikut.

1. Login ke Blogger Dashboard > Template
2. Pilih  Edit HTML
3. Proceed
4. Cari kode di bawah ini pada template

</head>

Tambahkan code di bawah ini di atsanya

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

Langkah 2 :-

1. Pada Dashboard > Pilih Layout
2. Tambahkan gadget
3. Pilih HTML/JavaScript
4. Paste kode di bawah ini

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

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

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

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

#helperblogger-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/AVvXsEgjzK6wIC1Su4jK6oyr-r0nApwi_nIbTmkxZq0DLqLA0vZV7u9fdDDAqp6QHZVSYlec_YGi7rpB31HkIFj8F6zDFgquAJUfWjesDZjC9APeS2UeFBGr8EydvIqzZX5S3jzyaO5cZgGFPRQ/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

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

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

#helperblogger-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);
}

#helperblogger-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 helperblogger.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSMGse8_9NdARil_ZYz7xax8heK5ZvVryAJfNmR8KlLjsZsbe6iRmzCMxLFuSsXkJOl2oJO1u7gvxeGt9vmmiJvqR1mp05f0caOmbllH93kYhoot1izgwnXDu5DgCz09PIjVCPZbPLh8/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSMGse8_9NdARil_ZYz7xax8heK5ZvVryAJfNmR8KlLjsZsbe6iRmzCMxLFuSsXkJOl2oJO1u7gvxeGt9vmmiJvqR1mp05f0caOmbllH93kYhoot1izgwnXDu5DgCz09PIjVCPZbPLh8/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSMGse8_9NdARil_ZYz7xax8heK5ZvVryAJfNmR8KlLjsZsbe6iRmzCMxLFuSsXkJOl2oJO1u7gvxeGt9vmmiJvqR1mp05f0caOmbllH93kYhoot1izgwnXDu5DgCz09PIjVCPZbPLh8/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSMGse8_9NdARil_ZYz7xax8heK5ZvVryAJfNmR8KlLjsZsbe6iRmzCMxLFuSsXkJOl2oJO1u7gvxeGt9vmmiJvqR1mp05f0caOmbllH93kYhoot1izgwnXDu5DgCz09PIjVCPZbPLh8/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSMGse8_9NdARil_ZYz7xax8heK5ZvVryAJfNmR8KlLjsZsbe6iRmzCMxLFuSsXkJOl2oJO1u7gvxeGt9vmmiJvqR1mp05f0caOmbllH93kYhoot1izgwnXDu5DgCz09PIjVCPZbPLh8/s1600/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.abangbloger.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://abangbloger.googlecode.com/files/recentpostscroll.js' type='text/javascript'></script>
</div>

• Ganti http://www.abangbloger.blogspot.com/ dengan URL blog anda.
• numposts berarti jumlah posts yang di tampilkan
• numposts = 10; Total post yang di scroll
• limitspy=4; Jumlah post yang muncul pada widget
• intervalspy=4000; kecepatan scroll semakin kecil semakin cepat

Tweet

Kode HTML:

<a href="http://abangbloger.blogspot.com/2012/07/membuat-widget-sroll.html">Widget Recent Posts Scrolling Untuk Blogger</a>