Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

November 28, 2012

Segmen Bloglist Disember Ice Princess

 
*klik banner untuk join*

GiveAway by La NIAR

*klik banner untuk join*
jom reramai join GA ni. kita support lah ok ^^ nina teruja nak join sebab GA ni mengenai dress. nak sangat! hope menang ye :)

November 27, 2012

Peplum Giveaway by Nadnod Azizan

*klik banner untuk join*
sangat teruja join GA ni. teringin sangat nak ada peplum ni. suka gila kot. hehe saiz pun dah sesuai dah dengan saya. hope boleh menang ^^

November 26, 2012

Tutorial Tabbed Widget 3 in 1 (Style II)

petang ni nina nak ajar dan share satu tuto lagi. semalam nina ada buat untuk Style I. KLIK sini ok untuk lihat.. bentuk dia lain sikit lah. tapi rasanya yang ni lagi comey. dulu nina pernah guna tapi sekarang tak lagi. jimat guna benda ni. tak serabut :D
langkah 1 :
mula mula korang copy code dekat bawah ni dan pastekan di ruangan http://htmledit.squarefree.com/ (ada tulisan nanti delete dulu baru paste code ni). korang boleh edit di situ dulu dan dia ada preview terus tab korang tu. senang sikit kan..
<center><div id="widget" style="background:url(URL BACKGROUND) no-repeat left top; width:80;height:300px;padding: 30px 10px 0px;text-align: center;line-height: 1 ">
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width:100px; /* Main Menu Top Width */
text-align:center ; height: 30px; /* Top High Main Menu*/
padding-top:8px; vertical-align:middle; border:2px solid #ffffff; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:bold; color:#000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #dedede; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:2px solid #FFFFFF; /* Main Box border color */ overflow:hidden; background-color:#FFFFFF; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>TAB 1</a>
<a>TAB 2</a>
</div>
<div style="width:200px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">
CODE HERE 1
</div>
</div>
<div class="Page">
<div class="Pad">
CODE HERE 2 
<div class="Page">
<div class="Pad">
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div></div><center/></center></div></div></div></div></form></div></center>
warna hijau = url background yang korang suka *tak nak letak background pun tak apa, ABAIKAN*
warna purple = ikut apa yang ditulis
warna merah = title tab korang tu
warna biru = code korang yang nak letak macam code banner ke, cbox ke, etc
langkah 2 :
dah siap edit ? ok pergi dashboard -> design --> add a gadget --> HTML/Javascript
langkah 3 :
copy code tadi yang sudah siap di edit dan pastekan dekat ruangan HTML/Javascript
langkah 4 :
save !

Pencarian Bloglist Musim 1 Diari Farisha

*klik banner untuk join*
tag kamu :

Senarai Pemenang Shout! Awards 2012

and the winner are :
Rockstar Awards - Bunkface
Popstar Awards - Yuna
Power Vocal Award - Shila Amzah
Flava Award - Black & Malique
Break Out Award - Massacre Conspiracy
Music Video Award - MizzNina
Best On-Screen Chemistry Award - Johan & Zizan Razak (Raja Lawak Musim 6)
Breakthrough Local Feature Award - Songlap
Fresh TV Series Awards - Versus
Favourite TV Personality Award - Zizan Razak (Raja Lawak Musim 6) 
Coolest Radio Announcer Award - Hunny Madu (Fly FM - Malaysia’s Hottest Music) 
Favourite TV Program Award - Showdown 2012
Hot Chick Award - Nora Danish
Hot Guy Award - Aaron Aziz
Favourite Radio Show Award - TOP 5 Panggilan Hangit
Shout! Aloud Award (Individu berbakat menerusi YouTube) - Matluthfi90
The Ultimate Shout! Award - KRU
Wired Celebrity Award - Yuna
tahniah kepada pemenang! :)


Tutorial Tekan Sekali Banyak Tab

tuto ini di request oleh adik addreena. sorry dik lambat sikit. busy lah :) adik ni tanya macam mana nina buat advertisement sekali click keluar banyak tab..
yang macam anak panah tu. ha gitu lah..
1. dashboard -> design --> add a gadget --> HTML/Javascript
2. copy code di bawah ni dan pastekan dekat ruangan HTML/Javascript tadi :
<center><a href="YOUR LINK" target="_blank" style="font-weight: normal; " onclick="window.open ('YOUR LINK');window.open ('YOUR LINK');window.open ('YOUR LINK');return false;"><button>TITLE BUTTON</button></a></center>
warna merah = link advertisement ke apa jela link yang korang suka
warna biru = title button tu seperti JANGAN TEKAN!, etc
3. save !
senang bukan? hehe selamat mencuba :)

Tutorial Tabbed Widget 3 in 1 (Style I)

tengah malam ni nina nak buat sikit tutorial untuk korang. act ramai yang tanya dan dah lama diorang tanya. hari ini baru nina buat. sebelum ni nina ada pakai tapi sekarang tak lagi. hehe so nina nak tunjuk rupa dia..
langkah 1 :
mula mula korang copy code dekat bawah ni dan pastekan di ruangan http://htmledit.squarefree.com/ (ada tulisan nanti delete dulu baru paste code ni). korang boleh edit di situ dulu dan dia ada preview terus tab korang tu. senang sikit kan..
<div id='polskahekjor'>
<style type="text/css">
    div.P0L5K4 div.C0D3R
    {height: 24px; overflow: hidden;float:left; }
