Live demo
How to add this widget
- Log in to blogger account and Click drop down. blog-post-option
- Now select "Template" Like Below.
- Select-template
- Now you can see Live on blog, Click EDIT HTML Button"
- Now click Proceed button.
- Find this tag by using Ctrl+F ]]></b:skin>
- Paste below code Before ]]></b:skin> tag
/*---bloggertrix.com Animated Social Widget ---*/.bt-wrapper{ padding: 0; width: 535px; height: 70px; margin: 80px auto 30px auto;}.bt-wrapper ul{ float: left;margin-left: -45px;}.bt-wrapper ul a{ display: block; width: 68px; height: 110px; margin: -10 -24 px; outline: none; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSyZFHwmKURKubEZDc15LmE2rV7ALmOzcQfqp9ceK2A_2RJq183W94qdTf5tYzIqfqT4VVh9eChn8NRg2QGmtyG7Nz2E0NNRKpQzHd4c6EDPdCNvRC0VutYJ2cDx5atSu7T9Z5aH3wK4/s1600/bloggertrix+-.png) no-repeat top left; text-indent: -9000px; position: relative;}.bt-wrapper ul .bt-gplus{ background-position: 0px 0px;}.bt-wrapper ul .bt-twitter{ background-position: -68px 0px;}.bt-wrapper ul .bt-pinterest{ background-position: -136px 0px;}.bt-wrapper ul .bt-facebook{ background-position: -204px 0px;}.bt-wrapper ul .bt-linkedin{ background-position: -272px 0px;}.bt-wrapper ul .bt-rss{ background-position: -340px 0px;}.bt-wrapper ul a span{margin-bottom: 50px; width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: Shanti, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; color: #2f6986; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #2f6986; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -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;}.bt-wrapper ul a span:before,.bt-wrapper ul a span:after{margin-top:20px; 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: 10px solid rgba(0,0,0,0.1);}.bt-wrapper ul a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #2f6986;}.bt-wrapper ul a:hover span{ opacity: 0.9; bottom: 70px;}
- Go to blogger and click Layout
- Click Add Gadget and select 'HTML/Javascript
- Paste below code.
<div class="bt-wrapper"> <ul><a class="bt-gplus " href="https://plus.google.com/107955298793879607964"><span>Google Plus</span></a></ul> <ul><a class="bt-twitter" href="http://twitthis.com/twit?url=http://www.bloggertrix.com"><span>Twitter</span></a></ul> <ul><a class="bt-pinterest" href="http://pinterest.com/bloggertrix/"><span>Pinterest</span></a></ul> <ul><a class="bt-facebook" href="http://www.facebook.com/sharer.php?u=http://www.bloggertrix.com"><span>Facebook</span></a></ul> <ul><a class="bt-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul> <ul><a class="bt-rss" href="http://feeds.feedburner.com/bloggertrix"><span>Feeds</span></a></ul> </div>
- Replace with your site and usernames
- Now save your HTML/Javascript'.
You are done...
EmoticonEmoticon