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.

Search Box Blogger 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}}

3 comments.. read them below or add one

Idea Berita Idea Berita April 14, 2016
Bagaimana pula nak gantikan search box ni ke search box adsense?
lokman amirul lokman amirul May 17, 2016
Kurang paham...boleh ajar secara details