Cara menambahkan Social , Subscribe , Back to top , Scrolling Down Sticky Bar di blogspot

Add social , subscribe , backto top , Scrolling Sticky Bar To Blogger

* login dulu yaa
* pilih template >>> edit HTML
* cari kode ]]></b:skin>
* copy kode dibawah dan letakkan diatas kode ]]></b:skin>

#HB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}
 
 #HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }
 
 #HB-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }
 
#HB-Bar-Container *{
padding:0;
}
 
#HB-Bar-Container a {
text-decoration:none;
}
 
#HB-Bar-Content{
width:1024px;
margin:0 auto;
}
 
#HB-Bar-Content li{
list-style:none;
float:left;
}
 
#HB-Bar-Left{
float:left;
width:45%;
}
 
#HB-Bar-Right{
float:right;
width55%;
}
 
#HB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}
 
#HB-Bar-Right li{
margin-top:-7px;
}
 
#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
 
#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,.HB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}
 
#HB-Bar-Left .Home a{
background:#143eb4;
}
 
#HB-Bar-Left .Home a:hover{
background:#1556fa;
}
 
#HB-Bar-Right .Subscribe{
margin-top:-14px;
}
 
 
 
#HB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}
 
#HB-Bar-Right .btt a:hover{
background:#06b421;
}
 
.HB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.HB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}
 
#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
 
#share-top li {
display: block;
margin-right: 0;
}
 
#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#HB-Bar-Container{
display:none;
}
}

* kemudian cari kode <body>
* copy kode dibawah dan letakkan dibawah kode <body>

<div id='HB-Bar-Container'>
<div id='HB-Bar-Content'>
<ul id='HB-Bar-Left'>
<li class='Home'> <a href='http://taichiho.blogspot.co.id/'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='HB-Bar-Right'>
<li class='Subscribe'> <div class='HB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=HBlogger&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='HBlogger'/><input name='loc' type='hidden' value='en_US'/> <input class='HB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://taichiho.blogspot.co.id/" title="Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Back to Top &#8593;</a> </li>
</ul></div></div>

* Trus cari lagi kode </body>
* dan copy lagi kode dibawah dan letakkan diatasnya </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#HB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>
</script>
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>  
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

[ catatan dikit ]
Ganti warna merah dengan url blog mu ]

* terakhir silahkan di save yaa *

### GOOD LUCK KAWAN ###

QUEEN TRICK BLOG

Cara menambahkan Social , Subscribe , Back to top , Scrolling Down Sticky Bar di blogspot

Add social , subscribe , backto top , Scrolling Sticky Bar To Blogger

Entri Populer

Label