Like & Tweet Box for Every Single Post on Blogger Homepage
Like, Tweet and +1 are the tree main online systems for spreading your post all over the world, more likes and tweets you have more post is shared and you will get more views. Well so today I am sharing the like and tweet box which you might have seen on my blog personally so its simply customized using CSS and I have just added the like and tweet button codes in it, well many people were asking that how I have added so here you go with the codes and tutorial below.
1. Go to Blogger > Template > Edit HTML
2. Now click Expand Widget Templates and pressCtrl + F and search for
NOTE Using these Like and Tweet for every single post on your blog may make your blog a little slow, as everytime a person loads your homepage additional requests for like and tweet buttons will be carried out so try using it if it fits best than enjoy :)
1. Go to Blogger > Template > Edit HTML
2. Now click Expand Widget Templates and press
]]></b:skin>
tag and paste the below code right above it..post-homepage-share{box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;-moz-box-shadow: 0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:right;width:130px;height:65px;background: #f9f9f9;border:1px solid #ddd;margin:5px 0 0 10px;padding:5px 10px 2px 0}
3. Now again make a search for
<div class='post-header'>
and paste the below code right below it.<b:if cond='data:blog.pageType != "item"'><div class='post-homepage-share'><span style='float:right'><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'/></span><span style='float:right;padding-right:5px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='false' expr:href='data:post.url'/></span></div></b:if>
4. Now codes are placed and you can save your template, now refresh your blog and see if like and tweet box has loaded or not, if you think that the box is getting too much up or too much low you can change the margin value in the above code in red color.
No comments:
Post a Comment