Cara Membuat Menu Search Box Pada Blog
Admin akan sedikit menjelaskan bagaimana cara mengatasi dan membuat kotak pencarain (search box) keren untuk blogger. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :- Copy Paste kode di bawah dan letakkan di atas kode ]]></b:skin> atau </style>
.page_menu_wrapper{width:100%;max-width:900px;margin:0 auto}
.clear{clear:both}
.page-menu ul li{list-style:none;display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.search-box{width:300px;height:27px;float:right;padding:0;margin:8px 8px 1px 0;position:relative}
#search-form,#searchform,.search-button{border:none;line-height:27px}
#searchform{position:relative;border:1px solid #ddd}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:0;left:0;font-size:16px;color:#888;background:0 0;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
@media screen and (max-width:800px){.page-menu,.search-box{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px}
.page-menu ul li,.search-box{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
#search-box,.page_menu_wrapper{padding-bottom:10px}
#search-box{width:96%;float:left;padding-right:0;margin:0 2%}
.search-box{margin-top:10px}
#searchform{margin:0 10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){.page-menu ul li{width:50%}
}- Ganti atau sesuaikan max-width:900px dengan max-width blog anda.
- Kemudian copy kode HTML di bawah ini dan simpan di bawah kode <body>
<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='URL LOGO BLOG' expr:title='data:blog.title' width='171'/></a></li>
<li><a href='#' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
</ul>
<div class='clear'></div>
</nav>
<div class='search-box'>
<form action='/search' id='searchform' method='get'>
<input id='search-form' name='q' placeholder='Search here and hit enter' type='text'/>
<span class='search-button'><i class='fa fa-search'></i></span>
</form>
</div>
<div class='clear'></div>
</div>
</body>- Silahkan buat logo blog dengan tinggi 30px dan lebarnya sesuaikan kemudian silahkan ganti URL LOGO BLOG dengan url logo blog Anda dan sesuaikan width dengan lebar logo blog Anda. Dan sesuaikan About, Contact, dan lainnya sesuai keinginan Anda dan ganti setiap kode # dengan url page yang ingin ditampilkan.
Demikian informasi tentang Cara Membuat Menu Search Box Pada Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.
No comments:
Post a Comment