Membuat Recent Posts Dengan Scrolling

Membuat Recent Posts Dengan Scrolling

Fungsi dari recent post adalah menampilkan beberapa judul sebuah posting terbaru pada halaman blog. Untuk masalah penempatan, recent post dapat ditempatkan dimana saja kamu sukai. Lalu recents post juga akan membuat tampilan blog menjadi semakin menarik. Selain itu jika pembaca sedang berada disuatu halaman artikel kamu namun mereka ingin mengetahui artikel terbaru tanpa melalui halaman utama maka pembaca bisa mencari posisi recent posts yang berada disalah satu widget kamu

Membuat Recent Posts With Thumbnail dan Scrolling :

1. Masuk ke Blogger. Masuk ke Template,

2. Klik EDIT HTML,

3. Centang Expand Widget Templates,

4. Copy kode di bawah ini diatas kode </head> . Cari terlebih dahulu kode </head> dengan menekan tombol CTRL + F .

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

5. Save Template,
6. Lalu, masuk ke Layout,
7. Pilih tempat mana yang ingin kamu taruh Widget Recent Posts ini,
8. Klik Add A Gadget / Tambah Widget,
9. Pilih HTML/Javascript,
10. Copy kode dibawah ini dan masukkan kodenya,

<style type="text/css" media="screen">
<!--
#mediablogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}
#mediablogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
#mediablogger-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/AVvXsEiPQv-5HH_XCs2wgV1RJw7SAALsWqxNv0VoxpYqJOcSlr8FKP5-fZB3sT3b23bDaWtn186IQe0s-LDUHvLVqu3hdMD2BBYEFVTw14EOd4LOvXkGIQJjPWHvwDqoSWl7mf1YQG_3u2J-_PY/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}
#mediablogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}
#mediablogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}
#mediablogger-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);
}
#mediablogger-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;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xbXUU7YyGcY3Ihg0ZuDinNQmoZAlXbf4GpNUOomJTKCuz-WGdsrVYT_8mENp9y2yrD2T7Qj2hrphgSo9kNDh7ek3y3tCfk6B8u2aWv6yAkI3kY05eNXIxdDhDSZtB2qmS0qRZZdDVQ/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xbXUU7YyGcY3Ihg0ZuDinNQmoZAlXbf4GpNUOomJTKCuz-WGdsrVYT_8mENp9y2yrD2T7Qj2hrphgSo9kNDh7ek3y3tCfk6B8u2aWv6yAkI3kY05eNXIxdDhDSZtB2qmS0qRZZdDVQ/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xbXUU7YyGcY3Ihg0ZuDinNQmoZAlXbf4GpNUOomJTKCuz-WGdsrVYT_8mENp9y2yrD2T7Qj2hrphgSo9kNDh7ek3y3tCfk6B8u2aWv6yAkI3kY05eNXIxdDhDSZtB2qmS0qRZZdDVQ/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xbXUU7YyGcY3Ihg0ZuDinNQmoZAlXbf4GpNUOomJTKCuz-WGdsrVYT_8mENp9y2yrD2T7Qj2hrphgSo9kNDh7ek3y3tCfk6B8u2aWv6yAkI3kY05eNXIxdDhDSZtB2qmS0qRZZdDVQ/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xbXUU7YyGcY3Ihg0ZuDinNQmoZAlXbf4GpNUOomJTKCuz-WGdsrVYT_8mENp9y2yrD2T7Qj2hrphgSo9kNDh7ek3y3tCfk6B8u2aWv6yAkI3kY05eNXIxdDhDSZtB2qmS0qRZZdDVQ/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.kebinekaan.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="mediablogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Penjelasan :

• Intervalspy = 4000; Scrolling kecepatan widget, jika kamu menurunkan kecepatan nilai widget akan meningkat,
• Limitspy merupakan jumlah recent post yang tampil di interface widget,
• Homepage dapat kamu ganti dengan url blog kamu,
• Ubahlah numposts sesuai dengan keinginan kamu, 10 merupakan jumlah total recent posts terbaru yang dapat di scroll,

11. Simpan.