Cara Membuat Artikel Terbaru/Recent Post Animasi

10:44 AM

posting terbaru atau recent post yang tampil di sidebar blog akan menjadikan blog tampil menarik dan meningkatkan page view tentunya, apalagi dalam bentuk animasi. Karena akan dapat menghemat space di blog kita. sesuai judul postingan kali ini akan saya coba membuat tutorialnya. Artikel ini berasal dari KLUWAN DOT COM yang saya rubah ke bahasa indonesia. berikut caranya :
-pertama login kedashboard seperti biasa
-pilih tata letak
-tambah html/java script
-masukan scrypt di bawah ini






<!--

#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;
}

-->




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://www.satriacell.com/";

limitspy=4
intervalspy=4000







jangan lupa http://www.satriacell.com kamu ganti dengan url kamu
dan dengan sedikit perubahan sesuaikan dengan kebutuhan, semoga bermanfaat

sumber : kluwan.com

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

21 comments

yang kedua ....
mantab mas ....
aku dah pakai tuh spy auto ...

Balas

Mas Arief...backlinknya masih gak terpasang tuh mas....

kluwan dot com di beri http://....

jadi backlinknya berfungsi...
peace.

Balas

Ke empat....
he he mau ijin pindah halaman yang lain....
tetap semangat ....

Balas

#Kluwan dot com : gimana caranya mengetahui backlinknya ada ga?

Balas

Wah...keren nih...saya akan coba...makasih banget yah.....

Balas

Mas Satria...
caranya ya pada waktu bikin postingan kita tandai kata-kata yang akan kita kasih link.

Klik link, pastekan linknya...

aduh kok susah jelasinnya ya?

Seperti kasih awar itu lo mas...
ada alamat url yang di tuju...

Balas

Nambah nih...
buat backgroundnya mas Arief bagus sekali,
sayang gambar backgroundnya ikut scroll mouse naik dan turun.

supaya gak ikut naik turun di bawahnya url background ini (body)
tambah saja kode

background-attachment: fixed;

Balas

kodenya templatenya mas arief jadinya begini :

body{ font-family: Arial;
color: #fff;
background: url(http://www.4freedesktopwallpaper.com/pink-floyd-wallpaper/pink-floyd-wallpaper-dark-side-moon-1280x1024.jpg);
background-attachment: fixed;
repeat top center; }

coba aja deh...

Balas

#Kluwan dot com : ok de' aku coba dulu, thank's atas infonya

Balas

terima kasih sobat atas tutorialnya, salam sukses selalu

Balas

#Bisnis online : sama2 sob sukses balik

Balas

Keberapa ya? oh ya ke 13....
Siip mas infonya..
Aku juga udah pasang, dari tutornya kluwan alias khusnul jg..
Terimakasih buat semuanya...
Salam sukses.

Balas

tipsnya OK banget sob... merubah tampilan blog menjadi lebih menarik

Balas

#amru : thank's atas commentnya

#Astaga.com : thank's sob semangat terus

Balas

kalau aq belum pakai auto sob, aq masih suka yang biasa aja

Balas

Ini nih.. yg ane cari2... thx sharingnya y sob.... ^^

Balas

#Rizky : auto atau ga kan fungsinya sama cuman suka2 aja

#Em-mizan : moga bermanfaat sob

Balas

Touturial, panduan, tips, lengkap dan perrcuma untuk blogger

Syabas sob

Balas

Mas Arif cara ganti gambar thumbnailnya gmna, kyk punya mas gtu, koq saya ga ada gambarnya

tolong penjelasannya, thx :)

Balas

#Buat duit blog : maksudnya bagaimana sob????

#kwardanu : gini lho mas...
biar gambar thumbnailnya kelihatan setiap kali posting harus ada gambarnya jadi dithumbnailnya keluar gambar. semoga membantu

Balas