Search Box Blogger Mobile Template

Search Box Blogger Mobile Template ini adalah request dari seorang user dari group kami. Ikuti 2 step mudah pada Tutorial pasang Search Box Blogger di Mobile Template.

contoh tampilannya nanti

---

STEP 1

---

Paste-kan code yang kami sertakan dibawah ini, betul-betul tepat dibawah code
<!-- ( / HOOK AFTER HEADER ) --> yang anda boleh temui dari HTML Template Editor blogSpot anda. Kemudian Save Template.

<b:if cond='data:blog.isMobile'><div class='search_box'><form action='/search' method='get'><input name='q' placeholder='Find something...'/><input title='search' type='submit' value='GO'/></form></div></b:if>

---

STEP 2

---

Last step, pastekan code dibawah ini pula ke CUSTOM CSS anda.

/*--: THESIS MOBILE SEARCH BOX :--*/
.m .search_box{border:4px solid #fff;-moz-box-shadow:0 0 3px rgba(0,0,0,.15);-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);box-shadow:0 0 3px rgba(0,0,0,.15);-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;max-width:100%;margin:10px 1px;padding:0;outline:0}.m .search_box form{background:#f7f7f7;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;-moz-box-shadow:inset 0 0 5px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.1);box-shadow:inset 0 0 5px rgba(0,0,0,.1);outline:0;position:relative}.m .search_box input[name="q"]{position:absolute;left:0;width:90%;border:0;background:0;margin:0;line-height:1;font-size:20px;font-weight:700;padding:15px 0 10px 40px;border:0;outline:0;background:#f7f7f7;z-index:9}.m .search_box input[type="submit"]{float:right;margin:0;padding:0;color:#fff;text-transform:uppercase;font-weight:900;font-size:20px;height:50px;width:50px;text-align:center;line-height:50px;-webkit-border-radius:55px;-moz-border-radius:55px;border-radius:55px;text-shadow:1px 1px 1px #37621f;background:#51902e;outline:0;border:0;cursor:pointer;z-index:10;position:relative}@media only screen and (max-width:380px){.m .search_box input[name="q"]{padding:13px 0 13px 15px}}