Recent Posts Scrolling Untuk Blogger

info-gamepc.blogspot.com - Scrolling posting ini adalah sebuah widget untuk memamerkan postingan terbaru dari blog Anda dengan efek scroll jQuery, serta untuk meraih perhatian pengunjung dengan cepat. Widget ini terdiri judul posting, thumbnail pos, tanggal ketika posting diterbitkan dan jumlah komentar, selain itu semua pilihan di atas dapat anda sesuaikan sesuai letak dan desain blog anda. Mari kita praktekkan bagaimana menambahkannya ke dalam blog anda.

Langkah 1.

Supaya widget ini bekerja sesuai yang kita harapkan, pertama-tama anda cek apakah di template anda sudah tersedia jQuery, seperti ini bentuknya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> , jika sudah ada, jangan ditembahkan biar tidak konflik nantinya.

a. Masuk ke Dashboard Blogger pilih Template>
b. Click on Edit HTML.
c. Cari kode </head>, jika template anda belum terpasang jQuery, INGAT.. Kalo sudah ada jangan dipasang.

d. Letakkan di kode dibawah ini, diatas kode </head>.

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

Langkah 2.

a. Masuk ke Dashboard Blogger pilih Layout.
b. Klik Add a Gadget Pilih HTML/JavaScript.
c. Paste kode dibawah ini.

<style type="text/css" media="screen">
#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/AVvXsEjlBnPHRwoGwHiHZc3JJECKiP14GxybxlrswkwAEaYCVC1_PsNGdai2YXQFzNkMfH4U9fHe3qNQbB1xoB2NDxXDFZJM_aW9elcJ5FMTj9mCkXFUusFNuxH40grCBKQe08cKqv46kyi3Zz0/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;
}

<script language='JavaScript'> imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwXnv2UWNWKkYGJE18ZHZ0TtlSVx7WH0g8rhozUr4Ka779o9Ix1a5rD0otQKFOd0YZGCqh31M9VGP2iwKVkyrRaG9pzQ1FIXyzekVEXXYT7bMz9-rA6SR28_rJMp3vlMOT3rOLGKs0y4/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwXnv2UWNWKkYGJE18ZHZ0TtlSVx7WH0g8rhozUr4Ka779o9Ix1a5rD0otQKFOd0YZGCqh31M9VGP2iwKVkyrRaG9pzQ1FIXyzekVEXXYT7bMz9-rA6SR28_rJMp3vlMOT3rOLGKs0y4/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwXnv2UWNWKkYGJE18ZHZ0TtlSVx7WH0g8rhozUr4Ka779o9Ix1a5rD0otQKFOd0YZGCqh31M9VGP2iwKVkyrRaG9pzQ1FIXyzekVEXXYT7bMz9-rA6SR28_rJMp3vlMOT3rOLGKs0y4/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwXnv2UWNWKkYGJE18ZHZ0TtlSVx7WH0g8rhozUr4Ka779o9Ix1a5rD0otQKFOd0YZGCqh31M9VGP2iwKVkyrRaG9pzQ1FIXyzekVEXXYT7bMz9-rA6SR28_rJMp3vlMOT3rOLGKs0y4/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwXnv2UWNWKkYGJE18ZHZ0TtlSVx7WH0g8rhozUr4Ka779o9Ix1a5rD0otQKFOd0YZGCqh31M9VGP2iwKVkyrRaG9pzQ1FIXyzekVEXXYT7bMz9-rA6SR28_rJMp3vlMOT3rOLGKs0y4/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://info-gamepc.blogspot.com/";
limitspy=4; intervalspy=4000; </script>
<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Langkah 3.

Terakhir ganti URL http://info-gamepc.blogspot.com dengan URL blog kamu.

Seperti yang saya sebutkan di atas, widget ini sepenuhnya dapat disesuaikan dengan blog anda, Anda juga dapat mengubahnya hanya dengan melihat kode-kode seperti numposts berarti jumlah postingan.

numposts = 10 ; Total jumlah posting yang Anda ingin tampilkan.
limitspy = 4 ; Jumlah posting yang muncul.
intervalspy = 4000 ; kecepatan animasinya.

Yang terakhir simpan template anda dan lihat hasilnya, kalau masih ada kesulitan silakan tinggalkan komentar.