Social media helps the Blog owner to grow their Blog traffic indirectly. You won’t able to reach with your publish content towards maximum number of people. But If you share your content on various social media site then this will help you to increase your Blog traffic from social media.
This is known by almost all Blogger. Whenever we share any content in social media
site like Facebook, Twitter etc then instantly
social media site send the content on their news feed and send a notification
to its page Fans and followers. As a result there has a chance to visit read
your content through social media site.
Now a day’s social media sites are helping to grow a Blog
site from foundation to peak. So we must use social media site to grow our own
Blog. However for our existing Blog visitors we should add some social media
widget thus they can get connect with it.
However this is not possible to add all social media fan box
or widget in a Blog because it will affect the Blog loading time. In this case
we can use this social counter widget which will take small space on your Blog
and you will able to display maximum number of your Blog’s social media site links
in one place.
The base design of this widget come from WordPress social
counter plugin. However I just modified it for Blogger platform users. You can
see the demo from below image.
To install this cool widget please follow the below
steps-
Step 1 Log in to your Blogger account and Go to
your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML
Step 3 Locate the <head> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 Paste the Font Awesome stylesheet After/Below <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 5 Again Locate
the]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F
Step 6 Paste the below CSS script Font Awesome Before/Above ]]></b:skin>
/* Social Media with counter by www.bloggerspice.com */
.list-unstyled {
padding-left: 0;
list-style: none;
margin: 2px
}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px
}
.bs-colored-social .fa,
.bs-social-icons .fa {
font-size: 16px
}
.bs-colored-social .fa,
.bs-social-icons .fa {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out
}
.bs-colored-social .fa,
.bs-social-icons .fa {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8)
}
.bs-colored-social.icon-circle .fa,
.bs-social-icons.icon-circle .fa {
border-radius: 50%
}
.bs-colored-social.icon-rounded .fa,
.bs-social-icons.icon-rounded .fa {
border-radius: 2px
}
.bs-colored-social.icon-flat .fa,
.bs-social-icons.icon-flat .fa {
border-radius: 0
}
.bs-colored-social .fa:hover,
.bs-colored-social .fa:active,
.bs-social-icons .fa:hover,
.bs-social-icons .fa:active {
color: #FFF
}
.bs-colored-social.icon-zoom .fa:hover,
.bs-colored-social.icon-zoom .fa:active,
.bs-social-icons.icon-zoom .fa:hover,
.bs-social-icons.icon-zoom .fa:active,
.bs-social-sidebar li:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1)
}
.bs-colored-social.icon-rotate .fa:hover,
.bs-colored-social.icon-rotate .fa:active,
.bs-social-icons.icon-rotate .fa:hover,
.bs-social-icons.icon-rotate .fa:active {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg)
}
.bs-colored-social .fa-dribbble,
.bs-social-icons .fa-dribbble:hover,
.bs-socialicons .bs-dribbble:hover .bs-sicon {
background-color: #F46899
}
.bs-colored-social .fa-stumbleupon,
.bs-social-icons .fa-stumbleupon:hover,
.bs-socialicons .bs-stumbleupon:hover .bs-sicon {
background-color: #eb4924
}
.bs-colored-social .fa-reddit,
.bs-social-icons .fa-reddit:hover {
background-color: #5f99cf
}
.bs-colored-social .fa-facebook,
.bs-social-icons .fa-facebook:hover,
.bs-socialicons .bs-facebook:hover .bs-sicon {
background-color: #3C599F
}
.bs-colored-social .fa-rss,
.bs-social-icons .fa-rss:hover,
.bs-socialicons .bs-rss:hover .bs-sicon {
background-color: #f26522
}
.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover,
.bs-socialicons .bs-flickr:hover .bs-sicon {
background-color: #d51007
}
.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover {
background-color: #FF0084
}
.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover,
.bs-socialicons .bs-instagram:hover .bs-sicon {
background-color: #685243
}
.bs-colored-social .fa-foursquare,
.bs-social-icons .fa-foursquare:hover,
.bs-socialicons .bs-foursquare:hover .bs-sicon {
background-color: #0086BE
}
.bs-colored-social .fa-github,
.bs-social-icons .fa-github:hover,
.bs-socialicons .bs-github:hover .bs-sicon {
background-color: #070709
}
.bs-colored-social .fa-google-plus,
.bs-social-icons .fa-google-plus:hover,
.bs-socialicons .bs-googleplus:hover .bs-sicon {
background-color: #CF3D2E
}
.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover {
background-color: #A1755C
}
.bs-colored-social .fa-linkedin,
.bs-social-icons .fa-linkedin:hover,
.bs-socialicons .bs-linkedin:hover .bs-sicon {
background-color: #0085AE
}
.bs-colored-social .fa-pinterest,
.bs-social-icons .fa-pinterest:hover,
.bs-socialicons .bs-pinterest:hover .bs-sicon {
background-color: #CC2127
}
.bs-colored-social .fa-twitter,
.bs-social-icons .fa-twitter:hover,
.bs-socialicons .bs-twitter:hover .bs-sicon {
background-color: #32CCFE
}
.bs-colored-social .fa-vk,
.bs-social-icons .fa-vk:hover,
.bs-socialicons .bs-vk:hover .bs-sicon {
background-color: #375474
}
.bs-colored-social .fa-soundcloud,
.bs-social-icons .fa-soundcloud:hover,
.bs-socialicons .bs-soundcloud:hover .bs-sicon {
background-color: #FF4100
}
.bs-colored-social .fa-vine,
.bs-social-icons .fa-vine:hover,
.bs-socialicons .bs-vine:hover .bs-sicon {
background-color: #35B57C
}
.bs-colored-social .fa-youtube,
.bs-social-icons .fa-youtube:hover,
.bs-socialicons .bs-youtube:hover .bs-sicon {
background-color: #C52F30
}
.top-social ul li {
margin: 0;
padding: 0
}
div#socialicons-top {
float: left
}
.top-social .list-unstyled {
margin: 0
}
.bs-socialicons {
text-align: center;
overflow: auto;
font-size: 22px;
margin: 0 -8px
}
.bs-socialicons .bs-socialInner {
position: relative;
overflow: hidden;
padding-left: 8px
}
.bs-socialicons .bs-social {
float: left;
width: 25%
}
.bs-socialicons .bs-sinn {
padding-right: 8px
}
.bs-socialicons .bs-sinn:hover .bs-sicon {
color: #fff
}
.bs-socialicons .bs-sicon {
display: block;
padding: 10px 0;
}
.bs-socialicons .bs-facebook .bs-sicon {
color: #3B5998
}
.bs-socialicons .bs-googleplus .bs-sicon {
color: #DD4B39
}
.bs-socialicons .bs-twitter .bs-sicon {
color: #2AA9E0
}
.bs-socialicons .bs-instagram .bs-sicon {
color: #685243
}
.bs-socialicons .bs-pinterest .bs-sicon {
color: #CC2028
}
.bs-socialicons .bs-youtube .bs-sicon {
color: #DE1829
}
.bs-socialicons .bs-vine .bs-sicon {
color: #35B57C
}
.bs-socialicons .bs-soundcloud .bs-sicon {
color: #FF4100
}
.bs-socialicons .bs-vk .bs-sicon {
color: #45668e
}
.bs-socialicons .bs-foursquare .bs-sicon {
color: #f94877
}
.bs-socialicons .bs-github .bs-sicon {
color: #333333
}
.bs-socialicons .bs-dribbble .bs-sicon {
color: #ea4c89
}
.bs-socialicons .bs-stumbleupon .bs-sicon {
color: #eb4924
}
.bs-socialicons .bs-linkedin .bs-sicon {
color: #0085AE
}
.bs-socialicons .bs-rss .bs-sicon {
color: #f26522
}
.bs-socialicons .bs-flickr .bs-sicon {
color: #FF0084
}
.bs-socialicons .bs-sicon {
background: #F5F5F5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease
}
.bs-socialicons .bs-scount {
display: block;
color: #FFFFFF;
background: #007ABE;
padding: 5px 0;
position: relative;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600
}
.bs-socialicons .bs-scount:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(238, 238, 238, 0);
border-bottom-color: #007ABE;
border-width: 4px;
margin-left: -4px
}
.bs-socialicons .bs-scount:hover {
background: #222222;
}
Step 7 Now click Save template button.
Step 8 Now go to your Blogger Dashboard
Step 9 Go to your Layout tab.
Step 10 Click on "Add a Gadget" then select "HTML/JavaScript"
Gadget. Leave the Title field blank.
Step 11 Now Paste the HTML code for social counter widget in "HTML/JavaScript"
Gadget.
<div class="bs-socialicons">
<div class="bs-socialInner">
<!--Facebook-->
<div class="bs-social">
<div class="bs-facebook bs-sinn">
<a href='#' target='_blank' tibse="Facebook">
<span class="bs-sicon"><i class="fa fa-facebook"></i></span>
<span class="bs-scount">3.1K</span>
</a>
</div>
</div>
<!--Google Plus-->
<div class="bs-social">
<div class="bs-googleplus bs-sinn">
<a href='#' target='_blank' tibse="Google Plus">
<span class="bs-sicon"><i class="fa fa-google-plus"></i></span>
<span class="bs-scount">2K</span>
</a>
</div>
</div>
<!--Twitter-->
<div class="bs-social">
<div class="bs-twitter bs-sinn">
<a href='#' target='_blank' tibse="Twitter">
<span class="bs-sicon"><i class="fa fa-twitter"></i></span>
<span class="bs-scount">1.4K</span>
</a>
</div>
</div>
<!--Instagram-->
<div class="bs-social">
<div class="bs-instagram bs-sinn">
<a href='#' target='_blank' tibse="Instagram">
<span class="bs-sicon"><i class="fa fa-instagram"></i></span>
<span class="bs-scount">2K</span>
</a>
</div>
</div>
<!--Pinterest-->
<div class="bs-social">
<div class="bs-pinterest bs-sinn">
<a href='#' target='_blank' tibse="Pinterest">
<span class="bs-sicon"><i class="fa fa-pinterest"></i></span>
<span class="bs-scount">4.5K</span>
</a>
</div>
</div>
<!--Youtube-->
<div class="bs-social">
<div class="bs-youtube bs-sinn">
<a href='#' target='_blank' tibse="YouTube">
<span class="bs-sicon"><i class="fa fa-youtube"></i></span>
<span class="bs-scount">2.8K</span>
</a>
</div>
</div>
<!--Vine-->
<div class="bs-social">
<div class="bs-vine bs-sinn">
<a href='#' target='_blank' tibse="Vine">
<span class="bs-sicon"><i class="fa fa-vine"></i></span>
<span class="bs-scount">3.3K</span>
</a>
</div>
</div>
<!--SoundCloud-->
<div class="bs-social">
<div class="bs-soundcloud bs-sinn">
<a href='#' target='_blank' tibse="SoundCloud">
<span class="bs-sicon"><i class="fa fa-soundcloud"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!--VK-->
<div class="bs-social">
<div class="bs-vk bs-sinn">
<a href='#' target='_blank' tibse="VK">
<span class="bs-sicon"><i class="fa fa-vk"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!---->
<div class="bs-social">
<div class="bs-foursquare bs-sinn">
<a href='#' target='_blank' tibse="Foursquare">
<span class="bs-sicon"><i class="fa fa-foursquare"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!--GitHub-->
<div class="bs-social">
<div class="bs-github bs-sinn">
<a href='#' target='_blank' tibse="GitHub">
<span class="bs-sicon"><i class="fa fa-github"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!--Dribbble-->
<div class="bs-social">
<div class="bs-dribbble bs-sinn">
<a href='#' target='_blank' tibse="Dribbble">
<span class="bs-sicon"><i class="fa fa-dribbble"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!--Stumbleupon-->
<div class="bs-social">
<div class="bs-stumbleupon bs-sinn">
<a href='#' target='_blank' tibse="Stumbleupon">
<span class="bs-sicon"><i class="fa fa-stumbleupon"></i></span>
<span class="bs-scount">3.4K</span>
</a>
</div>
</div>
<!--Linkedin-->
<div class="bs-social">
<div class="bs-linkedin bs-sinn">
<a href='#' target='_blank' tibse="Linkedin">
<span class="bs-sicon"><i class="fa fa-linkedin"></i></span>
<span class="bs-scount">1.5K</span>
</a>
</div>
</div>
<!--Rss-->
<div class="bs-social">
<div class="bs-rss bs-sinn">
<a href='#' target='_blank' tibse="Rss">
<span class="bs-sicon"><i class="fa fa-rss"></i></span>
<span class="bs-scount">1.9K</span>
</a>
</div>
</div>
<!--Flickr-->
<div class="bs-social">
<div class="bs-flickr bs-sinn">
<a href='#' target='_blank' tibse="flickr">
<span class="bs-sicon"><i class="fa fa-flickr"></i></span>
<span class="bs-scount">2.9K</span>
</a>
</div>
</div>
</div>
</div>
</div>
Customization
- Please replace all # from <a href='#' target='_blank' tibse with your social media site’s and profile links.
- And alter the counter number from <span class="bs-scount">2.9K</span> code.
Step 12 And finally click orange color Save button. You’re done!
Now check your Blogger template and see
beautiful social counter widget. However this is a manual social counter widget
so you have to edit the number of counter and write manually. For any further help
you can leave a comment below.
Speak Your Mind
So Far 4 thoughts on This Post.
thanks a lot for this....
commenting from GOODIESTECH BLOG
Welcome.. Nice to see you hear.
thanks
thsanks
If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.