Contempo adalah salah satu tema dari 3 tema default (tema bawaan asli) blogger yang terbaru, dengan sedikit merombak heading, menambahkan breadcrumb, contempo akan menjadi sebuah templat yang gegas, responsive dan sangat mobile friendly! Bagaimana merombak tema contempo agar menjadi dinamis heading akan kami sampaikan secara terpisah.
Namun yang ingin kita bagikan kali ini bukan mengenai merombak heading template contempo tetapi seperti biasa kami akan menunjukan cara bagaimana menambahkan menu Navigasi yang responsive diatas header template yang satu ini sehingga terlihat beda daripada aslinya.
- Masuk kepengaturan blog
- pilih Tema
- Pilih editHTML
LANGKAH PERTAMA: TAMBAHKAN CSS
Cari kode </head> dan letakan kode dibawah ini diatasnya:
</script>
</b:if>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color:#fff ;
}
.topnav a {
float: left;
display: block;
color:#4169E1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #fff;
color: black;
}
.active {
background-color: #fff;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
LANGKAH KEDUA: TAMBAHKAN HTML.
Cari kembali kode </head> pada langkah pertama tadi, lalu letakan kode dibawah ini, di bawah kode </head> tadi:
<div style='padding-left:16px'>
</div>
<body>
<div class='topnav' id='myTopnav'>
<a class='active' href='/'><i aria-hidden='true' class='fa fa-home'/>
Home</a>
<a href='#news'><i aria-hidden='true' class='fa fa-plus-circle'/>Berita</a>
<a href='#contact'><i aria-hidden='true' class='fa fa-phone'/>Hubungi</a>
<a href='#about'><i aria-hidden='true' class='fa fa-globe'/>tentang</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'>
<i class='fa fa-bars'/>
</a>
</div>
LANGKAH KETIGA: TAMBAHKAN KODE JS <JavaScript>
Cari kode </body> dan lalu letakan kode dibawah ini di atasnya:
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Terakhir SAVE tema Contempo anda dan lihat
DEMO
Dulu saya pakai template bawaan blogger, tpi lupa nama templatenya.
BalasHapusSaya lebih sering pakai tema bawaan yang telah dimodifikasi
BalasHapusCara menambah kan button share sosial media di contempo ya bang.hehe ganti yang bawaan
BalasHapusSudah saya posting beberapa opsi keren: share button plus emoji:
Hapushttps://www.editblogtema.net/2018/11/cara-memasang-tombol-emoticon-reaction.html?m=1
Atau :
https://www.editblogtema.net/2018/11/cara-memasang-tombol-reactions.html?m=1
Dua dua cara diatas sangat cocok buat templat contempo, tampilannya modern, ringan dan keren