To increase traffic from social networks is a very essential part for blogging. So I am sharing this socializer widget box which contains dozens of social sites in a short box which is easily accessible by user on your blog. This is a simple script which you have to add to your template. Just follow the steps below and you are done. For demo of this plugin you can see at end of the post. (May not available at this time)
Image Source:Google Image Search
Steps To Install Socializer Box On Blogger:
- Go To Blogger >> Template >> Backup Your Template
- Now Edit HTML and Click Anywhere On Text.
- Press CTRL+F and Find For Below Code.
<data:post.body/>
- Just below or above this code paste following code.
<b:if cond='data:blog.pageType == "item"'>
<style>
#byard-socializer {
width: 500px;
height: 240px;
border: 1px solid #ddd;
-webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
background: #f1f1f1;
-transition: background 0.50s;
-webkit-transition: background 0.50s;
-moz-transition: background 0.50s;
margin-bottom: 10px;
overflow: hidden;
}
#byard-socializer:hover {
background: #fff;
}
#byard-socializer-title {
text-align: center;
border: 1px solid #2aa4cf;
font-size: 20px;
background: #2aa4cf;
font-weight: 2000;
font-family: oswald;
padding: 5px;
color: #fff;
}
#SocializeIt {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
margin-top: 10px;
}
.tweet, .like, .plusone, .stumbleit {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 20px;
}
.heading {
float: left;
padding-right: 20px;
padding-top: 15px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 30px;
font-family: oswald;
}
#followus, #share {
float: left;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
}
.likeonfb, .followontwitter, .sharing {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 15px;
}
#sw-credits {
float: right;
padding: 3px;
font-size: 10px;
margin-right: 10px;
}
</style>
<script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
if (!_0x2162x1['getElementById'](_0x2162x3)) {
_0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
_0x2162x1['id'] = _0x2162x3;
_0x2162x1['src'] = '//platform.twitter.com/widgets.js';
_0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
};
})(document, 'script', 'twitter-wjs');
</script>
<script type='text/javascript'>
var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
publisher: "
ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<center>
<div id='byard-socializer'>
<div id='byard-socializer-title'>
Socializer Widget </div>
<div id='SocializeIt'>
<font class='heading'>SOCIALIZE IT →</font>
<div class='tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='like'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='plusone'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div id='followus'>
<font class='heading'>FOLLOW US →</font>
<div class='likeonfb'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTricksDroid&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
</div>
<div class='followontwitter'>
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/TricksDroid' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div id='share'>
<font class='heading'>SHARE IT →</font>
<div class='sharing'>
<span class='st_facebook_large' displaytext='Facebook'/>
<span class='st_twitter_large' displaytext='Tweet'/>
<span class='st_googleplus_large' displaytext='Google +'/>
<span class='st_pinterest_large' displaytext='Pinterest'/>
<span class='st_linkedin_large' displaytext='LinkedIn'/>
<span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
<span class='st_email_large' displaytext='Email'/>
<span class='st_sharethis_large' displaytext='ShareThis'/>
</div>
</div>
</div>
</center>
</b:if>
- Replace Socializer Widget (Highlighted) With Your Heading.
- Replace First TricksDroid With Your Facebook Page Username and Second TricksDroid With Your Twitter Username.
- Click "Save Template" and You Are Done.
So you have successfully added this beautiful socializer widget to your blogger blog. If you have any questions feel free to comment below.
Written by Unknown
Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)
Nice post...keep doing jobs like this...thanks once again..
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete