Cara Menciptakan Sajian Horizontal Keren Di Blog

Cara Membuat Menu Horizontal Keren di Blog - Kemarin Kang Zain sempat posting Cara menciptakan sajian horizontal otomatis di blog, itu cara menciptakan otomatis dan simple. namun kali ini beda, sebab dengan isyarat css sehingga menghasilkan menu horizontal yang keren di blog kita. Menu ini yakni sajian yang tampil secara horizontal diatas header blog kita, bagi kita yang menggunakan blogspot, dengan sajian ini maka blog kita akan sedikit nampak profesional.

Jika sahabat lage cari menu horizontal mungkin ini dapat jadi pilihan. hehehe. ikuti tutorialnya dibawah ini dijamin gampang :

Cara Membuat Menu Horizontal Keren di Blog

Langkah-langkah  Cara Membuat Menu Horizontal Keren di Blog :

1. Log in ke akun Blog Sobat
2. Kemudian sahabat klik tata letak -> Tambah gadget -> Pilih HTML/JavaScript
3. Copy isyarat dibawah ini dan paste pada kotak HTML/JavaScript dan letakkan diatas header:

<style type="text/css">
/* Menu horizontal untuk Blogger https://bagassoft31.blogspot.com/ */
div.topbar {
height: 16px;
background: #e16031;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* https://bagassoft31.blogspot.com/ */
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul>

Keterangan :

# : sahabat ganti dengan URL yang diinginkan.

4. Jangan lupa save
5. Lihat tampilan sajian horizontal sobat.

6. Semoga bermanfaat

7. Jangan lupa tinggalkan pesan.

Share this post