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


Kamis, 03 November 2016

Membuat Menu CSS Seo Horizontal Drop down di Blog


Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog
Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan saya jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo?

Alasan saya memberi nama CSS Seo karena menu Horizontal Drop down ini sangat ringan dan salah satu tehnik Optimasi seo blog adalah membuat blog seringan mungkin,selain ringan juga sangat simpel dan mudah akan tetapi sangat bagus untuk mempercantik blog karena anda bisa merubah warna Menu CSS Seo Horizontal Drop down sesuai dengan blog yang anda punya .

Tehnik Membuat Menu CSS Seo Horizontal Drop down

1.LOG IN Blogger.com > Masuk ke Template > Klik Edit HTML.
2.Cari kode ]]></b:skin> kemudian taruh kode css dibawah ini tepat di atas kode ]]></b:skin> tadi.

/*Page menu*/
#foxmenucontainer{
    height:35px;
    display:block;
    padding:40px 0 0px 0px;
    font: 11px Tahoma,Century gothic,verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    overflow:hidden;
    width:530px;
    margin:0px 0px 0px 0px;
    float:right;
    }
#menu{
    margin: 0px;
    padding: 0px 10px;
    width:680px;
    height:35px;
    }
  
#menu ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#menu li {
    float:left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#menu li a, #menu li a:link, #menu li a:visited {
    color: #578cbf;
    display: block;
    margin: 0px;
    padding: 12px 10px 11px 10px;
    }

#menu li a:hover, #menu li a:active, #menu li.current_page_item a{
    color: #fff;
    margin: 0px;
    padding: 12px 10px 11px 10px;
    text-decoration: none;
    }

/* Category menu*/
#catmenucontainer{
    height:32px;
    background:#3017170;
    display:block;
    padding:0px 0 0px 0px;
    font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    overflow:hidden;
    border-left:1px solid #6cb80c;
    border-right:1px solid #6cb80c;
}
      
#catmenu{
    margin: 0px;
    padding: 0px 1px;
    width:998px;
    background:#0055EA;
    height:32px;
    }
  
#catmenu ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#catmenu li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
    color: #bfe195;
    display: block;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    }

#catmenu li a:hover, #catmenu li a:active {
    background:#D90808;
    color: #fff;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    }
  
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
    background:#567DB0 ;
    width: 150px;
    color: #bfe195;
    font-family:Tahoma,century gothic,Georgia,  sans-serif;
    font-weight: normal;
    float: none;
    margin: 0px;
    padding: 9px 10px 9px 10px;
    border-bottom: 1px solid #5E9F09;
    }
  
#catmenu li li a:hover, #catmenu li li a:active {
    background:#FC8C3D;
    color: #fff;
    padding: 9px 10px 9px 10px;
    }

#catmenu li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px;
    }

#catmenu li li {
    }

#catmenu li ul a {
    width: 140px;
    }

#catmenu li ul a:hover, #catmenu li ul a:active {
    }

#catmenu li ul ul {
    margin: -31px 0 0 170px;
    }

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
    left: -999em;
    }

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
    left: auto;
    }

#catmenu li:hover, #catmenu li.sfhover {
    position: static;
    }
Ket: 
-Untuk mencari kode supaya lebih cepat silahkan anda klik didalam kolom edit template kemudian tekan tombol keyboard Ctrl+F kemudian taruh kode yang akan dicari kedalam kolom pencarian yang ada di pojok kanan atas kolom template dan enter.
-Untuk kode yang diberi background dengan warna yang berbeda di atas adalah kode warna yang bisa anda ubah.

3.Selanjutnya cari kode  <div id='content-wrapper'>  kemudian taruh kode dibawah ini tepat di atas kode tadi.

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>

<li><a href='#'>Uncategorized</a></li>
      
</ul>
</div>
</div>
Ket:
-Untuk tanda # (pagar) silahkan ganti dengan link halaman tujuan anda.
-Untuk kalimat yang ditulis dengan warna merah silahkan diganti dengan kalimat yang sesuai tema blog anda.
-Selanjutnya simpan untuk melihat Menu CSS Seo Horizontal Drop down di Blog anda.


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