Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

December 16, 2012

Lappy Rosak :(


maaf korang. buat sementara ni semua kerja blogging tergendala buat sementara baru sebab lappy rosak :( nina tengah tunggu my sister, angah balik semenanjung nanti baru repair. saving la katakan. haha yela apa guna ada kakak reti bab bab gini kan :D pasal segmen nina yang tamat 12 Dec yang lalu pun tergendala. ok tunggu ye kalau lappy dah elok nina umumkan top referral yang menang dress tu dan blog review. sekarang ni nina guna lappy kakak. nasib baik dia balik minggu ni. curi sekejap. apa pun tak boleh guna lama ni, sorry guys kalau ada yang soalan ke apa ke tak terjawab. nanti insyaAllah nina reply semua ye ^^

# sangat boring lappy tak ada :/

December 12, 2012

RA Segmen : Jom Follow dan Click Earnings

SEGMEN TAMAT !!
scroll bawah untuk entry terbaru.. 
hehe Alhamdulillah setelah GA dan contest nina dapat sambutan, kali ni nina nak buat segmen pula. nina harap segmen ni dapat sambutan juga lah. aminn :)
<a href="http://greenhousera.blogspot.com/2012/11/ra-segmen-jom-follow-dan-click-earnings.html"><img src="http://i.imgur.com/uwwR0.gif" width="190" height="170" border="0"/></a>
 syarat dia simple je :
1. Wajib follow blog nina dan kiki *akan dicheck!*
2. Wajib like fanpage ni *jujur & ikhlas ok!*

3. Wajib tekan SINI, SINI, SINI, SINI (tekan sehingga habis loading baru tutup) *jujur tau!*

4. Copy paste code banner di atas di entry (wajib) dan di sidebar blog korang (tak wajib) *warna biru tu boleh adjust banner ikut kesesuaian*

5. Buat satu entry yang bertajuk " RA Segmen : Jom Follow dan Click Earnings " dan pastekan link entry penyertaan SAHAJA di kotak komen ini !

6. Wajib follow, click earnings advertise peserta dan tinggalkan jejak anda di entry segmen di blog mereka untuk mereka follow anda balik :) *jujur ye!*

7. Tag berapa orang dan pastikan mereka tahu *akan dicheck!*

segmen ni tak ada hadiah lumayan sebab objektif nina untuk up kan followers korang je. hehe tapi nina nak beri sedikit saguhati, seperti berikut :
1. 1x Green Dress kepada TOP REFERRAL (promote habis habisan)
2. 3x Blog Review (akan dipilih) *updated*

kelebihan join segmen ni?
1. akan menambah kenalan dan followers.
2. traffic blog anda akan meningkat disebabkan ramai yang singgah di blog anda.
3. akan menaikkan earnings advertise dekat blog korang bila setiap orang click advertise korang tu.
4. paling penting dapat mengeratkan silaturrahim sesama bloggers :)

>>SENARAI PESERTA<<
*akan diupdate dari semasa ke semasa*

TARIKH TUTUP : 12/12/2012

jika ramai yang join dan dapat sambutan nina akan buat lagi akan datang. TQ ^^

December 6, 2012

Tutorial Hover Header Shake

tutorial ini di request seorang adik kaqyonk. haha dia tulis nama tu dekat cbox nina. dia nak tahu macam mana header nina sekarang ni jadi gegor gitu. korang pastikan hover header korang yang lama telah delete dulu ye ^^*credit

