Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

5 Apr 2009

Cara mudah buat fuldownmenu tanpa hacking HTML template

Fuldownmenu atau dropdowmnmenu atau tampilan menu-menu yang memiliki sub menu di bawahnya setelah menu utama diklik cukup menarik untuk diletakan dalam halaman blog, selain mempercantik tampilan juga untuk menyimpan link-link penting tanpa harus memakan halaman bloga alias efisien.

Caranya cukup dengan memposting kode HTML dan kode CSS dalam kolom yang berbeda, yang mana dulu yang diposting (HTML atau CSS dulu) sama saja, yang akan muncul dalam tampilan blog kita hanya HTMLnya saja. Langsung aja ya..

PERTAMA

1. Copy kode HTML di bawah ini dan sisipkan di menu gadget javascript (sebelumnya
masuk layout dulu n tambah gadget)
INI KODE HTMLnya :


<ul id="qm0" class="qmmc">

<li><a class="qmparent" href="javascript:void(0)">JURED'S RELATED BLOGGERS</a>

<ul>
<li><a href="http://adrianmkariem.blogspot.com/">K.H. ADRIAN</a></li>
<li><a href="http://elmumtaz737.blogspot.com/">K.H. SOLEH</a></li>
<li><a href="http://wongatas.blogspot.com/">Abu Awwaz</a></li>
<li><a href="http://nakintel.blogspot.com/">Abu Daffa</a></li>
<li><a href="http://nanalatansa.blogspot.com/">Abu Izzat</a></li>
<li><a href="http://hafidht.blogspot.com/">Abu Irfa</a></li>
<li><a href="http://sulaimanism.multiply.com/">Ust. Irman</a></li>
<li><a href="http://www.jamil-masyita.blogspot.com/">Abah Jamil</a></li>
<li><a href="http://najmudincianjur.blogspot.com/">Kang Bintang</a></li>
<li><a href="http://hambabijaksana.blogspot.com/">Aqiem</a></li>

</ul></li>

<li><a class="qmparent" href="javascript:void(0)">ZONA BLOGGERS</a>

<ul>
<li><a href="http://kolom-tutorial.blogspot.com/">Kang Rohman</a></li>
<li><a href="http://hakimtea.com/">Hakiem Tea</a></li>
<li><a href="http://subagya.blogspot.com/2009/01/membuat-kolom-baru-di-blogspot.html">Subagya</a></li>
<li><a href="http://catalog-tutorial.blogspot.com/">Blog Tutorial</a></li>
<li><a href="http://trik-tips.blogspot.com/">Triks dan Tips</a></li>
<li><a href="http://kursus-blog.blogspot.com/">Kursus Blog</a></li>
<li><a href="http://www.colorschemer.com/online.html">Warna HTML</a></li>
<li><a href="http://www.o-om.com/
">BLOG OOM</a></li>

</ul></li>

<li><a class="qmparent" href="javascript:void(0)">PENDIDIKAN</a>

<ul>
<li><a href="http://www.zeniusxpedia.com/tipsdansoal/index.html">Tips dan Soal</a></li>
<li><a href="http://www.4icu.org/id/">Rank Perguruan Tinggi</a></li>
<li><a href="http://belajarkimia.net/">Belajar Kimia 1</a></li>
<li><a href="http://belajarkimia.com/category/kelarutan-dan-ksp/">Belajar Kimia 2</a></li>
<li><a href="http://matematika-sma.blogspot.com/">Belajar Matematika</a></li>
<li><a href="http://www.banksoal.sebarin.com/category/test-cpns">Bank Soal</a></li>

</ul></li>

<li><a style="border-width:1px;" class="qmparent" href="javascript:void(0)">ZONA ISLAM</a>

<ul>
<li><a href="http://ahmadzain.com/">AHMADZIN</a></li>
<li><a href="http://www.altafsir.com/">Tafsir Outsourching</a></li>
<li><a href="http://www.almeshkat.net/">Misykat Islamiyah</a></li>
<li><a href="http://www.rumahbukuislam.com/">Rumah Buku Islam</a></li>
<li><a href="http://www.islamreligion.com/">Islam Religion</a></li>
<li><a href="http://www.iqrasense.com/">Iqra Sense</a></li>
<li><a href="http://soni69.tripod.com/index.htm">Forum Studi Islam</a></li>
<li><a href="http://arabic.web.id/?p=71">Arabic</a></li>

