RSS


Cara Membuat Scrolling Text

0
Posted by Borong Shop | Labels: ,



Membuat Scrolling Text sememangnya menjimatkan ruang dan memudahkan pembaca blog anda. Ianya juga dapat mengurangkan berat blog dan kelihatan kemas. Atas permintaan Abang Teror so saya membuat tutorial ini khas untuknya dan juga pembaca blog ini.


 Untuk membuatnya sila copy kod dibawah :

<ul style="width: 190px; height: 200px; background-color: 000080; color: ffa000; font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 0px; overflow: auto;">

<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>
<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>
<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>
<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>
<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>
<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>
<li></li></ul>

Nota : 
  1. Text yang berwarna merah adalah url yang perlu anda tukarkan kepada url tajuk anda
  2. Text yang berwarna biru adalah tajuk yang perlu anda tukarkan dengan tajuk yang anda          mahu.
  3. Kod berwarna ungu adalah lebar yang perlu anda tukar mengikut kesesuaian blog anda
  4. Kod yang berwarna hijau adalah tinggi scroll yang perlu anda tukar mengikut kesesuaian blog anda
Anda boleh menambah seberapa banyak tajuk yang anda mahu dengan hanya meletakkan kod ini

<li><a href="URL TAJUK ANDA" target="_blank">TAJUK YANG ANDA INGINKAN</a></li>  sebelum kod  <li></li></ul>







Cara Membuat Emotion Kucing

2
Posted by Borong Shop | Labels: , ,



Emotion kucing adalah emotion yang paling disukai ramai. Mungkin ada yang berminat untuk meletaknya pada komen blog. Untuk membuatnya ikut langkah2 di bawah ini :

1) Login blogger >> Design >> Edit Html >> Download full Template >> Expand Widget Template 
2) Setelah itu dengan , dengan menggunakan kekunci CTRL + F/ F3 cari kod  ]]></b:skin>
3) Jika anda sudah menjumpainya, sila copy kod di bawah ini dan paste kan sebelum/di atas kod  ]]></b:skin>

#kotakemote {
width:auto;
border:1px solid grey;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
margin:10px;
padding:10px;
}

Selepas itu cari pula kod ini

<b:if cond='data:post.embedCommentForm'>

Copy kod dibawah ini tepat di atas kod <b:if cond='data:post.embedCommentForm'>


