Stylish Sosial Media Widget dengan Search Box

Gambar yang terlihat di bawah ini adalah widget social media yang dilengkapi search box atau kotak pencarian. Cantik ya? Berminat dan ingin widget ini terpampang di sidebar blog anda? 

Kalo iya maka baca terus artikel ini karena saya akan menulis tentang cara membuat stylish sosial media widget yang dilengkapi dengan search box.

Berikut cara membuatnya:

1. Login ke akun blogger anda
2. Pilih menu "Tata Letak" atau "Layout"
3. Klik "Tambahkan Gadget" dan pilih "HTML/Javascript"
4. Pastekan kode dibawah ini

<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}

#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_aI3QUCBdq8hEgpPKlaZA-421xlKt2gJYtovnUhNLZ89lE04WmRjJ4WTQ3Jqsxa_uREzvCFHmePDRLMd6fLDb2Mhc70XtJd3vXadL3JvJJL_YR9UTXrESZstTkpdR2TqNM-u-RnPi8sT/s1600/blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#btrix-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
  
form#btrix-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#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>

<div id="btrixwidget"><center>
<a href="http://twitter.com/user-id anda" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-eTsjw7bjTZJCL5EqQTxOChC46lxXRb7AM7p1jjcBDdQCxIfkoaDcFheNRTSdJ8EEZtau5MFU8R0LAwgMAwAmXAHbvcfpVz_1R-FmFFLdF0FCfjXWPEj7PqTYozeKwJDDT9hpZjR5VTo/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>

<a href="http://www.facebook.com/user-id anda" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFTgr54pPnm7EsjFVRLjmhGO6OzaQZm4uzkJ5XlsYShQfGNRK4ExcdrrnWbCZOEX8-8wFw8_a8HOlX6m5zWaQnXBaQC-f7Y1pobxB8i3f3HI_ETKpjYQaynkM-6pP9aIJDf1WTnLvq1s/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>

<a href="http://feeds.feedburner.com/user-id anda" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4_vsAER9cm_MfX5mBfADgEfDmnviJWjBXYGiagS8Lok19zva1D4MuGjDRUVvYEB5Yq18VWfxUUkqVnUf_BD0Hl8HoUxczRBKC06ZSG6qJ1hkqng8Kw59fI76NBY26m2XhQLkwsjc2hQ/s1600/btrix-rss.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiecQIgTqIuqaYHvqUXk8FooY9iXt6TLdi4z7cypAwlNLuAwm2iRqvfcCFVOtBCJ_p8Yee3kcIFPQjt5GOHtQkOxzubGJyiIVGWa0Pv-Pn_Bm8E5PxkvISQYxvUqeptAuEzL3-8B39-qFc/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>

<div id="btrix-searchbox">
    <form id="btrix-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>

Keterangan:
Ganti user-id dengan profil Twitter anda
Ganti user-id dengan profil Facebook anda
Ganti user-id dengan profil Feedburner anda
Ganti username dengan profil linkedin anda 



5. Simpan dan selesai 

Demikianlah cara membuat widget stylish social media yang dilengkapi dengan search box. Artikel sebelumnya membahas tentang cara membuat daftar isi di blogspot. Silakan di lihat jika tertarik untuk membuatnya.

Selamat mencoba, semoga membantu.