Saturday, August 1, 2015

Social Media Widget With Search Box


You can easily link with, Facebook, Twitter, RSS Feed, for using this (Social Media Widget). Because social media is very important to get traffic to your blog/website. And you get fast traffic on your blog. Now a day everyone uses social media to connect actors. If you use this social media widget you can also use the search box with this. Now I show you how to use this social media and search box widget to your blog.



I recommend this widget for your blog, because i am using CSS3 & HTML for the making of this widget. So if you use this, your blog speed doesn't slow down. This widget is very light and easy to use. So enjoy this (Social & Search Widget).

(Open DEMO to see this widget live) 

1: Go to Blogger Dashboard >>> Click Layout

2: Now click >>> "Add Gadget" and select >>> "HTML/JavaScript"

3: And Paste below code.


<style>#mybloggertools{width:307px;padding:0 0 5px 0;border:1px solid black;}#mybloggertools-searchbox {border-radius: 5px;background: URL(http://2.bp.blogspot.com/-29Shbia3Mgc/VbvvsGuYozI/AAAAAAAACAw/Q4x-3v9HKDM/s1600/SearchBoxMyBloggerTools.png) no-repeat scroll center center transparent;width: 307px;height: 55px;disaply: block;}form#mybloggertools-searchform {display: block;padding: 9px 16px; margin: 0;}form#mybloggertools-searchform #s {padding-left: 45px !important;padding: 7.5px;margin: 0;width: 198px;font-size: 16px;font-family: verdana;font-style: ;color: #000000;vertical-align: top; border: none;background: transparent;}form#mybloggertools-searchform#sbutton {margin: 0;padding: 0;height: 100px;width: 74px;vertical-align: top;border: none;background: transparent;}</style><div id="mybloggertools"><center><a href="http://twitter.com/MyBloggerTools" target="_blank" wrc_done="true"><img src="http://3.bp.blogspot.com/-TNs0PEQkgj4/Vbvn8zxusGI/AAAAAAAACAI/i5b5wpeZwPs/s1600/TwitterIconMyBloggerTools.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249" /></a>
<a href="http://www.facebook.com/MyBloggerTools" target="_blank" wrc_done="true"><img src="http://1.bp.blogspot.com/-9B8L1FUa4zs/VbvrcTzQIzI/AAAAAAAACAU/lpaQ1Yz8U5A/s1600/FacebookMyBloggerTools.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248" />
</a><a href="http://feeds.feedburner.com/MyBloggerTools" target="_blank" wrc_done="true"><img src="http://3.bp.blogspot.com/-Mp5WoYoRWDk/Vbvrg5bsMMI/AAAAAAAACAc/GtFbs2z6CC4/s1600/RssMyBloggerTools.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251" /></a>
<a href="http://au.linkedin.com/username" target="_blank" wrc_done="true"><img src="http://2.bp.blogspot.com/-GWisjpcDv9w/VbvrgzR2KJI/AAAAAAAACAg/3UlGMlpBxoE/s1600/inMyBloggerTools.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250" /></a><div id="mybloggertools-searchbox">
<form id="mybloggertools-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search......" onfocus='if (this.value == "Search......") {this.value = ""}'onblur='if (this.value == "") {this.value = "Search...";}' />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/></form></div></center></div>


4: Replace (MyBloggerTools) with your twitter Username

5: Replace (MyBloggerTools) with your Facebook Username

6: Replace (MyBloggerTools) with your Feedburner Username

7: Replace (Username) with your LinkedIn Profile

8: Finally save your (HTML/JavaScript)

If you have any issue related to this (Cool Social Media Widget). Just leave a comment in below comments area. I will happy to you solve your issue as soon as possible.

Related Posts: E-mail Subscribe Box For Blogger
                                 Social Subscribe And Sharing Widget For Blogger
                                 Cool Hover Effects Social Media Widget For Blogger
                                 Beautiful Menu Box For Blogger
                                 Feedburner Recent Posts Widget For Blogger 
Previous Post
Next Post

0 comments: