Friday, December 6, 2013
Browse »
home»
blog
»
cara
»
di
»
kotak
»
membuat
»
search
»
Cara Membuat Kotak Search di Blog
Membuat Kotak Search di Blog memang bagian yang sangat penting di blog,pengunjung blog anda dipastikan akan mudah mencari artikel lain dan semakin membuat pengunjung itu pun betah berlama-lama di blog anda.
Dengan mengetikan kata kunci terkait,pengunjung blog anda akan langsung menemukan artikel anda yang ingin di cari.
Bagaimana .. langsung menuju ke tutorialnya aja ya?
Cara Membuat Kotak Search di Blog
1. Login ke blog anda
2. Masuk ke Rancangan -Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode </head> dan masukan kode berikut diatas kode </head>
#search{margin-left:11px;}
input#s {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-TixguYvj0PGkPaBv5dOfb_BMqofP_zhrxpZmvTXULPkavcutDRW3G4ZZqqTX4dnZOiLliFk1QPEdqmgmKQFY8AC_QwNJ50MqHuaza3Iftmy7WewTmowPVsmpMtBV-WzxpzLSzvz3c7n/s1600/fields.jpg) top left repeat-x;
border: 1px solid #CCCCCC;
padding: 6px 4px 6px 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #6D6D6D;
width: 275px;
float: left;
}
input#search-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUcGoQqHCrGndYlP_1WJ-n8znwKiUSmKJLu1SsTju9qeZl52Ro3T5DAj79H9yNPVvZbztpACRJasDbfnM8wJ2ujjZp4rxV2AVlajY9dHyBXW3Atcaue3gqdmVSWrIDyVVOoTXoJTVpj59/s1600/search.png) 0 0;
border: 0;
width: 25px;
height: 27px;
position: absolute;
margin: 4px 0 0 -30px;
cursor: pointer;
}
5. Setelah itu silahkan anda cari kode <div id=sidebar-wrapper> dan Masukan kode berikut tepat di bawahnya
6. Save
ket: ganti tulisan search dengan tulisan yang ingin anda tampilkan di dalam kotak
Cara Membuat Kotak Search di Blog
Membuat Kotak Search di Blog memang bagian yang sangat penting di blog,pengunjung blog anda dipastikan akan mudah mencari artikel lain dan semakin membuat pengunjung itu pun betah berlama-lama di blog anda.
Dengan mengetikan kata kunci terkait,pengunjung blog anda akan langsung menemukan artikel anda yang ingin di cari.
Bagaimana .. langsung menuju ke tutorialnya aja ya?
Cara Membuat Kotak Search di Blog
1. Login ke blog anda
2. Masuk ke Rancangan -Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode </head> dan masukan kode berikut diatas kode </head>
input#s {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-TixguYvj0PGkPaBv5dOfb_BMqofP_zhrxpZmvTXULPkavcutDRW3G4ZZqqTX4dnZOiLliFk1QPEdqmgmKQFY8AC_QwNJ50MqHuaza3Iftmy7WewTmowPVsmpMtBV-WzxpzLSzvz3c7n/s1600/fields.jpg) top left repeat-x;
border: 1px solid #CCCCCC;
padding: 6px 4px 6px 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #6D6D6D;
width: 275px;
float: left;
}
input#search-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUcGoQqHCrGndYlP_1WJ-n8znwKiUSmKJLu1SsTju9qeZl52Ro3T5DAj79H9yNPVvZbztpACRJasDbfnM8wJ2ujjZp4rxV2AVlajY9dHyBXW3Atcaue3gqdmVSWrIDyVVOoTXoJTVpj59/s1600/search.png) 0 0;
border: 0;
width: 25px;
height: 27px;
position: absolute;
margin: 4px 0 0 -30px;
cursor: pointer;
}
5. Setelah itu silahkan anda cari kode <div id=sidebar-wrapper> dan Masukan kode berikut tepat di bawahnya
<script type=text/javascript>
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
</script>
<div id=search>
<form action=/search id=search-form method=get>
<input id=s name=q onfocus=doClear(this) type=text value=search/>
<input id=search-submit type=submit value=/>
</form>
</div>
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
</script>
<div id=search>
<form action=/search id=search-form method=get>
<input id=s name=q onfocus=doClear(this) type=text value=search/>
<input id=search-submit type=submit value=/>
</form>
</div>
6. Save
ket: ganti tulisan search dengan tulisan yang ingin anda tampilkan di dalam kotak
Semoga artikel Cara Membuat Kotak Search di Blog dapat bermanfaat
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment