Barra de Compartilhamento Semelhante a do Nexus - Exclusivo

Neste poste venho compartilhar aqui com vocês uma novidade; Venho compartilhar aqui com vocês está excelente barra com redes sociais. O design desta barra lembra muito a barra do Nexus e do Rocketdock.  E ela também possui um efeito zoom ao passar o mouse. Enfim.

                                                           Seguir @DicashotBlogger

Essa barra vai fazer com que você consiga que os usuários do seu blog compartilhe sempre o seu blog, pois, ela ficará em destaque no blog. 

Agora, para adicionar o estilo CSS, procure pela tag ]]></b:skin> e logo acima dela cole o seguinte código:

/*---Dicashot.blogspot.com Like To Enter Advance Traffic POP ---*/ div.cap { display: block; height: 100px; width: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNR95FaSCItjbYogIJw4HyuCVG5B1XawER7tvzxVnaajcG5VM6rY_J2UYWbXDbgDnUolsoXkOZs3Py26fbhmOC0o2uWhNXpdmVcR6wDwjO9I1-GAuwPwV46jJi792CvVsSPjAuJlRBp-0/s1600/dock-background-left.png)bottom left no-repeat; } div.cap.left { position: absolute; bottom: 0px; left: 0px; } div.cap.right { background-position: right bottom; position: absolute; top: 0px; right: 0px; } ul.mbl-dock { display: inline-block; height: 130px; padding: 0 40px 0 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNR95FaSCItjbYogIJw4HyuCVG5B1XawER7tvzxVnaajcG5VM6rY_J2UYWbXDbgDnUolsoXkOZs3Py26fbhmOC0o2uWhNXpdmVcR6wDwjO9I1-GAuwPwV46jJi792CvVsSPjAuJlRBp-0/s1600/dock-background-left.png) no-repeat right bottom; overflow: hidden; margin: 0 0 0 40px; } ul.mbl-dock li { display: block; position: relative; float: left; width: 50px; height: 50px; margin: 60px 0 4px 0; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; text-align: center; } ul.mbl-dock li a { display: block; height: 50px; padding: 0 1px; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; margin: 0; -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));} ul.mbl-dock li a img { width: 48px; } ul.mbl-dock li:hover { margin-left: 9px; margin-right: 9px;} ul.mbl-dock li:hover a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.5);} ul.mbl-dock li.nearby { margin-left: 6px; margin-right: 6px; z-index: 100;} ul.mbl-dock li.nearby a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.25);} ul.mbl-dock li span { background:#fff; position: absolute; bottom: 80px; margin: 0 auto; display: none; width: auto; font-family:arial; font-size: 11px; font-weight: bold; padding: 3px 6px; -webkit-border-radius: 6px; color: #000; } ul.mbl-dock li:hover span { display: block; } div#mbldockwraps { position: fixed; bottom: 12px; height: 120px; padding: 50px 0 0; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; } div#macWrap { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }

Agora, dentro do blogger busque pela tag </head> e uma vez que você encontrá-lo, logo acima dele cole o seguinte código Javascript:


<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script> <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.tipsy.js"></script> <script type="text/javascript"> // Place all Javascript code here $(document).ready(function(){ $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"}); $("ul.mbl-dock li").each(function (type) { $(this).hover(function () { $(this).prev("li").addClass("nearby"); $(this).next("li").addClass("nearby"); }, function () { $(this).prev("li").removeClass("nearby"); $(this).next("li").removeClass("nearby"); }); }); }); </script>

Agora, por último, mas não menos importante procure por </body> e acima dele cole o seguinte código HTML:

<div id="mbldockwraps"> <div id="macWrap"> <div class="cap left"> </div> <ul class="mbl-dock"> <li class="active"><br /> <span>Home</span><br /> <a href="http://www.mybloggerlab.com/"><img src="http://www.veryicon.com/icon/png/System/Iconfinder/Home%20Black.png" /></a><br /> </li> <li><br /> <br /> <span>Contact</span><br /> <a href="http://contact.mybloggerlab.com"><img src="http://www.labourdaychinookclassic.com/images/126647-simple-black-square-icon-business-envelope5.png" /></a><br /> </li> <li><br /> <span>About</span><br /> <a href="http://www.mybloggerlab.com/2012/05/some-thing-about-author-syed-faizan-ali.html"><img src="http://www.ikubeinsurance.com/admin/content/files/homepagePromos/blackBox372x400.png" /></a><br /> </li> <li><br /> <br /> <span>Search</span><br /> <a href="http://www.mybloggerlab.com/p/search-engine.html"><img src="https://cdn1.iconfinder.com/data/icons/IconFinder%201/Png/256/Search/Search%20Black.png" /></a><br /> </li> <li><br /> <br /> <span>Feeds</span><br /> <a href="http://feeds.feedburner.com/mybloggerlab"><img src="http://progressiveexmormon.files.wordpress.com/2011/04/icon_rss_black.png" /></a><br /> </li> <li><br /> <span>Blogger</span><br /> <a href="http://www.blogger.com/profile/04420446464276156950"><img src="http://www.erguntercansalon.com/127673-simple-black-square-icon-social-media-logos-blogger.png" /></a><br /> </li> <li><br /> <span>PAGE</span><br /> <a href="http://www.facebook.com/mybloggerlab"><img src="http://versosemgotas.files.wordpress.com/2011/04/facebook-logo-webtreatsetc.png" /></a><br /> </li> <li><br /> <span>Twitter</span><br /> <a href="https://twitter.com/mybloggerlab"><img src="http://baseball_bloggers.webs.com/csc_black_twitter001.png" /></a><br /> </li> <li><br /> <span>Pin IT</span><br /> <a href="http://pinterest.com/fosterzone/"><img src="http://www.iconsdb.com/icons/download/black/pinterest-5-256.gif" /></a><br /> </li> <li><br /> <span>Google</span><br /> <a href="https://plus.google.com/u/0/106374439082237286396"><img src="http://www.iconsdb.com/icons/preview/black/google-plus-5-xxl.png" /></a><br /> </li> </ul> </div> </div>

Tendo feito isto está pronto!!!