Post Game: pencarian

Showing posts with label pencarian. Show all posts

Wednesday, December 7, 2016

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

BERIKUT ini cara kembuat kotak pencarian (Search Box) blog mirip Yahoo, yakni Kotak Pencarian Yahoo Indonesia. This is a Yahoo! Search Box Style!

Fungsi meniru atau menyerupai tampilan sebuah situs web terkenal adalah, selain biar tampak keren dan profesional, juga agar blog kita "user friendly", dikenal dengan istilah UX (User Experience). Pengguna jadi terbiasa dan tidak merasa asing.

Kotak pencarian mirip Yahoo! Search Box ini bisa ditampilkan di header sebelah nama blog (logo), bisa juga di atas atau di bawah posting. Penampakannya seperti di gambar di atas.

CARA MEMBUAT KOTAK PENCARIAN MIRIP YAHOO!

1. Template >Edit HTML
2. Capas kode berikut ini di atas kode ]]></b:skin>

.searchform {background: url(https://lh6.googleusercontent.com/-_1OwVk5Mg6w/VK6wR9-Yf3I/AAAAAAAAJTM/4hlGeo2ddFQ/w550-h47-no/yahoo%2Bsearch.png) no-repeat; width:468px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #fff;width: 457px;outline: none;margin: 5px 7px 0px 10px;border-top: 1px solid #888;border-left: 1px solid #888;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.searchform .searchbutton {background: #3775dd;box-shadow: 0 2px #21487f;border: 0;height: 27px;width: 75px;padding: 5px;font: 500 15px sans-serif;color: #fff;border-radius: 4px;}

Catatan:

468px = ukuran lebar kotak ini untuk ditampilkan di samping logo/nama blog. Bisa diubah.
360px = ukuran lebar kotak entry teks, sesuaikan dengan lebar kotak.

3. Save Template!

Kembali ke Dashboard:

4. Layout > Add a New Gadget di samping logo header > pilih "HTML/Java Script"
5. Copas kode berikut ini:

6. Save!!!

Demikian Cara Membuat Kotak Pencarian Blog Mirip Yahoo! Biar keren dan user friendly! Good Luck!

Go to link Download

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

CARA memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.

Contohnya ada di sidebar blog CB ini, namun yang persis sama dengan kode yang CB share di bawah ini demonya bisa dilihat di Online News Template yang baru saja dipasang.

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.

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



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

<center>

<a href=http://facebook.com/cbblogger rel=nofollow style=margin-right: 15px; target=_blank>
<img alt=Facebook src=http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png/></a>

<a href=http://twitter.com/contohblog rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=Twitter src=http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/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=http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png/></a>

<a href=http://www.pinterest.com/cbblogger style=margin-right: 12px; target=_blank>
<img alt=Pinterest src=http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png/></a>

<a href=http://feeds.feedburner.com/contohblognih rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=RSS Feed src=http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png/></a>

<a href=http://www.linkedin.com/in/cbblogger rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=Linkedin src=http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png/></a>

</center>
</div>
</div>
</div>

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!

Go to link Download

Cara Membuat Horizontal Menu Drop Down Dengan Kotak Pencarian

Tutorial Blog - Kali ini saya akan membahas bagaimana cara membuat menu horizontal drop down ditambah dengan kotak pencarian, sebelumnya saya pernah membahas cara membuat menu dengan kotak pencarian, nah sekarang lebih dimodifikasi lagi. Penasaran simak baik-baik cara membuatnya.

Sumber: Allbloggingtips

1. Login ke blog kamu.
2. Pilih Rancangan > Pilih EDIT HTML > Cari kode ]]></b:skin>
3. Setelah ketemu, letakan kode di bawah ini tepat di atas kode ]]></b:skin>

