Tutorial Blog






Open saying


Hello there :) I'm dirah :) Welcome to my blog. Don't forget to leave your footprint :)

1 . 2 . 3 .



Chatbox







Ask fm

You can request here
Please check that you've log in into your account
No ask fm account ? Right your name and URL blog


Credit





Design by Dirah .
Helped by Tiqah , Wana , Qistina , Afiqah Colour codes.
Used by Me
List tuto and free hover
Thursday, 7 November 2013 | 07:25 | 4000 comments






Bismillah.Assalamualaikum.Dirah kembali.Tadi dirah bgi freebies doodle handmade punye kan ? Sekang nk ajo korang cara buat tuto and freebies list hover cam dirah..K,sebelum buat mesti paham dulu,dah paham?Cer hover benda kat bawah nie :



 The Blog
Main House

 Dah faham?Nak try?Yg nie sesuai untuk blogskin aja ye ;)Maaf  kepada pemilik tuto ini.Dirah x ingat sape punye tuto.Nie dirah type ndiri.Maaf sangat.Tak berniat nk buang kredit.Thx pade siape yg bgi tuto nie :)
1.Blogger-->Template-->Search perkataan </style> menggunakan f3 or ctrl + f serentak !
2.Dah? Letak kode nie kat bawah kod </style> :

<style>
.list {
background:url( URL ICON );
background-repeat:no-repeat;
background-size:10px;
padding-left:25px;
color:#999;
display:block;}
@font-face{
font-family:'Short Stack';
}
.list:hover {
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
text-shadow: -6px 0 000, 0 6px 000,
6px 0 000, 0 -6px 000;
background:url(URL ICON);
background-repeat:no-repeat;
background-size:15px;
}
</style>
<a class="list" href="Link">Tajuk</a><br /></div>
<a class="list" href="Link">Tajuk</a><br /></div> 
Kuning = Bentuk icon
Biru = Font
Merah = Link
Oren = Tajuk

Labels: , ,

Cara buat footer
Tuesday, 5 November 2013 | 01:01 | 4000 comments





Annyeong.Welcome.Haha.New skin hah?Yes.Pakai skin ndiri.Cam cantik jer cam comel jer. K nie adelah tuto about cara buat footer.Direquest oleh Miraa . 



Saye buat nie just for Template Designer/Blogskin.K,ikut step ya,sayang.Maaf kpd pmilik tuto.Dirah lpe spe punye tuto.Tapi nie dirah type gune jari jemari dirah.Tak search kat nternet pon.Maaf kalo korg rse nie korang pnye tuto.

1.Blogger -->Sign in --> Template 
2.Tekan f3 of ctrl + f serentak! Search kod </body>
3.Dapat ? Copy kod bawah </body>

<center><img src="URL IMAGE FOOTER"/></center>
Merah : Url Image Footer korang.

Kalo tak tau nak dapat footer tuh kat mane,blh request,sayang 



Labels: ,

Blockquote *4
Saturday, 2 November 2013 | 20:50 | 4000 comments





Annyeonghaseyo.Hai rakan-rakan dan pengreaders.Asal dirah gembira sangat ini ? Peliknya.Hehe :3 nnye dirah ponw x tau.Tetibe jer mcm gmbira nak buat tuto.Sebab cuti 4 days ke?Sebab dah lme x update tuto ke ? Tak kisah lah.Hah.Ari nie dirah nk share cara buat blockquote yg cntik sgt.Credit : KawaiiLady.Dirah tukar sikit die punye code blockquote ;)Thx kepada die :)

| LIVE PREVIEW |

Cute tak ? Okey ikut step yg dirah bgi nie :

