Hilang Navigation Bar - TUTORIAL 39

                               

Hai korang! Kali ni, Zira dengan Kak Lynda yang buat tutorial.. bukan Kak Lyssa oke?
Haa ni....

1. Log in > Dashboard > Design > Edit Html

2. Copy and paste code ini :

#navbar-iframe {display: none !important;} 

3. Contohnya seperti berikut :

-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 01 Dec 2010
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Sudah siap ? Save and lihat hasilnya :)

SELAMAT MENCUBA !

                                           

Menukar Home , Older + Newer Post kepada Icon Yang Comel - TUTORIAL 38

                                 

Nak tahu macam mana nak Tukarkan Home, Older + Newer Post kepada Icon Comel?

Oke ! Zira boleh teach korang sekarang jgk .! hehe~

1. Log in > Dashboard > Design > Edit Html

2. Kemudian tick pada Expand Widget Templates .

3. Then , tekan Ctrl + F and cari perkataan :

<data:newerPageTitle/>

4. Tukarkan kod diatas ni dengan kod ni :

  <img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png"/>

 * Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :) Itu Lyssa kasi contoh je ^^


5. Then , Tekan Ctrl + F lagi sekali dan cari perkataan :

<data:olderPageTitle/>

6. Gantikan kod di atas dengan :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png'/>

  * Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :) Itu Zira kasi contoh je ^^ 

7. Last sekali , untuk buttom home pulak , korang cari : 

expr:href='data:blog.homepageUrl'><data:homeMsg/>

8. Gantikan kod yang berwarna merah tu dengan kod di bawah :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png
'/>

  Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :)Itu Zira kasi contoh je ^^

9. If sudah siap , korang try preview dulu taw. kot2 lah tak jadi ke , susah pula kang .! HAHA!
  If dah check and menjadi , terus je SAVE :)

SELAMAT MENCUBA !!!

                                             

Ubah Warna Highlight - TUTORIAL 37

                      

Oke, skarang, Zira nak teach korang , cam ner nak ubah warna highlight.!

Macam kat bawah ni.. ( Ni contoh aje.. )

 

Oke , ikut step Zira oke? ^^

1. Log in > Dashboard > Design > Edit Html

2. Then , korang cari kod ini : (Nak cari tekan Ctrl+F)

a:link {

 3. Copy code kat bawah ni , and paste kan sebelum code yang anda cari tadi tu ok :)

::-moz-selection {
background:#000000;
color:#FFFFFF;
}

::selection {
background:#000000;
color:#FFFFFF;
}

* Ini kegunaan Mozilla Firefox dan Google Chrome saja !
* Yang warna merah di atas , korang boleh tukar kan dgn warna kesukaan korang ok?
   Nak cari warna , klik SINI !. :)

Sudah siap ? Save ok ?! Dan Lihat hasilnya :))

SELAMAT MENCUBA :)

                                               

Letak COPYRIGHT - TUTORIAL 36

Ehh, tahu ker , macam mana nak letak copyright tuh?Yg macam kat bawah ni ler :*

( Kak Lyssa punya tau! )

Haa , mudah saja ! Ikut step di bawah.. ^_^

1. Log in > Dashboard > Design > Edit Html
2. Cari kod ini .( Nak cari tekan Ctrl + F)

</body>   

    3. Then , paste kod kat bawah ni kat bahagian atas kod yang korang cari tadi ok?

 <script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>

<center>TULIS AYAT COPYRIGHT KORANG KAT SINI</center>

   4. Before tuh ,preview dulu , jadi or tak .?
   5. If dah jadi , SAVE terus ok :)

Selamat Mencuba :)

 

Button Show-Hide Spoiler - TUTORIAL 35

Tutorial ni , agak menarik jugak lah ! And agak unik !

Korang tryy lah oke?

But sebelum tuh ,Zira nak tnya korang !

Korang tahu ke, aper itu

Button Show-Hide Spoiler???

 

Cuba tengok contoh ni..

Bila klik CLICK SINI, akan jadi macam ni !

Oke.. Ikut step di bawak oke?

1. Log in > Dashboard > Add Gadget > Html/Java Script

2. Copy dan paste code di bawah pada JavaScript :

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Klik Sini" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Klik Sini'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Masukkan Code JavaScript/Gambar/Text Di sini

</div></div></div></div>

* Pada code warna MERAH , tukar kan dengan perkataan korunk !(fungsi sebelum spoiler di buka)

* Pada code warna HIJAU , tukar kan dengan perkataan korunk !(fungsi selepas spoiler di buka)

* Pada code berwarna BIRU korang letak code JavaScript,gambar atau text yang korang nak.

3. Save .! Lihat hasilnya :)

 

Background Berbeza Pada Sesebuah Entry - TUTORIAL 34

 

Haaa.. Sapa nak tau??? Jap.. Mari sini budak pakar nak tunjuk.. Ade orang tanye budak pakar ni..

 Ani- Macam mana nak buat backround yang len? Bukan putih ajee..

- Sabar la adik maniis.. Tengok di bawah..

 Background Berbeza Pada Sesebuah Entry

Background dalam post , kebiasaannya telah ditetapkan dalam setting blogger. Tapi , ada SATU cara yang boleh digunakan untuk menjadikan background yang berbeza untuk entri yang dikehendaki sahaja. 

Contohnye , Background yang Zira guna sekarang ni :) 

Color pink kan ? 
Comel tak? hehehe~
Tutorial ini , sangat senang la ! kalau korang paham konsep nye!
Let's see , Whats the steps !?:)

1. Log in > Dashboard > New Post Anda :)

2. Pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' BUKAN 'compose' 

   -> Ini untuk mengelakkan code warna dicopy sekali.:)

 <div style="background:url(Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.
</div>

*  Letakkan link gambar pada tulisan biru

* Jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat. 

* Taip apa sahaja entri anda seperti biasa dalam kawasan merah. 

   Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div>  
 *Sudah siap, publish n lihat hasilnya oke? :)

 Oke ! Itu saja ! Kalau ada apa2 kekeliruan ,Sila tanya Zira oke? :) Kat shoutbox ! 

 

 

Flash Blockquote - TUTORIAL 33

                                

Hii ! now pulak,Zira nak ajar, macam mana nk buat Flash Blockquote ?

Sebelum tuh , korang try buat yang ini dulu.. Baru buat Flash ok ? :)

KE SINI DULU!

Oke , ikot step Zira ok ?:)

1. Dashboard > Design > Edit Html > Tick Eexpand Widget Templates

2. Tekan CTRL+F and cari code ni :

.post blockquote{

3. Lepas dah jumpa , paste code ni dekat BAWAH ' kod yang korang cari tadi k?

background:url(URL background

); padding:5px;

Border:2px dashed #00000;

colour:#FFFFFF}

blockquote:hover {

background: url(URL background

) repeat right bottom ;

border:2px dashed #000000;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

}

*Yang Zira warnakan MERAH tuh , korang boleh cari code kat  SINI!

4. Siap . Save :)

=Selamat Mencuba=

(Dah jadi ,bgtau ok?)