Cara Membuat Header dengan Icon SVG Responsive di Blog
2/19/20
Add Comment
Membuat Header di blog kali ini sudah Responsive baik ditampilan Dekstop maupun Mobile. Dengan menambahkan ikon SVG maka akan membuat loading header jauh lebih ringan.
Memasang header pada suatu blog sangatlah penting dan wajib dipasang, karena dengan memasang Header dapat memperjelas Navigasi blog anda dan dapat mempermudah para pengunjung dalam mencari artikel di blog anda.
Selain Header yang penting untuk dipasang, anda juga dapat memasang Footer di bagian bawah blog. Footer juga sama pentingnya dengan Header yaitu untuk memperjelas Navgasi blog.
Namun, untuk bagian Footer sering digunakan untuk meletakkan sub menu eperti Sitemap, Disclaimer, Contact dan lain sebagainya. Jika kamu tertarik ingin menggunakan Footer kamu bisa baca artikel berikut ini "Cara Membuat Footer Tiga Kolom Responsive di Blog".
Baiklah, tidak perlu berlama-lama lagi langsung saja kita masuk ke tutorial membuat header blog responsive.
Cara Membuat header blog Responsive
1. Pertama, Login ke Blogger.com
2. Pilih Tema > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy dan Pastekan kode CSS dibawah ini tepat DIATAS kode tersebut.
/* HEADER */
#header-container{background:#438e68;background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));position:absolute;-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);top:0;left:0;right:0;width:100%;z-index:999;height:48px}
#header-wrapper{max-width:1000px;margin:0 auto;position:relative}
.header{text-align:left;max-width:400px;float:left;margin-right:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.header h1.title,.header p.title{font:bold 25px Poppins, Arial, sans-serif;color:#ffffff;margin:0;line-height:50px}
.header .description{color:#ffffff;margin:-10px 0 4px 0;padding:0;font-size:0.7em;display:none}
.header a,.header a:hover{color:#ffffff}
.header img{display:block;width:auto;margin:10px 0;max-height:28px}
#header-wrapper {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.header {
max-width: 400px;
float: left;
margin-right: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header h1.title, .header p.title {
font: bold 25px Poppins, Arial, sans-serif;
color: #ffffff;
margin: 0;
text-transform: uppercase;
line-height: 50px;
}
.header .description {
color: #ffffff;
margin: -10px 0 4px 0;
padding: 0;
font-size: 0.7em;
display: none;
}
.header a, .header a:hover {
color: #ffffff;
text-decoration: none;
}
.header img {
display: block;
width: auto;
margin: 10px 0;
max-height: 28px;
}
<style>
#header-container {
position: fixed !important;
}
</style>
/* NAV MENU */
#cssmenu svg {
fill: #ffffff;
margin-right: 7px;
vertical-align: -7px;
}
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
border: 0;list-style: none;line-height: 1;display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu ul li a {position: relative;}
#cssmenu #head-mobile {position: relative;}
#cssmenu {text-align: left;}
#cssmenu ul {margin: 0;display: block;height: 48px;}
#cssmenu #head-mobile {display: none;position: relative;}
#cssmenu > ul > li:first-child{border-left:none}
#cssmenu > ul > li:last-child{border-right:none}
#cssmenu > ul > li {float: left;margin: 0;}
#cssmenu > ul > li > a {padding: 0 17px;font: bold 12px Helvetica, Arial, sans-serif;line-height: 48px;letter-spacing: 0.8px;text-decoration: none;text-transform: uppercase;color: #ffffff;}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {color: #ffffff;}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {background: rgba(64,64,64,0.1);-webkit-transition: background .2s ease;-ms-transition: background .2s ease;transition: background .2s ease;}
#cssmenu ul li.has-sub {position: relative;}
#cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after {content: "";border-color: #ffffff transparent transparent;border-style: solid;border-width: 4px;height: 0px;width: 0px;display: inline-block;vertical-align: middle;margin-left: 6px;margin-bottom: -2px;}
#cssmenu ul ul li.has-sub > a::after {content: "";border-color: transparent transparent transparent #595959;margin-bottom: 0px;}
#cssmenu ul ul {height: auto;position: absolute;left: -9999px;z-index: 1;-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);opacity: 0;transform: translateY(-2em);transition: all 0.3s ease-in-out 0s;}
#cssmenu li:hover > ul {left: auto;opacity: 1;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s;}
#cssmenu ul ul li {background: #f8f8f8;margin: 0;}
#cssmenu ul ul li:hover {background: #eaeaea;}
#cssmenu ul ul ul{margin-left: 100%;top: 0}
#cssmenu ul ul li a {font: 400 12px Helvetica, Arial, sans-serif;border-bottom: 1px solid rgba(150,150,150,0.15);padding: 0 17px;line-height: 36px;max-width: 100%;text-decoration: none;color: #595959;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {border-bottom: 0}
#cssmenu ul ul li.has-sub:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover {background: #eaeaea;}
@media screen and (min-width:801px){#cssmenu ul {display: block !important;}}
@media screen and (max-width:800px){
#cssmenu {float: none;}
#cssmenu ul {background: #0c54c1;width: 100%;display: none;height: auto;-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);}
#cssmenu > ul {max-height: calc(100vh - 48px);overflow-y: auto;}
#cssmenu ul.open {transform:translateX(0px);}
#cssmenu > ul {max-height: calc(100vh - 48px);overflow-y: auto;width: 300px;transition: all 0.7s ease;position: fixed;height: calc(100% - 45px);transform: translate(-300px, 0px);}
#cssmenu ul ul {-webkit-box-shadow: none;box-shadow: none;display:none;opacity: 1;transform: translateY(0%);transition: unset;}
#cssmenu li:hover > ul {transition-delay: 0s, 0s, 0s;}
#cssmenu ul li {width: 100%;border-top: 1px solid rgba(150,150,150,0.15);background: transparent;}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {background: #eaeaea;}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {color: #595959;}
#cssmenu ul ul li a {padding: 0 25px;}
#cssmenu ul li a, #cssmenu ul ul li a {width: 100%;border-bottom: 0;color: #fff;}
#cssmenu > ul > li {float: none;position: relative;}
#cssmenu ul ul li.has-sub ul li a {padding-left: 35px}
#cssmenu ul ul, #cssmenu ul ul ul {position: relative;left: 0;width: 100%;margin: 0;text-align: left}
#cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul > li.has-sub > a::after {display: none}
#cssmenu #head-mobile {display: block;padding: 24px;color: #fff;font-size: 12px;font-weight: bold}
.button {width: 25px;height: 20px;position: absolute;right: 0;top: 14px;cursor: pointer;z-index: 2;outline: none;}
.mline1, .mline2, .mline3 {position: absolute;left: 0;display: block;height: 2px;width: 18px;background: #ffffff;content: '';transition: all 0.2s;}
.mline1 {top: 1px;}
.mline2 {top: 7px;}
.mline3 {top: 13px;}
.button.menu-opened .mline1 {background: #ffffff;top: 3px;border: 0;width: 13px;-webkit-transform: rotate(-45deg);-o-transform: rotate(45deg);-o-transform: rotate(-45deg);-o-transform: rotate(45deg);transform: rotate(-45deg);}
.button.menu-opened .mline2 {top: 7px;left: 2px;width: 19px;}
.button.menu-opened .mline3 {top: 11px;height: 2px;width: 13px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);}
#cssmenu .submenu-button {position: absolute;z-index: 99;right: 0;top: 0;cursor: pointer;}
#cssmenu .submenu-button::after {content: "";border-color: #595959 transparent transparent;border-style: solid;border-width: 4px;height: 0px;width: 0px;display: inline-block;vertical-align: middle;margin: 20px 20px 14px;}
#cssmenu ul ul .submenu-button::after {margin: 16px 20px 12px;}
#cssmenu ul ul ul li.active a{border-left: none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top: none}}
8. Cari kode </head> dan letakkan kode HTML dibawah ini tepat dibawah kode </head>
<!-- navbar menu start -->
<div class='navbar no-items section' id='navbar'>
</div>
<!-- navbar menu end -->
<!-- header wrapper start -->
<div id='header-container'>
<header id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'>
Imamkunblog.com
</h1>
<a href='https://www.imamkunblog.com/' style='display: block'>
<img alt="Imamkunblog.com" height="50px; " id="Header1_headerimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIsxAnaPhI7gqNpQJF6vo0gWcCTWhZHiap1E-2UxOHUg02N4T_bR_WZ9xBHLVabnP4dL9QNemYH_5YGNpAmoJsrFdUEXPuHx4KeY7bY_MXplChBF9HVDz21qo_q2KSYT5Q9eLF1T0j3tiP/s1600/HEADERIMAMKUNBLOG2.png" style="display: block" width="290px; ">
</a>
</div>
</div></div>
<nav id='cssmenu'>
<div id='head-mobile'></div>
<div class='button' id='menu-button'>
<span class='mline1'></span>
<span class='mline2'></span>
<span class='mline3'></span>
</div>
<!-- menu navigasi header start -->
<ul>
<li><a href='/search/label/Adsense'><svg style='width:20x;height:24px' viewBox='0 0 512 512'>
<g>
<path d='M425.19,7.392C422.246,2.784,417.158,0,411.686,0h-160c-6.208,0-11.872,3.584-14.496,9.248l-224,480 c-2.304,4.96-1.952,10.752,0.992,15.36c2.944,4.608,8.032,7.392,13.504,7.392h160c6.208,0,11.872-3.584,14.496-9.216l224-480 C428.486,17.824,428.134,12,425.19,7.392z'></path>
</g>
<g>
<path d='M497.798,263.392c-2.912-4.608-8.032-7.392-13.472-7.392H352.678L233.222,512h146.464c6.208,0,11.872-3.584,14.496-9.216 l104.64-224C501.126,273.824,500.742,268,497.798,263.392z'></path>
</g>
</svg>Adsense</a></li>
<li><a href='/search/label/Android'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M15,9A1,1 0 0,1 14,8A1,1 0 0,1 15,7A1,1 0 0,1 16,8A1,1 0 0,1 15,9M9,9A1,1 0 0,1 8,8A1,1 0 0,1 9,7A1,1 0 0,1 10,8A1,1 0 0,1 9,9M16.12,4.37L18.22,2.27L17.4,1.44L15.09,3.75C14.16,3.28 13.11,3 12,3C10.88,3 9.84,3.28 8.91,3.75L6.6,1.44L5.78,2.27L7.88,4.37C6.14,5.64 5,7.68 5,10V11H19V10C19,7.68 17.86,5.64 16.12,4.37M5,16C5,19.86 8.13,23 12,23A7,7 0 0,0 19,16V12H5V16Z' fill='currentColor'></path>
</svg>Android</a></li>
<li><a href='/search/label/Tutorial%20Blogger' itemprop='url'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'></path>
</svg>Blogger</a></li>
<li><a href='/search/labelInternet/'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='currentColor'></path>
</svg>Internet</a></li>
<li><a href='/search/label/Template'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ'></path>
</svg>Template</a></li>
<li><a href='#'><i class='fa fa-wrench'></i> Tools <i></i></a>
<ul>
<li><a href='/p/ads-convertner.html'><i aria-hidden='true' class='fa fa-deaf'></i> Ads Converter</a></li>
<li><a href='#'><i aria-hidden='true' class='fa fa-desktop'></i> Code Live Editor</a></li>
<li><a href='#'><i class='fa fa-gg'></i> CSS Minifier</a></li>
<li><a href='#'><i aria-hidden='true' class='fa fa-random'></i> Check Page Rank</a></li>
<li><a href='/p/encrypt-code.html'><i class='fa fa-braille'></i> Encrypt Code</a></li>
<li><a href='/p/kode-warna.html'><i class='fa fa-pencil-square-o'></i> Kode Warna</a></li>
<li><a href='#'><i aria-hidden='true' class='fa fa-tachometer'></i> Meta Tags Analyzer</a></li>
<li><a href='/p/kotak-parse.html'><i class='fa fa-code'></i> Parse Kode HTML</a></li>
<li><a href='/p/kalkulator-kata.html'><i class='fa fa-calculator'></i> Word Counter</a></li>
<li><a href='/p/photshop-online.html'><i class='fa fa-file-image-o'></i> Photoshop Online</a></li>
<li><a href='#'><i aria-hidden='true' class='fa fa-tags'></i> Tags Condisional</a></li>
<li><a href='#'><i aria-hidden='true' class='fa fa-external-link'></i> Safelink Converter</a></li>
</ul>
</li>
</ul>
<!-- menu navigasi header end -->
</nav>
10. Selesai
Silahkan anda ganti seperti sum menu, warna header dan lain sebagainya di CSS headernya. Itulah cara membuat header keren responsive seperti template Viomagz.
Jika anda sudah menggunakan template Viomagz anda cukup ikuti langkah nomor delapan saja. Dan untuk anda yang bukan pengguna Template Viomagz anda wajib ikuti dari langkah awal hingga akhir.
Baca Juga: Cara Membuat Photoshop Online di Blog
Demikanlah artikel kali ini Cara Membuat header responsive di blog. Jika ada yang ingin ditanyakan silahkan komentar dibawah ya!
0 Response to "Cara Membuat Header dengan Icon SVG Responsive di Blog "
Post a Comment
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)