Add Vertical Floating Social Sharing Widget For Blogger

It is necessary widget for blogger thus that visitor straight tin like the post.today nosotros volition acquire how to add together vertical floating social sharing push clit inwards blog.This is really cool too effective equally it include many sharing button, similar facebook , google plus, linkedin, pintrest too twitter.

Also see:How to add together pivot it push clit on image

Intro to widget

let hold out innovate you lot this widget too its feature.This social sharing widget has beautiful layout demo facebook how many people likes it too count google plus.while moving downwards inwards the page these buttons float vertical.when you lot click on facebook similar push clit or whatever other push clit thus novel popular upward appears too tin similar or percentage if you lot are login otherwise you lot tin position you lot username too password too percentage it.

How to add together social sharing widget inwards blogger

First login to blogger account and acquire to the layout.

Add a Gadget of HTML

Then glue the given slice of code there.

<style type="text/css" > .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* .socialite-instance { display: none; opacity: 0; } .socialite-loaded .socialite-button { display: block; opacity: 1; } .socialite-button iframe { max-width: 100%; max-height: 100%; } */ #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; } #syb-social { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05); -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05); box-shadow: 3px 3px 4px rgba(0, 0, 0, .05); background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none; } #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; } #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4XOwdhVIqYkGEOsXHVGe_dHZx89oSC_ZDTb3ecAsq4qltBm4GGY06XJdINfY16cUlQE7h70GCWpiw9K8SzFqRwo5dPch4hCN2wc9Cvj3kbP4Y1KfWdRYKR5oSpBuvV3pTVEsvqW96cMez/s1600/custom-default.png') 0 0 no-repeat; } #syb-social .socialite-loaded {width: 100px !important; background: none; } #syb-social .twitter-share { background-position: 0 0; } #syb-social .googleplus-one { background-position: 0 -45px; } #syb-social .facebook-like { background-position: 0 -90px; } #syb-social .linkedin-share { background-position: 0 -135px; } #syb-social .pinterest-pinit { background-position: 0 -175px; } </style> <a href=" " alt="Blogger widget" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> <ul id="syb-social" class="cf"> <li > <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank"> <span class="vhidden">Share on Twitter</span></a> </li> <li> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone> </li> <li> <fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like> </li> <li> <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank"> <span class="vhidden">Share on LinkedIn</span> </a> </li> <li> <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal"> <span class="vhidden">Pin It!</span> </a> </li> </ul>

Now salvage it too house the gadget whatever where thus salvage arrangement.Enjoy vertical sidebar floating widget for blogger

Bagikan Artikel ini