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/AVvXsEgdh8-mtBwQLfwD09lW2cIPnuw_eO7rtsn0IOCgRUqJqr3WtvNzS-qWezOisPGozAqxNcZDnYoY4D8N9RA9HZx-ptcH4mXibykJyO4yUzNjBh9NHvdD4Wr1MesOKsV6e8o8Gi0ASZPYeb6S/s128/google_plus.png) no-repeat;}.nav-tt li .twitter{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCFKFMSoqdmX9WJxEcaQYvJEtTc_74_-4pUmUNffbsmxUCbDDpM-aYY8pEnLnzb2VUb0Og0g3aXnLdynHiI6iNTBfJDHLe3pSNvC1ll8dx8M_b3pyJ5V7ePo02q-vkBwk9XfLE_rx5jN8/s128/twitter_1.png) no-repeat;}.nav-tt li .pinterest{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHmkpqSGJGp7k6ktQrrbLnXOFRcqY7GpLebEdiUwOwW9zpbzNXmW4ooY3zBJ-48EU2SpOCkyIoPxYoLkOSgIQa0WM9dLMO_hexd0mTVRXTwmh5eS4Du3gzvRap0Jp9bolbi7dT2x1UFSIK/s128/pinterest.png) no-repeat;}.nav-tt li .facebook{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6gkIMGJDdsTpfKhpHD7ftU4p4pS8V9jzdmsOcEdqxywLY_KWyUxIi3Gfi5rfWHSThBtXOh6pNtJUIbB4pZQ9Mw-sYc027GWS_f22hdYIF0FLeubG7oRhb42C1iMdPLRjwMSMrPO7P3l_g/s128/fb_1.png) no-repeat;}.nav-tt li .linkedin{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVba-XxguWm-ZgYc_m8M_MApFOhCfx5Y2Bl6ykD3Frs8yTTjRaqxj6j3ydVDp058WyVv0fW2MxwLh1Ms-3Qn6PX2I1iee4pbamoXbSzuxKsq_cvDczr3iEgqJTzhFgcgnAb-4pIevkB01n/s128/linkedin.png)no-repeat;}.nav-tt li .tumblr{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChRUnKfk7Vp7lbgSLR5YuG-70kaq2DZtfS-KwvOQPa__g6N4QN9B8gL3rN7jUXt95PYj6ODExaovUhfxKLWWHvBCWMLTT0H0dCRhw6sLuH1pbuyT77HuWve4_ECxGWX31bhwMfl5nLcHv/s128/tumblr.png) no-repeat;}.nav-tt li .youtube{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eXq5MoUcE6Y48J_2P1fUVuu5uhHBm5JmvDo1XSi5lUZdH5XilXChfc2Jw690pM6eXOc5aixOhZM-RpglWRUgYg5FZoOYoTpFvkowz18Me9RkGd_ysuWBBl1PBGcve40tMOgjUCxZL8Fe/s128/you_tube.png) no-repeat;}.nav-tt li .mail{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3HfvBowOwaL8JQg0x7BoJlErHkX5kJ7uK8sqs8KLN9o7oI13jEJYHDJkXDEgwL4wXUNzHKwDtTAmFv8sjqAOlfBAmELiai4YCrWZO2lB_aEFaxRgD-F_dkmw29mp4yLUKKn4_ofhVphN/s32/email.png) no-repeat;}.nav-tt li .rss{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_iwyw-Xly1ozGqygfEJ-l8_Qh-mrPoHpOTqkA3quJOjUeu96o3_ja9S901wQMwC7myPMIELFWj8xLno8vRHT4t0gjwnZRivSg30DRhkPegwxKyi74CjGyURuonJe4KGaUbGtzenEFfjQ/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.
0 comments:
Post a Comment