Thursday, May 3, 2012

PANDUAN MEMBUAT MENU ATAS

Pada kali ini saya menulis thread yang mungkin bermafaat bagi kalian yang baru belajar blog tetapi mungkin thread kali ini juga tidak bermafaat bagi kalian yang sudah mahir didunia blog...
Mungkin sedikit ilmu yang saya akan  tuangkan dalam thead kali ini meskipun saya juga baru mengerti membuatnya jadi jika saya salah mohon dimaafkan hehehehehe.....

Hal pertama yang harus dilakukan adalah membuat atau menandai beberapa thread yang sudah kita buat contohnya :


contoh didalam label itu ada blogspot jual produk, komputer, news dan lain...
hasil dari label itu akan masuk kedalam label contoh :
  

Kemudian klik dari salah satu nama tersebut makan akan nongol halaman http nya contoh :
kita klik software maka akan nongol html ini : http://www.onelyz.co.cc/search/label/SOFTWARE

TETAPI INI HANYA DIGUNAKAN BAGI KALIAN YANG BARU TAHU JIKA SUDAH TAU KITA TINGGALKAN SAJA....

Kelangka selanjutnya :

Hal pertama yang perlu dilakukan adalah :

CARA PERTAMA
1. Buka Template
2. Edit html
3. Cari kode ]]></b:skin>
4. Copy kode dibawah ini kemudian letakan diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLHzq9xPqfqbzM2IAAFkYb1oAcBrrRvplcE-UY0x3L7PTvJaMRG-dz8KYOqNy4DxZP2JRWfc6oaTCWbJnEWi7AbDhhnGOjmJqPjCty6l5NxGRxOQw-w4fXdMQ6yfhEhKi28Dl2WgEmuo/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#000000;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#FFFFFF;color:#5F04B4} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #FF0000;border-top:1px solid #FF0000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#FF0000!important;color:#fff!important;text-decoration:none}

CARA KEDUA
1. Buka Tata Letak
2. Tambahkan Gadget
3. Pilih HTML/JavaScript Tambah
4. Copy paste kode dibawah ini.


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>

<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href=' ALAMAT URL ANDA CONTOH DIBAWAHNYA '>TENTANG ADMIN </a></li>
<li class='hr'/>
<li><a href=' http://www.facebook.com/profile.php?id=100002059521853 '> CONTACT ON FACEBOOK </a></li>
<li class='hr'/>
<li><a href=' https://plus.google.com/111910615281804038101/posts '> CONTACT ON GOOGLE + </a></li>

</li></li></ul>
</li>

<li><a class='trigger'>SOFTWARE</a>
<ul>
<li><a href='  http://www.onelyz.co.cc/search/label/SOFTWARE  ' target='new'> SOFTWARE </a></li>
<li class='hr'/>
/li></li></ul>
</li>


<li><a class='trigger'>TV ONLINE</a>
<ul>
<li><a href=' ALAMAT URL ANDA CONTOH DIBAWAHNYA '>MIVO TV </a></li>
<li class='hr'/>
<li><a href=' http://www.onelyz.co.cc/2011/06/ping-ke-dns-terbaik-membuat-koneksi.html '> SPEEDY TV </a></li>

</li></ul>
</li>

<li><a class='trigger'> Tips dan Trik </a>
<ul>
<li><a href=' http://www.onelyz.co.cc/search/label/KOMPUTER '> KOMPUTER </a></li>
<li class='hr'/>
<li><a href=' http://www.onelyz.co.cc/search/label/BLOGSPOT '> BLOGSPOT </a></li>
<li class='hr'/>
</li></li></ul>
</li>

<li><a class='trigger'>MUSIC VIDEO</a>
<ul>
<li><a href=' http://www.onelyz.co.cc/search/label/REAGE '> REAGE</a></li>
<li class='hr'/>
<li><a href=' http://www.onelyz.co.cc/search/label/LEGENDA '> LEGENDA</a></li>
<li class='hr'/>

</li></li></ul></li></ul>
</div></div>

Hasilnya akan seperti ini :




PENJELASAN :
Warna biru     : itu anda isi dengan alamat url dari label blog anda
Warna merah : itu merupakan judul dari menu tersebut
Warna hitam  : itu memang harus ditulis dan tidak boleh ada yang hilang seperti tanda ' (petik atas ) karna jika ilang halaman tidak akan muncul

Semoga thread kali ini bermanfaat bagi kalian sekian dan terimakasih....
Comments
0 Comments

0 komentar:

Post a Comment

Khiasan

Teruslah berinspirasi untuk hal-hal positif yang membawa keuntungan bagimu..
Kelak nanti pasti akan membawa kebahagian bagimu...

....."Salam Blogger Info Onely".....

JANGAN LUPA JOIN BLOG DAN LIKE FACEBOOKNYA