Menu Search, jangan dihilangkan maupun di edit

▼

Sabtu, 06 Februari 2016

Cara Membuat Sosial Slide Out Down Scrolling Bar Di Blogspot

Cara Membuat Sosial Slide Out Down Scrolling Bar Di Blogspot


lihat demo
*  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;
$(&#39;#navigation a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},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  ###

di

Tidak ada komentar:

Posting Komentar