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
- Go to Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript and past the given code
- Click the Save and refresh your homepage by pressing the F5 or just reload your browser as usual
<style type='text/css'> .widget_social_apps{margin-left:-.5%;margin-right:-.5%} .widget_social_apps:before, .widget_social_apps:after{content:" ";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 .app_social.google{background-color:#dd4b39} .widget_social_apps .app_social.linkedin{background-color:#007bb6} .widget_social_apps .app_social.flickr{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="https://www.facebook.com/username" 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="https://www.twitter.com/username" 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="https://www.pinterest.com/username" 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="https://www.instagram.com/username" 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="https://www.google.com/username" 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="https://www.linkedin.com/username" 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="https://www.flickr.com/username" 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="https://www.vine.com/username" 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>
Customization: Replace the username with you own one.
Speak Your Mind