Tutorial : Navigation Tab #6

Sidebar 3 tab in 1 yang mana ekk ? Hmm , tekan sini , keluar ini , tekan situ ehh keluar ini... Tekan jerawat , awww sakit lah ! ! Dusss ! kan dah dapat :P , Susah untuk dikatakan . tengok preview ini
Preview :
Haa , nampak tak ? Ada siapa-siapa nak cuba pasang.. Meyh follow step by step tuto ini ! :D
1. Dashboard --> Template --Edit Html -->
2. Find this code : 
]]></b:skin> 
3. Copy this code and paste code above ]]></b:skin> 
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
}
ul.tabs li a {
font-weight: bold;
color: #000;
display: block;
font-size: 10px;
padding: 0 20px;
border: 2px solid #FFF; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ECE0F8;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #ECE0F8;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
overflow: hidden;
clear: both;
float: left; width: 98%;
background:#ffffff;
 background-attachment:fixed;
}
.tab_content {
padding: 2px;
height :260px;
}
4. Then , pergi cari kod
</head>
5. Copy and paste code ini above </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function() {
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content
//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content
var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});</script>
5. Preview , kalau tak ada error , save :D
6. Next , Go to --> Layout --> Add A Gadget --> Choose Edit Html/JavaScript
7. Copy and paste this code :
<ul class="tabs">
<li><a href="#tab1">Owner</a></li>
<li><a href="#tab2">Contact</a></li>
<li><a href="#tab3">Shout</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Tab 1 Content
</div>
<div id="tab2" class="tab_content">
Tab 2 Content
</div>
<div id="tab3" class="tab_content">
Tab 3 Content
</div>
</div>
 EDIT :
ABC : Tukar warna background tab sini 
ABC : Tajuk Tab
ABC : Coding / Stuff /isi-isi mengikut tajuk tab

8. Preview.. If Doesn't Error Save !
Hmm , macam mana ? Jadi ke tidak ? harap-harap menjadi ! :D


Tutorial : Jquery Accordion Tab Menu

Jom jimatkan ruang sidebar korunk dengan tab ini !!

1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :
<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 12px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 2px 6px;
cursor: pointer;
position: relative;
background-color:#FAAFBA;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Meet The Author</h5>
<div class="msg_body">
letak kod widget / ayat korang</center></center></div>
<h5 class="msg_head">Any Question ? Tanya kat sini :)</h5>
<div class="msg_body">
letak kod widget / ayat korang</div>
<h5 class="msg_head">Jum Tukar Banner !</h5>
<div class="msg_body">
letak kod widget / ayat korang</div>
</div>

 EDIT :
ABC : Your Stuff..
ABC : Background sebelum dan selepas hover..
ABC : Tajuk
3. Dah siap edit , Save..
4. Then , Preview.. harap menjadi... :)



Tutorial : Navigation Tab #3

Live Preview
1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :
<style>
navi {
font-family: arial; letter-spacing: 1px; font-size: 11px;
line-height: 13px; display: inline-block;
background: #F6CEE3; color: #fff; width: 110px; padding: 5px;
margin: 1px; text-align: center; text-transform: lowercase;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
navi:hover {
font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block;
background: #eee ;border: 3px solid #CEF6F5; color: #000; width: 110px;
-webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }
</style>
<br />
<center>
<a href="LINK"><navi>home</navi></a>
<a href="LINK"><navi>about</navi></a>
<a href="LINK"><navi>stuff</navi></a>
<a href="LINK"><navi>link</navi></a>
<a href="LINK"><navi>site</navi></a>
</center>
</div>
 EDIT :
ABC : Link Page kome..
ABC : Background sebelum dan selepas hover..
ABC : Tajuk
3. Dah siap edit , Save..
4. Then , Preview.. Haaa jadi ke tidak ? ? ? :)

Suka-suka

Assalamualaikum dan Salam Sejahtera semua.
Fuhhh ! ! Baru separuh hari duduk di court Futsal! Muka check yang hitam-hitam
manis nie , bertukar jadi ala-ala arang dah.. huarghh ! Apa boleh buat.. Muka
kena cahaya matahari siket dah bertambah kegelapan warnanya... Matahari !
Ciptaan Illahi semuanya indah , Alhamdulillah... heheee.. :)

Hari itu sebelum nak pergi practikel motor aku saja tanya dalam hati.. 
" Tak ada kaa game bola Jaring ? Rindunya nak main lagi..." 
Siyes badan dah 4 packed hewhew.. Lama sudah tidak berjogging ! -,-
terjawab juga soalku hari ini , saja main untuk suka-suka.. Pertandingan
ini sempena program " Sayangi Masjid kita " oleh Belia Bandar Mas..
Players : Iena , Nurrul , Kak Eylot , Nabila
Bola Jaring Skip hanya main separuh padang ajee yer , hanya 4 orang pemain ,
3 dalam court 1 lagi jadi spare.. Kami mewakili Seksyen 2... Siapa menang ? ?
Alhamdulillah , walaupun langsung tak bersenam or latihan , kami Seksyen 2
Johan dalam pertandingan ini... Perasaan time menang ini tak lah terseruja kalau
macam menang dalam pertandingan peringkat sekolah... Ye lah.. Main niat nak
saja-saja keluar kan peluh.. Hehe Terubat Rindu di hati nak main game ini..
Hadiah apa ? Hmm , RM150 bahagi 4 berapa dapat ekk ? :")
 
