To increase search engine visibility it is compulsory to use social media widget for blogger so here we have a window effect widget to add it to blogger. A social media widget plays an important role in increasing page views for your posts and also increases your followers if someone likes your posts and becomes a member of your blog. Such blogger widget gives chance to users to share your posts on the social media platform. Below is the step by step method to add this widget to blogger with the demo.
bloggertrix
How to add window effect social media widget to blogger.
Login to Blogger → Dashborad
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.
<style>
.btrix-social-slidebox {
font: 16px normal 'Denk One', sans-serif;
display: inline-block;
position: relative;
width: 95%;
max-width: 200px;
padding: 12px;
}
.btrix-social-slide {
width: 95%;
max-width: 280px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.btrix-social-slide a {
text-decoration: none !important;
}
.btrix-social-slide ul {margin-top:-5px;
margin: 0;
padding: 0;
list-style: none;
}
.btrix-social-slide ul li {margin-bottom:15px;
display: inline;
margin: 0;
padding: 0;
text-indent: 0;
margin-left:10px;
}
.btrix-social-slide ul li a.facebook {
border-left: 65px solid rgba(59, 89, 152, 1);
color: rgba(59, 89, 152, 1);
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook p {
margin: 2px 20px 0 -60px;
display: inline-block;
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover {
background: rgba(59, 89, 152, 1);
border-left: 0px solid rgba(59, 89, 152, 0.1);
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.twitter {
border-left: 65px solid rgba(64, 153, 255, 1);
color: rgba(64, 153, 255, 1);
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter p {
margin: 2px 20px 0 -60px;
display: inline-block;
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover {
background: rgba(64, 153, 255, 1);
border-left: 0px solid rgba(64, 153, 255, 1);
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.gplus {
border-left: 65px solid rgba(219, 74, 57, 1);
color: rgba(219, 74, 57, 1);
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus p {
margin: 2px 20px 0 -50px;
display: inline-block;
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover {
background: rgba(219, 74, 57, 1);
border-left: 0px solid rgba(219, 74, 57, 1);
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest {
border-left: 65px solid rgba(174, 45, 39, 1);
color: rgba(174, 45, 39, 1);
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest p {
margin: 2px 20px 0 -50px;
display: inline-block;
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest:hover {
background: rgba(174, 45, 39, 1);
border-left: 0px solid rgba(174, 45, 39, 1);
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.rss {
border-left: 65px solid rgba(255, 102, 0, 1);
color: rgba(255, 102, 0, 1);
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.rss p {
margin: 2px 20px 0 -60px;
display: inline-block;
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.rss:hover {
background: rgba(255, 102, 0, 1);
border-left: 0px solid rgba(255, 102, 0, 1);
color: #fff;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.rss:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
</style>
<div class="btrix-social-slide">
<ul>
<li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/freebloggerthemes"><p>12K+</p>Facebook </a></li>
<li><a class="btrix-social-slidebox twitter" href="https://twitter.com/ClassyBloger"><p>5K+</p>Twitter</a></li>
<li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/u/4/+AnaLeighReal"><p>4K+ </p>Google+</a></li>
<li><a class="btrix-social-slidebox pinterest" href="https://www.pinterest.com/Micy3/"><p>2K+ </p>Pinterest</a></li>
<li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/blogspot/CINHv"><p>11K+</p>RSS</a></li>
</ul>
</div>
Type your Facebook fan page name in place of YOURFANPAGE.
Type in your Twitter ID in place of YOURID.
Type in your Feed address ID in place of YOURFEED.
Type in your Google Plus ID in place of 100000000000001.
Type in your Pinterest address ID in place of YOURURL.
This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this Smooth Sliding Social Media Widget For Blogger then please share it and write comments as your feedback.