How to add social media button in blogger?
Follow below steps for add social media follow button in your blog.Sign in – in your blogger account
Select your Blog in which blog you want add social media follow button.
Go to Layout Option.
In Layout option there is an Add Gadget Option Select this (see below demo image)
After select Add Gadget a popup window will be open (Add Gadget window)
Now select “HTML/JavaScript” Gadget. (See below demo image)
Now add below given JavaScript in Content Box. (See below demo image)
Copy below code and past in HTML/JavaScript Content box
|
<style>p#abt_socialicons img {
-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } p#abt_socialicons img:hover { -moz-transform: rotate(160deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } </style> <center><p id="abt_socialicons"> <a href="http://www.facebook.com/allbloggertips"target="blank"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fTG-GkAZ5r-Vbm7vkzhKeh5xMwgcyqRc3iGR6Exeb5-C8atONpE1bewvDLq1hG1nuNu0cHd6JYO36alKeQbFkFrETcRfqB4_BfB041OqHeTi2rryQlOtWssl4aUzs2Y18gic1ZLERx8/s64-no/Facebook+jagged+edge.png"></a> <a href="http://www.twitter.com/allbloggertips"target="blank"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIFqPKutx-RTFfSY4JUpkSXL48gOjWv8tzDyeZOsVp9TXb4chxYFRSWXT4Zqd0n5BEPI-PGzq1w3i4wk6IDejnBoIgtPknPmeJSYJuv08A3rTjKXRZNKC5w-63sq50JpK7-qFMNU5f0oQ/s64-no/jagged+twitter.png"></a> <a href="https://plus.google.com/113485845055897195092/posts"target="blank"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv-pbzjYZLXlnWFoyFQW8YMxLdZigwOtH4-JCTXMob8dvFgCIl71N5fppd8E32E6wTRS9avuofD1L9Fl4LHOoVW5vr70FvnnFOTjHoicrYoTJtgj_kqcOTXbAIsJVpTxmenSU1U_RtW8/s64-no/google+plus+jagged+edge.png"></a> <a href="http://pinterest.com/allbloggertips/"target="blank"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSRAh04Jlvj9xUDNHXWvCYuvGYseTFEjYR3Gihihd7G3DifASosm-8983vbAp87ySWPGXBjR5xkhBZHycc6p0PrIj54CK971HtSbBkwFXbDO-acJqcuNzhkPria-8X_OxOuTn2QYKrq4/s64-no/pinterest+jagged+edge.png"></a> <a href="http://www.allbloggertips.com/feeds/posts/default"target="blank"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcO45lQTJjXm3QIxPDUoeJJoiwngjnZ6yA14ysfXVckhLHMdEFaQFFe3rboVMxH0Uc6eIjjcxWfPkfHlbScSut7q2fnr7kAEabBzxrbiAGlyF_KLsJoFSjz7eBZhyphenhyphen5JJhG1UGr1YYHjs/s64-no/RSS+jagged+edge.png"></a> </p></center> <small><div style="font-size:50%; text-align:right;"><a href="http://www.allbloggertips.com/2013/06/social-media-follow-me-buttons-for.html" target="_blank" title="Get This Widgets">Widget by ABT</a></div></small> |
http://www.facebook.com/allbloggertips
https://plus.google.com/113485845055897195092/posts
https://www.twitter.com/allbloggertips
http://pinterest.com/allbloggertips
http://www.allbloggertips.com/feeds/posts/default
Note:- Please Replace highlight part of Code with you page ID.
copy above code and modify with your page id's and past in "HTML/JavaScript" content box and save your widget.
Drag this widget for arrange the place of this widget in layout page.
Thanks I hope you like this post
