ADS 2

Home » Posts filed under Trik Blog
Tampilkan postingan dengan label Trik Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Trik Blog. Tampilkan semua postingan

Sabtu, 08 Desember 2012

Ganti Kursor

Letakan script dibawah ini dibawah kode ]]></b:skin>

 <style type='text/css'>body, a {cursor: url( Letakkan Url cursor default disini ), progress;} a:hover {cursor: url( Letakkan Url cursor link disini ), progress;}</style>

 Cursor Default : 
http://lh4.ggpht.com/_TWC8zfBIdik/S-azAjwjYKI/AAAAAAAAAxg/vcB1bh9X0CM/roxxcur1.png

Cursor Link : 
http://lh6.ggpht.com/_TWC8zfBIdik/S-azAn6JodI/AAAAAAAAAxk/kdC4_mmwr9c/roxxcur2.png
23.53  Unknown  No comments
Read More

Jumat, 07 Desember 2012

Cara memberi scroll pada Popular Post



Posting kali ini adalah Cara memberi scroll pada Popular Post
mungkin para blogger wajib pasang scroll ini ,kenapa ? karna jika tidak diberi scroll widget ini cukup makan tempat ,mungkin dengan cara memasang scroll pada widget Popular post ini bisa menghemat tempat .
Kita langsung saja ke cara membuat :

1. Login ke blog masing-masing
2. Template
3. Edit HTML > Lanjutkan > Centang  Expand Template Widget (untuk mencegah kesalahan)

4. Cari kode berikut dibawah ini (cari dengan F3 / CTRL F ) :
<div class='widget-content popular-posts'> 

Jika sudah ketemu ganti kode di atas dengan kode dibawah ini :
<div class='widget-content popular-posts' style='overflow:auto;width:ancho;height:300px'>
5. SIMPAN / SAVE

Keterang :

  •  height:300px adalah tinggi Popular post dengan scroll, 300px bisa diganti sesuai kebutuhan .

00.22  Unknown  No comments
Read More

Rabu, 05 Desember 2012

Cara Membuat Menu Kwicks Dengan jQuery

Login dulu ke Blogger.com > Dasboard > Template > Centang  Expands Widget Templates
Lalu taruh kode berikut di atas ]]></b:skin>
.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya
<script src='https://sites.google.com/site/cunayz182/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
Lalu ke Tata Letak > Tambah Widget > HTML/JavaScript dan masukan kode di bawah ini kedalam kolom Script :
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='#' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://rahmatwithblogger.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
Ket :
Tanda # ganti dengan URL yang akan dituju  
Dan tulisan Home, Blog, Portfolio, Contact ,bisa diganti dengan kata anda sendiri 

22.43  Unknown  No comments
Read More

Senin, 03 Desember 2012

Cara Membuat Auto Read More (Thumbnails)


Langkah-langkahnya:
1. Masuk ke dahboard > Template > Edit HTML > Lanjutkan (Jangan lupa centang  'Expand Widget Templates').
2. Copy-paste script berikut tepat di BAWAH code </head> (gunakan Ctrl+F):
<!-- Auto read more script -http://rahmatwithblog.blogspot.com- Start -->
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<"); 
        for(var i=0;i<s.length;i++){ 
            if(s[i].indexOf(">")!=-1){ 
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
            } 
        } 
        strx =  s.join(""); 
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2; 
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
    strx = strx.substring(0,chop-1); 
    return strx+'...'; 
}
function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {    
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://buka-rahasia.blogspot.com- End -->
function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {    
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://rahmatwithblog.blogspot.com/- End -->
Ket :
Yang berwarna MERAH adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan. 

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan code dibawah ini :

<!-- Auto read more -http://rahmatwithblog.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/><divstyle='text-align:justify;'expr:id='&quot;summary&quot;+data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://rahmatwithblog.blogspot.com- End -->

 Ket : 
Ganti kata Read More >> dengan kata-kata yang diinginkan.
Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna Merah tersebut dengan code dibawah ini :
<img border='0' src='url  gambar readmore'/>
 'Ganti kata url  gambar readmore dengan alamat url gambar.

4.Simpan/Save Template.
23.48  Unknown  No comments
Read More

Cara Membuat Button dengan Efek Sliding Hover




Langsung ke cara membuat.

  1. Login ke dashboard blogger Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke menu Template >> Edit HTML, dan centang Expand widget 
  4. Backup dulu template anda sebelum melakukan editing.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode dibawah ini diatas kode ]]></b:skin>
