How To Add Flat Social Media Widgets In Blogger
The most exclusive and reliable way to promote your blog is social media and when we are talking about social media promotion it means that it will not be a penny for you. These days social media is helping new and old bloggers to promote their blog so as to attract more and more viewers. Our promotion method is also similar, and when talking about social media promotions it needs to establish the quality of the widgets so that every single visitor to your blog can easily interact with you and your blog.
So our first widget for blogger came "Flat Social Media Widget in Blogger", you can easily find such widget in blogger area and also it is not a unique one, but it is super fast in its categories, it's in seconds. Loads. There is the hover effect which is supported by a very simple but effective CSS coding. First see its live demo below.
Add Widget
The first thing you need to do is log into your Blogger account and click on >> Layout >> Add any gadget to your layout >> Add HTML / JAVASCRIPT Widget and in the spaces below Paste the code.
<style>.aboutme-wrpicon {display: block;margin: 10px auto 10px auto;position: relative;}.aboutme-wrpicon .extender {width: 100%;display: block;}.extender {text-align: center;font-size: 16px;}.extender .aboutme-icon {background: #4573cc;display: inline-block;border: 0;margin: 0;padding: 0;border-radius: 3px;}.extender .aboutme-icon:hover {background: rgba(0,0,0,.06);}.extender .aboutme-icon:hover a {color:#4573cc;}.extender .aboutme-icon a {display: inline-block;font-family: fontawesome;font-weight: 400;color: #fff;height: 42px;width: 42px;line-height: 42px;border-radius: 3px;}#Templatesyard-sbox-v2 {padding: 0;font-family: inherit;display: block;margin: 0;border-radius: 1px;border:1px solid #4573cc;background:#fff;}#Templatesyard-sbox-v2 p {font-size: 15px;color: #000;line-height: 27px;padding: 5px 10px 5px;text-align: center;width: 80%;margin: 5px auto 20px;border-bottom: 2px solid #ebebeb;border-radius: 20px;}#Templatesyard-sbox-v2 .rssform {padding: 0;margin: 0 auto;display: block;}#Templatesyard-sbox-v2 .rssform input {padding: 8px;margin: 20px auto 15px;font-size: 13px;color: #000;text-align: center;display: block;font-family: inherit;font-weight: normal;width: 90%;height: 38px;text-transform: uppercase;outline: none !important;border: 1px solid #ebebeb;border-radius: 1px;background-color: #FCFCFC;box-sizing: border-box !important;}#Templatesyard-sbox-v2 .rssform .button:hover {opacity: 0.7;-moz-opacity: 0.7;-webkit-opacity: 0.7;}#Templatesyard-sbox-v2 .rssform .button {background: #4573cc;color: white!important;margin-top: 15px;outline: none !important;transition: all .3s ease-in-out;padding: 5px 2px !important;float: none;text-transform: uppercase;font-size: 18px;font-weight: normal;cursor: pointer;}#pkmakemoneypksbox-v2 form {margin-bottom: 10px !important;}</style><div id='pkmakemoneypk-sbox-v2'><p>How To Add Flat Social Media Widgets In Blogger in Simple Steps!</p><div class='rssform'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=SoraBloggingTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='email' placeholder='Enter your email address...' type='text' vk_15737='subscribed'/><input name='uri' type='hidden' value='pk make money pk/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='Subscribe'/></form></div></div><div class='aboutme-wrpicon'><ul class='extender'><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a></li><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a></li><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='GitHub'><i class='fa fa-github'></i></a></li><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a></li><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest-p'></i></a></li><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'></i></a></li><li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'></i></a></li></ul></div>
Replace the highlighted red text with your social profile URL, replace the highlighted yellow text with your FeedBurner ID. And if your blog already has fontvoted, remove the blue highlighted code.
The conclusion
Congratulations !! You made it Now you know how to add flat social media widgets to Blogger. Go to your blog and see the awesome widget live, hope you liked this tutorial, if you enjoyed it please share it with your friends, we are working hard to develop such awesome widgets Yes, please stay with us.
0 Comments