Bloggerda Arama Kutusu ile Sosyal Medya Widget Eklentisi

Bloggerda Arama Kutusu ile Sosyal Medya Widget Eklentisi, blogger şablonunuzda bulunması gereken çok güzel widgetlerden birtanesidir. Bu widgette bir yandan sosyal medya kutucukları varken diger yandan da site içi arama yapabileceğiniz bir arama kutusu mevcut.

• Blogger > Yerleşim(Layout)> HTML/Javascript Diyoruz...
• Daha sonra aşağıdaki kodu yapıştıyoruz...

<style>#tbg-social{ width:295px;}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/AVvXsEi7tmsk3CxfGIA75A9R2N75dUS-v-3ps-FbRKVCVxuUJSJv5rCKVR83HH50UD3cjPEnsGBuGX8Ssf8XGPDHEJeiRrV9n1q3C6Is5Ju7hyphenhyphengPlB0e6OCbFRwXbj9_08YK5JMIfpQravJMaw4/s1600/search_box_psd_12.jpg) no-repeat scroll center center transparent; width: 290px; height: 50px; disaply: block;}
form#tbguide-searchform { display: block; padding: 8px 6px; margin: 0;}
form#tbguide-searchform #s { padding-left: 0px !important; padding: 12.5px; margin: 0; width: 184px; font-size: 11px; 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;" >Bizi Burada Bulabilirsiniz...</a>
</center><br />
<ul class="tbg-social"><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1lqSCyG23Ej1390AZ1I_KZQUhD8PMaSoA6UUpF_WrDnIMJigrQ3bsiedqa_4pnyPFn8srkfKjXFuRAFjV4DuacUaGlePVvvBOHt4c8lnFeRlTlZ9rTdBUbYQmjAqcq5c3QNPgj7rgJ8e/s1600/tbguide-social-buttons-facebook.jpg" title="Facebook" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgnAsuw49wKAP-5HJAN1stuVe3zsbc1OHQgzpNSQmC0xl0Yuyk4Z2fdVcJY-Qcx2Aes_JYxs-9csvmbPbP5VGuvmeAU_o5Z3bVMJT8YuVXu_seTYp-JZ7OrTBAQN_MI4LmTvJgHOR6rkV/s1600/tbguide-social-buttons-stumble.jpg" title="stumble" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDd_16h34JLm9wExC9i1rFk80_jKBuHKNNBIWDeIEdXNo-u2-biNKkhdI-muoIyr0Xmwh2SR-AxzRdNwKAjIAAgfdGyM2FUgWVm8OCQS4h0YMH91bVnAYjheGAROBPMAjhq4ncLbo-Rfz/s1600/tbguide-social-buttons.jpg" title="twitter" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5TTyAjG6FS91sjZ3du-JYCF8r4wOqA2-8jDgXHd9p5kY66VrSadYmFKwrXGQBH4F2h6v8uuxQzLpYj2L1WL_DiyLg6ZYNXBvDN4sLbeBjOQ6MVcFjgMWR8azgYdM7k47vF7-AGa0-hVS/s1600/tbguidesocial-buttons-google.jpg" title="Google Plus" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7agugYM61nNDNIAjqpfRboH3ZyriEfyjczuZ-YgHAd-B71vo1MtRfqtPXze9Kywm0fWgKFEchkwlgP1fx53jmpj6LUL04ixKufFCDzj9cmPO-wq9uAA3szftxM-778gd3g7x0K08xcGw/s1600/tbguidesocial-buttons-rss.jpg" title="Add RSS Feed" /></a></li>
</ul><div id="tbguide-searchbox"><form action="/Arama" id="tbguide-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;&quot;Arama..;}" onfocus="if (this.value == &quot;Arama...&quot;) {this.value = &quot;&quot;}" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" /> </form></div></div>