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? 

social media dan search box widget

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
  5. <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 

  6. 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.

1 komentar:

  1. Wonderful post thanks for HTML CODE, checkout my blog at
    http://definingwords.blogspot.com/2012/08/romantic-words.html
    don't be shy to leave a comment or like us on facebook

    BalasHapus