In this tutorial im gonna explain how to add Fixed social media
bar for blogger. By using this social media sidebar you can link
your social media profile Facebook, Twitter Google plus and Rss feed.
Check the demo from below link. If you want to look at other social
media bar.
How to Add Social Media bar for Blogger
1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
4. Paste below code.
<style> .fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyZZkB6o8twmQ0DdfvKfpIJJWhXc2t_En-NJu19lUR2DQWbyuBitJKMr2OHCt0HVKFcqzZzOedkFrGLJhu6Kq8i4FjBOjKjp3aMAnJnBBHFJweaxQfaH3wgh_mEapjKhKDShexwKXI-k/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;} .fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiHEVI_jCtGfeW8u_GDzIoLG5TYob_dNtKD_gCoUhzhO9346F0B_Zmah7ey48s7M25MKOUr6DMTT5MgbzQIMvpfrZgbsaEwph4tuGvakbXoLbt1iRO6yW9Z5mMpBmdd3oS669SVnaAqs/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;} .fixedmenu_1{margin:0px 0 0 43px} .fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4ETCuaKAzXfOTBC5DkbtqgfEH8-UFSAEAFMDDQ5j1h1yT3-xSzRe686Q-xpspK1RFXLyxk-MdUsssQfydFk-6yJm3P-6DkGUhCa15NpVuPPhvSzKewq0i1GheGEmFlQ3SB75NHlzeSA/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;} .fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMH-VhTyhL7_0uF68GTALU5GIxwFFQJu0VfaHBdX_-QgH1bvk5pAsHW7a86mFOC1icD4v3XioSskN0Ycx7RtKAZhX4seR3_JLhITxwDzY71a4Nfvm8FR0REQ0lXubma_upBHdx7YCWTUE/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;} .fixedmenutw_1{margin:0px 0 0 43px} .fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguM9_1XNebKiq5Irb93ql80VoBo3wQf95WG_fKjCnfdHIaHZCM_3na-TbEqgwXwUFLg1kvMjBvzRY6bVzWwyEmIFQNmJIiLrikHqnpKOv2oA9L01ooRJ74lU9L8CgQlWBk-x_NI8LqFlQ/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;} .fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUQprCwE0rWpwaK9FwDIjlW7Xc0EAnUll6L2DOlkI-CM2XBMmI32t90jXk7M1SWEM2jKsCMarj2Exj7xOif3m8mjmbVxc3xnq960cxTofGl6hujkqIFeVbFhXtDqXY_XHX5kP3Eda96k/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;} .fixedmenufb_1{margin:0px 0 0 43px} .fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4VbK-zXRqe04GghKpNECFtQ1ZcYTepmKW1oUSCCpq47O0VTkdTwdxBdq8Lg40NCeNo8xCBoxY6qRzKUgp55S74wmYPREYnWE2MhN4GlokuTZKOX-go7J1VOJLgGZC6uzASXOaoFP8NQ/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;} .fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7tsLR_NFE3CMwwadHuSa-NEnZL-qXOpA-ehOF9W4lZZF8GQKGqfKldeCKqEtGQdvVjgcm5VX7egxtM6rYBfHEVxNKMXg4wQMKBKDPEu7r1vba34hv-qnLpc1sa6WKodf8GszJg8kg_8/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;} .fixedmenurss_1{margin:0px 0 0 43px} </style> <div class='fixedmenu' onmouseout='this.className='fixedmenu'' onmouseover='this.className='fixedmenu1''><div class='fixedmenu_1'> <a href='https://www.facebook.com/bloggertrix' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhegOnm7z_JPnt2L3nTtvbNpFAIfs9psjQydx0tRjHijR7BAPwjmzd6tpjQg6VncrrOIDDI0TVthnm2ez2WWnFiB7ub3WzbK9broQkIxW3D-eo9dpD8Ad4A1PoJISOjNrEzaWlOcF76nxE/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/> </div></div><div class='fixedmenutw' onmouseout='this.className='fixedmenutw'' onmouseover='this.className='fixedmenutw1''><div class='fixedmenutw_1'> <a href='https://twitter.com/bloggertrix' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4rtXV1P8fL62aOgR_4nz0HnDyQCx2egkCDEH4RvbY7NZFsz6wCfv6UQ-8x5_BimSlG8z4D9E60LVMkoRRa4jyE80tttBhM6jDzoBh16mfGe50vR93gorYv0AXruJsVOzKyxX2zVs7t0/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/> </div></div><div class='fixedmenufb' onmouseout='this.className='fixedmenufb'' onmouseover='this.className='fixedmenufb1''><div class='fixedmenufb_1'> <a href='https://plus.google.com/ID' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1JxnWCOmSrooNnNg9sMyiHRoUxUZaGo0kwqFIAoFVNnFduBrID9rlotJYEeqC1m9t2tZnqLeV7xuT47ecPWi8QdGjtS_I-G8ZakF9Yu5jAmIgw7n8Gaf8JCGUUvRKnMssqmmfQvJ-K0/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/> </div></div><div class='fixedmenurss' onmouseout='this.className='fixedmenurss'' onmouseover='this.className='fixedmenurss1''><div class='fixedmenurss_1'> <a href='http://feeds.feedburner.com/bloggertrix target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0AQt0OZEc3Q6fsCBJFTMgBg3HxuyNCVhBrOLElG4f9UXJahfEDzarqOC5hGTlCzP4iP2u7f6VNidCtEA8PAsZsJW2OYricUv5Jt9QpXbJyYj6kU9k-OfW0NKXYsGNS1Mc-gYRf8vuPQ/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/> </div></div>
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace ID with your Google plus ID
Replace bloggertrix with your Feedburner ID
5. Now save your HTML/Javascript'.
You are done...
If you have any problems regarding social media bar.Leave a comment.I will help.
Thank you very much. Appreciate your sharing. I would like to know how to add "paste below box" code on my wordpress blog and blogger.
ReplyDeleteThanks for the code! Looks great! How do I move it to the left side of the blog now?
ReplyDelete