1.   Ctrl + f serentak atau f3 dan cari code
      .post blockquote {   atau  blockquote { atau blockquote{ atau apa-apa yang berkaitan dengan blockquote
2.   Dah jumpa?Delete seme kod yang blockquote korang yang lama.Gantikan yang baru
3.Copy kod dibawah.Copy kod ini dibawah perkataan blockquote {:

margin: 1em 20px;
padding:10px;
box-shadow:inset 2px 2px 0px #FFEBCF,inset -2px -2px 0px #FFE3CF;
background-image:url(http://i.imgur.com/2EShx.png);
border: 2px solid #EEEEEE;
color: #000000;
font:12px century gothic;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
blockquote:hover {
background-image:url(http://i.imgur.com/tDtge.png);
box-shadow:inset 500px 200px 0px transparent,inset -500px -200px 0px transparent;
}

Labels: , ,

Cara register cbox
| 00:37 | 4000 comments





Annyeong.Dirah disini nak tunjuk cara nak register cbox.Pergi ke website >>http://cbox.ws/<< .

1.Tekan sign up.Macam nie :

2.Sudah ? Isi borang.



3.Dah?Dah tekan "create my cbox" ? .Bagus.Nanti automatic nama kita akan dipamerkan di login name.Hanya perlu lengakapkan dengan menulis password.:


4.Mesti dapat teka pass dirah :) . Lepas itu boleh lah korang godeh-godeh cbox tuh.Nak letak smileys kat cbox.Tak tau cam ne ? Tekan >>SINI<<







Labels: , , ,

Navi *10
Friday, 18 October 2013 | 07:04 | 4000 comments





Annyeonghaseyo.Dirah sini.Dah lame ke tak buat tuto?Dah 120 posts yang dah dirah buat ! Belum campur dalam Offical Blog lagi!Kali nie nak bagi tuto ttg navi no.10 . HARAM POST.MINE.OWN MADE.CREDIT KALAU NAK RE-POST.JANGAN JADI BARBIE !


>>| LIVE PREVIEW HERE |<<
Template Designer : Paste dekat Html/Javascript.
Blogskins :  Paste dekat bawah </style> 

<style>
a.navoo, a.navoo2, a.navoo3, a.navoo4{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;background: #fff;
color:#fff;font-family:arial;
text-transform:uppercase;font-size:1px;
width:20px;height:15px;
border:5px solid #FFD685;padding:2px;
border-radius:1000px;}

a.navoo:hover, a.navoo2:hover, a.navoo3:hover, a.navoo4:hover{
color: #000;font-size:5px;
width:130px;height:15px;

a.navoo{border:5px solid #8533FF;}
a.navoo2{border:5px solid #FFAD33;}
a.navoo3{border:5px solid #85AD33;}
a.navoo4{border:5px solid #1975FF;}
a.navoo:hover{background: #8533FF;}
a.navoo2:hover{background: #FFAD33;}
a.navoo3:hover{background: #85AD33;}
a.navoo4:hover{background: #1975FF;}

</style><div style="left: 40px; position: fixed; top: 150px;">
<a class="navoo" href="http://www.blogger.com/LINK"><br>Tutorial</a>
<a class="navoo2" href="http://www.blogger.com/LINK"><br>Freebies</a>
<a class="navoo3" href="http://www.blogger.com/LINK"><br>Entry</a>
<a class="navoo4" href="http://www.blogger.com/LINK"><Br>Linkies</a></div>



Labels: , , , ,

Navi *9
Friday, 11 October 2013 | 07:53 | 4000 comments






Assalamualaikum.Baru siap buat bgskin.Dirah cepat-cepat buat tuto lak.K,yg nie cantik juga.Dirah cadangkan korang letak kat head atau kat atas blog tuh.Cantik sikit.Tapi kalo degil sangat nak letak kat sidebar,tak ape lah.Nanye tak cantik sebab yg nie ade shadow.Nanti kalo ltk kat sidebar mesti terlindung shadow nyer.Tak cantik lah.Dah lah malas nak cakap bebanyak.Credit to : Kak Sya


Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript

Blogskin / Classic template :
1. Paste code ni ke bawah code <head> atau kalau nak letak kat sidebar ccari tempat yang sesuai.

Untuk yang guna kat head

.navy{
display: inline-block;
border-right:15px solid pink;
width:80px;
background:#eee;
padding:3px;
font-size:10px;
text-transform:uppercase;
margin:3px;
text-align:Center;
color:#888;
box-shadow: 0px 2px 5px #ddd;
text-decoration:none;
}
.navy:hover{
border-left:15px solid  pink;
border-right:0px solid  pink;
box-shadow: 0px 70px 5px #eee;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA">Home</a></div>
<a class="navy" href="URL/LINK ANDA">Affies</a></div>
<a class="navy" href="URL/LINK ANDA">Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA">Extra</a></div>
</center>

Untuk yang guna kat sidebar :

</style>
.navy{ display: inline-block;
border-right:15px solid pink;
width:80px;
background:#eee;
padding:3px;
font-size:10px;
text-transform:uppercase;
margin:3px;
text-align:Center;
color:#888;
box-shadow: 0px 2px 5px #ddd;
text-decoration:none;
}
.navy:hover{
border-left:15px solid  pink;
border-right:0px solid  pink;
box-shadow: 0px 70px 5px #eee;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA">Home</a></div>
<a class="navy" href="URL/LINK ANDA">Affies</a></div>
<a class="navy" href="URL/LINK ANDA">Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA">Extra</a></div>
</center>

Labels: , , ,

Navi *8
Wednesday, 9 October 2013 | 06:15 | 4000 comments





Annyeonghaseyo!Dirah sini!Tuto kali nie adalah tuto ttg navi *8 die bulat dan rotate 540 darjah.Credit : Kak Sya

Live preview

Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript

Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.
<style>
.navy{
display: inline-block;
border-radius:900px;
border:5px double #F5A9E1;
width:40px;
height:40px;
background:#F8E0F7;
padding:5px;
font-family:verdana;
font-size:10px;
text-decoration:none;
margin:3px;
text-align:Center;
}
.navy:hover{
background:#F781D8;
-moz-transition:1000ms;
-webkit-transition:1000ms;
border:5px dashed #fff;
-webkit-transform: scale( 1.0) rotate( 540deg);
-moz-transform: scale( 1.0) rotate( 540deg);
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA"><br>Home</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Affies</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Extra</a></div>
</center>
</div>


Labels: , , ,

Navi *7
| 04:09 | 4000 comments





Annyeonghaseyo!Dirah here!Tuto kedua pade ari ini.Navi no-7 ..credit :Kak Sya .

| LIVE PREVIEW |

Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript

Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.

<style>
.navy{
display: inline-block;
border-radius:900px;
border:3px dotted #fff;
width:40px;
height:40px;
background:pink;
padding:5px;
font-family:verdana;
font-size:10px;
margin:3px;
text-align:Center;
text-decoration:none;
}
.navy:hover{
-moz-transition:1000ms;
-webkit-transition:1000ms;
border:5px dashed #ddd;
border-color:#fff;
}
</style>
<center>
<a class="navy" href="URL/LINK ANDA"><br>Home</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Affies</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Stuffs</a></div>
<a class="navy" href="URL/LINK ANDA"><br>Extra</a></div>
</center>
</div>

Labels: , , ,

Navi *6
| 02:55 | 4000 comments





Annyeonghaseyo!Dirah sini nak ajar korang untuk tuto hari nie ! K,kalo nak tau camne tuto nie jer live preview kat bawah jap agi.Credit :Kak Sya.


Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript

Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.

<style>
.pcs{
border:1px solid #eee;
background:url(http://www.sadmuffin.net/cherrybam/graphics/graphics-girly/girly510.gif);
display: inline-block;
width: 60px;
padding:11px;
margin:2px;
color: #000;
font-size: 10px;
text-align: center;
font-family: trebuchet ms;
letter-spacing: 2px;
border-radius:6000px;
text-transform: uppercase;
text-decoration:none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.pcs:hover{
color:#fff;
text-shadow: 1px 1px 5px #FF0000;
width:120px;
background:url(http://www.sadmuffin.net/cherrybam/graphics/graphics-girly/girly510.gif");
}
</style>
<br />
<center>
<a class="pcs" href="URL/LINK ANDA">Home</a>
<a class="pcs" href="URL/LINK ANDA">About</a>
<a class="pcs" href="URL/LINK ANDA">Affies</a>
</center>



Labels: , , ,

Navi *5
Tuesday, 8 October 2013 | 07:58 | 4000 comments





Annyeonghaseyo ! Hoohhhhh (menguap) .. nak tdo dah nie...kali nie nak bgi tuto ttg navi no-5.Sile tkn live preview.Credit : Kak Sya

LIVE PREVIEW

Simple template :
1. Buka Layout > Add a gadget
2. Paste dekat HTML/JavaScript

Blogskin / Classic template :
1. Paste code ni ke bawah code </style> atau di sidebar korang.

<style>
.naving{
border:1px solid #CEE3F6;
background:#81BEF7;
display: inline-block;
width: 50px;
padding:11px;
margin:2px;
color: #000;
font-size: 10px;
text-align: center;
font-family: trebuchet ms;
letter-spacing: 2px;
border-radius:6000px;
text-transform: uppercase;
text-decoration:none;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.naving:hover{
box-shadow: inset 1px 21px 1px 2px #FFF;
color:#000;
background:#CEE3F6;
}
</style>
<br />
<center>
<a class="naving" href="URL/LINK ANDA">Home</a>
<a class="naving" href="URL/LINK ANDA">About</a>
<a class="naving" href="URL/LINK ANDA">Affies</a>
</center>
CREDIT : Kak Sya 

Labels: , , ,

Cara dapatkan URL tuto/page
| 04:22 | 4000 comments





Hai ! annyeonghaseyo ! Kali nie dirah nk bgi tuto ttg cara untuk dapatkan URL tuto/page.

1)Post dulu 
2)Publish


3)Nanti dia pergi kat all posts kan ?
4)Tekan VIEW

5)Copy link kat ats tuh.


6) Done!








Labels:

Navigation *4
Monday, 7 October 2013 | 03:12 | 4000 comments





Hari nie dirah x gi sek game jdi dirah nk bgi tuto navigation no.4 ! Yg nie floating to left.Tak paham ? Tgk gmbo , kalo x phm agi live preview jew.Oh ye,credit : kak fatin


| LIVE PREVIEW |





  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>


    • <style>.tabs {margin-left:-20px;list-style: none; } #buttons {margin-top:25px;margin-left:22px;} .button {float:left;margin-right:2px;height:92px;width:51px;} #button1 {-moz-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;background-image:url(http://i.imgur.com/RvK6d.png);} #button2 {background-image:url(http://i.imgur.com/yBLUW.png);} #button3 {background-image:url(http://i.imgur.com/QjvPJ.png);} #button4 {-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;background-image:url(http://i.imgur.com/cbVNR.png);}.nav {width:50px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:8px;font-family:tinytots;letter-spacing:1px;text-align:center;opacity:0;overflow:hidden;color:#fffdfd;background:#7A92DC;4-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;} .button:hover .nav {opacity:0.8;margin-top:60px;} </style> <ul class="tabs"> <li><a href="LINK HERE"><div class="button" id="button1"> <div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button2"><div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button3"><div class="nav">TITLE</div></div></a></li><li><a href="LINK HERE"><div class="button" id="button4"><div class="nav">TITLE</div></div></a></li></ul></div>  
    • Paste kat sidiber korang k.

    Labels: , , ,

    Nav*3
    Sunday, 6 October 2013 | 05:52 | 4000 comments





    Tutorial yang kali ni dirah dah tunjuk contoh gambar bawah ni, harap korang pahamlah >< .Kalau tak sila Live Preview !Kredit : Kak Fatin



    • Template designer boleh paste di  HTML/GADGET 
    • Blogskin ikut cara bawah ni
    1. Cari code </style>
    2. Copy code bawah ni
    a.navi {
    display:inline-block;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    padding:2px;
    width:210px;
    text-decoration:none;
    font-family:calibri;
    font-size:13px;
    height:20px;
    text-transform:uppercase;
    color: #444;
    background: #FED4EB;
    text-align:center;
    border: 1px #ffffff solid;
    }
    a.navi:hover {
    color: #fff;
    background:url(URL IMAGE);
    background-position:50% 80%;
    background-size:400px;
    }
     3. Paste di atas code </style>
    4. Next, copy code bawah ni
    <a class="navi" href="LINK HERE">TITLE</a>
    <a class="navi" href="LINK HERE">TITLE</a>
    5. Paste kat sideber korang .

    puple : put image 
    hijau : color background
    merah : Link Page
    Oren : Tittle Navigation


    Labels: , , ,

    Navigate *2
    | 04:39 | 4000 comments





    Hi ! Kali nie dirah nk bgi tuto Navigate *2 .Maghrib-maghrib dirah buat tuto --' rjin sgt nk update nie : 7.23 P.M..Sorry,tadi dirah pergi tlg ibu jap..skrang dah pukul :7.32 P.M.Navi yg nie..die mcm biasa jugak cume bila kite hover jer tlisan akn membesar.Credit : Kak Fatin

    >> LIVE PREVIEW <<

    Blogskin/classic template :

    1. Dashboard > Template
    2. Tekan Ctrl + f serentak dan cari code </style>
    3. Copy code di bawah ni

    a.tablo{
    margin-bottom:10px;
    background:#fff;
    width:45px;
    text-decoration:none;
    border:1px dotted #fff5f5;
    border-radius:33px;
    color:#555;
    display:inline-block;
    text-align:center;
    }
    4. Paste di atas code </style>

    5. Then copy code ni pula

    <center><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >NAVI1</a><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >NAVI2</a><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >NAVI3</a></center><br><div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;border-radius:3px;background:#fff; width:200px;height:100px;<br><center>Navigate for home/around</center></div><div id="1" style="display: none;">Put what? Navigate for Navi 1</div><div id="2" style="display: none;">Put what? Navigate for Navi 2</div><div id="3" style="display: none;">Put what? Navigate for Navi 3</div></div></div></div></div>
    6. Paste kat bahagian yg korang suka. elok di sideber je.
    7. Preview & save.

    Template designer :
    1. Dashboard > Layout > Add Gadget > HTML/JavaScript
    2. Copy code di bawah ni

    <style>
    a.tablo{
    margin-bottom:10px;
    background:#fff;
    width:45px;
    text-decoration:none;
    border:1px dotted #fff5f5;
    border-radius:33px;
    color:#555;
    display:inline-block;
    text-align:center;
    }
    </style>
    <center>
    <a class="tablo" onclick="document.getElementById('wnsb').
    innerHTML=document.getElementById('1').innerHTML" >NAVI1</a>
    <a class="tablo" onclick="document.getElementById('wnsb').
    innerHTML=document.getElementById('2').innerHTML" >NAVI2</a>
    <a class="tablo" onclick="document.getElementById('wnsb').
    innerHTML=document.getElementById('3').innerHTML" >NAVI3</a>
    </center>
    <br>
    <div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;
    border-radius:3px;background:#fff; width:200px;height:100px;
    <br>
    <center>
    Navigate for home/around
    </center>
    </div>
    <div id="1" style="display: none;">
    Put what? Navigate for Navi 1
    </div>
    <div id="2" style="display: none;">
    Put what? Navigate for Navi 2
    </div>
    <div id="3" style="display: none;">
    Put what? Navigate for Navi 3
    </div>
    </div></div></div></div>
    3. Paste dalam HTML/JavaScript
    4. Save


    oren : Tajuk navigate
    merah : letak ape yg korg nk letak 

    Labels: , , , ,

    Blockquote *3
    Saturday, 5 October 2013 | 23:51 | 4000 comments





    Kali nie nk bagi tuto blockquote yg ke 3.Kredit : Kak Fatin.Contoh :

    Live Preview

    BLOGSKIN
     Dashboard > Template > Edit HTML
     Tekan Ctrl + f serentak dan cari code blockquote { 
     Tukar code tu kepada code dekat bawah ni
    blockquote { 
    background:#FFF2F5;
    color: #ffffff;
    border-radius:5px;
    border:1px solid #FFDBE2;
    border-right:15px solid #FFDBE2;
    color:#000000;
    padding:4px;
    -webkit-transition: 2s;
    }
    blockquote:hover {
    background:#E3F7FF;
    color: #000000;
    border:1px solid #D0F5F7;
    border-right:1px solid #D0F5F7;
    border-left:15px solid #D0F5F7;
    -webkit-transition: 2s;
    }

     Paste kat bahagian blockquote { tadi
     Save

    DESIGN

     Dashboard > Designer > Edit HTML
     Tekan Ctrl + f serentak dan cari code .post blockquote {
     Tukar code tu kepada code dekat bawah ni
    .post blockquote {
    background:#FFF2F5;
    color: #ffffff;
    border-radius:5px;
    border:1px solid #FFDBE2;
    border-right:15px solid #FFDBE2;
    color:#000000;
    padding:4px;
    -webkit-transition: 2s;
    }
    .post blockquote:hover {
    background:#E3F7FF;
    color: #000000;
    border:1px solid #D0F5F7;
    border-right:1px solid #D0F5F7;
    border-left:15px solid #D0F5F7;
    -webkit-transition: 2s;
    }
     Paste kat bahagian blockquote { tadi
    Save


    Credit :Kak Fatin 

    Labels: ,