Tutorial membuat Menu Grid Blogger.
|
| Grid Menu Blogger |
Menu Grid Icon
Menu grid icon adalah menu terdiri dari icon gambar, garis vertical , garis horizontal ataupun garis diagonal. Berfungsi membantu designer untuk menyusun konten (gambar, paragraf, dan lain nya) dengan rapi dan terstruktur, dan isi konten akan berganti ganti sesuai dengan menu yang dipilih
A. Tutorial Menu Grid Post
Bagaimana cara membuat Grid Menu Post? Cara membuat Menu Grid di halaman postingan blog, ikuti langkah-langkahnya sebagai berikut.
Kode Script Menu Grid Post
- Pertama masuk ke Dashboard Blogger.
- Kemudian buat halaman postingan.
- Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
- Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'.
- Pilih' Tampilan HTML. '.
- Salin widget script di bawah ini, kemudian tempelkan di halaman postingan blog.
- Pratinjau
- Publikasikan
<link href='https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css' rel='stylesheet'/>
<style>
.brand_wrapper{margin:30px auto;width:100%;padding:0;overflow:hidden;clear:both}
.brand_wrapper ul{position:relative;overflow:hidden;margin:0 -10px;padding:0}
.brand_wrapper li{width:16.666%;position:relative;overflow:hidden;float:left;display:block;box-sizing:border-box;margin:0;padding:0 2px}
.post-menu{text-align:center;margin:10px 0;padding:15px;-webkit-box-shadow:0 11px 10px -7px rgb(228,230,233);-moz-box-shadow:0 11px 10px -7px rgb(228,230,233);box-shadow:0 11px 10px -7px rgb(228,230,233);border-radius:5px;background:#ffffff;overflow:hidden}
.post-menu i{font-size:30px;padding:5px;vertical-align:middle}
.post-menu i{font-size:auto;padding:5px;vertical-align:middle}
a.menu-link{color:blue}
.titlemenu{line-height:1.5;padding:0;color:red;font-weight:bold;}
.dark-mode .post-menu{background:black;}
.dark-mode a.menu-link{color:lightgreen;}
.dark-mode .titlemenu{color:lightblue;}
@media screen and (max-width:360px){
.brand_wrapper li {
width: 33%;
}
@media screen and (max-width:480px){
.brand_wrapper li {
width: 25%;
}
</style>
<div class='clr'></div>
<center>
<div class='brand_wrapper'>
<ul>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-neos'></i><div class='titlemenu'>News</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-heart-rate'></i><div class='titlemenu'>Healt</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-buffer'></i><div class='titlemenu'>Feature</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='far fa-blog'></i><div class='titlemenu'>Blog</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-credit-card-blank'></i><div class='titlemenu'>Template</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-hips'></i><div class='titlemenu'>Hips</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-eraser'></i><div class='titlemenu'>Trick</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-shopping-cart'></i><div class='titlemenu'>Shop</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-buromobelexperte'></i><div class='titlemenu'>Indeks</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-camera-retro'></i><div class='titlemenu'>Photo</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-play'></i><div class='titlemenu'>Videos</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-accusoft'></i><div class='titlemenu'>Theme</div></a>
</div>
</li>
</ul>
</div></center>
<div class='clr'></div>
B. Tutorial Menu Grid Homepage
Bagaimana cara membuat Grid Menu Homepage ? Cara membuat Menu Grid di halaman depan blog, ikuti langkah-langkahnya sebagai berikut.
Kode Script Menu Grid Homepage
- Pertama masuk ke Dashboard Blogger.
- Pilih Tema.
- Pilih Edit HTML.
- cari kode <head> , kemudian salin script CSS berikut di bawah ini dan tempelkan di bawah kode <head>.
- Kemudian salin kode CSS di bawah ini , dan tempelkan di atas kode ]]></b:skin>
- Dan terakhir salin kode script dibawah ini, kemudian tempelkan di atas kode </header>
- Pratinjau dan Simpan
<link href='https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css' rel='stylesheet'/>
.brand_wrapper{margin:30px auto;width:100%;padding:0;overflow:hidden;clear:both}
.brand_wrapper ul{position:relative;overflow:hidden;margin:0 -10px;padding:0}
.brand_wrapper li{width:16.666%;position:relative;overflow:hidden;float:left;display:block;box-sizing:border-box;margin:0;padding:0 2px}
.post-menu{text-align:center;margin:10px 0;padding:15px;-webkit-box-shadow:0 11px 10px -7px rgb(228,230,233);-moz-box-shadow:0 11px 10px -7px rgb(228,230,233);box-shadow:0 11px 10px -7px rgb(228,230,233);border-radius:5px;background:#ffffff;overflow:hidden}
.post-menu i{font-size:30px;padding:5px;vertical-align:middle}
.post-menu i{font-size:auto;padding:5px;vertical-align:middle}
a.menu-link{color:blue}
.titlemenu{line-height:1.5;padding:0;color:red;font-weight:bold;}
.dark-mode .post-menu{background:black;}
.dark-mode a.menu-link{color:lightgreen;}
.dark-mode .titlemenu{color:lightblue;}
@media screen and (max-width:360px){
.brand_wrapper li {
width: 33%;
}
@media screen and (max-width:480px){
.brand_wrapper li {
width: 25%;
}
<div class='clr'></div> <div class='brand_wrapper'> <ul> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fab fa-neos'></i><div class='titlemenu'>News</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fal fa-heart-rate'></i><div class='titlemenu'>Healt</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fab fa-buffer'></i><div class='titlemenu'>Feature</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='far fa-blog'></i><div class='titlemenu'>Blog</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fal fa-credit-card-blank'></i><div class='titlemenu'>Template</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fab fa-hips'></i><div class='titlemenu'>Hips</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fal fa-eraser'></i><div class='titlemenu'>Trick</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fal fa-shopping-cart'></i><div class='titlemenu'>Shop</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fab fa-buromobelexperte'></i><div class='titlemenu'>Indeks</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fal fa-camera-retro'></i><div class='titlemenu'>Photo</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fal fa-play'></i><div class='titlemenu'>Videos</div></a> </div> </li> <li class='brand_icon'> <div class='post-menu'> <a class='menu-link' href='#'><i class='fab fa-accusoft'></i><div class='titlemenu'>Theme</div></a> </div> </li> </ul> </div> <div class='clr'> </div>
Demo
Demikian cara membuat menu grid di beranda homepage atau halaman postingan blogger, semoga bermanfaat.