Cara Membuat Top Menu Plus Search Box Pada Blog - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Cara Membuat Top Menu Plus Search Box Pada Blog, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.
Judul : Cara Membuat Top Menu Plus Search Box Pada Blog
link : Cara Membuat Top Menu Plus Search Box Pada Blog
Cara Membuat Top Menu Plus Search Box Pada Blog
Menu ini direkomendasikan untuk digunakan sebagai menu halaman yang disimpan di bagian atas blog untuk tautan kontak, privasi, daftar konten, dan lainnya, dan dalam menu ini Anda juga dapat menambahkan logo blog. Saya membuat dua jenis menu yang berbeda dengan tautan profil sosmed dan kotak pencarian blog yang berbeda. Untuk menampilkan menu di layar besar dan kecil bisa dilihat pada gambar di atas.
1. 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}2. Ganti atau sesuaikan max-width:900px dengan max-width blog anda.
.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%}
}
3. 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 Cara Membuat Top Menu plus Search Box Pada Blog. Semoga berhasil dan terima kasih.
Sekian Artikel Cara Membuat Top Menu Plus Search Box Pada Blog
Sampailah kita pada akhir artikel Cara Membuat Top Menu Plus Search Box Pada Blog kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.
sobat sekarang membaca artikel Cara Membuat Top Menu Plus Search Box Pada Blog dengan alamat link https://naparom.blogspot.com/2018/07/cara-membuat-top-menu-plus-search-box.html
EmoticonEmoticon