Tuto : Buat Banner Blog Guna PhotoscapeTuto : Sidebar Title & Post Title Hover MenyegetTuto : Ganti Simbol ‘B’ Kepada Icon Comel (beserta freebies)Tuto : Cara Guna BlogskinAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan DatangAkan Datang

Tutorial: Sidebar Title & Post Title Hover Menyenget

Hi ! Assalamualaikum ... 

Hari ni tisya nak kongsi ilmu . Okay , korang tahu tak hover menyenget tu apa benda ? Hover menyenget tu maksudnya .. Bila cursor menyentuh post title / sidebar title terus jadi senget . Hehehe . Cuba halakan cursor dekat tekan tarikh tu ! Jadi senget kan ? Mai nak tunjuk cara-cara nak bagi post title & sidebar title tu senget okies ! ;)

Buat pertama kalinya ... Tisya buat tutorial menggunakan cara tisya sendiri maksudnya tisya try godek-godek sendiri la . Ok jom kita belajar sama-sama . Sebelum tu , tisya nak beri amaran . TUTORIAL NI HANYA UNTUK SIMPLE TEMPLATE SAHAJA . Tapi kalau korang memang pandai bab-bab coding tak pa la . Lagi satu , tisya nak mintak tolong korang delete code hover post title & sidebar title yang korang pernah buat sebelum ni .

1 . Pergi ke Dashboard > Template > Edit HTML > Proceed .

2 . Tekan F3 dan search code ni :

     h2 {

Selalunya kalau korang guna simple template code ni mesti ada punya .. Tapi kalau tak da jugak cuba        cari code ni :

     /* Headings

Lepas tu paste code h2 { tadi selepas garisan (----------------------------------------------- */) yang ada bawah code headings tu .

3 . Next , korang copy code dibawah ni dan paste BAWAH code h2 { .

     padding:3px;
     margin:1.5em 0 .75em; font-size: 14px;
     background:url(URL BACKGROUND)
     border-top: 2px dashed #D0FAFF;
     border-bottom: 2px dashed #D0FAFF;
     border-left: 5px solid #07A5FF;
     border-right: 1px solid #07A5FF;
     -moz-border-radius: 25px 10px / 10px 25px;                  
     border-radius: 25px 10px / 10px 25px;
     text-align:center;
     }
     h2:hover {
    -moz-border-radius: 25px 10px / 10px 25px;                  
    border-radius: 25px 10px / 10px 25px;                          
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    }

PERLU UBAH 

Code : Gantikan dengan URL BACKGROUND korang . 

Code : Ubah ikut citarasa sendiri

Code : Suka hati koranglah nak letak dashed/dotted/solid

Code : Gantikan dengan code warna yang sesuai . Boleh cari KAT SINI

Code : Kalau nak tukar bentuk border gantikan dengan CODE DI SINI

Hasilnya akan jadi macam ni susunan dia :

(klik untuk tengok dengan lebih jelas)

4 . Preview , then SAVE ! Kalau tak jadi bagitahu tisya . Kot kot boleh tolong :)

Kalau nak copy tutorial ni habaq & credit tisya ok ? Semoga Berjaya !

P/s : UPSR kakak2 dpt berapa?

Label: Tutorials

Written by me at 10:18 PG ♥ 2 cakap banyak.

Exchange Link

we can be blogger friends, right? So, let's exchange link

P/s : Tell me at my cbox if you want to exchange link with me. Nad DeaFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriendsFriends