Cara Membuat Recent Posts Keren, Cantik, Beautifully to Blogger - Recent Posts Widget dengan Scroll akan membuat tampilan pada blog Anda semakin keren dan bagus. 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">Keterangan mengenai Recent Posts Scrolling Widget :
<!--
#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://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/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://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/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.Cerdasnya-Article.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>
- 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.
Untuk Cara Membuat Recent Posts hanya tampil dihalaman Posting atau hanya dihalaman Homepage, Baca artikel Cara Menampilkan Widget Hanya di halaman Posting . Anda bisa juga membuat Recent Post tampil hanya berdasarkan 1 buah kategori label di Cara Membuat Recent Posts 1 Kategori Label . Terimakasih dan semoga bermanfaat.
0 comments:
Post a Comment