Pasang Exchange Link Dengan Efek Jquery

DEMO : __________________________

                                                                   |

/_________________________________|

\                                          |

                                           |

                                           |

                                           |

                                           |

                                           |

                                          \|/

mw widget seperti di atas?? berikut tutorialnya :




pertama anda mendaftar dulu di sini 

setelah mendaftar  :

masuk ke bagian wizard dan setelah itu pilih untuk blogger dan pilih di bawahnya Original Auto-Linkies


lalu terakhir copas kode di bawah ini sebelumnya masuk blogger - rancangan - tambah widget - html/javascript

<center><b>yang mw linknya masuk di bawah ini mari ceng cengan</b></center>
<style type="text/css">
#tag-cloud {

    width: 600px;

    height: 400px;

    border: 2px solid black;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    background: #111 url(http://kmwlrs.com/images/Grey%20Gradient%20GIF.gif) center center repeat;

    border-radius: 20px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    box-shadow:1px 1px 12px #000;

    -moz-box-shadow:1px 1px 12px #000;

    -webkit-box-shadow:1px 1px 12px #000;

    -o-transition: all 2s ease-in-out;

    -moz-transition: all 2s ease-in-out;

    -webkit-transition: all 2s ease-in-out;

        list-style: none;  

    }

#tag-cloud:hover {

    -o-transform: scale(1.1) rotate(0deg) translate(0px);

    -moz-transform: scale(1.1) rotate(0deg) translate(0px);

    -webkit-transform: scale(1.1) rotate(0deg) translate(0px);

    opacity: 1.0;

    background: black url(http://www.filehive.com/files/081007/3-seungyeon.jpg);

    border-color: red;

    box-shadow:1px 4px 18px #000;

    -moz-box-shadow:1px 4px 18px #000;

    -webkit-box-shadow:1px 4px 18px #000;          

    }

#tag-cloud li {list-style: none;}  
</style>  

<style type="text/css">
a.white { color: #fff;}

a.green { color: #00FF99;}

a.yellow { color: #FFFF99;}

a.blue { color: #02ddfe;}

a.gray { color: #CCCCCC;}

a.orange { color: #FFCC99;}

a.lime { color: #FF99FF;}

a.red { color: #fd3a31;}

a.white, a.green, a.yellow, a.blue, a.gray, a.orange, a.lime, a.red {

    text-decoration:none;

    padding:3px 8px;

    opacity: 0.8;

    filter: alpha(opacity=80);

    font-family: Times New Roman;

    font-weight: normal;

    text-shadow: 0 1px 1px #000;

    -o-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -webkit-transition: all 1s ease-in-out;  

    }

a.white:hover, a.green:hover, a.yellow:hover, a.blue:hover, a.gray:hover, a.orange:hover, a.lime:hover, a.red:hover {

    background-color:#777;

    opacity: 1.0;

    filter: alpha(opacity=100);

    border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    text-shadow: 0 1px 1px #000;

    box-shadow:1px 1px 15px #fff;

    -moz-box-shadow:1px 1px 15px #fff;

    -webkit-box-shadow:1px 1px 15px #fff;

    -o-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -webkit-transform: scale(1.2);  

    color:#990000;

    border: 2px solid #999;

    }

/*#tag-cloud { position:relative; top:10px; left:10px; height:300px; width:400px; border:1px solid red; overflow:hidden; margin-bottom:40px;}*/

#tag-cloud1 { position:relative; top:10px; left:10px; height:400px; width:500px; border:1px solid red; overflow:hidden; margin-bottom:40px;}

#tag-cloud2 { position:relative; top:10px; left:10px; height:300px; width:300px; border:1px solid red; overflow:hidden; margin-bottom:40px;}
</style>

<ul id="tag-cloud" style="list-style: none outside none;">
<li>kode script mister linky widget anda</li>
</ul>

save dan liat hasilnya selamat mencoba!!!