 |
| Cara Membuat Grid Menu di Beranda Homepage Blogger |
Grid Menu Blogger
Bagaimana cara membuat menu grid di beranda homepage atau halaman page blogger?
Tutorial
Ada dua metode membuat Menu Grid dan menambahkannya di Blogger adalah di dalam "Halaman statis" dan "Beranda / Homepage".
Metode 1 - Halaman Statis
1. Masuk ke dasbor blogger
2. Buat halaman atau posting baru ,
3. Editor Mode Html dan Copy paste kode script di bawah ini dan
4. Pratinjau
5. 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>
Method 2 - Beranda / Homepage
1. Salin kode script di bawah ini, dan kemudian tempelkan di bawah kode <head>
<link href='https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css' rel='stylesheet'/>
2. Kemudian salin kode CSS di bawah ini , dan tempelkan di atas kode ]]></b:skin>
.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%;
}
3. Dan terakhir salin kode script dibawah ini, kemudian tempelkan di atas kode </header>
<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>
Demikian semoga bermanfaat.