Oke kali ini saya akan share untuk membuat menu drop down di blog dengan mudah. Yang kita butukhan adalah scrip css dan scrip html. Nah pastinya kalian sudah tidak sabar, Langsung saja kita ke torial pembuatannya berikut ini :
1. Buka Blogger Sobat dan login.
2. Pilih blog yang akan di beri menu drop down.
3. Klik Template ---> klik edit template
4. Cari kode berikut ini : ]]></b:skin>
5. Jika sudah ketemu letakkan code di bawah ini tepat di atas code ]]></b:skin>
#DX7Menu {
background: #;
width: 840px;
height: 85px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: red;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
box-shadow: 2px 2px 25px #32CD32;
}
#DX7box {
width: 839px;
float: center;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: #fff;
background: #;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 12px 15px 8px;
box-shadow: 0px 0px 3px #fff;
}
#punch li a:hover, #punch li a:active {
background: #000000;
color: blue;
text-shadow: 0px 0px 15px blue;
margin: 0;
padding: 6px 15px 8px;
text-decoration: none;
box-shadow: 0px 0px 35px white;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: #585858;
width: 160px;
color: #F8F8FF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
box-shadow: 0px 0px 8px blue;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#punch li li a:hover, #punch li li a:active {
background: #E6E6E6;
color: #000000;
text-shadow: 0px 0px 5px blue;
padding: 7px 10px;
box-shadow: 0px 0px 5px red;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
.showpageNum a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
background-color: #000000;
}
6. Jika Sudah di tempatkan kemudian klik save template ( simpan template ).
7. Selanjutnya ke tataletak blog dan tambah wiget baru.
8. Pilih Html/Java Scrip
9. Paste code di bawah ini di wiget (tanpa menggunakan judul)
<center>
<div id="DX7Menu">
<div id="DX7box">
<ul id="punch">
<li><a href="http://devilx7.blogspot.com"><b>Home</b></a></li>
<li>
<a href="http://www.dev-131.blogspot.com/p/blog-page_20.html">Software Aplikasi</a>
<ul>
<li><a href="#"> Bootable Tools </a></li>
<li>
<a href="#">Iso Creator</a>
<ul>
<li><a href="http://sooftpedia.blogspot.com/2014/04/download-power-iso.html">Power ISO</a></li>
<li><a href="#">Ultra ISO</a></li>
<li><a href="#">Magic ISO</a></li>
<li><a href="#">ImgBrun</a></li>
</ul>
</li>
<li><a href="#">Crack</a></li>
<ul>
<li><a href="#">IDM</a></li>
<li><a href="#">Windows update</a></li>
<li><a href="#">Photosop</a></li>
<li><a href="#">Ms Office</a></li>
</ul>
<li>
<a href="devilx17.blogspot.com">Template</a>
<ul>
<li><a href="http://dark-131.blogspot.com/">Anime Templat</a></li>
<li><a href="devilx17.blogspot.com">Drack Templat</a></li>
<li><a href="devilx17.blogspot.com">Wordpress Templat</a></li>
<li><a href="#">SEO Templat</a></li>
</ul>
</li>
<li><a href="#">Windows App </a>
<ul><li><a href="#">Folderico</a></li>
<li><a href="#">Rainmeter</a>
<ul>
<li><a href="#">Setup Rainmenter</a></li>
<li><a href="#">Download Skin Rainmeter</a></li>
</ul></li>
<li>
<a href="#">Start Menu</a>
<ul>
<li><a href="#">Start Me</a></li>
<li><a href="#">Start Button Changer</a></li>
<li><a href="#">Taskbar color changer</a></li>
</ul>
</li>
</ul>
<li><a href="#">Android Apps</a></li>
<li><a href="http://devilx7.blogspot.com/p/tv-online-mau-tv-online-seperti-ini.html">Tv Online</a></li>
<li>
<a href="#"> About Me </a>
<ul>
<li><a href="https://www.facebook.com/Ras.131">On Facebook</a></li>
<li>
<a href="https://twitter.com/Rivaldi_Akbar_S">On Twitter</a>
</li>
<li>
<a href="#">On Yahoo Massanger</a>
</li>
</ul></li>
</ul></li>
</li></li></li></li></li></ul>
</div>
</div></center>
10. Selanjutnya tinggal save (simpan)
0 komentar:
Posting Komentar