Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Kamis, 03 November 2016

Cara Membuat Menu Horizontal dengan CSS dan HTML di blogger


Perlu sobat ketahui keunggulan menu css adalah tidak terlalu membuat berat loading blog,berbeda dengan menu yang menggunakan kode javascript meski lebih keren dan cantik akan tetapi membuat loading blog lebih berat.

Langkah Membuat Menu Horizontal dengan CSS dan HTML

1.Login Blogger.com
2.Rancangan --> Edit HTML
3.Download template lengkap untuk keamanan bila terjadi kesalahan edit
4.Centang kotak Expand Template Widget untuk menampilkan semua kode template
5.Cari kode ]]></b:skin>
Dan masukkan kode css dibawah ini tepat diatas kode tadi

/* css menu */
#menu {
font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;
}
#pagenav {
display: block;
font-weight: bold;
font-size:11px;
color: #fff;
margin: 0 0 5px 0;
padding: 0 0 0 10px;
height: 28px;
line-height: 28px;
list-style-type: none;
position: relative;
}
#pagenav li {
float: left;
color:#ffffff;
}
#pagenav li a {
height:20px;
line-height:20px;
font-size:10px;
font-weight:bold;
padding: 0 6px 0 6px;
text-transform:uppercase;
}
#pagenav .current_page_item a {
color:#FFF;
}
#pagenav .current_page_item a:hover {
color:#FFF;
}

6.Selanjutnya kita terapkan kode HTML nya.

Cari kode seperti ini <div id='content-wrapper'>
atau kode seperti ini <div id='outer-wrapper'>

karena setiap template berbeda-beda jadi sobat sesuaikan aja untuk mencari kodenya,
kalo sudah ketemu letakkan kode dibawah ini tepat di atasnya

<div id='menu'>
<ul id='pagenav'>
<li><a href='http://blog.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http://blog.blogspot.com/' title='About'>About</a></li>
<li><a href='http://blog.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://blog.blogspot.com/' title='Link'>Link</a></li>
<li><a href='http://blog.blogspot.com/' title='Archive'>Archive</a></li>
<li><a href='http://blog.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://blog.blogspot.com/' target='_blank' title='Aggregator'>Aggregator</a></li>
<li><a href='http://blog.blogspot.com/' title='Bottom'>Bottom</a></li>
</ul>
</div>

7.Save template sobat dan blablabla Menu Horizontal dengan CSS dan HTML nya udah jadi.

Kalau mau mengubah warna,lebar,tinggi dan font stylenya silahkan sobat ubah kode cssnya ini

font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;

dan jangan lupa link blog.blogspot.com/ di ganti dengan link sobat,dan text anchornya seperti HOME,ABOUT,CONTACT..

Selamat berkreasi semoga sukses


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi