Anda mencari
gaya menu halaman untuk blog Anda? atau mungkin Anda ingin belajar bagaimana
membuat menu halaman sendiri? . oke, blogger .. kali ini saya akan memberikan
tutorial tentang cara membuat menu halaman untuk blog Anda secara manual dengan
style pita, 100% dengan Css dan html. Menu
ini adalah menu halaman horizontal yang biasanya diterapkan di bagian atas blog,
termasuk di terapkan di blog ini.
dan, hanya
rekomendasi dari saya. pelajarilah kode Css lebih banyak dengan mengotak atik
kode dari menu halaman yang akan saya berikan ini. modifikasi lebarnya, warna
background, dan lainnya dari menu halaman ini agar sesuai dengan desain blog/template.
jika Anda tidak tahu sama sekali tentang kode css atau html, hanya membaca
posting sebelumnya dalam kategori tips dan trick blogging di blog ini dan
pelajarilah tentang hal itu.
oke .. mari
ikuti langkah di bawah ini untuk membuat menu halaman dengan gaya pita.
1. masuk ke
dashboard Anda
2. pergi ke menu
“tata letak / desain”.
3. tambahkan
gadget dengan tipe HTML / javascript.
4. lalu copy
kode di bawah dan paste pada gadget HTML/javascript.
<div
class='menu'>
<a
href='(your menu URL) e.g >
http://bloggerask.com'><span>Home</span></a>
<a
href='(your menu URL)'><span>About</span></a>
<a
href='(your menu URL)'><span>Galery</span></a>
<a
href='(your menu URL) '><span>Contact Me</span></a>
</div>
<style
type="text/css">
.menu
{
width:1000px;
position:relative;
margin:
5px auto;
}
.menu:after,
.menu:before {
position:relative;
margin:5px
auto 15px auto;
content:
"";
float:left;
width:170px;
border:1.5em
solid rgba(0, 159, 0, 0.8 );}
.menu:after
{
border-right-color:transparent;}
.menu:before
{
border-left-color:transparent;
}
.menu
a:link, .menu a:visited {
color:yellow;
text-decoration:Block;
float:left;
font-family:Arial;
font-size:16px;
height:3.15em;
overflow:hidden;
}
.menu
span {
background:rgba(0,
159, 0, 0.8 );
display:inline-block;
line-height:3em;
padding:0
1em;
margin-top:0.5em;
position:relative;
-webkit-transition:
background, margin 0.2s;
-google-ms-transition:
background, margin 0.2s;
-moz-transition:
background, margin 0.2s;
-o-transition:
background-color, margin-top 0.2s;
transition:
background, margin 0.2s;
}
.menu
a:hover span {
background:rgba(0,
159, 234, 0.5 );
margin-top:0;
}
.menu
span:before {
content:
"";
position:absolute;
top:3em;
left:0;
border-right:0.5em
solid #9B8651;
border-bottom:0.5em
solid rgba(0, 159, 234, 0.3 );
}
.menu
span:after {
content:
"";
position:absolute;
top:3em;
right:0;
border-left:0.5em
solid #9B8651;
border-bottom:0.5em
solid rgba(0, 159, 234, 0.3 );}
</style>
* lebar menu
halaman ini mungkin tidak sesuai dengan lebar blog Anda. Anda dapat memodifikasi
kode dengan font merah sesuai yang Anda butuhkan untuk lebar menu ini. dan,
ingat! Makin banyak jumlah menu halaman di blog anda blog, akan semakin besar
pula lebarnya. Jadi banyaknya menu mempengaruhi lebar.
5. simpan
dan selesai ;)
*tutorial
ini hanya berlaku pada yang menggunakan blogger/blogspot. Bagi yang menggunakan
selain itu, sesuain aja.
Oke itu saja
dari saya, jika masih ada pertanyaan, komen aja.
selamat mencoba dan happy blogging :)
Share ke :
0 comments:
Posting Komentar