Add
Social Media Buttons Below Post In Blogger
In my last
post, i told you the trick that how can you download torrent directly with idm.
Today, i am going to share a beautiful spirit style social media widget for
blogger. You can add this blogger at any place on your blog like side bar,
header or below post. But according to my recommendation, try to use it below
post.
Benefits Of
Using Social Media Icons Below Post:
These
social icons can be very beneficial foe you. You can see that on most popular
blogs, these social media widgets are more prominent as compare to any thing on
the blogs.
Helps you
to get more traffic.
Build your
readership on social media sites.
Gets you
more like and shares.
Make your
blog worthy in search engine eyes.
You may
also like:
Problogger
subscription box widget for blogger.
Facebook
like box for blogger
How To Add
Social Media Widget In Blogger?
As i have
already explained that you can add this widget below post or in side bar.
Follow below guide to install this widget on your blogger blog.
Below Post:
Login to
your blogger account.
Back up
your template. Important)
Go to
Dashboard ==> Template ==> Edit HTML.
Find the
following code.
<div class='post-footer-line
post-footer-line-1'>
Copy the
below code and paste it just after the above code.
<ul
class="ul_hm">
<li>
<a
class="BeHsociallinks" target="_new" href="Facebook
Link">
<div id="BeHsocialfb"
style="background-position: 0px 0px;">Facebook</div>
</a>
<a
class="BeHsociallinks" target="_new" href="Twitter
Link">
<div
id="BeHsocialtwit" style="background-position: -86px
0px;">Twitter</div>
</a>
<a
class="BeHsociallinks" target="_new" href="LinkedIn
link">
<div
id="BeHsociallink" style="background-position: -172px
0px;">Linkedin</div>
</a>
<a
class="BeHsociallinks" target="_new" href="YouTube
link">
<div
id="BeHsocialytube" style="background-position: -258px
0px;">You Tube</div>
</a>
<a class="BeHsociallinks"
href="Blog link">
<div
id="BeHsocialblog" style="background-position: -344px
0px;">Blog</div>
</li>
</ul>
<style>
.subscribebutton .mj_btnbg
{
color: #141414;
font-weight: bold;
height: 35px;
line-height: 35px;
padding: 0 10px;
text-transform: uppercase;
}
.ul_hm li div {
background-image:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6wnPE1iNDVzJDfIfBLp_-uWRVk2oS8ihvLtTgLTt5ELjATHAY9g-OQVcvxD8MVKorD_ZwCpT7xypZgCwmRSl7vOvkOJL2Tn5l37pUYQ3RV3etQaHYFyigwunOSWVxoq6NJ7PWeNoltU/s1600/social_icon_sprite.png");
float: left;
height: 83px;
margin-right: 3px;
width: 83px;
}
.BeHsociallinks {
font-size: 0;
}
#BeHsocialfb:hover {
background-position: 0 -86px !important;
}
#BeHsocialtwit:hover {
background-position: -86px -86px
!important;
}
#BeHsociallink:hover {
background-position: -172px -86px
!important;
}
#BeHsocialytube:hover {
background-position: -258px -86px
!important;
}
#BeHsocialblog:hover {
background-position: -344px -86px
!important;
}
ul li {list-style: none
outside none;}
</style>
Click on
save template.
Add Social
Media Widget In Sidebar:
Go to
Dashboard ==> layout ==> add a gadget
Click on
Html/Java script.
Copy the
above code mentioned in step 5 and paste it.
Click on
save gadget.
Customizing
The Social Media Widget:
Facebook
Link, Twitter Link, LinkedIn link, YouTube link, Blog link with the requires
link before saving the widget.
0 comments:
Post a Comment