div.P0L5K4 div.C0D3R a:hover
    { background-color: #eee; }
div.P0L5K4 div.C0D3R a.Active{background:#000;color:#fff;}
 div.P0L5K4 div.N0T4C0D3R
    { clear: both; border: 0px solid #bce8f6; overflow: hidden; background-color: #eee;}
    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r
    { height: 100%; padding: 0px; overflow: hidden; }
    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R
    { padding: 3px 5px; }
div.P0L5K4 div.C0D3R a
    { background:#ccc; float: left;border-radius:11px 11px 0px 0px;
    display: block; width: 8%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 12px; font-weight: 900; color: #151515;}
    </style>
<script type='text/javascript'>
    //<![CDATA[
    function P0L5K4_C0D3R(P4WN3D, id)
    {
      var P0L5K4 = document.getElementById(P4WN3D);
      var C0D3R = P0L5K4.firstChild;
      while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
      var TT = C0D3R.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var N0T4C0D3R = P0L5K4.firstChild;
      while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
      var h3ll0c0d3r = N0T4C0D3R.firstChild;
      var i    = 0;
      do
      {
        if (h3ll0c0d3r.className == 'h3ll0c0d3r')
        {
          i++;
          if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
          h3ll0c0d3r.style.overflow = "auto";
          h3ll0c0d3r.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
    }
    function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
    }
    function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D,  1);
    document.write('');}
    //]]>
    </script>
<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div><div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
CODE 1</center></center></center></center></center></div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
CODE 2</center></center></center></center></div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
CODE 3<center>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>
warna biru = title tab korang tu
warna purple = code yang korang nak letak macam banner ke cbox ke ikut suka korang lah

langkah 2 :
dah siap edit ? ok pergi dashboard -> design --> add a gadget --> HTML/Javascript
langkah 3 :
copy code tadi yang sudah di edit dan pastekan dekat ruangan HTML/Javascript
langkah 4 :
save !

November 18, 2012

Tutorial Buat Navigate Box

hello hello, hai selamat petang semuanya. ok petang ni nina nak share korang buat navigate box. apa tu? ha bunyi dia macam tahu kan. hehe dia macam menu bar juga lah tp yang ni jimat ruang. semua boleh masuk dalam satu box ni. rupa dia? ha mcam ni ha.. :D
langkah 1 :
mula mula korang copy code dekat bawah ni dan pastekan di ruangan http://htmledit.squarefree.com/ (ada tulisan nanti delete dulu baru paste code ni). korang boleh edit di situ dulu dan dia ada preview terus tab korang tu. senang sikit kan..
<style>
.adv2 ul{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}
.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}
a.tablo{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#fff;
width:20px;
text-decoration:none; 
border:1px dashed #BBBBBB; 
border-radius:33px;
color:#555; 
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#ccc;color:#fff;}
 </style>
<div id="adv2" class="adv2">
<center><style>
.babo{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:3px solid #F2F4F2;text-align:center;width:250px;color:#555}
a.tablo{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#F2F4F2;
width:20px;
text-decoration:none; 
border:3px solid #fff; 
color:#fff;
box-shadow:1px 1px 3px #eee;
border-radius:33px;
display:inline-block;
text-align:center;
font:16px calibri;
}
a.tablo:hover{background:#F7E8DE;color:#fff;}
#wnsb img{max-width:245px;}
 </style>
<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>
<div id="wnsb" style="width:250px;color:#ccc; padding:5px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">
Navigate around. Replace this with anything/your own words.
</div>
<div id="1" style="display: none;">
Remove this and replace with YOUR WORDS/CODES.
</div>
<div id="2" style="display: none;">
You can also put cbox codes here.
</div>
<div id="3" style="display: none;">
Your banner here.
</div>
<div id="4" style="display: none;">
Your credit sides also can put here.
</div>
</center>
langkah 2 :
dah siap edit ? ok pergi dashboard -> design --> add a gadget --> HTML/Javascript
langkah 3:
copy code tadi yang sudah siap di edit dan pastekan dekat ruangan HTML/Javascript
langkah 4 :
dah paste code tu JANGAN TEKAN RICH TEXT tu tau. nanti tak jadi ye. save terus! :)


November 17, 2012

Freebies : Ribbon On Top Blog (Part III)

ok yang ni dah part III. fuh banyak kan ribbon ni. rambang mata pula nina ni. so kalau korang berkenan pilih lah dari part I dan part II tu ada lagi :)






   image


 image


 image


 http://29.media.tumblr.com/tumblr_lyhaolUyBU1r81pw5o1_100.gif http://27.media.tumblr.com/tumblr_lyhap0tPbe1r81pw5o1_100.gif


 

 













    

image image


image image image image


image image image image
KLIK tutorial sini pemasangan ok !
KLIK Freebies : Ribbon On Top Blog (Part I)
KLIK sini untuk Freebies : Ribbon On Top Blog (Part II)
dah guna komen di sini dan janganlah lupa credit saya ye :)


Freebies : Ribbon On Top Blog (Part II)

sambungan dari part I tu ye. pilih lah. yang bahagian ni pun comey :)

image image image 
image image

image image image image image
image image image image

image image image image image
image image image image
















 

 



KLIK tutorial sini pemasangan ok !
KLIK Freebies : Ribbon On Top Blog (Part I)
KLIK Freebies : Ribbon On Top Blog (Part III)
dah guna komen disini dan credit saya ye :)