Recent Posts Thumbnail With Scrolling Widget. Bagaimana cara membuat recent post ini? Sebelum membahas
Cara Membuat Recent Posts, terlebih dahulu kita harus mengetahui pengertian dari Recent Posts ini.
Recent Posts dibuat untuk menampilkan beberapa judul sebuah posting terbaru yang up to date pada halaman blogger. Recent Posts ini bisa ditempatkan diamanapun, sesuai dengan kesukaan Anda. Apabila pengunjung sedang berada di suatu artikel posting kita namun dia ingin mengetahui artikel terbaru tanpa melalui halaman Homepage maka pengunjung akan mencari keberadaan Recent Posts yang terpasang di salah satu Widget Anda.
Recent Post ini ditambahi Scrolling Widget agar dapat bergerak kebawah dan melihat artikel terbaru sebelumnya. Berikut Cara Membuat Recent Posts With Thumbnail and Scrolling :
1. Login ke Blogger. Masuk ke Template.
2. Klik EDIT HTML.
3. Ceklis/Centang Expand Widget Templates.
4. Copy kode di bawah ini diatas kode </head> . Cari terlebih dahulu kode </head> dengan menekan tombol CTRL + F .
<script src='http://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 anda taruh Widget Recent Posts ini.
8. Klik Add A Gadget / Tambah Widget
9. Pilih HTML/Javascript
10. Copy kode dibawah ini dan masukkan kodenya. Lalu Save.
<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/AVvXsEi4k6F9d9lR68uCRgLFQafoEvC0VyDSEigrMUN7BtY8CvFi5a3esDYUWVeg_E7pqOo9P58TTqURT1XspQgepfxynP_Ddb8Oa60fqmc0_hQjl74YqDbT6yunOOiXP6VNn1RXio668vf6DPg/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/AVvXsEiXvhXmpI3_RHbqUnp1CmvuYRipBA-3s2H-w1mzbAj9JgowE0ckwhBbJfxrFxTZUbLd8P6RUMeUsPxIkVB5oEW-_tissGWljXBcTmmw4qQmg4Toohyphenhyphen2R23wFl4Lx5MUrxNYy1CV0aIdq7s/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvhXmpI3_RHbqUnp1CmvuYRipBA-3s2H-w1mzbAj9JgowE0ckwhBbJfxrFxTZUbLd8P6RUMeUsPxIkVB5oEW-_tissGWljXBcTmmw4qQmg4Toohyphenhyphen2R23wFl4Lx5MUrxNYy1CV0aIdq7s/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvhXmpI3_RHbqUnp1CmvuYRipBA-3s2H-w1mzbAj9JgowE0ckwhBbJfxrFxTZUbLd8P6RUMeUsPxIkVB5oEW-_tissGWljXBcTmmw4qQmg4Toohyphenhyphen2R23wFl4Lx5MUrxNYy1CV0aIdq7s/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvhXmpI3_RHbqUnp1CmvuYRipBA-3s2H-w1mzbAj9JgowE0ckwhBbJfxrFxTZUbLd8P6RUMeUsPxIkVB5oEW-_tissGWljXBcTmmw4qQmg4Toohyphenhyphen2R23wFl4Lx5MUrxNYy1CV0aIdq7s/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvhXmpI3_RHbqUnp1CmvuYRipBA-3s2H-w1mzbAj9JgowE0ckwhBbJfxrFxTZUbLd8P6RUMeUsPxIkVB5oEW-_tissGWljXBcTmmw4qQmg4Toohyphenhyphen2R23wFl4Lx5MUrxNYy1CV0aIdq7s/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://the-anarchyta.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>
Keterangan mengenai Recent Posts Scrolling Widget :
- Ubah numposts sesuai dengan keinginan Anda. 10 Adalah jumlah total recent posts terbaru yang dapat di scroll.
- Homepage dapat anda ganti dengan url blog Anda.
- Limitspy adalah jumlah recent post yang tampil di interface widget.
- Intervalspy = 4000; Scrolling kecepatan widget, jika Anda menurunkan kecepatan nilai widget akan meningkat.
Terakhir tinggal Anda Save dan lihat hasilnya.