Haaa , aku nak cakap ini , Wanita yang disebelah aku inilah merupakan jurulatih 
yang mengajar aku teknik-teknik dalam bola jaring . since darjah 3 .. Teacher Fatimah.
Beliau lah orang yang melatih aku dari merangkak sampai berlari dalam bola jaring.

Even sekarang aku .. Err aku sudah berumur 17 tahun*form 5* dan sering sangat
dikatakan sebagai "orang tua" oleh suami teacher , Cik Din , aku sangat-sangatlah
 rapat dengan keluarga beliau.. ah macam Keluarga angkat aku pun hadoo..
Aku sayang mereka dan aku tak nak hubungan yang telah terjalin menjadi sepi
pergi bak angin lalu.. cewahh ayat ! haaaaha
Thank you sangat-sangat dekat Teacher Fatimah sebab ajar aku sampai aku jadi pandai sebegini walaupun belum sampai ke tahap superb ! aku akan improve skills itu.. Insya'Allah dan sekarang aku pula yang akan tolong pemain-pemain sekolah rendah lama aku untuk pertandingan bola jaring sekolah.. hehe... Rindunya nak sekolah.. :)



Edit Full : Blog Syafika





Nuffnang | CPUV Pertama !

Assalamualaikum dan Salam sejahtera semua ! !
Actually aku dah lama pasang iklan Nuffnang nie.. tapi disebabkan macam tak berganjak
00.00 aku mula merajuk dengan Nuffnang.. Jadi memang dah lama aku tak log in.. 
Baru hari ini Log in , tengok earning naik lah juga walaupun tak banyak... 
Perasaan sangat lah happy ! ! See ? ? Tarikh dapat CPUV tuh 5 March 2012 ...
Lama tak lama.. Apa-apa pun tak lambat nak ucap Terima Kasih dekat Nuffnang ! ! :)
Lagi bersemangat lepas nie untuk Nuffnang ! ! 



Tutorial : Clipping Mask / Background Word

Assalamualaikum dan salam sejahtera semua ! ! ^^
Hari ini nak share tutorial untuk buat clipping mask / Background pada perkataan
menggunakan gambar kesayangan korunk sendiri...  Still pening... Tengok gambar bawah :
Preview :
https://1.bp.blogspot.com/-c310PVoG9f0/WJnfpdxbgmI/AAAAAAAAHz8/N81ZFJDXBgUAosCo3vxvS9m5VRWY0F5_ACLcB/s1600/CMH.png


Macam mana ? nak cuba.. Jom follow this step.. Step by step ! Ok :) Now Open Photoshop ..
 1. File --> New -- > Setting Width , Height dan pastikan Transparent *rujuk gambar 
Kemudian klik OK ! 
2. Klik" Tool T " --> Pilih font yang bold --> tulis ayat korunk..

3. Klik File -- > Open

Nanti akan keluar pop out window macam di bawah , dekat sini pilihlah gambar korunk yang comel-comel untuk dijadikan background.. :")

 4. Kemudian , korunk jadikan macam dekat bawah nie.. " klik gambar kotak yang dekat tab gambar hujung kanan sebelah X " :

 5. Drag layer image background ke layer word yang korunk dah buat tadi..
 6. Jadi macam gambar dekat bawah.. Kemudian , pergi dekat layer background , Right click mouse dan klik perkataan Create clipping mask.

7. Taraaa ! Jadilah macam nie ! !  Korunk punya jadi tak ?

  8. Bila dah siap , save.. Cara nak save... Klik file --> Klik save for web & devices ! akan keluar pop up window macam nie :

 Korunk kena pilih save dalam PNG-24 taw ! !
 DONE !
Menjadi ke tidak ? Kalau menjadi bagitahu , tak menjadi pun bagitahu taw.. takut ada step-step yang aku tertinggal.. Maklumlah bila dah banyak sangat... Senoning sikit.. ^^ Happy Blogging..


Edit Full : Blog Adila

Blog Design telah ditukar 
Owner : Nur Adila

Jom TERKAMM ! ! :)



Baldi

Rindu , rindu ,rindu .. Itu jelah yang aku rasakan bila teringat telatah dan gelagat Danish.
Sekarang bukan main petah berkata , suka ikut cakap orang... tapi budak ini sangat
 bijak.. Kadang-kadang aku sendiri jeles dengan kebijaksanaannya.. huhu... 
Sayang sangat dekat kamu , Dansih ! ! Muaheehe.. 
Dulu waktu Danish dalam 6-9 bulan muat lagi duduk selamkan badan dalam kaki... tapi
masa holiday hari itu , aku masuk kan dalam baldi tak muat dah... Haha.. Membesar 
dengan cepat lah boyfie kita nie.. Eiisgghh , tak sangka.. dulu kecik ajee.. ^^
Sekarang banyak benar dia cakap... AHAHA ,rindunya ... sampai terpanggil kucing dengan
nama "DANISH" angau kau ? ? Huhu Parah memang kalau dah berjauhan....
Ini feed back Lovely Sister masa aku tanya Danish ada tanya pasal kitaorg tak ? ? :
haha , Lawak Danish ! ! ^^ kalau tanya balik dekat dia , dia akan jawab macam 
mana jawapan yang kita bagi dekat dia... hehhe >_<