.a-btn{
background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
padding-left:20px;
padding-right:80px;
height:38px;
display:inline-block;
position:relative;
border:1px solid #5d81ab;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn-text{
padding-top:8px;
display:block;
font-size:18px;
white-space:nowrap;
text-shadow:0px 1px 1px rgba(255,255,255,0.3);
color:#446388;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.a-btn-slide-text{
position:absolute;
height:100%;
top:0px;
right:52px;
width:0px;
background:#63707e;
text-shadow:0px -1px 1px #363f49;
color:#fff;
font-size:18px;
white-space:nowrap;
text-transform:uppercase;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:38px;
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
-moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
-webkit-transition:width 0.3s linear;
-moz-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
transition:width 0.3s linear;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:52px;
border-left:1px solid #5d81ab;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width:38px;
height:38px;
opacity:0.7;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixHTB8P1kwP762jCEgmH4UPzTML9dQYjqd4Gafv2yDJDxhz4bVBqY4IK7hlrevZMjENi9mrISGrG1iATd1rR0bn1hDD3hBlVM4dZmV3a6M5eTbnqCw4Q7CowvrbfDjOcZUaZPPy5BTKP4/s1600/arrow_right.png) no-repeat 50% 55%;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn:hover{
padding-right:180px;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
text-shadow:0px 1px 1px #5d81ab;
color:#fff;
}
.a-btn:hover .a-btn-slide-text{
width:100px;
}
.a-btn:hover .a-btn-icon-right span{
opacity:1;
}
.a-btn:active{
position:relative;
top:1px;
background:#5d81ab;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#80a9da;
}
Kemudian pilih menu Layout, klik Add gadget >> HTML/Javascript masukkan kode dibawah ini kedalam kolom gadget itu. 
<div class="button-wrapper">
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Register now</span>
<span class="a-btn-slide-text">It's free!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Become a member</span>
<span class="a-btn-slide-text">Sign up!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Enter</span>
<span class="a-btn-slide-text">Log in!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Get an account</span>
<span class="a-btn-slide-text">For free!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>

Ket     • Ganti tulisan 'Button URL' dengan URL yang dituju . 
23.46  Unknown  No comments
Read More

Membuat share artikel melayang (floating button)



Tombol melayang ini hanya untuk berbagi ke 4 layanan ke Social Bookmark saja, yaitu ke Facebook, Twitter, Google Buzz, Google Plus One (+1)


Cara :
1. Yang pastinya Login dulu ke Dashboard Blogger masing-masing
2. Pilih Rancangan > Elemen Laman > Add Gadget (HTML/JavaScript)
3. Copy Script di bawah ini dan Paste kedalam kolom widget/gadget tadi.
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="pageshare" title="Get this code from http://rahmatwithblog.blogspot.com">
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
<div class="sbutton" id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>
<div class="sbutton" id="gb">
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a></div>
<div class="sbutton" id="gplusone">
<script src="http://apis.google.com/js/plusone.js" type="text/javascript">
</script>
<g:plusone size="tall"></g:plusone></div>
</div>

  4. Simpan / Save
23.42  Unknown  No comments
Read More

Cara membuat efek bintang berkedip pada link


Efek ini akan muncul apabila link tersebut disorot oleh cursor.

