How To Add Flat Social Media Widget In Blogger

The most special and trusted way to promote your blog is social media and when we are talking about social media promotion the it means it will not worth you a single penny.In these days social media is helping the new and old bloggers to promote their blog so that more and more visitors will get attracted.Our promotion method is also same, and when are talking about social media promotion the it need to install a quality of widgets so that every single visitor of your blog could easily interact with you and your blog so came with our first widget for blogger “Flat Social Media Widget In Blogger” you could easily found these kind of widgets in blogger sphere and this is also not a unique one but it is super fast in its categories,it loads in seconds cause it has the hover effect which is supported by a very simple but effective css coding. First check out its live demo Below.

Get All The Latest Updates Delivered Straight Into Your Inbox For Free!

Adding The Widget 

The First thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget any where into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space.

<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;
}

#Templatesyard-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id=’Templatesyard-sbox-v2′>
<p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
<div class=’rssform’>
<form action=’https://ift.tt/1lAEk4W; method=’post’ onsubmit=’window.open(&#39;https://ift.tt/19kRkrVSoraBloggingTips&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true’ target=’popupwindow’>
<input name=’email’ placeholder=’Enter your email address…’ type=’text’ vk_15737=’subscribed’/>
<input name=’uri’ type=’hidden’ value=’SoraBloggingTips‘/>
<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>
<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>

Change the highlighted red text with your social profile url, change the highlighted yellow text with your feedburner id. and if you already have fontawesome in your blog then remove blue highlighted code. 

Conclusion

Congrats !! You have made it. now you have learned that How To Add Flat Social Media Widget In Blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us.