Membuat Widget Artikel Terbaru Dengan Slide di Blog

Bikin Blog Artikel Terbaru memang sudah banyak kita jumpai Tutorialnya di blog lain.

Tapi yang saya akan jelaskan di artikel ini adalah Membuat Artikel Terbaru Dengan Slide seperti pada sidebar saya di sebelah kanan itu.
Terlihat sangat Menarik bukan?

daripada terlalu banyak basa-basi cuma bikin penuh postingan Langsung aja Masuk ke Cara Pemasangannya

Membuat Artikel Terbaru Dengan Slide

1. Pertama Login ke blog
2. Rancangan - Elemen Laman
3. Pilih Tambah Gadget - HTML/JavaScript
4. Lalu Masukan Kode di bawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:285px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:273px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#6d6666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4c4848;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#6d6666;
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://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[1] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[2] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[3] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[4] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
showRandomImg = true;

boxwidth = 290;

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 = 15;

home_page = "http://www.blogdhika.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

5. Save

Keterangan: 
  • http://img339.imageshack.us/img339/8822/71411271.jpg  Bisa anda ganti dengan alamat gambar anda yang ingin di tampilkan pada Daftar postingan yang tidak memiliki gambar.
  • http://www.blogdhika.com/ Ganti dengan Alamat Blog anda
Selamat anda sekarang sudah memiliki Widget Artikel Terbaru Dengan Slide di Blog anda.
Tentunya itu juga akan Membuat Blog anda terlihat semakin menarik.
Anda pun bisa merubah ukuran dan warna agar menyesuaikan pada Template Blog anda dan tenetunya makin mempercantik Tamplian blog anda.

13 komentar:

Thejoe mengatakan...

nice blog come to my blog to

Unknown mengatakan...

@Thejoe
thanks to visit my blog

iputu dirga mengatakan...

mas dika, gmana cara bikin "artikel baru" biar kyak d sitenya mas dika ini?? kyak slide ke atas??
yg di sidebar itu...

blas k blog q mas...

Kartanom mengatakan...

terima kasih banget sob infonya...berhasil di coba

Unknown mengatakan...

ok sama2

Ali Akram Shintaro mengatakan...

Trimakasih kang dhika,info nya bermanfaat sekali

Unknown mengatakan...

@uzumakiakram : ok terima kasih juga sudah berkunjung

Dhimaz Novian mengatakan...

Mantep kang
:D

Unknown mengatakan...

Matur suwun kang inponya, bermanpaat banget, hehehe...
sukses selalu, jangan lupa mampir kalau ada waktu... :)

Percetakan26 mengatakan...

Kalo buat slide shownya horizontal gimana ya, Sob,.. Tengkyu

Tempat belajar dan diskusi tentang blog di pbi mengatakan...

Nice Post Broo ,,
thanks ...

Visit Back bro ,,, :D

Ardian Caisar | Tips dan Trick Komputer mengatakan...

mantap gan postingannya

gusholis-net mengatakan...

blogwalking.. ;)

Posting Komentar

 
Copyright © 2011 Andhika Hutomo Blogdhika.com. Powered by Blogger™