Kamis, 12 November 2009
membuat pop up menu di blog
mau membuat pop up menu atau bisa dikatakan menu-menu yang otomatis muncul ketika mouse diarahkan ke menu utama, namun menghilang ketika mouse menjauhi? disini saya memberi contoh menu yang drop down ke bawah,
1. Login ke Blog lalu masuk ke Layout pilih Edit Html
2. cari ]]> pake Ctrl+F taruh kode dibawah ini di atas kode ]]>
/*!!!!!!!!!!! QuickMenu 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 .qmcbox{cursor:default;display:block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.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%;}
/*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/
/* QuickMenu 0 */
/*"""""""" (MAIN) Container""""""""*/
#qm0
{
background-color:transparent;
}
/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:5px 15px 5px 20px;
color:#6585B9;
font-family:Arial;
font-size:12px;
text-decoration:none;
font-weight:bold;
}
/*"""""""" (MAIN) Parent Items""""""""*/
#qm0 .qmparent
{
background-image:url(qmimages/qthoverfill_plus_main.gif);
background-repeat:no-repeat;
background-position:9px 10px;
}
/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
color:#C7C7C7;
text-decoration:underline;
}
/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:5px;
margin:-2px 0px 0px -6px;
background-color:transparent;
border-width:1px;
border-style:none;
border-color:#A6A6A6;
}
/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:5px 50px 5px 20px;
background-color:transparent;
color:#F5F5F5;
font-size:12px;
font-weight:bold;
border-width:0px;
border-style:none;
border-color:#000000;
}
/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover
{
color:#3F3F3F;
text-decoration:none;
}
/*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/
#qm0 ul li:hover>a
{
color:#3F3F3F;
text-decoration:none;
}
/*"""""""" (SUB) Parent Items""""""""*/
#qm0 div .qmparent, #qm0 ul .qmparent
{
background-image:url(qmimages/qthoverfill_plus_sub.gif);
}
/*"""""""" (SUB) Parent Hover State""""""""*/
#qm0 div .qmparent:hover
{
background-image:url(qmimages/qthoverfill_plus_sub_hover.gif);
}
/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#747A86;
background-image:url(qmimages/qthoverfill_minus_sub.gif);
color:#EEEEEE;
}
/*"""""""" Individual Titles""""""""*/
#qm0 .qmtitle
{
font-size:11px;
}
/*"""""""" (main) Rounded Items""""""""*/
#qm0 .qmritem span
{
border-color:#A6A6A6;
background-color:#3F3F3F;
background-image:url(qmimages/qthoverfill_minus_main.gif);
background-repeat:no-repeat;
background-position:9px 5px;
}
/*"""""""" (main) Rounded Items Content""""""""*/
#qm0 .qmritemcontent
{
padding:0px 0px 0px 20px;
}
/*"""""""" (sub) Rounded Items""""""""*/
#qm0 div .qmritem span
{
border-color:#666666;
background-color:#EEEEEE;
}
/*"""""""" (sub) Rounded Items Content""""""""*/
#qm0 div .qmritemcontent
{
padding:0px 0px 0px 4px;
}
/*"""""""" Sub Hover Fill Items [Static]""""""""*/
#qm0 div .qmhoverfill
{
background-color:#C0CAE3;
}
/*"""""""" Custom Rule""""""""*/
ul#qm0 ul li:hover > a
{
color:#6585B9;
}
/*"""""""" Custom Rule""""""""*/
ul#qm0 ul
{
background-color:#3F3F3F;
}
/*"""""""" Custom Rule""""""""*/
ul#qm0 li:hover > a
{
background-color:#3F3F3F;
}
/*"""""""" Custom Rule""""""""*/
div#qm0 div div
{
margin:0px 0px 0px -6px;
}
3. Kemudian save
4. Kemudian dari Layout ke Page Element
5. Add gadget baru masukkan kode ini di gadget baru
- TECHNOLOGY
- Data Matrix
- Data Matrix 2
-
5. Yang diatas hanya sebagai contoh
6. Tulisan TECHNOLOGY untuk Menu utama
7. Tulisan Data Matrix adalah sub menu nya
8. Save dan atur sendiri ya semua warnanya hehee
