Simple Sajian Responsive With Logo And Search Box
Ada beberapa sahabat Kompi Ajaib yang menanyakan cara menciptakan sajian yang sedang dipakai di Kompi aneh yang menyertakan logo blog dan profil sosial media.
Untuk itu, hari ini aku akan bagikan cara menciptakan menunya. Sebut saja sajian ini yaitu simple sajian responsive alasannya yaitu memang sajian ini sangat simple dan tidak memakai jquery sehingga sangat ringan jikalau digunakan.
Menu ini disarankan untuk dipakai sebagai page sajian yang disimpan di paling atas dari blog untuk link kontak, privasi, daftar isi dan lainnya, dan di sajian ini juga Anda dapat menambahkan logo blog. Saya menciptakan 2 jenis sajian dengan tambahn yang berbeda yaitu dengan link profil sosmed dan kotak pencarian blog. Untuk tampilan sajian pada layar besar dan kecil dapat dilihat pada gambar di atas.
Live Demo:
1. Simple Menu Responsive With Logo And Search Box
Copy arahan CSS di bawah ini dan letakkan di atas kode
]]></b:skin> atau </style> .page_menu_wrapper{width:100%;max-width:1100px;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%}
}
Silahkan sesuaikan
max-width:1100px dengan max-width blog Anda.Kemudian copy arahan HTML di bawah ini dan simpan di bawah arahan
<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='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='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Iklan</span></a></li>
<li><a href='#' itemprop='url' title='Review Job'><span itemprop='name'>Review Job</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>
Silahkan buat logo blog dengan tinggi 30px dan lebarnya sesuaikan lalu 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 harapan Anda dan ganti setiap arahan # dengan url page yang ingin ditampilkan.
2. Simple Menu Responsive With Logo And Social Media
Copy arahan CSS di bawah ini dan letakkan di atas kode
]]></b:skin> atau </style> .page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li,.sos-profil ul{list-style:none}
.page-menu ul li{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}
.sos-profil{float:right;margin:0}
.sos-profil li{float:left;display:inline-block;margin-left:10px}
.sos-profil a{color:#666;font-weight:500}
.sos-profil a:hover{color:#e8554e!important}
@media screen and (max-width:800px){.page-menu,.sos-profil{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,.sos-profil{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
.sos-profil ul{width:auto;display:inline-block;float:none;margin:0 auto;padding:0!important}
.sos-profil li{margin:0 10px}
.sos-profil{margin-top:10px}
.page_menu_wrapper{padding-bottom: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%}
.sos-profil li{margin:0 5px}
}
Silahkan sesuaikan max-width:1100px dengan max-width blog Anda.
Kemudian copy arahan HTML di bawah ini dan simpan di bawah arahan
<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='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='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Iklan</span></a></li>
<li><a href='#' itemprop='url' title='Review Job'><span itemprop='name'>Review Job</span></a></li>
</ul>
<div class='clear'></div>
</nav>
<div class='sos-profil'>
<ul>
<li><a href='https://www.facebook.com/username' title='Facebook'><i class='fa fa-facebook fa-lg'></i></a></li>
<li><a href='https://twitter.com/username' title='Twitter'><i class='fa fa-twitter fa-lg'></i></a></li>
<li><a href='https://www.google.com/+username' title='Google+'><i class='fa fa-google-plus fa-lg'></i></a></li>
<li><a href='//id.linkedin.com/in/username' title='LinkedIn'><i class='fa fa-linkedin fa-lg'></i></a></li>
<li><a href='http://www.youtube.com/c/username' title='Youtube'><i class='fa fa-youtube fa-lg'></i></a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=258304578432369xxxx' title='Follow Blog'><i class='fa fa-plus-square fa-lg'></i></a></li>
</ul>
</div>
<div class='clear'></div>
</div>
Silahkan buat logo blog dengan tinggi 30px dan lebarnya sesuaikan lalu 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 harapan Anda dan ganti setiap arahan # dengan url page yang ingin ditampilkan. Dan silahkan sesuaikan username setiap url profil sesial media Anda.
Namun alasannya yaitu ikon di sajian ini memakai font awesome, jadi pastikan bahwa blog Anda sudah memakai font awesome.
Selamat mencoba... Sumber https://www.kompiajaib.com/
0 Response to "Simple Sajian Responsive With Logo And Search Box"
Posting Komentar