របៀបដាក់ប្រអប់ Search ក្នុង blogger/blogspot

 

សព្វថ្ងៃនេះមានការពេញនិយមពីការបង្កើត blogger/blogspot ដូចច្នេះដើម្បីងាយស្រួលក្នុងការ ស្វែងរកគេត្រូវការ Search ។ខាងក្រោមនេះជាកូដ

របៀបធ្វើ

1. Login to Blogger Dashboard -> Layout tab
2. ចុចលើពាក្យ Add a Gadget នៅកន្លែងណាក៏បានស្រេចតែយើងចង់ដាក់.
3. ជ្រើសយក HTML/JavaScript ពីតារាង
4. ចម្លង Code Search Box ដែលអ្នកពេញចិត្ត ដាក់ក្នុងតារាង HTML/JavaScript បន្ទាប់មក Save the Gadget.ជាការស្រេច

STYLE 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oIOHLdRAEPVpxr7w97tX3ZaJ4Q9Jzw-lvhp7pY-kPOUnZC7gbNfUY1RGbwjOn3GM70574hvzqa6Efhqi0nr5irHq0CP74xiVb24xiurXwF7AIeXtqGcenl0MF1ZLsj44fBsSJ6vZHahR/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

STYLE 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizcGMPuG_5c3muZ1jaE-fAaRfq0CVCdH5qzcQ_fpVMOAwfHoEOuM6gZAeUGT8MmjBP4bTkCYpG_ztKu1gnCdfCq-VJ-8DGzalV9sMNDqoaOGGBCd4WezuD1P3abAAbcWOp70sQe_QfGHB0/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

STYLE 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3VIGzHnSzN0vpX6clQ92YU_LzSw5G-M2E6te6zMARtRkowsT-c0f2n8-QdjYaCGMP6Y3hCLj5le6OBJx7zvv42BZRz8sa3sFyJ-L1tEa2_LhlQLhRnwc7kWrcCH0jJIoB4jRh30dDkO9r/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

STYLE 4hhghg

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV777jiZGGz9aTuynfiWcOcrODYxtRPMPYlm81VtgdFBoekOJlVzsuVZPWeIVJiejSQ5Lr58jSGCCcuyFoedbwpUP7uNZAdOf13CTrQ9gxQuIMucgWlD7qvVg2YIbsl5bHCgcz1gq-KOi2/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

STYLE 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0Xff0cscAF9n_85pJbV_Ace8gos-MBikiXywsJ7gRIgDv9rgRup6JM_qoB5NNz2YRnQUogcB1Tp7Psw0L1rkGjiTfD_nNvZtx1RCAc7JGSW8hCCIxAh8YvOSDWIF-OWFmSvoCpE0qJsX/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

STYLE 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCneuZfybXP6aqRS6MkIUGeMArMnEf5Smd8xwb9POQ1-qgdcFYYX1fIZS2pBHQrvZRvOovsK_9BQ4nBm4niXyjzo-pgapxV-ganOSlcj9T7PXEmhDV8WIZqof0WcrT54VgkO6DzyF8uiv3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

អត្ថបទក្នុង: ចំនេះដឹងផ្នែក Internet / អត្ថបទទាក់ទងនឹង Blogspot ( Blogspot Tips )

comments