Tutorial #4 : Simple Navigation Bar

Assalamualikum , hai guys . Okey tadi ada 2 org tanya macam mana nak buat Manu Tab mcm Miza nie kan ? Act Miza pun baru balajar dari kawan2 yang lain . Jadi di sebabkan Miza adalah sedikit pengetahuan jadi why not kita share kan ? Tak susah just kena bersabar , okey ;)

HOME | CHATING BOX itu yang Miza nak tunjuk macam mana nak buat hari ini . Okey geng :)

1 . Dashboard > Layout > Add A Gadget > HTML/JavaScript
2. Copy code bawah nie dan paste di HTML/JavaScript

<style>a.nav{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:5px;
display:inline-block;
text-align:center;
background: #eee;
color:#000;
width:90px;
padding:4px;
font: 13px Franklin Gothic Demi Cond;}

a.nav:hover{
color: #fff;
background:  #EBD6FF;
-moz-box-shadow: inset 0 0 5px 5px #EBD6FF;
-webkit-box-shadow: inset 0 0 30px 30px #EBD6FF;
box-shadow: inset 0 0 30px 30px #EBD6FF;}</style>

<div style="background: #CAC7D9; border-bottom: 1px dashed #fff; border-top: 1px dashed #fff;"/><center>
<a class="nav" href="URL/LINK">WORD</a>
<a class="nav" href="URL/LINK">PERKATAAN</a>
<a class="nav" href="URL/LINK">PERKATAAN</a>
<a class="nav" href="URL/LINK">PERKATAAN</a>
</center></div>

Tutorial #3 : Post Title with Background .

Assalamualikum , Hai . Umm hari nie Miza dapat satu pertanyaan dari Fitriah Ayn . Macam mana nak buat Post Title macam Miza ? Okey tak susah sangat nak buat just kena banyak bersabar . Okey , are you ready geng ?

Simple Template .

1. Dashbord > Design > Edit HTML
2. Cari code ini  

 h3.post-title, .comments h4 {

3. Than bila dah jumpa code atas nie , paste code yang ini di BAWAH code tadi .

 font-family:Courier;
background:url(URL BACKGROUND);
border-bottom: 3px solid #FF9C9C;
border-top: 2px solid #D8D8D8;
padding: 5px;
}

URL Blog korang boleh cari dekat Google or mana2 . 
Tulisan Merah dan Biru tu code warna utk line yang korang nak . 

4. Preview dulu and bila dah puas hati SAVE :) 

Senangkan ? Okey kalau ada apa2 masalah just ask don't shy :) Okey thank You . 

Salam sayang dari blogger ,

Miza Ahmad

Tutorial #2 Header Transparent ( PhotoScape + PhotoShop)

Assalamualikum kawan-kawan . Hari nie , Miza nak tunjuk cara buat Header yang transparent guna Photoscape , than photoshop . Ini cara asal macam mana Miza buat Header . So kalau nak tahu , setialah pada laptop anda dan baca :)

1 . Photoscape -> Editor -> Menu -> New Photo 

 #This one , korang kena letak berapa panjang korang nak untuk header korang .Tinggi &  Lebar ikut masing2 :)

#Pilih korang nak tulisan mana  . Edit ikut hatilah kan . Jangan memaksa sangat okey ;)

Next step is at PHOTOSHOP .

1 . Open Photoshop 
2. File -> New(atas sekali)

3 Pekara wajib tahu ! 
#1 . Width (Lebar header korang )
#2 . Height (Tinggi header korang)
#3 . Background Contents (Transparent , or White) . 

3 . Klik "OK" selepas berpuas hati :) 
4. Nanti akan keluar satu box ikut Background yang korang dah pilih . 
5. File -> Open As Smart Object 
6. Pilih header yang korang dah siapkan di PhotoScape tadi . 

(Tadaaaaa . Okey)

7.After korang tekan butang 'OK' . Than korang klik pada header korang tu (kawasan warna kuning header)Dan korang akan dapat view macam nie :

8. Dah siap tu . Korang 'Heret' that tetingkap yang tertulis "Non as Smart Object-1 ...." tu ke tepi macam nie ,

Okey dapat view ini ? So next step is :

Okey dapat heret tak ? -,- Hehe Keep try if you want succes :) Korang boleh letak header/ tulisan tu dkt atas ke bawah ke ikut suka hati koranglah nnak susun macam mana . Than kalau nak hias2 sikit pun boleh . Ikut hati masing2 okey ;)

Okey than :
9 . File -> Save For Web and Devices -> DONE ! Horry !!!! 

Dan hasilnya seperti ini 

So what do you think ? Kalau nak tahu apa-apa just comment or terus ke chat box je . InsyAllah , kalau Miza tahu Miza akan ajar dan tunjukkan yer kawan :) . Okey ini jelah tutorial yang tak seberapa tapi harap dapat membantu korang .  Selamat Mencuba :) 

Salam sayang dari Tuan Blog , 

Miza Ahmad  :)

Tutorial #1 : Make Header Simple Template Transparent .

See , gambar atas nie Header dy yang tertulis "The Best Of Me" tak transparent . Okey ini tutorial paling basiclah yang kita as a blogger kena tahu . Okey geng , lihat , dan ikut :)

1.Dashbord > Design > Edit HTML 2. Carikan kod /* Mobile 3. Dah jumpa? Pastekan kod ini atas kod " /* Mobile" tadi.    

.header-outer, .content-inner { background-color: transparent; }

.main-outer, .tabs-outer { background-color: $(content.background.color);}

Okey done ! Senang kan ? Senang gila . Trylah ya :) Nanti header blog korang akan transparent ;)

Salam satu Blogger , selamat Mencuba 

Miza Ahmad .