Cara Membuat Recent Posts Keren Diblog
Assalamualaiku Wr.WB | Pada kesempatan ini saya akan memberitahu Cara Membuat Recent Posts Keren Diblog.
Recent Posts Widget dengan Scroll akan membuat tampilan pada blog Anda semakin keren dan bagus.
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.
Berikut ini adalah cara-cara nya :
1). Login 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 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. / Tata Letak
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 Paste (COPAS) kode dibawah ini dan masukkan kodenya.
<div style="overflow:auto;width:ancho;height:250px;">10). Klik Simpan & Lihat hasilnya
<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/AVvXsEjHcRytLvWcRcJ4w3O4dbj9gbbM__dHwVHmo2eUs593PgHbfeqrY0EGmoWlK9FDrk4fWAsMgnV6BX71zmBFwO3tIfiWi6DpWBLyvRCFbfmuJK2OR8lXtyDJfViEphfAUzhtN-Tj_a5z1Jo/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/AVvXsEj7W1jE9SkNe_27BTT26g9_VRnBbEdlHsiHSVmYvsacVO6RVUbT2BAzECWRT8PD8faQKfs31YmdCdX0BCZ-xQ1MzYYMdSMFiAW2pm1BHpAvzn27FDSCyq-t-DGJ0louw4KzhVzGqamaB7Q/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7W1jE9SkNe_27BTT26g9_VRnBbEdlHsiHSVmYvsacVO6RVUbT2BAzECWRT8PD8faQKfs31YmdCdX0BCZ-xQ1MzYYMdSMFiAW2pm1BHpAvzn27FDSCyq-t-DGJ0louw4KzhVzGqamaB7Q/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7W1jE9SkNe_27BTT26g9_VRnBbEdlHsiHSVmYvsacVO6RVUbT2BAzECWRT8PD8faQKfs31YmdCdX0BCZ-xQ1MzYYMdSMFiAW2pm1BHpAvzn27FDSCyq-t-DGJ0louw4KzhVzGqamaB7Q/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7W1jE9SkNe_27BTT26g9_VRnBbEdlHsiHSVmYvsacVO6RVUbT2BAzECWRT8PD8faQKfs31YmdCdX0BCZ-xQ1MzYYMdSMFiAW2pm1BHpAvzn27FDSCyq-t-DGJ0louw4KzhVzGqamaB7Q/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7W1jE9SkNe_27BTT26g9_VRnBbEdlHsiHSVmYvsacVO6RVUbT2BAzECWRT8PD8faQKfs31YmdCdX0BCZ-xQ1MzYYMdSMFiAW2pm1BHpAvzn27FDSCyq-t-DGJ0louw4KzhVzGqamaB7Q/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.newcyber-evo.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 :
~ Tulisan yang berwarna biru (width:ancho;height:250px) : itu adalah ukuran tinggi & lebar kotak scroll.
~ Tulisan yang berwarna merah (10 & 4) : adalah jumlah postingan terbaru yang akan ditampilkan
~ Tulisan yang berwarna hijau dan dasar merah (http://www.sasaha33.blogspot.com/) : adalah link blog kalian.
Sekian dulu dari saya semoga info ini dapat bermanfaat untuk kalian, Terima Kasih atas kunjungannya .
Wassalamualaikum Wr.Wb
Posting Komentar