The Red Mascara: February 2012

Tutorial Membuat Header Hover di Blogskin

Hey hey there!! assalamualaikum readers...ok harini Diya nak share dengan korang semua cara membuat header hover.maksud header hover yang Diya nak buat ini ialah bila cursor sentuh,dia akan berpusing dan hilang..macam best kan? jom try !

p/s : Diya tak sure samada code untuk semua template sama tapi hopefully korang berjaya

1.Pergi >> Template

2.Serentak tekan ctrl + F dan search code .header atau a:hover {

3.Ok then korang ~~kopi~~ copy code bawah ni and pastekan dekat bawah code .header or a:hover {

.header:hover {
padding-left:160px;
-webkit-transition: 2s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
opacity:.01;
}

mcm ni

Ok preview dan save ..

err jadi tak?

Tutorial Gambar Timbul Berserta Border di Blogskin

Hey hye there!! hai semua!!!! ok lah harini Diya nak ajar korang cara nak buat picture effect yang sangat best , ok korang try tengok gambar bawah ni

best kan?

haaa bila kita halakan cursor dekat gambar tu dia akan nampak timbul.

1.Pergi >> Template

2.Serentak tekan ctrl + f dan cari kod img:hover {

3.Ok kalau korang da jumpa kod img:hover { tu, kalau korang akan nampak simbol }

kan dekat bawah dia.

4.Now korang copy kod bawah ni dan paste di bawah simbol } ( macam step 3)

/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}

5.Preview and save !

Tutorial Membuat Status Box Ver.2 di Blogskin

Hey hey there!! kalau korang nak tahu post ni adalah sambungan daripada post Diya sebelum ni.Click sini kalau nak baca.Ok apa yang lain dengan status box sebelum ni ialah status box kali ni tak bergerak.Dia static tapi cute^^ macam ni


amacam?? nak buad

1.Pergi sini dulu nak sebab nak decide dekat mana korang nak letak status box korang

2.Ok then korang copy code bawah ni

<fieldset><legend><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU4ghYJs3ISWyEwrARmHsdwBG36KCjF6qFk-PU-chAXY4o_nFxtwqBXm61SHKXGaMKD-9nWjnW-J5J_N8iXzhfKWp0flytlRLpeJoScAiTHWRos_foL582yH586oc19TdqhNljvTb2vmU/s1600/Lyssasecret+1.png"/></legend><center>Diya In The House</center><center>14 February 2012</center></fieldset>

Merah , URL Image 'My Status' korang..
Biru ,Gantikan dengan status korang.

.psst....kalau korang nak image bawah ni ambik je la ok...tak cantik mane pun,tapi klau korang nak just take it

http://i777.photobucket.com/albums/yy57/bunnymeloney/statusSHirtt.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/statusRainboW.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/statusPINK.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/statusKUNING.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/statusFROGIE.png

-kalau nak ambik pape,sila komen dulu-

Thanks : Sis Lyssa

Tutorial Membuat Status Box Ver.1 di Blogskin

Hey hey there!! wahh lamanya tak pegang keyboard buat tuto..sori sangat² to all yang ada tanya soalan tapi Diya tak sempat reply..sori sangat² k.
Ok tuto Diya harini adalah cara nak buat status box di blogskin.Status korang akan gerak² dalam box ..aa amacam?? Jom start..ehh!! tunggu dulu,mula² korang pergi sini dulu untuk menentukan kat mane korang nak letak status box korang tu

1.Pergi >> Template

2.Then korang ikut je tuto Diya yang dekat sini

3.Ok da selesai korang copy code bawah ni and pastekan dekat mana-mana tempat di sidebar korang

<div style=" position:absolute; top:0px; left:10px; width:200px;"><center style="text-align: right;">UP TO THE SKY</center><div style="Background-image:url(URL BACKGROUND); repeat; padding: 5px; border:1px solid #DCDCDC; filter:alpha(opacity=1.5); border-radius:5px;"><center><marquee>STATUS KORANG</marquee></center></div><div style=" position:absolute; top:50px; left:20px;"></div></div>

HIJAU : Nama kotak status korang

UNGU : nie url background update status korang

BIRU : yang nie colour for border , boleh ambil dekat SINI

MERAH : yang nie status korang

Untuk background kalau korang tak tahu nak ambik dekat mane,boleh ambik yang Diya kasi ni k

http://2.bp.blogspot.com/-zafRXX4ubXI/Tf1YaA9Ab4I/AAAAAAAAA90/oyMs-ZB-o74/s1600/vintagebackground+%25282%2529.png

http://3.bp.blogspot.com/-kBup9uy43Bs/Tf1YatBReaI/AAAAAAAAA94/xu3Sovi_MNI/s1600/vintagebackground+%25283%2529.png

http://3.bp.blogspot.com/-K6YvrA9Qdsk/Tf1YbFmRp3I/AAAAAAAAA98/DMZfs6c0qd8/s1600/vintagebackground+%25284%2529.png

http://1.bp.blogspot.com/-6vRluJIBF6U/Tf1YblWdFHI/AAAAAAAAA-A/nwqUN4vS5ok/s1600/vintagebackground+%25285%2529.png

http://3.bp.blogspot.com/-rdrnJmjMQTA/Tf1Zh2hlwTI/AAAAAAAAA-E/T9FSTLZaEcU/s1600/vintagebackground+%25281%2529.png

-kalau nak ambik pape,sila komen dulu k-

Tutorial Copy Code yang Disable Right Click

him whom i loved

Hey hey there!! Salam korang.disebabkan ramai orang yang complaint dekat Diya yang diorang tak boleh nak copy la paste la,so Diya malam ni nak ajar korang cara nak gunakan shorcut key kalau blog tu disable right click

COPY CODE
1.Korang tengok dekat keyboard korang,then korang akan ada macam pic bawah ni kan?ok korang tekan dekat situ dan jangan lepas.INGAT!! jangan lepas

jangan lepas!

2.Secondly,korang tengok pulak dekat keyboard korang dan akan nampak butang macam bawah ni kan? ok korang tekan dekat situ SEKALI sahaja

tekan sekali sahaja!

3.Dan siapp,,korang boleh la paste dekat mana mana yang korang nak ,ok?

Tutorial Menambah Gambar Sendiri pada Sidebar di Blogskin

Hey hey there !! Ok lah actually tuto ni direquest oleh ada la 2 3 orang yang komen dekat blog Diya..

Ok jom start

1.Mula mula pergi sini untuk menentukan dekat mana korang nak letak gambar korang dekat sidebar

2.Then korang copy plak code bawah ni

<center><img src="URL GAMBAR KORANG" width="195" height="auto"/></center>

3.Ok untuk tulisan merah tu,gantikan dengan URL gambar yang korang nak letak.Kalau tak tahu nak dpatkan macam mana,boleh usha usha sini

4.Untuk tulisan biru plak,korang tukar sendiri la saiz yang sesuai dengan sidebar korang.

5.Untuk gambar² comel,boleh dapatkan di sini

Ok settle..Kalau ada pape masalah tolong kasitau ok

Tutorial Automatic Membuka New Tab Blogskin

Hey hey there!! hoola freiends

ok harini Teacher Diya nak ajar korang macam mana nak bukak new tab tanpa perlu right click,kalau korang click ape-ape kat blog Diya,mesti akan jadi automatic new tab kan?

Jum start

1.Pergi>>Template

2.Then serentak tekan CTRL + F dan cari kod </html>

3.Ok then korang copy dan paste kod ni di bawah kod </html>

<script type="text/javascript" language="javascript">var arr = document.getElementsByTagName("a"); //get all links in the pagefor(var i = 0; i < arr.length; i++){if(arr[i].href.indexOf("Your URL") < 0 //not links that are 'inside' blog&& arr[i].href.indexOf("javascript:") < 0) //not javascript linksarr[i].target = "_blank";}</script>

Save dan siapp..

Tutorial menambahkan Widget Sendiri Pada Sidebar di Blogskin

Hey hey there!! hai semua..tutorial ni memang ramai sangat yang request kat Diya..memang susah nak buat tapi DIya try je.

1.Ok firstly korang tengok la dekat mane korang nak letak widget korang.Contohnya:

2.Then lepas korang da decide nak letak dekat mana widget tu , korang cari pulak tajuk sidebar yang dah ada di atas/bawah widget yang korang nak letak(rujuk step 1).Contohnya:

3.Lepas tu,korang pergi >> Template

Serentak tekan ctrl + F dan cari tajuk sidebar yang dah ada di bawah/atas widget yang korang nak letak.

Contohnya:

4.Ok then bila korang da buad step 3 tu,korang akan jumpa anak-anak codes yang macam ni kan?

5.Then kalau korang perhatikan anak-anak kod tu,dia akan ada kod </div>

6.Ok korang serentak tekan ctrl+ c dan copy code bawah ni

<div class="bar"><div class="main-title">Tajuk Sidebar KOrang</div><br><center>AYAT/GAMBAR/WIDGET KORANG DI SINI</center></div>

ermm,,jadi tak? Diya tahu memang pening sikit kan? tolong komen k