Cara Membuat Recent Post Bergerak

Sabtu, 28 April 2012

Bagikan Post ini :

Recent Post atau Postingan yang dibuat baru-baru ini. membuat recent post pada blog memang sangatlah mudah. begitu pula kalau dibuat fungsi scroll. tapi gimana kalau recent postnya dibuat bergerak? tapi kelebihannya apa? ya kelebihannya, buat blog lebih keren aja, trus ga banyak makan tempat. ya kalau kelebihannya cuma keren and ga banyak makan tempat lebih bagus buat fungsi scroll aja...
ya terserah anda. tapi yakin ga mau buat tuh recent post bergerak?. yang mau silahkan ikuti tutorialnya...

 
Contoh gambar recent post bergerak


Cara Buatnya gampang aja.

Syarat :

1. Jika ingin diletakkan di sidebar maka Sidebar anda di haruskan memiliki lebar lebih dari 260 atau pas sampai 260.
2.  Jika ingin lebih menarik lagi, dianjurkan disetiap postingan anda memiliki gambar awalan.
Cara Buatnya :

1. Masuk ke blog anda kemudian pilih rancangan >> Edit HTML >> centang Expand Template Widget.
2. cari kode berikut :
 #sidebar-wrapper {
    float: right;
    width: 320px;
    margin: 0;
    padding: 0 0 5px;
    display: inline;
}

lihat yang bertuliskan warna biru di blog anda dan ingat widthnya...

3. kembali ke Rancangan >> Elemen Laman.
4. Tambahkan Gadget >> HTML/Javascript. kemudian masukkan 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:353px;
}
#spylist ul{
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:310px;
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 = "komentar";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://apeterblog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Yang warna Merah itu tinggi recent postnya

Yang berwarna hijau itu lebarnya, sesuaikan dengan lebar sidebar yang tadi, namun dikurangi 10 px.. cthnya kalau sidebar anda lebarnya 320px maka jadi 310px

yang warna ungu itu jenis tulisannya. bisa diganti sesuka hati

Yang warna orange itu jumlah post yang akan ditampilkan

yang warna biru diganti dengan alamat blog/web anda.  


5. langkah terakhirnya tinggal tekan simpan lalu lihat perubahan yang terjadi di blog anda

MAU COPAS? SERTAKAN SUMBERNYA

Anda menyukai artikel diatas?, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blog August Peter ini

0 komentar :

Berkomentarlah

Beritahu kami apa yang anda pikirkan

 
Support : Copyright © 2011. August Peter's Blog - All Rights Reserved
Template Edited by August Peter Inspired by Sportapolis Shape5.com
Proudly powered by Blogger