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.

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/AVvXsEijJQpbrWUrlbWUwbN5SI0AQqYvR4WI5S7kLLHhuq443z360dnswQ4Dg79koYDnIX5ezzjqeLsARNoRtQcHI1esIf-r0YAjXqvsFFjmbWoOLOL8LFE15qk3rgdwzrRnNM4E3M67pwRzcqZd/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/AVvXsEjVSZJIFUFTV4lMObZuRXmUY2tz4Yu-0s_zZJasZEtNz0lXdqWIKlI32cIGyk0ORxeCIvJvVLgyhRQ3EdJ-jXb-rIWdhm6gLgP_iuZzboUv4RKG5HOtdKUvQUS3d5Yke8xKRYV5qCOGiueU/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/AVvXsEgmvT1mehCP-V2uqOgwprvEvSj17_FSPP-qwW1Niqf9zwdPuIzJvDqV2a_W90e4Ac2OT5zPZGgfj84Ia7UrP0lgN8RJtYsqQ5ZISOzdsQjXFWP2e8fSvjdj7M0vv6sLZA_S0hXX4sTcBlAP/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/AVvXsEjlCBWveKS3mtgrgozh-_5UalsnePthn2GWuHYRezC-nmzgwqNoy4SGzbLOV2QJvgA5sFQaFPk3ggP4M7juO9PF1ep2Qx9mi3hNBB7qFSaE8B3kC7yQQEM9PzQDiBn2Uk7LjMLk0DNKy5AX/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/AVvXsEgyuFk__2U71IKCkb_OcAr5Wk-D60N48ZtAGpmT8f9bQ_5Uc1L4YEXFTUXveIm2ADgctnd7UJgADp4gtaeUTsUs86fpnXVkQoXvZ1H6N_YvCY7QHgM5-TLF7pD2TrlQKysv2jzrcs2Ict6u/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/AVvXsEh4d2lo8bdb-CfZu8hE1oHWD-VTW36AeiCr21ME05tAmGHMDs4zZIwpe8KyhX20xmRNM1oIQPUI-kM21pGZnKZ9rPRZOvurkukkIPQ4XTykFGoN_ullPBOzQ-TB59PfXWAzOhxKRxi79Uff/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/AVvXsEiaZv1R6Jw0tFhRRSW8q5muiqFfsYJ6OhoftSniACy0V2yGirpHzhEzMVQ7wYYtVZge1gExLKxcPmtWzk93iWDjRiR8eV_kavy1ffDhjx-MW11OIQ4ZeYaQLeoTfxeunZ0gSxM9rFVMqzYb/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/AVvXsEjXAXPTixzBQNn0K3iC68KbUq-qPpGO9woqRN7mz-N6Tp1OHbQFuMSWQhggtIKVNpx6gY4ofoUSxgMYgU0Rz4ZFrmx-uf0yWwt2kZFIIuK8SvlsdGDfcaHYG2jXDRFMJmyrxOR0UBbugcOr/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/AVvXsEitklf1i38ozsXtDIi-BHsRiqO74LEJoglwuquutqCXtIEKEzbgtttoFzZhm5KaKALpAHCyZEOlMFzpjMRyBW_EglKoeUTS5DaxxCL4SlhyphenhyphenOBOQVcCeLZmdLqtkdzHQamQn1wIbf3nmnqWj/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/AVvXsEiLuMegmO9PJEiNhF7GU16fRC0XYEOwCszR9kjIgKLuYroaP6XAKFSUEvlZ3tJMii7aN545vCaRuIPG3s959-IGQDBR0qy3C2ZKjtSvfaTvB0P_ZQvTu_8qZiTUckF1Kt-RiPKuvcqc6pBc/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

7:36 AM