Wednesday , February 22 2017

Add Social Media Widget with Search Box in Blogger

Today we will add beautiful effect social media widget in blogger template with awesome search box. This a two in one gadget one is social media profile widget and second search box which help your blog visitor to search your blog easily. This very easy to add your blog follow below simple step.

1. Login your blogger profile
2. Select layout and add new gadget
3. Select HTML/JavaScript from appeared box
4. Paste the below code here

#tbg-social{ width:350px;}ul.tbg-social{margin:0;padding:0;list-style:none;-webkit-perspective: 10000px; -moz-perspective: 10000px;-o-perspective: 10000px;perspective: 10000px;}
ul.tbg-social li{display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;
text-transform: uppercase;text-align: center;cursor: pointer;}
ul.tbg-social li a{display:block;width: 100%;height: 100%;color: black;text-decoration: none;outline: none;-webkit-transition:all 300ms ease-out 0.1s; -moz-transition:all 300ms ease-out 0.1s;-o-transition:all 300ms ease-out 0.1s;transition:all 300ms ease-out 0.1s;}
ul.tbg-social li a span{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 5px; display:block;width: 100%;height: 100%;-webkit-transition:all 300ms ease-out 0.1s;-moz-transition:all 300ms ease-out 0.1s;-o-transition:all 300ms ease-out 0.1s;transition:all 300ms ease-out 0.1s;}
ul.tbg-social li a img{border-width: 0;}
ul.tbg-social li:hover a{-moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);transform: rotateY(180deg);background: #cef1ff; -webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;-webkit-box-shadow:0 0 5px #eee inset;-moz-box-shadow:0 0 5px #eee inset;box-shadow:0 0 5px #eee inset;
}ul.tbg-social li:hover a span{-moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg);transform: rotateY(90deg);}
#tbguide-searchbox { border-radius: 5px; background: URL( no-repeat scroll center center transparent; width: 290px; height: 50px; disaply: block;}
form#tbguide-searchform { display: block; padding: 7px 16px; margin: 0;}
form#tbguide-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;}form#tbguide-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style>
<div id=”tbg-social”><center><a style=”font-size:25px;” >Find Us Here </a>
</center><br />
<ul class=”tbg-social”><li><a href=”#”><img src=”” title=”Facebook” /></a></li>
<li><a href=”#”><img src=”” title=”stumble” /></a></li>
<li><a href=”#”><img src=”” title=”twitter” /></a></li>
<li><a href=”#”><img src=”” title=”Google Plus” /></a></li>
<li><a href=”#”><img src=”” title=”Add RSS Feed” /></a></li>
</ul><div id=”tbguide-searchbox”><form action=”/search” id=”tbguide-searchform” method=”get”>
<input id=”s” name=”q” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;&quot;Search..;}” onfocus=”if (this.value == &quot;Search…&quot;) {this.value = &quot;&quot;}” type=”text” value=”” />
<input id=”sbutton” src=”” type=”image” /> </form></div></div>

5. Click on save, you are done, view your blog.
But remember change # with your user id link and RSS with your blog feed URL. We add four major social site Facebook, Twitter, Google+ and StumbleUpon. You can change them simply change URL with another social site, your profile URL and change image icon with your image.

Leave a Reply

Your email address will not be published. Required fields are marked *