27 Januari 2011

Tutorial#13 - Recent Post yang Bergerak-Gerak (Animated)

Baru jer letak 'Animated Recent Post' kat sidebar tu.. 'Animated Recent Post' ni menunjukkan beberapa Entries terkini anda (jumlah entries bergantung la..). Baru jer Google dan jumpa satu link ni ..:::Funwithtricks:::...
Recent Post Ni bergerak-gerak yer...

1 - Log In Blogger Dashboard
2 - Pilih tab 'Design'
3 - Dan terus ke 'Page Elements' Dan Pilih 'Add a Gadget'
4 - Dalam 'Add a Gadget' tu, Pilih 'HTML/Javascript'
5 - Kemudian Copy-Paste Code di Bawah ni Masuk dalam 'HTML/Javascript' tu.

<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:4px;
padding:0px 0px;
height:400px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:85px;
overflow: hidden;
background: #000
url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg)
repeat-x;
border: 1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:12px;
height:17px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#f4eeee;
border:0;
}
#spylist img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; }
#spylist img {
-webkit-transition:
all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s
ease; padding: 4px; background: #eee; background:
-webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background:
-moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px
rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#spylist img:hover {
-moz-transform:
scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2)
rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2)
rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0
20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4),
inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px
rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
 }
.spydate{
overflow:hidden;
font-size:11px;
color:#007cb5;
padding: 3px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#272b2e;
padding:2px 0px;
margin:0px 0px;
}
/* -------Animated Scrolling Recent Posts Widget By FunWithTricks.Com------ */
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[1] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[2] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[3] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[4] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
showRandomImg = true;
boxwidth = 300;
cellspacing = 5;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 69;
thumbheight = 72;
fntsize = 13;
acolor = "#555";
aBold = false;
icon = " ";
text = "comments";
showPostDate =true;
summaryPost = 39;
summaryFontsize = 9;
summaryColor = "#555";
icon2 = " ";
numposts = 12;
home_page = "http://ismiqbal.blogspot.com/";
limitspy=7;
intervalspy=3000
</script>
<div id="spylist">
<script src='https://googledrive.com/host/0B_1mqJd2tC8qLUJMTGZqTE1qTUU' type='text/javascript'></script>
</div>

6 - Tukarkan Code : home_page = "http://homosapiensz.blogspot.com/";  kepada  nama Blog Anda! 
7 - Code : numposts = 12; merujuk kepada berapa 'Recent Post' yang anda ingin Widget tu ulang2.
8 - Dan Code :  imgr[4] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";;  menunjukkan Imej URL yang akan muncul apabila Entry anda tidak mempunyai Gambar.


Kalau Gambar tak Keluar atau Tak teratur 'Recent Post' tu, Cuba trik ini.

Tukar site feed length sebagai "Full", bukan 'short' atau 'custom'. Boleh di tukar di Bahagian Settings - Others - Set "Allow blog feed" kepada "Full". Tekan "Save settings".
 Semasa tengah edit blog tadi, keluar 'Undefined Error' pada tarikh di Post. Jadi telah setel selepas cuba tutorial ini.




26 ulasan:

  1. terbaik la bro..niesz br nk cri tuto nie..ade gak niesz tnye org lain, tp still xdpt respond..thanx so much!

    updated entry :acik bembot 44

    BalasPadam
  2. ,=====,o00o Ponn..Ponn.Ponn..
    //__l_l_,\____\,__
    l_---\_l__l---[]lllllll[]
    _(o)_)__(o)_)--o-)_)___
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Salam Persahabatan kami datang ziarah blog anda
    http://firestartingautomobil.blogspot.com/
    http://bukandoktorveterinar.blogspot.com
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    kalau gunakannya tentu canggihkan nampaknyerrrr... thanks ataS TUNJUK AJAR SIFUUUUU

    BalasPadam
  3. Salam,
    Thanks! Nice Tutorial =D

    BalasPadam
  4. yeay...da try da..
    dan jadik...
    thank Q very much :)

    BalasPadam
  5. Alhamdulillah,,,,saya dh cuba dn berjaya!!!terima kasih atas prkongsiannya ye...=)

    BalasPadam
  6. terima kasih TT. lame cari benda ni, hee. oh, namenye animated recent post rupenye. hee

    BalasPadam
  7. thankssss..dah jadik tp kenapa tak keluar gambar eh?

    BalasPadam
  8. Sy dah bwat n jadi lha . Tp kan , dye tak bergerak . Kenape ye ?

    BalasPadam
  9. @A Little Girl : tak dapat view ke blog awak erk.... confirm ker tak gerak @ dia gerak perlahan2??

    BalasPadam
  10. @Nini Hartini : gambar tu depend pada entries gak..klu entries tu ada gambar, ada la..klu entries xde gambar...dia kuar xde...tp yg xde tu leh tukar dia punyer default image gambar..

    BalasPadam
  11. sy dh try.tapi..kenapa tulisan dia berlapik dgn gambar..Tak jadi mcm dlm gambar tu pun .Mcm mna nk wat tulisan tu terletak elok2 kt tepi gambar tu ??

    BalasPadam
  12. kenapa tak gerak !!! ??
    please tolong

    BalasPadam
  13. saya da try dkt blog saya tapi still x gerak.nak buat linkwithin pun x boleh..ada suggestion x?

    BalasPadam
  14. saye try kat blig saye..ohsem!!!
    anyway thanks..=)

    BalasPadam
  15. tanx LOT!!
    btw nak tanye...
    kalaw gune disqus, boley tak bile kite tekan "comment" tu die kuar popout window??

    klaw buley tolong bagi saye link die eh?
    tanx again :)

    BalasPadam
  16. tumpang tanye, kalaw nak buat bende nie dekat belah kiri mcm mane ea?
    boley tak buat even kalaw blog mmg takde sidebar kiri?

    BalasPadam
  17. @CAPP2013: eh.. tengok blog awak ok jer jadi gerak2...hehe

    BalasPadam
  18. @Green Applez: sidebar belah kiri... dia letak dalam widget jer.... klu tade sidebar kiri...tak dapat la...kena coding complicated yg sy tak tau...

    BalasPadam
  19. @Green Applez: aiyoo.... tak pasti la..smuanya coding2..

    BalasPadam

Terima kasih kerana sudi baca.
Segala penulisan dan penerbitan di dalam blog ini berdasarkan kepada pengalaman, pandangan dan pemahaman peribadi blogger ismiqbal sahaja. Tahap pemikiran manusia tidak sama dan mungkin boleh buat pembaca terasa hati kerana ketidaksamaan pendapat.