INFO ANYAR | UAS Mata Kuliah Hukum Bisnis dilaksanakan tanggal 10-06-2016 pukul 14.00 - 15.30 | RKAKL Online Klik Disini | Chek in Online Garuda Klik Disini | Cek Garuda Miles Klik Disini | Materi MK Hukum Bisnis, Lihat Pada Menu Materi Kuliah Hkm. Bisnis |

29 Februari 2012

Membuat Recent Post Bergambar dalam Blog

Banyak cara untuk menampilkan recent post pada blog kita, selain dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya. Ada banya cara membuat Recent Post, antara lain recent post kita dengan recent post bergambar. Sama halnya dengan widget Artikel Terkait atau Related Post, recent post juga bisa dibuat dengan tampilan thumbnail. Tutorial Blog kali ini akan menampilkan cara membuat recent post Berjalan.

Oke deh…ikutin langkahnya yaa….(jangan lupa, baca bismillah)

1. Login ke akun Blogger sobat
2. Klik Rancangan >> Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode berikut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.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] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://gustibogor.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>


6. Klik SIMPAN

Catatan :

Tulisan yang berwarna merah diganti dengan alamat URL Blog anda, dan yang berwana biru menunjukkan jumlah posting yang akan ditampilkan.

COBA YAA…, YA HARUS DICOBA DONK….Kalo Berhasil Kasih Komentar, kalo gak berhasil, kasih juga komentar dong…..hehehe


Reaksi:

1 komentar:

  1. yang ini udah ane coba pak tapi kok tampilanya bukan spt tanda tanggan spt agha_ku tetapi malah plihan berbagai menu postingan disertai gambar... coba pak jalan ke blog ane tapi lumayan memudahkan pengunjung untuk memilih bcaan...

    BalasHapus