Cara membuat menu DropDown di Blog
Secara default tamplate blog belum terdapat menu dropdown seperti gambar diatas. Menu-menu ini sangat berguna sebagai navigasi pengunjung sehingga dapat melihat isi konten didalam blog secara kategori/garis besar. Bila pengunjung lebih mudah menemukan apa yang dicari maka blog/web kitapun akan mendapat nilai lebih.
Ada dua jenis kode yang dibuat, CSS (Cascading Style Sheet) yaitu sebuah pengkodean yang memfokuskan pada style (gaya) warna teks, bentuk tulisan, warna background, posisi dll sehingga dapat memperindah tampilan html. Dan HTML (HyperText Murkup Language) yaitu bahasa penanda (markup) berbasis text atau bisa juga disebut formatting language (bahasa untuk memformat), jadi jelas bahwa html bukanlah bahasa pemograman, melainkan bahasa penanda/formatting.
Ada dua cara yang byasa dipakai. Pertama hanya membuat menu. Kedua membuat menu beserta sub-menu dan sub-sub menunya
Cara pertama hanya membuat menu tanpa sub menu
Masuk ke Dasbor Blog > Tamplate > Edit HTML
Cari kode ]]><b/:skin> agar lebih mudah mencarinya tekan Ctrl-F
Css
#cssmenu ul {
margin: 0;
padding: 7px 6px 0;
background: #3d55cb url(overlay.png) repeat-x 0-110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5em Arial, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
background: #3d55cb;
color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a
{
background: #2368ae url(overlay.png) repeat-x 0 -40px;
background: #2368ae url(overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a
{
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
background: #2368ae url(overlay.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url(overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
*html #cssmenu ul {
height: 1%;
}
margin: 0;
padding: 7px 6px 0;
background: #3d55cb url(overlay.png) repeat-x 0-110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5em Arial, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
background: #3d55cb;
color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a
{
background: #2368ae url(overlay.png) repeat-x 0 -40px;
background: #2368ae url(overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a
{
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
background: #2368ae url(overlay.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url(overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
*html #cssmenu ul {
height: 1%;
}
Copy kode CSS diatas
Lalu pastekan di atas kode ]]></b:skin>
Agar warna sesuai dengan tamplate yang dipakai
Ganti warna Background : # ----
Ganti jenis huruf di font: normal 0.5em Arial, sans-serif
Ganti warna huruf di color: #e7e5e5; dibawah kode font-size: 13px;
Ganti warna garis, # ---- pada border
Html
<div id='cssmenu'>
<ul>
<li class='active'><a href='link home'>Home</a></li>
<li class='has-hub'><a href='link daftar artikel'>Daftar Artikel</a></li>
<li class='has-hub'><a href='link iklan'>Iklan</a></li>
<li class='last'><a href='link kontak'>Contact</a></li>
</ul> </div>
<ul>
<li class='active'><a href='link home'>Home</a></li>
<li class='has-hub'><a href='link daftar artikel'>Daftar Artikel</a></li>
<li class='has-hub'><a href='link iklan'>Iklan</a></li>
<li class='last'><a href='link kontak'>Contact</a></li>
</ul> </div>
Jika Css sudah selesai, sekarang memunculkan menu-menu tersebut
Copy kode Html diatas
Masuk ke Layout (tata letak)
Klik Add a Gadget di bawah Header dan tambahkan HTML/JavaScript
Beri nama judul lalu pastekan kode di dalam konten
<div id='cssmenu'>
Html memanggil isi dari kode css 'cssmenu'
<li class='active'><a href='link home'>Home</a></li>
Background akan aktif pertama kali di menu Home
<li class='has-hub'><a href='link daftar artikel'>Daftar artikel</a></li>
Membuat menu Daftar artikel
<li class='has-hub'><a href='link iklan'>Iklan</a>
Membuat menu Iklan
<li class='last'><a href='link kontak'>Contact</a></li>
Membuat menu Contact
Jadi jika ingin menambah menu baru di sebelah kanannya tambahkan saja kode ini. Namun ganti 'last' mnjadi 'has-hub'
Cara kedua membuat menu beserta sub-menu dan sub-sub menunya
Masuk ke Dasbor Blog > Tamplate > Edit HTML
Cari kode <div class='main-outer'>
Copy kode Css dan Html dibawah
Dan pastekan di bawah kode <div class='main-outer'>
Kode Css dan Html
<style>
#menu
{
width: autopx;
margin: 5;
padding: 5px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 20px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 25px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 5px;
height: 5px;
width: autopx;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
} #menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id='menu'>
<li><a href='link menu'>Home</a></li>
<li><a href='link menu'>Daftar Artikel</a>
<ul>
<li><a href='link sub-menu' rel='nofollow'>Belajar Photoshop (basic)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Menambah BrushTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Menambah ShapeTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat BrushTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat Foto seperti kartun komik</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Export file JPEG,GIF,PNG dan WBMP</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Belajar Photoshop (sablon manual)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat film CMYK</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Memisahkan 2 warna sablon manual</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Desain kaos block</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Desain gambar raster</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Belajar CorelDraw (basic)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat logo sekolah</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Export file JPEG,GIF,PNG dan WBMP</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Belajar CorelDraw (sablon manual)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Desain kaos</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Desain gambar raster</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat tulisan 3D</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat logo sekolah</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Freehand (sablon manual)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat gambar raster</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Artikel Lainnya</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat gambar bergerak di hp Blackberry</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='link menu' target='blank'>Contact</a></li>
</ul>
#menu
{
width: autopx;
margin: 5;
padding: 5px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 20px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 25px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 5px;
height: 5px;
width: autopx;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
} #menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id='menu'>
<li><a href='link menu'>Home</a></li>
<li><a href='link menu'>Daftar Artikel</a>
<ul>
<li><a href='link sub-menu' rel='nofollow'>Belajar Photoshop (basic)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Menambah BrushTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Menambah ShapeTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat BrushTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat Foto seperti kartun komik</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Export file JPEG,GIF,PNG dan WBMP</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Belajar Photoshop (sablon manual)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat film CMYK</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Memisahkan 2 warna sablon manual</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Desain kaos block</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Desain gambar raster</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Belajar CorelDraw (basic)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat logo sekolah</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Export file JPEG,GIF,PNG dan WBMP</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Belajar CorelDraw (sablon manual)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Desain kaos</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Desain gambar raster</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat tulisan 3D</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat logo sekolah</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Freehand (sablon manual)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat gambar raster</a></li>
</ul>
</li>
<li><a href='link sub menu' rel='nofollow'>Artikel Lainnya</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat gambar bergerak di hp Blackberry</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='link menu' target='blank'>Contact</a></li>
</ul>
Arti kode
<ul id='menu'>
Html memanggil isi dari kode css 'menu'
<li><a href='link menu'>Home</a></li>
Membuat menu Home
<li><a href='link menu'>Daftar Artikel</a>
<ul>
<li><a href='link sub-menu' rel='nofollow'>Belajar Photoshop (basic)</a>
<ul>
<li><a href='link sub-sub menu' rel='nofollow'>Menambah BrushTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Menambah ShapeTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat BrushTool</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Membuat Foto seperti kartun komik</a></li>
<li><a href='link sub-sub menu' rel='nofollow'>Export file JPEG,GIF,PNG dan WBMP</a></li>
</ul>
</li>
isi disini untuk membuat link sub-menu beserta link sub-sub menu
</ul>
</li>
Membuat menu "Daftar Artikel" yang berisi sub-menu "Belajar Photoshop (basic)" dan isi dari sub-menu "Belajar Photoshop (basic)" adalah sub-sub menu "Menambaah BrushTool, Menambah ShapeTool, Membuat BrushTool, Membuat Foto seperti kartun komik, Export file JPEG,GIF,PNG dan WBMP"
Sedangkan rel='nofollow' berarti tidak mengikuti jejak (bila menggunakan jejak)
<li><a href='link menu' target='blank'>Contact</a></li>
</ul>
Membuat menu Contact
0 komentar:
Posting Komentar
Semoga membantu