Ditulis oleh: Ditulis pada: 6/12/2019
Bagian 3 Lanjutan Belajar Membuat Tema Kustom Blogger Dari Awal - Setelah sebelumnya kita berhasil membuat blog dengan custom template dan membuat header blog menjadi dinamis, kini kita akan mengatur lebar blog dan memasang menu.
Dengan ini kita akan membuat tema custom sederhana dan selanjutnya terserah Anda untuk mengembangkannya lebih lanjut agar sesuai dengan desain yang Anda inginkan.
Kemarin kita berhasil membuat blog dengan lebar penuh baik di desktop maupun ponsel, dan kini kita akan mengatur lebar blog pada tampilan desktop.
Tambahkan kode berikut di bawah kode <body>
<div class='outer-wrapper'>Dan tambahkan kode </div> di atas kode </body>
Kemudian tambahkan CSS di style blog di atas kode ini.
/*]]>*/Silahkan tambahkan kode CSS berikut:
.outer-wrapper {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 10px;
position: relative;
}Angka yang ditandai silahkan atur sesuai lebar yang diinginkan.
Kemudian kita tambahkan menu di bawah header, tambahkan CSS di style blog di atas kode ini.
/*]]>*/Silahkan tambahkan kode CSS berikut:
.menu-kompiajaib {
float: left;
width: 100%;
display: flex;
background: #333;
margin-bottom: 20px;
}
.menu-kompiajaib .menu {
position: relative;
display: flex;
align-items: center;
margin: 0 18px;
}
.menu-kompiajaib .menu .btn-menu {
display: flex;
align-items: center;
padding: 0;
border: 0;
background: 0 0;
color: #fff;
font-size: 16px;
text-decoration: none;
font-weight: 700;
line-height: 55px;
cursor: pointer;
}
.menu-kompiajaib .menu .btn-menu:focus,
.menu-kompiajaib .menu .btn-menu:active,
.open-menu:focus,
.open-menu:active {
outline: none;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu {
display: flex;
margin-left: 5px;
box-sizing: initial;
justify-content: center;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu svg {
width: 15px;
height: 15px;
vertical-align: middle;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu svg path {
fill: #fff;
}
.menu-kompiajaib .menu .sub-menu {
box-shadow: 0 10px 25px 0 rgba(0,0,0,.2);
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 8px 0;
pointer-events: none;
opacity: 0;
list-style: none;
background: #fff;
border-radius: 0 0 4px 4px;
transition: opacity .2s cubic-bezier(.25,.1,.25,1);
}
.menu-kompiajaib .menu .sub-menu li {
position: relative;
width: 180px;
}
.menu-kompiajaib .menu .sub-menu li a {
padding: 8px 15px;
font-weight: 700;
font-size: 16px;
color: #555;
display: block;
text-decoration: none;
line-height: 1;
}
.menu-kompiajaib .menu .btn-menu:hover~.sub-menu, .menu-kompiajaib .menu .btn-menu:focus~.sub-menu, .menu-kompiajaib .menu .sub-menu:hover, .menu-kompiajaib .menu .sub-menu:focus-within {
opacity: 1;
pointer-events: all;
transition: opacity .2s cubic-bezier(.25,.1,.25,1);
visibility: visible;
}
.menu-kompiajaib .menu .btn-menu:hover, .menu-kompiajaib .menu .sub-menu li a:hover {
color: #39F
}
input.check-menu {
position: fixed;
top: -100px;
opacity: 0
}
.open-menu {
display: none;
visibility: hidden;
}
@media screen and (max-width:960px){
.menu-kompiajaib {
display: none;
}
.open-menu {
display: block;
visibility: visible;
position: absolute;
top: 0;
right: 10px;
line-height: 55px;
margin: 0;
padding: 0 10px;
cursor: pointer;
}
.open-menu svg {
vertical-align: middle;
}
.open-menu svg path {
fill: #333;
}
input.check-menu:checked~.menu-kompiajaib {
display: block;
width: 100%;
background: #fff;
position: fixed;
top: 123px;
left: 0;
height: 100vh;
overflow-y: visible;
padding-top: 10px;
scrollbar-width: none;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 9999;
}
input.check-menu:checked~.menu-kompiajaib::-webkit-scrollbar {
display: none
}
input.check-menu:checked~.menu-kompiajaib .menu {
position: relative;
align-items: unset;
margin: 0 18px;
display: block;
text-align: left;
}
input.check-menu:checked~.menu-kompiajaib .btn-menu {
align-items: unset;
display: block;
color: #333;
line-height: 35px;
width: 100%;
text-align: left;
}
input.check-menu:checked~.menu-kompiajaib .menu .btn-menu .arrow-menu {
display: inline;
}
input.check-menu:checked~.menu-kompiajaib .menu .btn-menu .arrow-menu svg path {
fill: #333;
}
.menu-kompiajaib .menu .btn-menu:hover~.sub-menu, .menu-kompiajaib .menu .btn-menu:focus~.sub-menu, .menu-kompiajaib .menu .sub-menu:hover, .menu-kompiajaib .menu .sub-menu:focus-within {
position: relative;
padding-top: 0;
box-shadow: none;
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
}Kemudian tambahkan kode HTML menu di atas kode berikut:
<b:section class='main' id='main' showaddelement='yes'>Berikut kode HTML menu yang ditambahkan di atas kode tadi.
<input class='check-menu' hidden='' id='check-menu' name='checkmenu' type='checkbox'/>
<label class='open-menu' for='check-menu' role='open-menu' tabindex='0'><svg width="24" height="24" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></label>
<nav class="menu-kompiajaib">
<div class="menu">
<button class="btn-menu">Menu 1<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</div>
<div class="menu">
<button class="btn-menu">Menu 2<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</div>
<div class="menu"><a class="btn-menu" href="#">Menu 3</a></div>
<div class="menu"><a class="btn-menu" href="#">Menu 4</a></div>
</nav>Sekarang tinggal SAVE tema dan cek penampakannya.
Jika Anda mengikuti tutorial belajar cara membuat tema custom ini dari awal, maka blog Anda akan tampak seperti blog berikut ini.
Nah selanjutnya silahkan Anda kembangkan dasar-dasar membuat tema custom blog ini dengan mengikuti tutorial-tutorial yang ada agar tema sesuai dengan desain yang diinginkan.
Jangan takut untuk mencoba terus membuat tema kustom dengan mencoba membuat tampilan yang diinginkan dan memasang widget-widget serta optimasi tema dari tutorial-tutorial Blogger.
Atau silahkan tonton video tentan cara membuat blogger custom template dari awal bagian 3 ini agar lebih jelas.
Selamat mencoba dan berkreasi.