#imenu {
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
border: none;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
overflow: visible;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-appearance: none;
margin-bottom: 15px;
margin-left:0px;
}
#halfnav{float:right;}
#halfnav ul, #halfnav ul li{display:inline;list-style:none;padding:0;margin:0}
#halfnav ul li a{
display:inline-block;
margin: 5px;
font-family:Lucida Grande,Helvetica,Arial,Verdana,sans-serif;
font-size:16px;
padding: 5px;
color:#fff;
line-height:20px;
text-decoration:none;
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
border: 1px solid #666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#halfnav ul li a:hover{border: 1px solid #222;box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#halfnav .current-menu-item a{border: 1px solid #000;}
#nav{position:relative;z-index:2000}
#nav .parent > a, #nav .parent > a:hover{background-image:url(../images/arrow.png);background-position:right;background-repeat:no-repeat}
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover{background-image:url(../images/arrow-right.png);background-position:right;background-repeat:no-repeat}
#nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0}
#nav ul li a{display:inline-block;font-family:Lucida Grande,Helvetica,Arial,Verdana,sans-serif;font-size:14px;color:#fff;line-height:36px;text-decoration:none;text-shadow:1px 1px 1px #333;padding:0 15px;margin-left:-4px;border-right:#777 1px solid}
#nav ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#nav .current-menu-item a{color:#ccc;}
#nav .current-menu-item .sub-menu a{color:#fff;text-shadow:1px 1px 1px #333}
#nav .menu > li:first-child a:hover{border-radius:0}
#nav .menu .sub-menu li a:hover{border-radius:0}
#nav ul li{position:relative}
#nav li ul{display:none;position:absolute;top:27px;left:7px}
#nav li ul a{background:#555}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 11px 180px}
#nav ul li:hover ul{display:inline-block}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#777 1px solid;margin:-1px 0 0 -11px}
#nav ul li:hover ul li a{width:150px;padding:0 14px}
#nav ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#888}
#nav ul ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#aaa}
#nav .children {z-index: 4000;}
#home {float: left;border-right:#777 1px solid;margin-right:4px;margin-left:15px; height: 36px;}
#home a:hover{opacity: .5}
#nohome {float: left; margin-right:4px;margin-left:5px; height: 35px;}
.searchform {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 160px;
padding: 0;
margin: 7px 5px 5px 10px;
height: 20px;
box-shadow:inset 0 0 1px #222;
background: #fff;
float: right;
margin-right: 20px;
}
.center .searchform {float:none;}
#morefoot .searchform {float:left;}
.searchform .s{
margin:0;
border: none;
margin: 3px 2px 2px 20px;
font-size: 12px;
height: 14px;
width: 130px;
color: #333;
overflow: hidden;
}
#magnify {float:left;position:absolute;margin: 2px 0 0 5px;}
#magnify {margin: 0 0 0 5px}
.searchform .s:focus {outline:0; border:none;}
.searchform .searchsubmit {display:none;}
.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
/* To fix the grid into a certain size, set max-width to width */
.row .row { min-width: 0; }
.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
.column:first-child, .columns:first-child { margin-left: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
.row .three { width: 21.679%; }
.row .nine { width: 73.9%; }
.row .ten { width: 82.6%; }
.row .twelve { width: 100%; }

Lihat kode yang berwarna merah sesuaikan lebarnya dengan blog anda.
Setelah selesai simpan Template. Kembali lagi ke menu awal pilih Add Gadget > HTML JavaScript.
Copy kode di bawah ini.

<div class="container">
<div class="row">
<div class="twelve columns" id="imenu">
<div id="nav" class="nine columns">
<div id="home"><a href="http://marvblues.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqrYdfpJRqWF6DzYbfpqxS-rExvN14n2lCwM7V2zLGstp5XQrKGBqfO_ePDB_g51TotZ9ak69l6oktlRbDJlgDSzC74RSQ5CTN5AmwxeKHEVT7c112Oqxg2oKQl_e4ZcvCHCAfI4RwY9D/s320/home.png" alt="home"></a></div>
<ul id="nav_menu">
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="http://www.allbloggingtips.com">Go Back To The Tutorial</a></li>
</ul> </div>
<div class="three columns">
<form method="get" class="searchform" action="http://marvblues.com/">
<div id="magnify"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlyjTGS1NbimRPNycvF-LmlhlymhQgRYgqwdsXmioV9hB34q_lwyvW4Nb8oEI_u1FFVbC-2zIn6Um0Oww3r1Nwwxy0KSM37C5VhRpmCyXpHu1YW8b7AcYVy66oYZ089NqYwGmzjavSMiJ/s320/magnify.png" alt="magnify"></div>
<div><input name="s" class="s" value="Search" id="searchsubmit" onfocus="if (this.value == Search) this.value = ;" type="text"></div>
<div><input class="searchsubmit" value="" type="submit"></div>
</form> </div>
</div>
</div>
</div>

Silahkan ganti tanda # Dengan URL yang dituju. Dan kata yang dicetak tebal dengan kata lainnya.
CSS dan HTML dibuat oleh Allbloggingtips.

Go to link Download

Cara Membuat Rating Bintang di Hasil Pencarian Google

Cara Membuat Rating Bintang di Hasil Pencarian Google - Halo guys , hembt kayaknya ane dah lama deh gak update postingan , kali ini mumpung ada waktu ane mau bagi-bagi ilmu . ayo-ayo sopo seng gelem ..? artikel kali ini mengenai bagaimana cara membuat rating bintang di pencarian google atau orang laen bilang cara membuat rich snippets rating bintang di search engine simbah google . dengan trick ini memugkinkan anda untuk menarik perhatian para pengunjug , mereka kira blog anta sudah top markotob . jadinya mereka mengklik blog anda ketika di search simbah google . nah bagi seng newbiee kayak ane , mungkin durung reti opo kuwi rating bintang ... liat gambar neng ngisor iki dijamin mudeng .

gimana udah tau kan apa itu rich snippets. kalau udah tau kita back to topic tentang cara membuat rating bintang dihasil pencarian google . perhatikan langkah dibawah iki yo ..

1. Buka blog sampean ndisek
2. Pilih Menu Template
3. Setelah ketemu menu template kemudian pilih submenu EditHTML
4. Kemudian sampean cari kode <data:post.body/> biasanya banyak sekali kode tersebut , pilih lah kode yang terakhir saja . atau sobat juga bisa langsung cari kode ini <b:if cond=data:blog.pageType == "static_page"><data:post.body/></b:if>
5. Kemudian sobat salin dan taruh kode dibawah ini tepat di bawah kode diatas .

<b:if cond=data:blog.pageType == "item">
<div class=hrecipe>
<span style=float:left;><img alt=thumbnail class=photo expr_src=data:post.thumbnailUrl expr_title=data:post.title/></span>
Title: <span class=item><span class=fn><data:post.title/></span></span><br/>
Posted by:<span class=author><data:post.author/></span><br/>
Published :<span class=published><data:post.timestampISO8601/></span><br/>
<span class=review hreview-aggregate>
<span class=rating>
Rating: <span class=average>4.9</span><br/>
Reviewer: <span class=count>100</span> Reviews<br/></span></span>
<span class=summary>Terimakasih banyak karena sobat telah membaca artikel <b><data:post.title/></b>. Sobat bisa bookmark halaman ini dengan URL <b><data:post.url/></b>. Jika ingin memposting ulang artikel ini harap untuk mencantumkan link sumber.</span>
</div>
</b:if>

6. Kemudian save template sobat dan lihat hasilnya . untuk membeuktikan berhasil atau tidaknya sobat pakai aja tool ini http://www.google.com/webmasters/tools/richsnippets . cara pakai tool itu sangat gampang sekali sobat tinggal maskan url sobat . dan jika berhasil maka hasilnya akan seperti ini .

** SELAMAT MENCOBA **

Go to link Download

Cara Membuat Kotak Pencarian Keren Di Blog

Okeh! Sekarang Yang Mau Gue Posting Adalah Cara Membuat Search Box Keren Di Blogger. Search Box Yang Gue Maksud Disini Bukan Search Box Yang Biasa. Namun Memiliki Efek Animasi, Yang Tentunya Sangat Keren. Search Box Ini Menggunakan CSS3, Jadi Jika Digunakan Pada Blog, Akan keren. Preview Kasarnya Bisa Dilihat Pada Gambar Diatas. Nah Untuk Caranya, Mari Kita Bahas.

Login Blogger Dulu.
Masuk Ke Template > Edit HTML > Lanjutkan.
Centang Expand Template Widget.
Cari Kode ]]></b:skin>, Copy Kode Berikut Dan Letakkan Di Atas Kode ]]></b:skin>

