Add a Dynamic social Bar For Blogger Like Free Premium HTML

Welcome guys to Free Premium HTML . Today we've a tutorial on how to make a dynamic social bar like the one on Free Premium HTML  Blog. ...

Welcome guys to Free Premium HTML.
Today we've a tutorial on how to make a dynamic social bar like the one on Free Premium HTML Blog.

So Let's begin:

Step One:

First Open your blogger Dashboard, Click on Template, Then on Edit HTML.

After that go to the bottom of the editor look for :

 </body>

Right Before it Paste the next code:

<div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='--Your Facebook Link--' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2_COcdibJVXPVRNm3s7809X9FUbqI_SFoZVcgdsZ5gZcTbTTVYY9Oo_vE6Y1v1t8VcYO-uLp3USFS4l2PYgJoL-WSCE9PQx38C-bEkNHryAQV8aGRcnq6Z5e6LRh46D3nqiDq92y8kuk/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/></div></div><!-- END OF FACEBOOK SOCIAL BAR -->
<div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'><div class='sosmed-isitwitter'><a href='--Your Twitter Link--' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjejsQT7JVDJRbVE3vhh2AxfI7ZkqgBzJS3D-qGKW_xf0BidesAHMkSWAwP9orhusALgBKWedVfAgwMNunsOe0d9pNORNS8d5ZwVkHTyPyMMXUAtujH1ReVBPZxRMlxNDoaod8Ipmb3YcY8/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/></div></div><!-- END OF TWITTER SOCIAL BAR -->
<div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'><div class='sosmed-isifacebook'><a href='--Your Google+ Link--' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU-CciiHgr7Yqg99zScJkDXJLMIWnMPxXK3i2aHcREVk9AjTwp5EpEF7w9FHNfXeh6sOWA_ABVYoyAJ_QtOqS30YgEBIbT0mrLn1Kj9ZxiE76YR5RLPQrPLbndwy06YGzpKsud5w_TK19/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/></div></div><!-- END OF GOOGLE+ SOCIAL BAR -->
<div class='sosmed-kananrss' onmouseout='this.className=&apos;sosmed-kananrss&apos;' onmouseover='this.className=&apos;sosmed-kananrssc&apos;'><div class='sosmed-isirss'><a href='--Your RSS Feeds Link--' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/></div></div><!-- END OF RSS SOCIAL BAR --> 

The code is commented, when you find such as: "--Your ...... Link--" Put your social link, like your page and so on....

Step Two:

While on Code Editor Press "Ctrl+F", a text input will appear, Type on it the Following "<b:skin>", click in the "..." to expand it, (if not expanded).

