Senin, 05 Maret 2012

Cara membuat recent post berjalan

*jdar* hari ini rima cuma mau ngeposting tutorial ajaaa, ngeshare ilmu yang rima dapett. Kebetulan salah satu anggota KK ada yang ngerequest tutorial tentang cara membuat recent pest berjalan seperti yang ada di sebelah kiri blog rimaaa :) Recent Post ini bisa memudahkan pengunjung di blog kita untuk membaca postingan yang ada diblog kita.
*Speechless* langsung ajaa ya :
1. Login ke akun blogger 
2. Klik Design

3.Klik Add Gadget
4.Pilih Edit HTML/Java Script

5. Masukkan kode dibawah ini :
<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 = 4;
home_page = "http://mmarimma.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. Save/ Simpan

Note :
1. URL yang berwarna merah ganti dengan URL kalian.
2. Angka yang berwarna Hijau jumlah post yang ingin ditampilkan.

Sekian semoga bermanfaat :)


16 comments:

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58 :59 :60 :61
:62 :63
  1. jadi berat gak tuh ? takutnya loadingnya lama kalau banyak gadget dan widget

    BalasHapus
    Balasan
    1. heemm, kalo selama ini rima pakek enggak sih, standar kok :) gak berat berat kali :)

      Hapus
  2. sip.. makasih tutornya.. udah di coba..:D

    BalasHapus
  3. wah... tutorialnya bermanfaat :D keep blogging

    BalasHapus
  4. Kereeen, akhirnya tutorial ini muncul jugaa ^^v

    BalasHapus
    Balasan
    1. haha iyaa abg. maaf baru bisa buat tutor nya :)

      Hapus
    2. Selooow ...
      Btw, tapi kenapa gua ga gerak-gerak kaya' di blog kamu yah ?
      Apa masalah sama koneksi internet di tempat gua ? #nanya

      Hapus
    3. wah kaga tau juga tuh bg aneee ----____----

      Hapus
  5. itu widgetnya bikin berat blog gak kak? tkutnya loadingnya makin lama

    BalasHapus
    Balasan
    1. gak kok, selama ini kaka pakee standar standar aja kokk :)

      Hapus
  6. Nice share :D
    Boleh dicobaaa nih ;)

    BalasHapus
  7. wah dapet ilmu baru,thanks sharingnya:D
    checkout blog aku yah rimaaa thankyou<3

    BalasHapus
    Balasan
    1. okeee dana :) your blog is amazing, i like it :)

      Hapus