Cara :

   1. Login   ke blogger
   2. Masuk ke    Rancangan -- Edit HTML
   3. Carilah kode   a:link{ atau a:visited{
   4. Lalu letakkan kode dibawah ini dibawah code   a:link{ atau a:visited{
a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOTxbYzH3X5LWx096uTR9u49pHIxMJqVkYK8XGNUQQInfDJdxv2Lq0IH5D8xQT61sR0h3ihwtYyfxafPlSj7dP1FCsrbCTgYxsKVeeIk7yyz7aNE83jG8otC3CUH_5SOx3VTLH-LZljiw/s1600/stars.gif);}
Nah .. ! nanti ketika link di sorot mouse akan mengeluarkan efek seperti dibawah ini :

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. 
Selamat mencoba!
23.40  Unknown  No comments
Read More

Cara membuat tooltip di blog




Tooltip merupakan antarmuka pengguna grafis elemen. Hal ini digunakan dalam hubungannya dengan kursor.
Saat pengguna mengarahkan cursor ke item tersebut tanpa mengklik maka tooltip akan muncul sebuah balon kecil "kotak melayang-layang" dengan informasi tentang item yang sedang melayang di atas.

Berikut Caranya 
  1. Login ke Blogger.
  2. Masuk ke Template 
  3. Edit HTML >> Cati kode <body>  (pake CTRL + F)
  4. Dan letakkan kode dibawah ini tepat di bawah code <body> . 


5. Selanjutnya cari code </body>
6. Dan letakan code dibawah ini tepat di atas code </body>



7. Simpan Template / SAVE
23.37  Unknown  1 comment
Read More

Cara Membuat Widget Social Bookmark Melayang (Efek Mouseover)


Widget untuk berbagi artikel ke layanan social bookmark sudah banyak kita jumpai diberbagai situs.
Efek mouseover artinya kalau mouse didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu .









Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :
1.       Seperti biasa, login dulu ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.       Copy script widget social bookmark dibawah ini, dan paste pada gadget.

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPJzxAu6BgjytqCAHNk9lUYAhh9W7193vyZpwPCeG81fWQqD60u0_F0XMJxWXHymftDm2FWo1RHcg-rXWVtH2dPVEJ09YjKUnr45DtljaTAA35npsti9GGPLjWdLpNRxWieqSQ5UmyVc/s1600/64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUUHRFTt7BrN41jKuuIeD8UqkguKpcGlWDSrS0YdQTX1RTF5aWbgujHi0YrUSvzH5YyrBtnt0C11jLa-RcuE65fe01n4QZrlvmqIUeC6oKAxh5OrKVsyAJPg1Qw5OpBJqkq7TfD4jEAQ4/s1600/64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPQX-g_1uIM7UjhAw6Haph7CVuLhUbxQlMfLK0ZolAkScMBtWqLERiHxqZJGyzdj2GPlHP-MYVhFnQDxeCt0qgTtvTgQF45sgAvnE4wkRoip_2x7EuacCspixcTVEmpVP7jRC4ofaHZI/s1600/64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-q3vQSuH3jU75iJ1EHkniKw8KK46pKgphyPvTuqgPHS2Pg89GlR8uxZIqLCNsk_IJm9Wx9p_HMbkLK3zRWDrzjN_3A1S2ift3K76NT5bu7VbeMRn3T2czaUFDaMABhB50JDheVcFIFU/s1600/64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzWn7szarKSF1XogyEaymy8LKQ-tV5ZAXDF3TSb78KkOtmEpaYvz9zJQriTu2W3F7ZDsQpRpWaSvtTRox1NGYeTkff_4cXaJnB4RonJ3s5O7tl_c3-HJBX99qgvZ-YMjBqRBmgi0qjnQR/s400/yahoo_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="<div style="color: red;"YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>


4.       Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.
5.       Simpan / Save gadget 

23.34  Unknown  No comments
Read More

Lanjut home