Posts Subscribe to Revolution ChurchComments

Minggu, 08 Juli 2012

03.50 Diposting oleh Administrator
Label:
Oke blogger, kali ini Jog-Blogger akan memberikan kamu sedikit ilmu CSS tentang membuat menu header untuk blog yang simple tapi menarik, setelah saya membuat post tentang "Membuat Gambar Melayang di Blogger" saya sedikit tertarik untuk membuat header menu . oke langsung ke tutorial nya saja =)) 

1. Login ke blogger -> "Layout -> Edit HTML
2. Cari kode ]]></b:skin> (ctrl+f biar gampang) Copy Code Di bawah tepat di atasnya
#Jogblogger_containermenu{
    height:35px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7psEuw6CvzlnZCOg-XkVYWvD7kJN0-rx6LoHa0aI8JFY_a-QfAHq6uMePPFu0gs8fmrDXDdTJkx3W8NEVh8A3ahJ88PiKoHC6auVHcShfzSKJnfv6peDJmIQL6z50jue7H-5n9Hkye9zh/s1600/menu.jpg) ;
    display:block;
    padding:0px 0 0px 14px;
  }
#Jogmenu{
    position:relative;
    display:block;
    height:25px;
    font-size:11px;
    font-weight:bold;
    font-family:Arial,Verdana,Helvitica,sans-serif;
    }
#Jogmenu ul{
    margin:0px;
    padding:10px 20px 0 0;
    list-style-type:none;
    width:auto;
    float:left;
    }
#Jogmenu ul li{
    display:block;
    float:left;
    margin:0 px 0 0;
    width:105px;
    }

#Jogmenu ul li a{
    display:block;
    float:left;
    color:#fff;
    text-align: center;
    text-decoration:none;
    padding:6px 0px 0 0px;
    width: 105px;
    height: 19px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
    }
#Jogmenu ul li a:hover,#Jogmenu ul li.current_page_item a{
    color:#fff;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top left;
    width: 105px; height: 19px;
    text-align: center;
    }
#Jogmenu ul li .current_page_item a,#Jogmenu ul li .current_page_item a:hover{
    color:#ff9600;
    width: 105px; height: 19px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
    }    
 2. Setelah itu, cari kode <body> Copy Kode di bawah tepat di bawah kode <body>
<div id='Jogblogger_containermenu'>
<div id='Jogmenu'>
<ul>
<li class='page_item current_page_item'><a href='LINK Di Sini'>Home</a></li>
<li class='navlinks'><a href='LINK Di Sini'>About</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Pictures</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Videos</a>
</li><li class='navlinks'><a href='LINK Di Sini'>Contact</a></li>
<li class='navlinks'><a href=''http://jog-blogger.blogspot.com/>Jog-Blogger</a></li></ul>
    </div>       
  </div>    
 3. Klik dulu "PREVIEW" Jika Berhasil langsung simpan saja =))



*Note : Untuk menambahkan link/menu nya lagi copy paste kode </li><li class='navlinks'><a href='LINK Di Sini'>Bla Bla</a> tepat di atas code </ul> .
Oke sekian Tutorial dari saya ..


 

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

Jog-BLOGGER!. Copyright 2011 - 2013 All Right Reserved. Template By : Jog-BLOGGER!