Major social media networks have turned the blogging sphere into a home of connection. Using social networks, we can acquire more blog readers while keeping the already existing ones. Facebook being the largest brings thousands of visitors to this blog a week, so as to keep all your visitors engaged and updated.While other networks including Twitter, Google plus, Instagram play a big traffic role for us. Today I am showing you a way to keep every visitor stuck to your blog and content.
Features Of BlogSpot Social Media Follower Counter Widget
Now let's create a simple, responsive and fast loading social media follower counter for our BlogSpot blogs that will help us gain more likes and followers on major social media networks. This widget will only contain plugins for the networks below:
- Google Plus
- RSS
- YouTube
These being the biggest and most used websites I have only included these on the follower counter widget. The widget is neat and beautiful. Well coded to fit the look of your blog with every social network having its name, the number of followers and icon.
How To Add Social Media Counter Widget To Blogger
Adding this widget to Blogspot or blogger.com blog is very easy and quick. All you need to do is follow the step by step guide and please do not implement it if you are confused, feel free to question me in the comment section.
Step 1: Simply visit blogger.com locate footer layout section.
Step 2: Click on Add a Gadget.
Step 2: Now click on HTML/JavaScript & Paste the below code inside the box.
<style>
.td-social-list:before, .td-social-list:after {
display: table;
content: "";
line-height: 0;
}
.td_social_type {
width: 100%;
margin-bottom: 10px;
-webkit-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
-moz-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
-o-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
}
.td_block_social_counter {
font-family: 'Open Sans',arial,sans-serif;
font-weight: bold;
font-size: 11px;
color: #fff;
margin-bottom: 47px;
}
.td_social_facebook .td-social-box {
background-color: #516eab;
}
.td_social_type .td-social-box {
height: 32px;
position: relative;
overflow: hidden;
}
.td_social_type .td-social-box .td-sp {
display: inline-block;
}
.td_block_social_counter .td-sp {
position: relative;
}
.td-sp-facebook {
width: 32px;
height: 32px;
background-position: -20px -20px;
}
.td-sp {
background-image: url(https://easily-learn.000webhostapp.com/wp-content/themes/Newspaper/images/sprite/elements.png);
background-repeat: no-repeat;
display: block;
}
.td_block_social_counter .td-sp:after {
content: '';
width: 1px;
height: 16px;
background-color: rgba(255,255,255,0.1);
position: absolute;
right: -1px;
top: 8px;
}
.td_social_type .td_social_info {
padding: 0 0 0 9px;
position: relative;
top: -12px;
}
.td_social_type .td_social_button {
float: right;
border-left: 1px solid rgba(255, 255, 255, 0.1);
padding: 0 14px;
margin-top: 8px;
top: 9px;
height: 16px;
line-height: 15px;
text-transform: uppercase;
}
.td_social_type .td_social_button a {
color: #fff;
text-decoration: none;
}
.td_social_type .td_social_button a:after {
content: "";
display: block;
height: 32px;
position: absolute;
right: 0;
top: 0;
width: 324px;
}
.td_social_type:hover .td-social-box{
background-color:#222;
}
.td_social_googleplus .td-social-box {
background-color: #eb4026;
}
.td-sp-googleplus {
width: 32px;
height: 32px;
background-position: -20px -280px;
}
.td_social_instagram .td-social-box {
background-color: #417096;
}
.td-sp-instagram {
width: 32px;
height: 32px;
background-position: -20px -228px;
}
.td_social_rss .td-social-box {
background-color: #f60;
}
.td-sp-rss {
width: 32px;
height: 32px;
background-position: -20px -124px;
}
.td_social_twitter .td-social-box {
background-color: #29c5f6;
}
.td-sp-twitter {
width: 32px;
height: 32px;
background-position: -20px -436px;
}
.td_social_youtube .td-social-box {
background-color: #e14e42;
}
.td-sp-youtube {
width: 32px;
height: 32px;
background-position: -20px -384px;
}
</style>
<div class="td_block_social_counter">
<div class="td-social-list">
<div class="td_social_type td-pb-margin-side td_social_facebook">
<div class="td-social-box">
<div class="td-sp td-sp-facebook"></div><span class="td_social_info">283</span><span class="td_social_info td_social_info_name">Fans</span><span class="td_social_button"><a href="https://www.facebook.com/TheEasilyLearn" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer">Like</a></span>
</div>
</div>
<div class="td_social_type td-pb-margin-side td_social_googleplus">
<div class="td-social-box">
<div class="td-sp td-sp-googleplus"></div><span class="td_social_info">26</span><span class="td_social_info td_social_info_name">Followers</span><span class="td_social_button"><a href="https://plus.google.com/+TheEasilyLearn" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer">Follow</a></span>
</div>
</div>
<div class="td_social_type td-pb-margin-side td_social_instagram">
<div class="td-social-box">
<div class="td-sp td-sp-instagram"></div><span class="td_social_info">152</span><span class="td_social_info td_social_info_name">Followers</span><span class="td_social_button"><a href="instagram.com/easilylearn" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer">Follow</a></span>
</div>
</div>
<div class="td_social_type td-pb-margin-side td_social_rss">
<div class="td-social-box">
<div class="td-sp td-sp-rss"></div><span class="td_social_info">240</span><span class="td_social_info td_social_info_name">Followers</span><span class="td_social_button"><a href="https://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" target="_blank" data-wpel-link="internal">Follow</a></span>
</div>
</div>
<div class="td_social_type td-pb-margin-side td_social_twitter">
<div class="td-social-box">
<div class="td-sp td-sp-twitter"></div><span class="td_social_info">178</span><span class="td_social_info td_social_info_name">Followers</span><span class="td_social_button"><a href="https://twitter.com/TheEasilyLearn" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer">Follow</a></span>
</div>
</div>
<div class="td_social_type td-pb-margin-side td_social_youtube">
<div class="td-social-box">
<div class="td-sp td-sp-youtube"></div><span class="td_social_info">16</span><span class="td_social_info td_social_info_name">Subscribers</span><span class="td_social_button"><a href="https://www.youtube.com/channel/UCHMjUEGsBgtS9S2JUnC6WuQ" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer">Subscribe</a></span>
</div>
</div>
</div>
</div>
Customization
Replace the below codes with your link and LikesAfter pasting, save your widget and view your blog!
Post A Comment:
0 comments: