Cara Membuat Sosial Slide Out Down Scrolling Bar Di Blogspot
* Buka blog mu
* Klik template
* Edit HTML
* Cari kode ini <body>
* Copy kode di bawah dan letakkan diatas kode <body>
Ganti warna merah dengan url anda
* Jangan lupa di save template
### GOOD LUCK ###
* Buka blog mu
* Klik template
* Edit HTML
* Cari kode ini <body>
* Copy kode di bawah dan letakkan diatas kode <body>
<div class="clear"/> <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 .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbNb0XmBh6Aj3Y3fKCsfUycSmQ0ttTmnZKXG0NptNhR9iytATikKrV3SWErN7lZ-c9jPP7LY8T22kIke3RlmO1ChcMwfhmCbtwy4Bbk926KQiwotdCm-12RscA01xYsX4QRVXc5Z28YLo/s1600/%5Bbloggertricksdotbiz%5DFACEBOOK.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxpERR3Ym9rn5-eKUFU5tafdxUTPaTq0U3o-i78NiyYmrQTWZW_Mveu0BUTZbjkZEMGQdKZjW-rwtPcMm5gp8eIWcMN54gTnLq5j68KJbpS6MZwLNTEcGd0LLwOW-A-np6SkGPFT0J8g/s1600/%5Bbloggertricksdotbiz%5DTWITTER.png); } ul#navigation .googleplus a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguokLwBrdaqSSx6zd_1DbYVltHaRmla96tVqcLyK8CJ0wK67GmEi10x_RM1gVLRT4cCjjjN32TjgvWphynucr5kb3QLvVIkRqUgL2pVvk-v_ai3AGmOzgMEAeaH0W2PSfagm3eRfpbq9o/s1600/%5Bbloggertricksdotbiz%5Dgplus.png); } ul#navigation .rss a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJF3j58C6BngyF_pm4k7U1wmQizVSll4SobHOGGFamoa9XoJ-ITQGWwDceOa4RJftcm27oUzkXIBNT7O0iAKjccQ1o191WXhEIcrlRoakGTADToS3m1jOsPh02fSgQHDg-r9wHokjJ7Lk/s1600/%5Bbloggertricksdotbiz%5DRSS.png); } ul#navigation .Contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtp1NVSlU0PWsNmIl9L993KJ0kFunFDHRvTn6OQxjVraUHgwP_edcluIK7c9TQ47TN3_qeAkXtVuVAtxqjN-YGqhedgJ6PWV2M1HNe9zBR4-KvQe31mCojbGKq7zsL2oeUk2YJyAosv6M/s1600/%5Bbloggertricksdotbiz%5Dcontact.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="facebook"><a href="http://facebook.com/ivankvalentine">Facebook</a></li> <li class="twitter"><a href="http://twitter.com/ivankGribatako">Twitter</a></li> <li class="googleplus"><a href="https://plus.google.com/110561987544809067837">Google+</a></li> <li class="rss"><a href="http://feeds.feedburner.com/#">RSS</a></li><li class="Contact"><a href="#">Contact Us</a></li></ul>CATATAN
Ganti warna merah dengan url anda
* Jangan lupa di save template
### GOOD LUCK ###
Baca Juga Artikel Terkait Lainnya