Lesen

Bila Sekolah telah menamatkan zamannya.. Dah tak ada kelas , kelapangan masa sangat banyak di situlah kebosanan melanda. Jadi ambillah kelas lain pulak... HAHA... Kelas Memandu.Yup,memang ramai calon selepas SPM akan berduyun-duyun ke tempat memandu untuk memandu termasuklah aku :O . Aku ambil lesen D dan B2 di Prolifik Teknik Bandar Penawar .

Kenapa ambil lesen motor ? ? Act,aku fikir baik dan buruknya juga... Kalau emergency dan masa tuh tak ada kereta , boleh juga aku tunggang motor.. Kan jimat.. Ye dak ? ? ^^Mula masuk kelas KPP hari Isnin 10/12/12 rtuh... nasib seronok penceramah nya buat lawak sakit perut dibuatnya. Tak nak bagi aku ngantuk lettuw katanya... HAHA... Best sangat ! Lagi-lagi bila ada 3 orang classmate aku yang turut serta pada hari yang sama
Hari ini 13/12/12 Ujian Komputer ! Fuhhh , dugg daanngg dugg dang jantung masa jawab.*kawan aku semua dah pass dan semua 45 keatas..* Hati nie makin resah bila malam tadi tak baca langsung buku azimat jalan raya tuh... Muheheeee... Degil hang keras macam batu. Guest What ? Lulus Ke Tidak ? ? terperanjat benarrrr , sob.sob... try lah jawab..
Heerrr O.O , Malam tadi sakan Edit blog Adik aku sampai pukul 4 pagi... Tidurlah dekat atassofa esok pagi bangun kaki aku tak boleh dibengkokkan.. Berrr ! Nasib adik aku ada suruh diowang bengkokkan kaki aku... Perghhh ! Sakit nya tak terkata woooo..
Siapa boleh jawab nie ? Kira masih kuat ingatan dia ,
Saya seorang Pemandu PDL yang gagal mempamerkan lambang P pada kereta , berapa markah dimerit yang akan dikenakan kepada saya ? ? 

Edit Full : Blog Iena @ Adik

Owner : Azriena 
Address : http://nurrulhadzriena.blogspot.com/ 
Yeahh , Mula-mula just nak warna pink soft ajee adik aku yang sorang niee.. Lepas tuh dia dokk tengok aku edit blog dia.. malu lerr.. -.- Bagus juga , aku pun tengah tak ada idea jadi aku tanya langsung terus pada dia mana yang dia nak... Inilah hasilnya...
Aku Edit blog nie dengan peneman.. HAHA , Header ? Adik aku just letak syarat nak ada gambar dia dalam bunga macam sekarang nie... Itu ajee dia nak ? Haihhh tak kan tandus sangat kosong just dengan gambar ... So,dengan bangganya aku godeh dia punya file gambar dan jumpa gambar lain..Makanya aku buat header Animated huhu... Simple Kan ? ? ^^
Jom Singgah Blog Ienaaa :"D


Freebies : Cute Small Icon 4 | by BabyDoll.Girly



BabyDoll.Girly bertukar linkies , dan tak pasti mana link nya.. 
Jadi Nurrul share hasil karya Miss Jays di sini..


Others
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic013demoji_15415545decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic002demoji_12343593decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic009demoji_350312decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic010demoji_1374647decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic001demoji_11719347decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic008demoji_207024decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic005demoji_17695391decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic004demoji_14783711decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic008demoji_17174766decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic009demoji_17174765decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_17169318decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic019demoji_14776540decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic004demoji_14791299decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic011demoji_413728decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_12051686decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_8083087decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic012demoji_367147decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic012demoji_305172decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic019demoji_336393decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_416449decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_309624decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic011demoji_15454045decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic008demoji_13728279decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_14097270decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_355429decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_370674decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic001demoji_417795decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic008demoji_15251435decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic005demoji_15251434decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_16289445decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic019demoji_17714269decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic019demoji_15699249decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_15807271decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_7620938decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_895744decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic016demoji_14841866decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic000demoji_92422decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic004demoji_14147623decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic004demoji_13830791decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic003demoji_12716074decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic003demoji_431243decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic003demoji_353779decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic002demoji_11337510decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic002demoji_385427decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic002demoji_158478decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic006demoji_14952580decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic015demoji_14906306decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic015demoji_8685068decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic014demoji_10943454decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic014demoji_8336167decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic013demoji_15480984decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic012demoji_15496649decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic011demoji_15889022decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic011demoji_15430247decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic010demoji_442126decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic009demoji_14896021decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic008demoji_16050140decoojp.gif
 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic007demoji_14810207decoojp.gif

Credit : babydoll.girly
More Icon From Miss Jays :