</ul></li>
<li><a style="border-width:1px;" class="qmparent" href="javascript:void(0)">SOFTWARE</a>

<ul>
<li><a href="http://ebsoft.web.id/">Ebsoft</a></li>
<li><a href="javascript:void(0)">Apa aja</a></li>
<li><a href="javascript:void(0)">Apa aja</a></li>

</ul></li>

<li><a style="border-width:1px;" class="qmparent" href="javascript:void(0)">OTHER LINKS</a>

<ul>
<li><a href="http://marioteguh.blogspot.com/">Mario Teguh</a></li>
<li><a href="http://alyaseer.net/vb/showthread.php?t=15413">Al Yaseer</a></li>
<li><a href="http://beemp3.com/">Download Songs</a></li>
<li><a href="http://marioteguh.asia/">Mario Teguh GW </a></li>
<li><a href="http://centricle.com/tools/html-entities/">Encode</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Dinamic Drive</a></li>
<li><a href="http://www.likno.com/?gclid=CIWWz4qJxpkCFc0vpAodM2D_aQ">Likno</a></li>
<li><a href="http://duniadownload.com/">Dunia Download</a></li>

</ul></li>

<li class="qmclear">&nbsp;</li></ul>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script>


2. Copy kode CSS di bawah ini dan sisipkan di menu gadget javascript (sebelumnya
masuk layout dulu n tambah gadget)
INI KODE CSSnya :


<!--%%%%%%%%%%%% MyCSSMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">


/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/


/* MyCSSMenu 0 */

/*"""""""" (MAIN) Container""""""""*/
#qm0
{
margin:0px;
background-color:#FFFFFF;
border-style:outset;
}


/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:4px 40px 4px 10px;
background-color:#DCEDCD;
color:#222222;
font-family:Arial;
font-size:12px;
text-decoration:none;
text-align:left;
border-width:1px 0px 1px 1px;
border-style:solid;
border-color:#687A54;
}


/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:hover
{
color:#222222;
}


/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#C2E0A9;
}


/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:5px;
background-color:#DCEDCD;
border-width:1px;
border-style:solid;
border-color:#687A54;
}


/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:3px 20px 3px 5px;
background-color:#BBCDA8;
color:#222222;
font-size:12px;
text-align:left;
border-width:1px 0px 1px 0px;
border-color:#DCEDCD;
}


/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
background-color:#C2E0A9;
color:#222222;
border-color:#687A54;
}


/*"""""""" (SUB) Parent Items""""""""*/
#qm0 div .qmparent
{
background-color:#C4B1C4;
}


/*"""""""" (SUB) Parent Hover State""""""""*/
#qm0 div .qmparent:hover
{
background-color:#AE85F0;
}


/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#98DDA6;
border-color:#687A54;
}


/*"""""""" (SUB) Persistent State""""""""*/
body #qm0 div .qmpersistent, body #qm0 div .qmpersistent:hover
{
background-color:#BAA4D1;
}


</style>

Tambahan :
1. Kode CSS ini ditelakan footer (usulan aja),
2. HTML yang udah kita posting tadi akan muncul kalo CSSnya udah kita posting.
3. Temen2 tidak perlu mengedit CSS, cukup mengedit HTMLnya aja, yang diedit:
1.Judul menu
2.URL link yang mau kita bat
3.Title/Nama Sub Linknya
Kalau gitu, mohon dilihat kode di bawah ini:

<li><a href="http://hakimtea.com/">Hakiem Tea</a></li>

URL : http://hakimtea.com/ DIGANTI dngan URL yang temen2 siapkan.
Title "Hakiem Tea" bisa diganti dengan title yang temen2 siapkan, title ini adalah judul sub menu yang akan tampil.
Lihat juga kode ini:

<li><a class="qmparent" href="javascript:void(0)">JURED'S RELATED BLOGGERS</a>

Teks "JURED'S RELATED BLOGGERS" adalh judul menu utama bisa temen2 ganti juga.

Mohon maaf kalau penjelasannya kurang efektif.

Selamat mencoba!

1 komentar:

  1. dari dulu ak pengen blajar ttg tema ini, baru nemu sekarang disini, makasih ya kang

    BalasHapus

SOBAT KANG JURED