Cara Membuat Kolom Search Berbasis Plus Media Sosial

Kolom Search. Pasti kalian sudah pada tau dong apa fungsinya? Yaitu untuk mencari suatu kategory yang sudah lampau. Blogger siapa saja yang tidak mempunyai kolom search di sidebar, header atau dibagian yang mudah dilihat pengunjung, ini dikatakan kalau blogger dia tidak user frendly! . Postingan kali ini adalah kolom pencarian berbasis plus media sosial. Jika anda suka dengan Kolom Search plus media sosial ini, ikuti langkah-langkah berikut ini:

Cara Pertama:

1. Masuk ke Blogger.
2. Tata letak -> Pilih di Sidebar -> Add Gedget Script HTML !
3. Copy-Paste kode berikut ini!

<!-- SEARCH BOX BY MAYCYBER -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type=&quot;text&quot;]
{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<!-- SEARCH BOX END -->

<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
    .TZ-social{padding:0 5px 15px;}
    .TZ-social img:hover{opacity:0.8}
    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id='socialwidget'>
    <div class='TZ-social'>
    <!-- social ico -->
    <center>

    <a href='https://www.facebook.com/gudangite-1098896160183608/' rel='nofollow' style='margin-right: 15px;' target='_blank'>
    <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeLd819hrBaDlrf-K6vejSYydIVLWoBYiaPdh9xJkMl60b1r_45LIlOSHinU1i1tu1zzx3RIQZmWEytD0_olFd0rCtHA8cbT-Yw-S88Tg-_meYz3Yt4vQusPnjfaLOJ8huqkaPU1XUp7I/s1600/facebook.png'/></a>

    <a href='https://twitter.com/maycyberdownlod' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ujNZytk3_z3LtU7KrIKzdhvYWN4PvAEAMADn4vGZmYu4FK2b4o_ID2eVjykPNyuH6zXYT256hOW6UMxKz6YDgGzj6MOYGC46QEKSrnlbnz9VyGlkwbm0xAoqKQ7Myekt4b7d_IXku8c/s1600/twitter.png'/></a>

    <a href='https://plus.google.com/101229258819436606911/posts' rel='me' style='margin-right: 12px;' target='_blank'>
    <img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqulWqhxrwHAOqn9qgaakt1RDHFEA5qmABIOFA6qOWGunN5CamPhujBTozxqMY-wJiWiW0rZiG1B1_i79pcCiotg3u3_spOzHkeyR-tn-KTPC0gOSUnMQq2OHKuM58fUENe2rOubsCO4/s1600/gplus.png'/></a>

    <a href='http://feeds.feedburner.com/gudangite' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcIH615hGIDmTXpA562Iz6kf9Ltd7LQ6CAFwKXYpncHys1x-LR8UCurv8grB66Jp4TJYBrSQbm1O1hi_J2avKGDoozxZ-HylXCycO8T2LgYOMsKuiqoH-WsRuBCt9iDdiJtG45JI4hn4Y/s1600/rss.png'/></a>


    </center>
    </div>
    </div>
</div>
<!-- SOCIAL PROFILE END -->

4. Silakan ganti kode yang berwarna merah dengan kepunyaan anda.
5. Simpan!

Dan, Taaraaaaaa Kolom Pencarian berbasis plus media sosial telah muncul^.^

Selamat Mencoba, dan Semoga Bermanfaat!

Thanks You For Reading. Thanks You For Visited My Website!