How to add Social widget with search box in blogger blog

Beauty Effect Social media widget for blogger template with awesome search box.Fantastic Widget for blogger 2015 . This is very easy to add blog follow below  simple Step.

LIVE

• Go To Blogger Dashboard  → Layout  → Page Element
• Add a HTML/Javascript Gadget.
• Paste below Code in it

<style>#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP2adABvzNPH0f-o7-S8G-hgEynIcgGxClqPBi1U1ESbT_AYaegIld3_Jo-_hdbtj4ULJvzVwjh_OhC57GOXOmad6PUKAEf3KAgPo4Tr_jkdJ3rZDvHW9nJHrgnVhSpHuayv3LvDmSTePw/s1600/search_box_psd_12.jpg) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0aqMzxecuNx9MvZUNimVcHbpgR0CKfA_7QjlYaEXdFF0JE_DKEjSP0onLC8IN6xIaNQ2fOjExS2yaEVcLHKlMpqF9C6dvdzCq4sV_lzVVcEt7N45t0zBQR8OnUCnpz40UJ3IJP6tQrBu_/s1600/tbguide-social-buttons-facebook.jpg" title="Facebook" /></a></li><li><a href="USERNAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1w6YX6JR6UCHqrXJdyxpVv7JD8nW5oOEindeJcuMkWSeQ9XELKXui9kPTG3s4N75pF0Saf7ojT7E4IQ0WU-ub2QLkDhSiWtQQRiTeehgLPnnQYy-lircBnnESTzwFpGUIlZ5RF_X90AM/s1600/tbguide-social-buttons-stumble.jpg" title="stumble" /></a></li><li><a href="USERNAME1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzfGhWCSkUE_8bl4_PHwo4g0a2mUKu4wCQTC2zL2nmNk0XvnC3TLfFHSDE4iV3cOdXidawmMPXslg7J2GAtM8fYmAHI31QPKCzS3Pya5zA0lvzHuYhPEfBzujW2xA2p955M19XUeZEsUJ/s1600/tbguide-social-buttons.jpg" title="twitter" /></a></li><li><a href="USERNAME2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWDGTrcUlQQBUEXQyx9IL6wZuUfBMxUTyQfL6CApgBWGJx-d6Ugj-EP88Dv-HnpMP2dWsY7l6u8aTkO656wGehmRsW5_0Om0PV5Lm2tJDfoTrB85oVT8kCb08t2vPTT3In_26b1KfSs6cg/s1600/tbguidesocial-buttons-google.jpg" title="Google Plus" /></a></li><li><a href="USERNAME3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HdPXrbh8hJnLaoVNYN7TxI-ND1ch1o9hVOfpbz85pG9TUA8yIyzV2BoTle9l-5M6tawTM3ClJY_oOWOonhH17eIr-ErfLWdgC8xO-y3D77Rrzc2UgQP9tR2tBC1z9UpzAFjXNy29KIY8/s1600/tbguidesocial-buttons-rss.jpg" 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="http://img1.blogblog.com/img/blank.gif" type="image" /> </form></div></div>

Customize your code. Find >  USERNAME, USERNAME1, USERNAME2, USERNAME3 Change it.

SAVE GADGET