Add Stylish Social Subscription Box With Search Bar For Blogger
This Social Gadget has a search box in it. Other than that there are four social options RSS, Twitter, Facebook and Google+. This gadget helps to increase your social appearance.
Do you want to add this gadget to your blog. Then follow the steps:
Do you want to add this gadget to your blog. Then follow the steps:
1) Go to Blogger Dashboard > Design > Page/Edit Layout.
2) Add a Gadget > HTML/JavaScript.
3) Copy the code below and paste it into the window.
<a href="http://feeds.feedburner.com/hblogger" target="_blank">Subscribe to our RSS Feeds!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="follow us on twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsrtaZkr2cw9cV2Nsw1zLadoMQZaWh1yx_fKDQvzPEunzQyBdqRQVM3phyphenhyphenuH6901skzsWVwzJCFM0sCfMcGtm5Dvf7bJXRMaeA3siYRYiYF7NoWVVdoxHjJ9J_LhjaRWE4DJInyUV5oKR/s1600/twitter.png" title="follow us on twitter!" />
<a href="http://twitter.com/helperblogger" target="_blank">Follow Me on Twitter!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMCQVD36xwR-daJqC78moNL1RfVgMZsHGK2NAKLbap4yrNbiIIdEJGK4HV7U0q_lh72YT8hm0oL_O-ftAp_cgFMW-2kp9RS0aJHJj5qEMnNwMZXfYkJbbvN8124wr2Bh_WZtn9T-HObfZ/s1600/facebook.png' title='Be Our Fan" />
<a href="http://www.facebook.com/btsnts" target="_blank">Follow Me on Facebook!</a>
</div>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghsecR_FvHctreWO81zkWSSI3XwIgoMn8NNOQtZUIj-tUhpUCcEhuXdOrUw2UAvGvk1pBtSCRhg1XWvQFT39lvhYpOaa6OCJcrPgU2LurO7TiwHb1TXOaBWrOpDPuR3TnkRw7mAtyyLUE/s1600/g-plus-logo.png" />
<a href="https://plus.google.com/u/0/106527290580119996124" target="_blank">Add Me on Google+!</a>
</div>
4) Save it and you done it.
source
Can I share this post in my blog?
ReplyDeleteNice...but how do i can change the 'search' width?
ReplyDeletei make a little adjustment, changing the icon with my own. But i got another problem. The word turn blue. it suppose to white colour. any idea?
ReplyDeleteI how i can change the hover colour. current is still white.
however tq for sharing your code. usefull for my won blog (http://mfjcerita.blogspot.com). you can take a look on it.
sang biru try this one to change the search width:
ReplyDeleteCHANGE THE CODE ACCORDING TO THIS :
#search {
border: 1px solid
#DDD;
background:
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/Tu_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
width: ENTER THE WIDTH YOU WANT HERE;
mouse:pointer:
}
to change the hover colour do some changes in this section:
ReplyDelete.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
I cant find html/javascript in my gadgets. I only have upload from site and from google. Can i still get this?
ReplyDelete