බ්ලොග් එකට පට්ට සර්ච් බොක්ස් මෙන්න

පහත සදහන් කොඩ් කොපි කර ඔබගෙ බ්ලොග් අඩවියෙ layout ඈති තුලින් widget එකකට යොදන්න

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aJNb6J7QPMn1YSPS00nDxxb2b9DF2DseZJbMoDbDPo9SyRay1GWMqhyphenhyphenz1U-coVyf5OX2T0F-Mh_hoB6A00b4XLKzpDygolODcwxbszx2-MEb_-JIjbzOdj_NGJPq3IcUAyVTo8rIHwv_/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5ASJTxq3CmHI0hCtzvXNe1kBXxzOFpY7p1ZLA9DYqZy7odpgia1G1FMiyXeSnN79A752xTTtFz-rNuVtlHhPhC5Y51edZDWwqSplCbwahrBRo9ScEY2-nP8NkRW24UTn1AS9TCcIQwK_/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiETCkbhZlt91fyVXwfYlTexKnCVGbozU0j3edsZE2Wm3PE-0X-TBD5Tb_moXvCsWNvV7rKPkxszKaekbd0NsufyB1l7aOqmc0qTXFA-kG1B7aovcq6fzuUX0u4hN5aBQhyphenhyphenuSinTknkVSt/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>