Tutorial Sidebar

Ada sorang kawan blogger tanya macam mana nak buat sidebar macam Za. So, Za share la tutorial. Sorry kalau tak faham yer.. tak mahir sangat nak buat tuto ni. 

Ok la, Za sebenarnya buat sidebar yang di sebelah ni pun berdasarkan tutorial blogger lain.
Credit to: Nabila Medan. Klik SINI untuk tutorial asal.

Daripada kod asal diatas, untuk hasilkan sidebar macam Za, beberapa perubahan dibuat.

Warna border Za kekalkan. Kalau korang nak ubah kod warna, cari di SINI.

Kemudian, untuk jadikan background sidebar transparent, just ubah dibahagian background.

background: #kod warna; kepada background: transparent;

1.Dashboard > Design > Edit HTML > Tick Expand Widget

2.Click Ctrl + F , Search :

]]></b:skin>

3.Copy code bawah ni dan paste di atas code yang korang cari :

.sidebar .widget {
background: transparent;
width: 200px;
border-top: 3px solid #F5A9BC;
border-bottom: 3px solid #A9BCF5;
border-left: 3px solid #A9BCF5;
border-right: 3px solid #F5A9BC;
  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 20px;
 }

Tukarkan:

Merah : Code Colour

Ungu : Lengkungan border

4. Preview dan Save kalau jadi.

HEADER SIDEBAR

Untuk header, follow tutorial dibawah

1. Cari kod  h2 { 

2. Copy kod nie: 

background:url(http://content.mycutegraphics.com/backgrounds/plaid/plaid22.jpg);

background-color:#F5A9BC;

border-radius: 20px 20px 5px 5px;

border-top: 3px solid #F5A9BC ;

border-left: 3px solid  #F5A9BC ;

border-right: 3px solid  #F5A9BC ; 

3. Paste kod tadi di BAWAH kod yang korang cari tadi.

4. Ubah yang warna BIRU dengan url background yang korang suka dan kalau korang tak nak background bergambar, buang bahagian tersebut, just guna background-color.

5. Preview dan Save kalau jadi.

PASTIKAN:

• Header border radius dan border saiz SAMA dengan sidebar.

• Kod warna header (warna MERAH) SAMA dengan sidebar Border-top.                                                                                                                                                

                                                                                                                  

Tutorial Blog: Post Title Shadow Effect

Salam..Za tak la pandai sangat design blog tapi pernah la ambil subjek Basic Web Design dulu. So, nak share 1 tutorial ni. Kalau korang nak buat title shadow effect (bayang2 pada tajuk post/entry) macam dalam blog Za nie, boleh follow step2 kat bawah.

Step 1
Log in --> Dashboard --> Design@Template --> Edit Html --> tekan "Expand Widget Template".

Step 2
Cari kod (Ctrl+F)
h3.post-title{
atau
h4{

Step 3
Copy kod ni (Ctrl+C) 
text-shadow: 5px 5px 5px #FF0000; dan paste dibawah kod tadi. (Ctrl+V)

Step 4
Tukar yang warna merah tu ikot kod warna shadow yang korang suka.
Boleh search kat sini. Kod Warna

Step 5
Preview then kalau berhasil, terus Save.
Selamat Mencuba!!