Sedikit Info Seputar
Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat
Terbaru 2017
- Hay gaes kali ini team All About Android, kali ini akan membahas artikel dengan judul Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat, kami selaku Team All About Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai All About Android. semoga isi postingan tentang
Artikel Blogging,
Artikel Tutorial, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat
Terbaru
link: Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat
Berbagi Artikel Tentang Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat Terbaru dan Terlengkap 2017
CARA memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.Kotak Pencarian merupakan salah satu menu utama dalam sebuah situs web/blog. Kotak ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.
Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak user friendly. Sedangkan ikon sosial media berguna bagi nusa dan bangsa, eh.... berguna bagi meningkatkan jumlah follower, teman, atau liker.
Sebelum memasangnya, tentu saja Anda harus punya dulu akun-akun media sosialnya.
Cara Membuat Kotak Pencarian plus Ikon Media Sosial
1. Layout > Add a Gadget di sidebar paling atas.2. Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.
<!-- SEARCH BOX -->
<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="text"]
{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='http://facebook.com/cbblogger' rel='nofollow' style='margin-right: 15px;' target='_blank'>
<img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmge1_QRAdQA3fwE5gAB60iD5E9ecHWzHIEHdlDr6Bky6HLp9aJzVcIfl0oL2_uni9JWFkff7H6AxCVYnXUGI6RSvXUlwvhAjB1n_eQNRf_deHsYJfaXQCFazFNyqLliHlmzLzA4mSVnc/s1600/facebook.png'/></a>
<a href='http://twitter.com/contohblog' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzHjepccH8rCzFlMqdBxenzCRrgk79dqvcnfC96vQfauTSOCSR7WP5PWjHDx58dm7lTqqfoMSZoSmVzzbYja8l9bKD3sERReQECKhkaaXJK-qn-97fPXjs1OI17AkS1n4X0gsxcYjz7M/s1600/twitter.png'/></a>
<a href='https://plus.google.com/106869251529186655236/posts' rel='me' style='margin-right: 12px;' target='_blank'>
<img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkgFXib39WGqRTylLsYtwty1AJY_lJuGf_pCp_psajqIgI24Bgmz7fAbbEe0CUwtyH9wh07GFVWVmJ4xzhlHTnJNEtJE6Tf_DgQORkZKLvEpCnTf38vd5dMQLTX4Y9KneqiPRjagvLAk/s1600/gplus.png'/></a>
<a href='http://www.pinterest.com/cbblogger' style='margin-right: 12px;' target='_blank'>
<img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSzFpD-EL3cZS2-Cg4NAMkXouC3MYVvqG30BB0RyhC3E3SrP5RSqZIEJb4pm5R2GXwrXiX3ZS1HStewEwVWO9aihGka3BgCj5WGT5wjZlfbgSUTaWTsA7hbGVAaoiHZZAvrKhz5TFFts/s1600/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/contohblognih' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKikAAkFrmGdB7b5MuaKdvYzOp5Du8-usM1G3IVLhOztAZTdMtTWOpn5qURNBBKuSZYt9_fOVXQ3d4hODSD5Ne1kHq0h_Xz1CSRzoadpTU-XjUyiU7UdOsbBgF4mYvjxm-ru9QuQzb6U/s1600/rss.png'/></a>
<a href='http://www.linkedin.com/in/cbblogger' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJtFcbyTzsjQ-hb-DLb1ZtWCDjjJljFt1xt7xOZYD_gJkcNPB2ZK5fgilABeBJpbCH1BfQ110RooUT3LvQ4FuJV-gck35CcgdW40WGmlCgIjnE6G1i0HAtEqRes1NibeXiUSYyi1FhSs/s1600/linkedin.png'/></a>
</center>
</div>
</div>
</div>
<!-- SOCIAL PROFILE END -->
<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="text"]
{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='http://facebook.com/cbblogger' rel='nofollow' style='margin-right: 15px;' target='_blank'>
<img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmge1_QRAdQA3fwE5gAB60iD5E9ecHWzHIEHdlDr6Bky6HLp9aJzVcIfl0oL2_uni9JWFkff7H6AxCVYnXUGI6RSvXUlwvhAjB1n_eQNRf_deHsYJfaXQCFazFNyqLliHlmzLzA4mSVnc/s1600/facebook.png'/></a>
<a href='http://twitter.com/contohblog' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzHjepccH8rCzFlMqdBxenzCRrgk79dqvcnfC96vQfauTSOCSR7WP5PWjHDx58dm7lTqqfoMSZoSmVzzbYja8l9bKD3sERReQECKhkaaXJK-qn-97fPXjs1OI17AkS1n4X0gsxcYjz7M/s1600/twitter.png'/></a>
<a href='https://plus.google.com/106869251529186655236/posts' rel='me' style='margin-right: 12px;' target='_blank'>
<img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkgFXib39WGqRTylLsYtwty1AJY_lJuGf_pCp_psajqIgI24Bgmz7fAbbEe0CUwtyH9wh07GFVWVmJ4xzhlHTnJNEtJE6Tf_DgQORkZKLvEpCnTf38vd5dMQLTX4Y9KneqiPRjagvLAk/s1600/gplus.png'/></a>
<a href='http://www.pinterest.com/cbblogger' style='margin-right: 12px;' target='_blank'>
<img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSzFpD-EL3cZS2-Cg4NAMkXouC3MYVvqG30BB0RyhC3E3SrP5RSqZIEJb4pm5R2GXwrXiX3ZS1HStewEwVWO9aihGka3BgCj5WGT5wjZlfbgSUTaWTsA7hbGVAaoiHZZAvrKhz5TFFts/s1600/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/contohblognih' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKikAAkFrmGdB7b5MuaKdvYzOp5Du8-usM1G3IVLhOztAZTdMtTWOpn5qURNBBKuSZYt9_fOVXQ3d4hODSD5Ne1kHq0h_Xz1CSRzoadpTU-XjUyiU7UdOsbBgF4mYvjxm-ru9QuQzb6U/s1600/rss.png'/></a>
<a href='http://www.linkedin.com/in/cbblogger' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJtFcbyTzsjQ-hb-DLb1ZtWCDjjJljFt1xt7xOZYD_gJkcNPB2ZK5fgilABeBJpbCH1BfQ110RooUT3LvQ4FuJV-gck35CcgdW40WGmlCgIjnE6G1i0HAtEqRes1NibeXiUSYyi1FhSs/s1600/linkedin.png'/></a>
</center>
</div>
</div>
</div>
<!-- SOCIAL PROFILE END -->
3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!
Selamat, kini Kotak Pencarian plus Ikon Media Sosial sudah muncul di sidebar blog Anda :)
Semoga artikel diatas bermanfaat bagi anda. Terimakasih .....
Itulah sedikit Artikel Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat terbaru dari kami
Semoga artikel Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai All About Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Artikel Tentang Cara Membuat Kotak Pencarian plus Ikon Media Sosial Dengan Cepat Terbaru
