Hello dear readers. Then I come to give a gift to your blog and it is a sexy menu, using the technique of animating with CSS3 and tooltip. You can see it works down here.


How to Add this Widget to Blogger ?

  • Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML) 
  • Find  Ctrl   +   F  for the code below

   ]]></b:skin>

  • Just above it paste the following CSS Code. 
}.nav-tt{ padding: 50; width: 70%; height: 70px; margin: 80px auto 30px auto; }.nav-tt li{ float: left; list-style: none;}.nav-tt li a{    display: block;    width: 40px;    height: 40px;    margin: 0 2px;    outline: none; position: relative; z-index: 2;    text-indent: -9000px;    text-decoration: none;}.nav-tt li .gplus{    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqd2skVXQuZDhewm8WzaHWwsLiMTCXz5n-tN-62jQRjBxRipkWlBl_SMGtTdOQ7UCik4FaEC1LfX5YCwsJBwmGKdCMnwvp1yqiGA7GwaY-AQsfOl6pwUTQctCOf-SK48N2m1jQnPoLdvor/s128/google_plus.png) no-repeat;}.nav-tt li .twitter{    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGG8YQ2LiqnE6NkWtmwU9ZYjS6uVEEgqTL8O3D-XmpWoTXojKjUCNJiEFc4ILvZJubvbDAsjYiyD7UZ4pDMBGCC08hKqGiOeTQ06wlVakT2sT3ppO4r77LuUK5c5_VIspvOKcLEAK8Gxed/s128/twitter_1.png) no-repeat;}.nav-tt li .pinterest{    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtzduss15RAgfb6Z0wJvYu9JPq3AJrAzKssAgI1TNyJk89zAGjy3wkb81JUWbSjPO_BZGbLEKRqEwBb3wjvMx6FydcQYIRqd-W6ZKMfNlf2kg88862_Efd5vfUvDTBs7sjpQ2SXEXGp3B/s128/pinterest.png) no-repeat;}.nav-tt li .facebook{    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPNCaz6CrLQZFvqCD88y3Qx7wGjyfKTS32Fhm15J5NQKAUSj4ip8N50U_fZNBD3Fmw0N84IzGpEdMopZxsZ-FqdYcsKs6BvkRnTAbpzVa-XvES394wCOsSUXgWplWNRFY7nz9f4uZROaGr/s128/fb_1.png) no-repeat;}.nav-tt li .linkedin{    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGoHPXI4cRepDQObFhiJ1GKZBdCKykMKBBql0KNY4UTgEHKkyrM_sfokbmgAApq3sI2y3RaWfIbJWgNloFLs7RT3aRx7XskOC3fnXoWWA8FJyPbXzzvclMnVApDpGr2xQQ90SyB1deP8l/s128/linkedin.png)no-repeat;}.nav-tt li .tumblr{    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcREaQfOxkhnxiaFuCF-w9yX4JLZgIEB-PExTreUDfwPloMnmjtYBXmpXsxNJnJHLZ6JKv2zXElFudDKuIoXalxWKicnX4iR6fcBF7kDOM2LN_WQWaSKlKM4mjDLOsp2NHUKmrGsyq2oHf/s128/tumblr.png) no-repeat;}.nav-tt li .youtube{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mcw5bc88RALOIBNxf3WbQ-KCrW2NVDIkO4FLqm1YE4HpvWAutsYuZ_7en9teDWx3p0Z6n4unIdJGHYO045k8yyQibiAyxc85PUV0UAHwwQgZCbeg4sSD_FgxKbSeXehL_HZJiFm4h4Ah/s128/you_tube.png) no-repeat;}.nav-tt li .mail{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk2dgD2WpOSTOcxj-Eg-5KHRA2MOnf9ivDIqes2tXtY5g8Rr4Xv0jmfnkD1_3siBSf5Qhm0pFbbHN67WEZUzz9dFE3EG6I77fMMsZZrZqXUsMOWJ14hFFf2XnUE6RRKNKuRNmtH92KnJj9/s32/email.png) no-repeat;}.nav-tt li .rss{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvOYFwtEXZ4_iYCkAd3mH2yaUH1qjWIqDA3KEqus7bKe1_MdGL2cCeIC_LrO18-UAOhKkC58ptPfALRzmpibm3jfnNZ1lRvrKvtbL4P1ddzrmkRJTy2JIsd-dW1bFxuem9hy25H4a28QKG/s128/rss.png) no-repeat;}.nav-tt li a span{ width: 80px; height: 80px; line-height: 80px; padding: 10px; left: 50%; margin-left: -60px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400;  font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 5px solid #ffffff; background: rgba(255,255,255,0.5); text-indent: 0px; position: absolute; pointer-events: none; border-radius: 50%; bottom: -40px; opacity: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }.nav-tt li a span:before,.nav-tt li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 11px solid rgba(0,0,0,0.1);}.nav-tt li a span:after{ bottom: -13px; margin-left: -10px; border-top: 10px solid #ffffff;}.nav-tt li a:hover span{ opacity: 0.9; bottom: 50px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} 

  • Now another Part is add HTML Code where you want to show this button in your blog. You Can put also in Widget or in Templates.
  • Now go to Blogger Dashboard > Layout
  • Click on Add a Gadget (below header)
  • Select HTML/JavaScript
  • Copy below code and paste inside it.
<ul class="nav-tt">
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
</ul>
  • Now Replace # with your Social id.
  • Save it
I hope you like this beautiful social widget for blogger, If you still have any problem please share it by using a comment, Thanks.

Read Also: effects option on tooltip button style 2


      Home Blogger Blogger Widgets Button Social Media Blog