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/AVvXsEirQrJQS9ewz6WcWzegp974hkoEDuTqgqFNFRfmztYa87gATG4QjjbzCAtbn9TlBJgX9BPVpyF3XeawYktemT6G6TfGT1sStUZscTmstm_3N-ADG6aVmTBgzato2ZcrntPb-iil7GQjvnYg/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/AVvXsEiCymjiIndTapeTHacMEtPjKJWkwMEHGD1cvQ6QyZxYfEWsryjn_KH769vvmHt7Kh_c_Efo19buKodwBelS_CNyoxFqHQkjo711-3HvUnn2oN5b_UodfqY9oraGvw_rBj14kjXcPwnBjKK4/s1600/tbguide-social-buttons-facebook.jpg" title="Facebook" /></a></li><li><a href="USERNAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJr9W42Abjo6FxssVp9PcezZK-agXvO35YDbuajh88XOESuG2MvnTsdnwMmuwNLyddfhqtJKfxCeL9nhQJgH67Zd41kzDbfO-AowYVVXPGAJYjw5OdOd3VGpAPNLL15iXGN3e3j3NbeKHe/s1600/tbguide-social-buttons-stumble.jpg" title="stumble" /></a></li><li><a href="USERNAME1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVEQn4thmDhrejYh32WPFNyJKfGzkCiBQuxnCmbmdId9pJGBbc2wK6NmMXc70qSTfR0uZr-jcQKow8OQhpFScDBAcMeUlWQO7mZ7y3IUtlUezNeO1zAdhOioiZVQ9EKosNVeA6dNssoZo/s1600/tbguide-social-buttons.jpg" title="twitter" /></a></li><li><a href="USERNAME2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-u7HD9KDio2mT4KwBtX6aKNSvp6DGb2yTR3WMCtf9dCpuICSPg4Iv0rnII59ThdeAOtb9hMgw9SNRxe_L3uYjr8Bi0uNU7hcU3RPmAqS83GLBpUniHUzMScWT3J7CDs3o0kcpzAoigdT3/s1600/tbguidesocial-buttons-google.jpg" title="Google Plus" /></a></li><li><a href="USERNAME3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoTscN5zAi-ZElXy5uDdESg4RjOlnb0_DkEZU_7syIvLls8nx5wlmx4ooBIS-C976PM0NN_eMPTXAcuW2qqYWfN7dwWeiUeyjGqksBOJ_TwelWNSS0aBszrpl7XP9L6sTeE8ZBeWe3MXh/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

• Tweet
• Share
• Share
• Share
• Share

About Admin Abdul Basit Kakar

Abdul Basit is a Web Developer,SEO Consultant and Online Instructor working online for last 1 years on the internet and managing several successful websites.

Related Post