EMOTICON :
<div id='kotakemote'><b>
<img border='0' src='http://img413.imageshack.us/img413/2395/teriak.gif' title=':f'/>
:f
<img border='0' src='http://img413.imageshack.us/img413/9497/yes.gif' title=':D'/>
:D
<img border='0' src='http://img413.imageshack.us/img413/3571/stres.gif' title=':x'/>
:x
<img border='0' src='http://img413.imageshack.us/img413/9981/senang.gif' title='B-)'/>
B-)
<img border='0' src='http://img413.imageshack.us/img413/2440/sebel.gif' title='b-('/>
b-(
<img border='0' src='http://img12.imageshack.us/img12/914/puyengz.gif' title=':@'/>
:@
<img border='0' src='http://img25.imageshack.us/img25/9213/ngiler.gif' title='x('/>
x(
<img border='0' src='http://img25.imageshack.us/img25/4159/mangu.gif' title=':?'/>
:?
<img border='0' src='http://img25.imageshack.us/img25/2529/maluku.gif' title=';;)'/>
;;)
<img border='0' src='http://img25.imageshack.us/img25/333/malu.gif' title=':-B'/>
:-B
<img border='0' src='http://img25.imageshack.us/img25/7279/lovebcc.gif' title=':|'/>
:|
<img border='0' src='http://img25.imageshack.us/img25/2443/ngakaki.gif' title=':))'/>
:))
<img border='0' src='http://img25.imageshack.us/img25/765/kringet.gif' title=':(('/>
:((
<img border='0' src='http://img7.imageshack.us/img7/2439/kesel.gif' title='=(('/>
=((
<img border='0' src='http://img25.imageshack.us/img25/2043/kagum.gif' title=':s'/>
:s
<img border='0' src='http://img14.imageshack.us/img14/9351/aarrgh.gif' title=':-j'/>
:-j
<img border='0' src='http://img25.imageshack.us/img25/9086/hihihig.gif' title=':-p'/>
:-p</b></div>

Setelah selesai cari pula kod ini

</body>

Copy kod di bawah dan letakkan di atas / sebelum kod </body>

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:f/gi, "<img src='http://img413.imageshack.us/img413/2395/teriak.gif' alt='' class='smiley'/>");
_str = _str.replace(/:D/gi, "<img src='http://img413.imageshack.us/img413/9497/yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:x/gi, "<img src='http://img413.imageshack.us/img413/3571/stres.gif' alt='' class='smiley'/>");
_str = _str.replace(/B\-\)/gi, "<img src='http://img413.imageshack.us/img413/9981/senang.gif' alt='' class='smiley'/>");
_str = _str.replace(/b\-\(/gi, "<img src='http://img413.imageshack.us/img413/2440/sebel.gif' alt='' class='smiley'/>");
_str = _str.replace(/:@/gi, "<img src='http://img12.imageshack.us/img12/914/puyengz.gif' alt='' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img src='http://img25.imageshack.us/img25/9213/ngiler.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\?/gi, "<img src='http://img25.imageshack.us/img25/4159/mangu.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\;\)/gi, "<img src='http://img25.imageshack.us/img25/2529/maluku.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-B/gi, "<img src='http://img25.imageshack.us/img25/333/malu.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://img25.imageshack.us/img25/7279/lovebcc.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)\)/gi, "<img src='http://img25.imageshack.us/img25/2443/ngakaki.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://img25.imageshack.us/img25/765/kringet.gif' alt='' class='smiley'/>");
_str = _str.replace(/=\(\(/gi, "<img src='http://img7.imageshack.us/img7/2439/kesel.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='http://img25.imageshack.us/img25/2043/kagum.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-j/gi, "<img src='http://img14.imageshack.us/img14/9351/aarrgh.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-p/gi, "<img src='http://img25.imageshack.us/img25/9086/hihihig.gif' alt='' class='smiley'/>");
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'comment-body-author') {
_str = b.item(i).innerHTML.replace(/:f/gi, "<img src='http://img413.imageshack.us/img413/2395/teriak.gif' alt='' class='smiley'/>");
_str = _str.replace(/:D/gi, "<img src='http://img413.imageshack.us/img413/9497/yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:x/gi, "<img src='http://img413.imageshack.us/img413/3571/stres.gif' alt='' class='smiley'/>");
_str = _str.replace(/B\-\)/gi, "<img src='http://img413.imageshack.us/img413/9981/senang.gif' alt='' class='smiley'/>");
_str = _str.replace(/b\-\(/gi, "<img src='http://img413.imageshack.us/img413/2440/sebel.gif' alt='' class='smiley'/>");
_str = _str.replace(/:@/gi, "<img src='http://img12.imageshack.us/img12/914/puyengz.gif' alt='' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img src='http://img25.imageshack.us/img25/9213/ngiler.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\?/gi, "<img src='http://img25.imageshack.us/img25/4159/mangu.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\;\)/gi, "<img src='http://img25.imageshack.us/img25/2529/maluku.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-B/gi, "<img src='http://img25.imageshack.us/img25/333/malu.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://img25.imageshack.us/img25/7279/lovebcc.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)\)/gi, "<img src='http://img25.imageshack.us/img25/2443/ngakaki.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://img25.imageshack.us/img25/765/kringet.gif' alt='' class='smiley'/>");
_str = _str.replace(/=\(\(/gi, "<img src='http://img7.imageshack.us/img7/2439/kesel.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='http://img25.imageshack.us/img25/2043/kagum.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-j/gi, "<img src='http://img14.imageshack.us/img14/9351/aarrgh.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-p/gi, "<img src='http://img25.imageshack.us/img25/9086/hihihig.gif' alt='' class='smiley'/>");
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>


Setelah selesai sila klik preview dahulu dan jika tiada sebarang error maka klik save template





Emotion Upin & Ipin Pada Komen Blog

0
Posted by Borong Shop | Labels: , ,


Pada post yang sebelumnya saya ada menerangkan bagaimana untuk membuat emotion soldier pada komen blog. Dan pada kali ini pula agak berbeza kerana saya menggunakan emotion upin dan ipin pada komen blog. Untuk membuatnya seperti biasa sila ikut step di bawah :

1) Login blogger >> Design >> Edit Html >> Download full Template >> Expand Widget Template 
2) Setelah itu dengan , dengan menggunakan kekunci CTRL + F/ F3 cari kod </body>
3) Jika anda sudah menjumpainya, sila copy kod di bawah ini dan paste kan sebelum/di atas kod </body>

<script src='http://aditx.fileave.com/upin-emoticons.js' type='text/javascript'/>

4) Setelah selesai, cari kod di bawah ini pula :

<b:if cond='data:post.embedCommentForm'>

Jika sudah menemukannya sila copy kod dibawah ini tepat di atas/sebelum kod 
<b:if cond='data:post.embedCommentForm'>

<b><img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC1_y45CSbI/AAAAAAAAA78/QsXnQdLYu7A/s800/ehsan01.gif' width='50'/>
:a:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC1_zL6GKxI/AAAAAAAAA8A/hhFDtKzpMJo/s800/ehsan02.gif' width='50'/>
:b:
<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC1_zFOpRNI/AAAAAAAAA8E/IgAjo0-WC3k/s800/fizi01.gif' width='50'/>
:c:
<img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC1_zAkM1fI/AAAAAAAAA8I/WbE7K08g2zU/s800/ipin01.gif' width='50'/>
:d:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/TC1_zSnurLI/AAAAAAAAA8M/SE6ijbGGRgY/s800/ipin02.gif' width='50'/>
:e:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC2ACEPepaI/AAAAAAAAA8Q/Mr3O2IY_PwY/s800/kakros01.gif' width='50'/>
:f:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC2ACUO5MxI/AAAAAAAAA8U/lOZem_1eYzA/s800/kakros02.gif' width='50'/>
:g:
<img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC2ACWDn6NI/AAAAAAAAA8Y/BdPtc9HGzbc/s800/mail01.gif' width='50'/>
:h:
<img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC2ACXXjJ6I/AAAAAAAAA8c/afGmF42wKNk/s800/upin01.gif' width='50'/>
:i:
<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC2ACt_jfiI/AAAAAAAAA8g/b0tn4s4TpUU/s800/upin02.gif' width='50'/>
:j:
</b>


Setelah semuanya selesai, klik preview dan jika tiada sebarang error maka klik save template






Cara pasang soldier emotions pada kotak komen

0
Posted by Borong Shop | Labels: , ,


Memasang emotion pada komen anda sememangnya mencantikkan lagi blog.Akan tetapi, Untuk makluman anda, memasang emotion pada komen blog adalah tidak sesuai untuk semua template. Ada sesetengah template yang hanya mengeluarkan kod tetapi emotion tidak dapat dihasilkan. Jadi kepada sesiapa yang berminat mencuba saya nasihatkan back up dahulu full template anda untuk mengelakkan sebarang error..

Untuk membuatnya sila ikut beberapa langkah ini :

1) Login Blogger >> Design >> Edit Html >> Expand Widget Template
2) Selepas itu dengan menggunakan CTRL + F cari kod </body>
3) Copy kod di bawah ini dan paste sebelum ataupun di atas kod </body>

<script src='http://aditx.fileave.com/soldier-emoticons.js' type='text/javascript'/>

Setelah selesai, cari pula kod di bawah ini :

<b:if cond='data:post.embedCommentForm'>

Jika sudah menemukan kod di atas, copy kod di bawah ini dan paste sebelum/di atas kod  
<b:if cond='data:post.embedCommentForm'>

<b><img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81H087PQqI/AAAAAAAAA1Q/XJwK7ZX_OWI/s800/th_toel2.gif' width='50'/>
:a:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81H0-7Ic_I/AAAAAAAAA1M/4elLiuOvxAE/s800/th_sinar_penghancur.gif' width='50'/>
:b:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtryEUoI/AAAAAAAAA1I/P_DjCdY63ss/s800/th_rokok_dulu_bos.gif' width='50'/>
:c:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtSx5JkI/AAAAAAAAA1E/rFy1OtLdpfk/s800/th_nyanyi_dolo.gif' width='50'/>
:d:
<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/S81HtAkZLWI/AAAAAAAAA1A/MtxAiF2noLs/s800/th_ngupil.gif' width='50'/>
:e:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtB260HI/AAAAAAAAA08/s4FrKbVSiqE/s800/th_ngantuk.gif' width='50'/>
:f:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtDrG9GI/AAAAAAAAA04/iD3Qgl_HiMk/s800/th_nangis_bawang.gif' width='50'/>
:g:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81HjGJfEAI/AAAAAAAAA00/M_2hdkO1jrc/s800/th_mboh_gajelas.gif' width='50'/>
:h:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HjLDGxSI/AAAAAAAAA0w/cNyFhVZ0eow/s800/th_hoeekzz.gif' width='50'/>
:i:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81Hi1DwTFI/AAAAAAAAA0s/PpjN6pC6Yvg/s800/th_cloud_ngeDJ_wkaaka.gif' width='50'/>
:j:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81HiytkCuI/AAAAAAAAA0o/pyVM3hcKHUI/s800/th_bye.gif' width='50'/>
:k:
<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/S81Hi-RW5AI/AAAAAAAAA0k/TuBPNUsIun0/s800/th_boom_boom.gif' width='50'/>
:l:
</b>


Setelah semuanya selesai sila klik preview dan jika tiada sebarang error maka klik save template







Tambah Icon Di sebelah Tajuk Post

0
Posted by Borong Shop | Labels: , ,


Penambahan ikon disebelah tajuk posting adalah merupakan satu daya penarik ,selain dari tajuk posting itu sendiri.Bagi tujuan itu gambar yang dimasukkan seperti pada blog ini adalah bersaiz 32x32 dan ia boleh didownload disini


Untuk membuatnya ikuti langkah ini:

sila login blog dan masuk ke Design--->> Edit Html

Kemudian cari kod berikut ini:

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-style:italic;
line-height:1.3em;
color:#333;
background:url(url gambar ) no-repeat left center;}


kod berwarna kuning ini adalah kod yang perlu ditambah di bawah kod tersebut

Jika tidak jumpa kod seperti diatas cuba pula kod ini :

<a expr:href='data:post.url'><data:post.title/></a>

Nota: jika terdapat lebih dari satu kod di atas ini(maksudnya anda jumpa kod yg sama) ,maka masukkan pada kod yang pertama.
Letakkan kod(yang berwwarna kuning) kepada kod url gambar anda yang sudah di upload tadi..

<a expr:href='data:post.url'><img src="gantikan kepada url gambar anda"/> <data:post.title/></a>

Setelah selesai klik preview,jika tiada error maka seterusnya klik save template





Membuat Drop Down Menu

0
Posted by Borong Shop | Labels: , ,


Membuat menu horizontal sebenarnya ada banyak alternatif, untuk kali ini kita akan mencuba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih lebih professional


Langkah Pertama
Login ke akaun Blogger
Pergi ke DESIGN => EDIT HTML => EXPAND TEMPLATE WIDGET.
Selepas itu dengan menggunakan ctrl+f atau f3, cari kod ]]></b:skin>


copy kod di bawah ini dan paste kn sebelum atau di atas kod ]]></b:skin>


.preload1 {background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif);}
.preload2 {background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px;height:35pxpx; background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}





jika telah siap,klik preview dahulu..jika tiada apa2 error maka klik save template dan teruskan dengan step di bawah pula


Langkah kedua
1)Klik Page design
2)Klik Add  a Gadget dan masukkan kod di bawah


<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>


<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>


</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>


Keterangan :
Warna Merah, Alamat URL yang akan menjadi drop menu(isikan dengan web yg anda inginkan)
Warna Hijau, tajuk besar bagi menu hadapan(anda cuba ubah dan lihat hasilnya)

Selamat Mencuba...




2010 Hi There Theme designed by Wordpress Theme| Blogger Writer By Amycozzo | Blogger Tutorial