#viewers{float:left;width:100%;font:12px Arial;padding-top:3px;border-top:1px solid #bbb;margin:0;background:#eee} .readmorecontent{float:right;margin:0;padding:3px 10px;0} .post-snippet:before{content:attr(data-snippet);} #twit_fb{background-clip:padding-box;box-shadow:0 14px 2px -10px #CCC;cursor:pointer;display:inline-block;vertical-align:top;width:100%;margin:0 11px 30px 0;padding:0} #twit_fb .none-efect{border:3px solid #EEE;position:relative;margin:0;padding:0} ul.twit_fbpanjang{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:5px 0 0 5px} ul.twit_fbpanjang li{-moz-transition:opacity 300ms ease 0;-ms-transition:opacity 300ms ease 0;-o-transition:opacity 300ms ease 0;-webkit-transition:opacity 300ms ease 0;transition:opacity 300ms ease 0;margin-bottom:10px;opacity:0} #twit_fb:hover .twit_fbpanjang li{opacity:1} ul.twit_fbpanjang li a:before{-moz-transition:all 300ms ease-out 100ms;-ms-transition:all 300ms ease-out 100ms;-o-transition:all 300ms ease-out 100ms;-webkit-transition:all 300ms ease-out 100ms;transition:all 300ms ease-out 100ms;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUq0ZkMFunZm_3uqSRmDaSn0DHAts8qRxZ-pyh1IsJAOWzty6p3x4Ib9pIoPvqevJknSwo-b2LtzHMfMGYcNV3VUb3zHvJRAgcPOIGsp7rlGqRqLQwZ3KEAmgEjWUnctrGOpD_tNM1qAD/h120/icon-roll.png);background-color:transparent;background-repeat:no-repeat;content:"";display:inline-block;height:25px;position:absolute;width:25px} ul.twit_fbpanjang li a.f-like:hover:before{background-position:-31px -47px} ul.twit_fbpanjang li a.f-like span{color:#5974FF} ul.twit_fbpanjang li a.t-share span{color:#00aced} ul.twit_fbpanjang li a.t-share:hover:before{background-position:0 -48px} ul.twit_fbpanjang li a.t-share:before{background-position:0 0;left:2px;top:2px} ul.twit_fbpanjang li a.f-like:before{background-position:-31px 0;left:4px;top:2px} ul.twit_fbpanjang li a{-moz-transition:width 300ms ease-out 100ms;-ms-transition:width 300ms ease-out 100ms;-o-transition:width 300ms ease-out 100ms;-webkit-transition:width 300ms ease-out 100ms;transition:width 300ms ease-out 100ms;background-clip:padding-box;background-color:#fff;background-repeat:no-repeat;border-radius:4px 4px 4px 4px;display:block;opacity:0.6;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:0;position:relative;margin:3px;padding:8px 0 5px 33px} ul.twit_fbpanjang li a:hover{width:75px;opacity:1} ul.twit_fbpanjang li a span{display:block;font-weight:700;vertical-align:baseline} .sosmed-kananblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUZlaAJ29AfRn0ARAxbDmSoRs1rEHNA2v-XRyUMEJHEBxNiN3cTs_KpVFXid0Nnmc2FpJGK5WLsoujp6xfJVAkBhPwp_1PkygnCSTaEWlDev24XvK2WEFOxBZd5LpNBtrixm-DBl34NEV/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;} .sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWzoWmCzqDznYYv7aohAy48hDbtI1eVior-PhJpjIUBdQj3a8m0F9USdX5KH7aB5xlBm6_2ve_tlsIhDKmgm3Fvpv5VamOqhyftwsOdsgjVeBG5evvMq3iqStey5eSL0QeBxsplQ0Gb5kO/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;} .sosmed-isiblogger{margin:0px 0 0 43px} .sosmed-kanantwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEIsRT8zrj4o78z1Jlp5N2mCNC4h8zuUaHabWB14cMQsl0zc10s6qKwvsfYt1mLp_a5C6tyLxR_g2xb65KZbC0qgOsh4zVip7isjYEj5_DAfB8RTUsO5Keueck9yUzz6Ul4F1su_bsTOd_/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;} .sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNE63e7ghpw05vJgHL2VerPik56og8k3Ws2XpX98ptOywAqtcJHhkJ-GpviR2rTZmLdUwp55gyLzziKnCdBTefGi4Qhj5RZDmYh1jpKqwrrhgBlUGb4FL1OJVf40B1ODs780NsbL9Im2v/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;} .sosmed-isitwitter{margin:0px 0 0 43px} .sosmed-kananfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aOZ2MIMdxUl_TVDnmuS7mttbn3-zEyLpap0kwtmiR0JVcbNanP9LAiM3s9HXGI9ZyM7gvvrLexcYyH-aAxkaoBSEchxp4tw3bqCBKQxwRFhSHpYsWjOEdZuNHxLt5BLZjmvk8ajG8zG9/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;} .sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxUH_DDXtn4IQ1yyaaxMJVQWXzQh7zq4V_yreuJFGGjzw8U4D5-KuEE_g4kXCB7Cdprr1kue8De2hvuGlwravqRQZIV_xuxOzCjGQIvd1v4j8fMXbZCpKPSL_tcklrcNkYiWzPNpuVaht/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;} .sosmed-isifacebook{margin:0px 0 0 43px} .sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;} .sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;} .sosmed-isirss{margin:0px 0 0 43px}

You can add this code where ever you want inside the skin tag.

The Result:

See you in another Post on : Free Premium HTML