It include with Twitter, Facebook and Rss, You can
add it to your blog.It will make your blog attractive
and helps to increase Facebook fan , Twitter follower
and Rss Subscribers,.Earlier I made similar post
Add Sleek Search Box With Social Buttons For
Blogger you can Follow these steps.
1. Log in to blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
.Btbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center:margin-bottom:-30px;}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #1014c7}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#1014c7;text-decoration:none}
.emailsbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #1014c7}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#1014c7;text-decoration:none}
.twitterbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #1014c7}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#1014c7;text-decoration:none}
.facebookbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #1014c7}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#1014c7;text-decoration:none}
#search{width:290px;padding:2px 2px;background:#F7F6F6F;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left;margin-bottom: 0px;}
#search:hover{border:1px solid #1014c7}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}4. Now Go to Design >> Page Element
5. Click Add Gadget and select 'HTML/Javascript'
6. Paste below code.
<div class="btbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form></div><table><tr><td><div class="rssbox"><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtTxx8y0gh5ekU0hPodtxMNOxCOfrTaRZM4QHGD8bixW2H3018wZ92L-eWl_WGFACwTLlaKe0ygh4dJETXcq87QsD5HJO6Sa2S7Gnth30pnojUBpe9fHc3mYyRlPs4-A4Emnl_vqyvdU/s1600/rss-icon.png" alt="RSS Feeds" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a>
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td><td><div class="emailsbox">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia1_3yEMc9YuKoFdeDv99Lp2pILKorElax8XCfOnDFJomThvigFrtfSgiryPvBuQNfRK6MI5-XJy43VKp6FLCprWh3pgxf5f7MjdvEcX_YQC0RXMVC3mKS2tN05QnbyVLfOgxwl5O-xGQ/s1600/Google-plus-grey-icon.png" alt="Google Plus" title="Google Plus" style="vertical-align:middle; margin-right: 5px;border:none;" />
<a href="href="https://plus.google.com/Username
" target="_blank" rel="nofollow"> Google Plus</a>
</div></td></tr><tr><td><div class="twitterbox"><a href="http://twitter.com/bloggertrix" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjEhA-C7JI2aHtF36LOreQnAmA8mGhH5HvumaoUAwFwcdXap4JqHctVVfniIEqIuaL6b5sd8mpDiKAV6V3Bczu0E7xY12BK5aikcFur3cXmOQ5co7PxLUPBrZvhhpx6Ced7UP-6SSQ94/s1600/twitter-icon.png" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a>
<a href="http://twitter.com/Twitter-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td><td><div class="facebookbox"><a href="http://www.facebook.com/bloggertrix" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTbGvvxFphBCfRMqysldWunb64jG-rCMmVEMAkoP2h0v7WncPeQCzKWrFC7kK-6XWpY2TqB9ZeAgBGXD4Q3-X8ngofQ1jwTqVsDUIjYs8xwxwKnqw0P3VV411E6pb1AlZVkJxYbqd5q8/s1600/social-twitter-box-blue-icon.png" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a>
<a href="http://www.facebook.com/Facebook-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td></tr></table><p style="display:none;" align="center"><a href="http://bloggertrix.com/" target="_blank"></a></p></div>
*Replace Feedburner-ID With your Feedburner Id
*Replace USERNAME with your Google Plus username
*Replace Twitter-USERNAME with your Google Plus username
*Replace Facebook-USERNAME with your Google Plus username
7. Now save your template
you are done.

No comments:
Post a Comment