Socializer Widget
This is a great widget which is having amazing buttons with dashing
design. At the top of this widget it shows a stylish heading, You can
also change that heading to yours. In the second portion which is
"Socialize It", it is having three major site buttons which are
Tweeting, Like and Plus one. These buttons are for liking or tweeting
your current post. Third portion is "Follow Us" and here we've added a
Facebook fan page like button and Twitter follow button. In the end, the
fourth portion is "Share It" there we've implemented some share buttons
that will share your current post. And the share button plugin is
adapted from "Share This" because it may not down and your readers may
enjoy sharing your post on all social sites.
The best place for implementing this widget is under every post. So that
it may fit on your blog with it's 500 pixels wide. This widget is
having white smoke background color but when someone will hover the
mouse on it and it will be changed to white with awesome effect. This is
also having shadow that will attract your readers to like, follow or
share. You can see the live demo of this by pressing the below button.
Installing Socializer Widget In Blogger
After getting knowledge about this widget, now you may want to install it in your blog. So this is free for everyone and you can easily install it by following the simple steps below.
- Go To Blogger >> Template >> Backup Your Template
- Go To Edit HTML and Click Anywhere In The Coding Box To Active It.
- Press CTRL+F and Find For Below Code.
<data:post.body/>
- Just Below Above Found Code Paste The 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 By Blogger Yard
</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%2FBloggerYard&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/BloggerYard' 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 By Blogger Yard With Your Heading.
- Replace First BloggerYard With Facebook Page Username and Second BloggerYard With Twitter Username.
- Click "Save Template" and You Have Done!
.jpg)
0 comments:
Post a Comment