Seacrh Box on Dark Background

#search {

}

#search input[type="text"] {

background: url(search-dark.png) no-repeat 10px 6px #444;

border: 0 none;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #777;

width: 150px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;

}

#search input[type="text"]:focus {

width: 200px;

}

Priview Search Box on Dark Background :

Seacrh Box on Light Background

#search {

}

#search input[type="text"] {

background: url(search-white.png) no-repeat 10px 6px #fcfcfc;

border: 1px solid #d1d1d1;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #bebebe;

width: 150px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;

}

#search input[type="text"]:focus {

width: 200px;

}

Preview Seacrh Box on Light Background :

Nah Silahkan Dipilih. Di Gambar Previewnya Ada Dua Search Box. Bagian Atas Adalah Search Box Saat Belum Diklik, Dan Bagian Bawah Adalah Search Box Kalo Udah Di Klik. Search Boxnya Akan Memanjang Gitu... Silahkan Dipilih, Mau Yang Search Box on Dark Background Atau Search Box on Light Background. Udah Milihnya? Jangan Kelamaan, Karena Ada Langkah Terakhir. Simak Langkah Terakhirnya.

Masuk Ke Tata Letak > Add Gadget. Atau Bisa Juga Di Edit HTML.
Copy Kode Ini, Lalu Pastekan Di Tempat Yang Lo Mau.

</form>

Kalo Udah. Save And Enjoy... Hadeuh... Panjang Juga... Ya Udahlah, Segitu Aja. Thanks!

Go to link Download

Post Game

Wednesday, December 7, 2016

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

Thursday, November 3, 2016

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Wednesday, October 19, 2016

Cara Membuat Horizontal Menu Drop Down Dengan Kotak Pencarian

Cara Membuat Horizontal Menu Drop Down Dengan Kotak Pencarian

Friday, October 7, 2016

Cara Membuat Rating Bintang di Hasil Pencarian Google

Cara Membuat Rating Bintang di Hasil Pencarian Google

Thursday, October 6, 2016

Cara Membuat Kotak Pencarian Keren Di Blog

Cara Membuat Kotak Pencarian Keren Di Blog