1. dashboard >> design >> edit HTML >> expand widget templates
2. tekan CTRL+F untuk cari code ini :
/* Header
3. jumpa? lepas itu korang akan nampak code #header:hover {
kalau tiada korang tambah jela..
4.pastekan code di bawah ni BAWAH code tadi, #header:hover {
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter: none;
-webkit-filter: blur(0px);-moz-filter:blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -moz-transform:  translate(0px, 2px) rotate(0deg); }
 40% { -moz-transform:  translate(1px, -1px) rotate(1deg); }
 50% { -moz-transform:  translate(-1px, 2px) rotate(-1deg); }
 60% { -moz-transform:  translate(-3px, 1px) rotate(0deg); }
 70% { -moz-transform:  translate(2px, 1px) rotate(-1deg); }
 80% { -moz-transform:  translate(-1px, -1px) rotate(1deg); }
 90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
 100% { -moz-transform:  translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
 40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
5. preview dulu dan save ye :)

Tutorial Floating Status (Style II)

tuto ini direquest oleh adik mai di cbox nina. lets our try a new floating updates/status (style II).
act ni code nina ye. so no re-post or re-tuto about this code oraitt ^^
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 terus preview. so senang sikit korang nak edit ikut suka :D
<div style="background:#FFBBBB;color:#fff; position:absolute; top:0px;left:450px;width:10px;height:70px; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#FFBBBB;color:#fff; position:absolute; top:0px;left:530px;width:10px;height:70px; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:absolute; top:60px;left:400px;width:201px; height:70px; color:#aaa;">
<div style="background:#FFBBBB;color:#008000; width:190px;  text-align:center; font-size:12px; text-transform:uppercase;">
TITLE NAME</div>
<div style=" position:absolute; background:#FFBBBB; color:#008000; border-top: 1px dashed #fff; border-left: 1px dashed #fff; border-right: 1px dashed #fff; border-bottom: 1px dashed #fff;  margin-top:5px; width:186px; height:45px; top: 20px; left:3px;"><center>YOUR STATUS HERE!</center></div></div>
yang berwarna tu korang kena adjust lah ikut kesukaan korang tu ^^
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 tu
Langkah 4 :
save !

December 5, 2012

Menang Segmen Bloglist Disember Ice Princess

alhamdulillah syukur dah rezeki nina menang untuk Segmen Bloglist Disember Ice Princess yang nina join 28 Nov yang lepas. segmen mana? tak ingat yang mana? bagi yang tak tahu segmen ni dianjurkan oleh Nurul Farahizzati atau Zizie. ok meh tengok banner dia pula mana tahu ada yang ingat dan ada juga yang telah join. bagi yang nak join, maaf lah dah tamat. hehe
 
*klik banner untuk ke entry segmen*
dan pemenang nya ialah
|
|
\/
*klik banner untuk ke entry pemenang*
hehe tengok dekat atas tu. ha tu tu.. link blog nina warna biru tu. untuk pengetahuan korang, nina adalah antara ke 5 peserta yang terpantas memenangi top-up sebanyak RM10 setiap seorang. hehe nina juga di bloglist dan di review blog. wow! btw thanks sangat pada zizie sebab dah bagi top-up tu. so bolehlah sambung bermesej. haha baru tadi nina check email dan dapat number nya. yela cik zizie ni student lagi macam nina busy lah kan. tak apa janji dah dapat ni ok lah. thanks sangat ye! semalam baru borak dengan dia, nanti sambung lagi yaa ^^

Jom Join BLOGLIST AyuInsyirah Tahun 2012

diajak sendiri oleh tuan punya badan. thanks ayu ^^
*klik banner untuk join*

Segmen Blog Saya Hebat

di ajak sendiri oleh tuan punya blog ni. hehe thanks atiqah ^^
*klik banner untuk join*

Blog saya hebat kerna blog yang bertemakan hijau yang simple dan mendamaikan ni penuh dengan informasi dan tips yang menarik untuk pembaca. Ia juga menyelitkan tutorial dan freebies yang akan di update dari semasa ke semasa untuk membantu followers. Tempahan ada juga diterima. Alhamdulillah mereka mempercayai saya. Ada beberapa pembaca juga jadikan blog ni sebagai mentor sampai meniru cara dan gaya blog ni. Haha yang penting blog ni pernah masuk majalah REMAJA tahun lepas >,<

December 3, 2012

Segmen Suka-Suka by Cik Akma

*klik banner untuk join*
comel kan banner tu. jom lah jom reramai. hadiah yang nina inginkan ialah BANNER ^^ 
sebab nina rasa cik akma ni boleh buat  yang awesome. hope dapat menang! :)

December 2, 2012

SEGMEN: Bloglist 2013 by #Jemah

nina diajak oleh tuan rumah untuk join. thanks jemah! ^^
*klik banner untuk join*

December 1, 2012

Tutorial Cara Nak Dapatkan Link MP3

before ni tuto nina semua guna irondj.net kan. now dia dah tak ada. ok nina bagi cara lain nak dapatkan link mp3 untuk letak lagu dalam blog korang.

CARA PERTAMA - guna mp3skull.com
2. search lagu korang nak tu
3. dah keluar? ha bawah lagu tu ada EMBED kan, click situ
4. copy code tu tau.. contoh nina punya :
We_Are_Never_Ever_Getting_Back_Together_-_Taylor_Swift_www.mp3hits.wen.ru<br><embed type="application/x-shockwave-flash" src="http://www.4shared.com/flash/player.swf?ver=9051" style="" id="ply" name="ply" quality="high" allowscriptaccess="always" allowfullscreen="false" wmode="opaque" flashvars="file=http://mp3hits16.wen.ru/NEW_FOREIGN/We_Are_Never_Ever_Getting_Back_Together_-_Taylor_Swift_www.mp3hits.wen.ru.mp3&amp;volume=50&amp;" height="20" width="200"><br>Powered by <a href="http://mp3skull.com/">mp3skull.com</a><script type="text/javascript" src="http://mp3skull.com/embedcl.php"></script>
**korang hanya copy yang berwarna merah ni je ok. yang ni lah code lagu korang :)

CARA KEDUA - guna Youtube
2. search lagu korang tu
3. dah keluar? ha kat bawah lagu tu korang SHARE dulu, lepas tu tekan EMBED. tick kan pada USE OLD EMBED CODE.
4. yang tu pun code url link mp3. yang dekat sebelah embed tu pun link mp3 dan dekat atas tu pun link lagu korang. macam dalam gambar ni :
korang pilih mana satu nak ambil code mp3 korang tu :)
cara nak guna link ni boleh pergi tuto ni :
cute mp3 player
jquery music player
billy music player


Ciri Blog Yang Tidak Disukai Oleh Pembaca

korang pernah rasa tak kalau pergi sesuatu blog dah click button (x) sebab blog tu memang tak disukai. ini pendapat nina lah sebagai pembaca kita inginkan sesuatu yang sedap mata memandang dan disenangi bukan? oleh itu sebagai owner blog kena lah alert dengan semua ni. janganlah asyik dengan citarasa kita blog pun kucar kacir sampai pembaca yang lain pun dah tak bw blog korang. pembaca lagi penting sebab diorang yang menaikkan traffic blog kita. so antara blog yang tidak disukai oleh pembaca versi nina adalah :
1. Tulisan yang serabut dan tidak difahami oleh pembaca
     - Jenis font
cuba korang perhatikan tulisan di blog anda tu boleh di baca atau tidak. jenis font pun penting dalam blog tau. bukan sahaja senang di fahami malah senang di baca oleh pembaca yang datang ke blog korang. so seronok lah pembaca nak baca story korang tu kan. hehe
     - Jenis ayat yang ditulis
contohnya : kitew laww bulehhh nak kaw... ha jenis ayat macam ni bukan semua orang boleh baca. malah, orang belum sempat nak baca keseluruhan dah terus tekan button (x) dekat blog korang tu. so biarlah skema sikit janji orang paham dan lebih suka datang blog korang tu ye ^^

2. Susunan gadget yang tidak teratur
ha susunan gadget yang serabut dan tidak teratur menyebabkan mengganggu mood pembaca nak bw di blog korang. so nak banyak boleh tapi pastikan teratur ye.

3. Ayat mengekori cursor
hey nina pantang betul kalau bw cursor dia diekori ayat. tak suka lah! bagi nina ia mengganggu dengan serabut lagi. terus tekan button (x). korang tak nak kan macam tu so tak payah lah buat :D

4. Verification word di bahagian komen

nina tengok kebanyakkan blogger guna. ni satu lagi memang kurang suka. ada yg jenis please prove you're not a robot. alamak spoil betul lah. dah lah kadang kadang tak betul kena buat lagi. berkali kali nak kena cuba.

5. Load blog lambat
ni satu mesti ramai yang kadang nak bw blog orang kena tunggu loading blog. kemain lamanya. sebab blog tu berat. maybe banyak sangat gadget or tah lah. hehe sorry ! memang nina tak sabar terus tekan button (x) ok.. korang pegi tutorial blog siapa yang ada tutorial ringgan kan blog..

6. Pop-Up display
apa maksudnya? contoh macam ni lah :

mungkin ramai pembaca yang tidak menyukai benda alah ni sebab kena tunggu kiraan masa dia baru lah boleh ke blog diorang dan setiap kali nak bw akan display benda ni. so tak payah lah ye buat sebab bukan semua suka nak baca iklan or LIKE ke. korang boleh je buat button like di sidebar sudah memadaii.

7. Lagu autoplay
maaf sekali lagi ingin nina katakan bukan semua suka dengan lagu di blog. mungkin mereka tidak dapat fokus apa yang dibaca dan menganggu pendengaran. kalau slow ok lah tapi sound dia kadang kadang terlalu kuat. setiap kali nak Open New Tab lagu yang sama akan didengari dan menyebabkan banyak lagu akan bertindih dan akan jadi serabut gitu. korang nak letak lagu boleh tapi bukan yang autoplay ye :)

8. Tiada followers gadget
yang ni selalu nina jumpa. nina kalau tak ada followers gadget ni kurang sikit nak follow sebab kadang kadang kalau kita tekan button follow yang ala tumblr tu kan tak masuk dekat list of your followers. nanti marah pula kita tak follow tapi siapa suruh letak button follow ala tumblr tu. hehe

ok ini sahaja yang nina ingin share kan. sorry ye kalau siapa terasa. ni pendapat nina je. terpulang lah pada korang tau ^^ dulu blog nina pun tak sebaik sekarang tapi nina pun banyak terima kritikan membina. so kita kena belajar lah ye jadi yang ok cukuplah kalau bukan terbaik kan :)

SIMPLE GIVEAWAY- PINK ORANGE SHOPPE

tengah hari nina nak join GA ni. di tag oleh syasya. thanks yaw ! :)
*klik banner untuk join*
tag kamu :

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 :)