Thursday, 9 June 2016

Adding Social Media Widget to Blogger with Count-Numbers

Add Social Media Icons To Your Blogger With Count-Numbers

Social media is one of the key ways to gain exposure for your blog- and to connect with others. One of the easiest ways to do this is to ensure there are social media icons on your blog. Today, I will show you how to add social media icons to your blogger with count-numbers. This widget is really a beautiful and yet important part of a blogger.

Check out: Vicomi Feedback: Reaction Buttons for BlogSpot Blogs

Many blog designers will create custom icons to go with your blog if you order their services. You can find some adorable designs that are very affordable. However, if you are trying to be more thrifty when you are beginning blogging you can find FREE social media icons freely available on the internet. But here, you will find the cool social media icons with count-numbers.

Read Also: 20 Social Media Brand Color Codes for Blogger | WordPress

How To Add Social Media Icons To Your Blogger With Count-Numbers

  1. Go to Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript and past the given code
  2. <style type='text/css'> .widget_social_apps{margin-left:-.5%;margin-right:-.5%} .widget_social_apps:before, .widget_social_apps:after{content:&quot; &quot;;display:table} .widget_social_apps:after{clear:both} .widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s} .widget_social_apps .app_social.facebook{background-color:#3e64ad} .widget_social_apps .app_social.twitter{background-color:#58ccff} .widget_social_apps .app_social.pinterest{background-color:#de010d} .widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps{background-color:#dd4b39} .widget_social_apps .app_social.linkedin{background-color:#007bb6} .widget_social_apps{background-color:#ff0084} .widget_social_apps .app_social.vine{background-color:#00bf8f} .widget_social_apps .app_social:hover{background-color:#111} .widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px} .widget_social_apps .app_social span{display:block} .widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px} .widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px;font-size:13px;} .widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px} </style> <div class="widget_social_apps"> <div class="app_social facebook"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-facebook"></i></span> <span class="app_count">7845</span>  <span class="app_type">Fans</span> </a> </div> <div class="app_social twitter"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-twitter"></i></span> <span class="app_count">32</span> <span class="app_type">Followers</span></a> </div> <div class="app_social pinterest"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-pinterest"></i></span> <span class="app_count">4774</span> <span class="app_type">People</span> </a> </div> <div class="app_social instagram"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-instagram"></i></span> <span class="app_count">65684</span> <span class="app_type">Followers</span> </a> </div> <div class="app_social google"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-google-plus"></i></span> <span class="app_count">65684</span> <span class="app_type">People</span> </a> </div> <div class="app_social linkedin"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-linkedin"></i></span> <span class="app_count">65684</span> <span class="app_type">Fans</span> </a> </div> <div class="app_social flickr"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-flickr"></i></span> <span class="app_count">44</span> <span class="app_type">Followers</span></a> </div> <div class="app_social vine"> <a href="" target="_blank"><span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span><span class="app_type">People</span> </a> </div> </div>
  3. Click the Save and refresh your homepage by pressing the F5 or just reload your browser as usual

Customization: Replace the username with you own one.

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.

Speak Your Mind