Widget Melayang Social Bookmark Multi Fungsi ~ Jalz's TVXQ|Cassieast Zone

Seneng banget TVXQ bisa diundang ke markas om google tercintrong XD kamu bisa baca artikelnya DISINI balik lagi ke widget...hohoho...
dalam kesempatan kali ini...saya akan membagi bagikan widget keren yang saya modifikasi sedikit dari situs seo ^_^
Saya menamakan ini Widget Float Multi fungsi hayo coba tebak??

yups...karena widget ini jika dimofikasi lagi..bisa jadi menu melayang ataupun jadi Widget back to top..tapi Widget Back To Top keren sudah pernah ya ^^ bahkan ada versi TVXQNYA disini

Langsung kita bikin aja Widget Melayang Social Bookmark Multi Fungsi

Pada kesempatan kali ini... chingudeul harus lebih hati"..karena ini akan merusak jika salah sedikit..bukanya nakut"in sih heheh...
Langsung ah

1.Login Blogger
2.Menuju Ke Design(untuk template lama)..Jika menggunakan template baru maka langsung ke EDIT HTML

bingung?? baca ini...CARA mengubah tampilan lawas ke tampilan blogger baru atau sebaliknya

JANGAN LUPA BACK UP TEMPLATE ANDA

3.Centang Expand Widget Templates

4. Tekan CTRL+F

5.Cari </b:skin>
6.Pastekan kode berikut di atas kode nomer 5

ul#navigation {

position:fixed; margin:0px;

padding:0px;

right:10px;

top:0px;

list-style:none;

z-index:999999;

width:auto;

font:normal 11px Arial,Sans-Serif;

-webkit-animation:2s fxhompinav ease-in-out;

-moz-animation:2s fxhompinav ease-in-out;

-ms-animation:2s fxhompinav ease-in-out;

animation:2s fxhompinav ease-in-out;

} ul#navigation li {

width:103px;

display:inline;

float:right;

margin:0 0 0 2px;

}

ul#navigation li a {

display:block; float:left;

margin-top:-78px;

width:100px;

height:22px;

background-color:#9E242C;

background-repeat:no-repeat;

background-position:50% 150px;

border:3px solid #303030;

-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

-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;

border-radius:0px 0px 10px 10px;

color:#ccc;

text-decoration:none;

text-align:center;

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

padding-top:85px;

-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

}

ul#navigation li a:hover {

margin-top:-3px;

background-position:50% 10px;

color:#fff; position:relative;

}

ul#navigation li a:hover:after {

content:""; width:0px;

height:0px;

position:absolute;

top:100%;

left:45%;

margin-top:-10px;

border-width:5px;

border-style:solid;

border-color:transparent transparent #e6e6e6 transparent;

}

ul#navigation li:nth-child(1) a {

background-image:url(http://bestuff.com/images/images_of_stuff/64x64crop/tvxq-61116.jpg);

}

ul#navigation li:nth-child(2) a {

background-image:url(http://bestuff.com/images/images_of_stuff/64x64crop/micky-yoochun-145550.jpg);

}

ul#navigation li:nth-child(3) a {

background-image:url(http://userserve-ak.last.fm/serve/64/34702217.png);

}

ul#navigation li:nth-child(4) a {

background-image:url(http://userserve-ak.last.fm/serve/64s/27345457.jpg);

} ul#navigation li:nth-child(5) a {

background-image:url(http://bestuff.com/images/images_of_stuff/64x64crop/kim-junsu-68449.jpg);

}

ul#navigation li:nth-child(6) a {

background-image:url(http://bestuff.com/images/users/64x64crop/yunho3-49300.jpg);

}

@-webkit-keyframes fxhompinav {

from{margin-right:-1000px;} to {margin-right:0px;}

}

@-moz-keyframes fxhompinav {

from{margin-right:-1000px;} to {margin-right:0px;}

}

@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}

}

@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}

}

7.Paste Kode ini diatas </head>

<ul id='navigation'>

<li><a href='Url KAmu'>Contact Me</a></li>
<li><a href='http://facebook.com/your_username'>Facebook</a></li>
<li><a href='http://twitter.com/you-username'>Twitter</a></li>
<li><a href='your google plus id'>Google Plus</a></li>
<li><a href='your feed'>Feed</a></li>
<li><a href='cuma tambahan haha'>Follow Me</a></li>

</ul>

Note:menu diatas bisa diubah sesuai kebutuhan anda ...

8.Done...Siap Dinikmati...
Dan hasilnya seperti berikut...