Ain Natasya

Tutorial ; Bentuk-bentuk Border

Ni bentuk-bentuk border and korang boleh gune untuk blockquote, sidebar, post title and etc.

Example_A {

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

Example_B {

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

Example_C {

-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

Example_D {

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

Example_E {

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

Example_F {

-moz-border-radius: 35px;
border-radius: 35px;
}

Cara nak gune border
Contoh : Korang nak letak border untuk blockquote.

Ni coding blockquote yang asal

.post blockquote {
background:#ff3399;
padding: 5px;
Border: 3px solid #ffffff;
colour:#FFFFFF;

Contohnya korang nak bentuk border A, korang copy code Example A tu then paste bawah coding blockquote. Die akan jadi macam ni.

.post blockquote {
background:#ff3399;
padding: 5px;
Border: 3px solid #ffffff;
colour:#FFFFFF;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

Senang kan? Tak paham, tanya je Cik Aieyn kayy?

- Happy Trying -

Like Kalau Cinta ♥

Tutorial : Gambar Melengkung (Entry & Sidebar)

Design - Edit HTML
Ctrl+F , cari code dekat bawah nie

/* Header

Copy paste code nie ATAS code ayat korang cari tadi

img { filter: alpha(opacity=100); opacity: 6; }
img:hover { filter: alpha(opacity=75); opacity: 7; -webkit-transition: 0.5s; }
img {
-webkit-transition: 0.5s;
border-radius: 12px;}

Nanti dia akan jadi macam ni :

img { filter: alpha(opacity=100); opacity: 6; }
img:hover { filter: alpha(opacity=75); opacity: 7; -webkit-transition: 0.5s; }
img {
-webkit-transition: 0.5s;
border-radius: 15px;}
/* Header
----------------------------------------------- */

Lepas tu preview kalau tak de masalah boleh lah save.

Like Kalau Cinta ♥

Tutorial : Image Opacity Effect

Masa untuk tutorial. This time nak ajar korang buat image opacity effect kat blog korang. Hoho suke tak suke tak? Ok tak suke. You all tau tak ape bende image opacity effect tu? Kalau yang dah tau, sila main jauh-jauh. Kalau yang tak tau, boleh datang dekat tapi jangan pegang-pegang ok. Boleh pandang-pandang, jangan pegang-pegang *sudah mula mengarut.

Image opacity effect ni ade 2 jenis tau. Tau tak tau tak? Haa tak tau kan :p

Jenis pertama : Bila korang letakkan cursor mouse kat gambar, die jadi pudar.
Jenis kedua : Bila korang letakkan cursor kat gambar yang pudar, die jadi terang dan jelas.

Ok I sudah inform jenis-jenis die, sekarang jom tengok cara-cara die ;

Step 1
Dashboard > Design > Add Gadget > Html/Javascript

Step 2
Copy salah satu kod effect yang korang nak gune dan pastekan kat kotak gadget Html tu.

Ni kod effect yang pertama :

<style>
/* ----- Image opacity effect 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>

Ni kod effect yang kedua :

<style>
/* ----- Image opacity effect 2 ----- */
.post a img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
.post a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>

Step 3
Dah siap copy paste? Save dan tengok hasil die :)

Like Kalau Cinta ♥

Tutorial : Scroll Box Dalam Entri

Assalammualaikum.

Hari ni, Ain nak buat tuto letak scroll box dalam entri. See this scrolling box? Yes that's it! Kalau korang nak entri korang yang panjang lebar tu nampak kemas, boleh la try oke?

1. Dashboard > New Post

2. Switch mode ke 'Edit Html'

3. Copy code kat bawah ni & paste dalam kotak new post tadi.

<center><div style="border-radius: 10px; border: 1px dashed #78d2f0; height: 150px; overflow: auto; width: 400px;"> Entri korang</div></center>

Notes :
- Hijau : Saiz lengkung border
- Pink : Ketebalan border
- Orange : Type of border ( dashed / dotted / solid )
- Purple : Kaler border
- Merah : Tukar dengan ayat korang
- Height & width boleh adjust ikut taste sendiri.

4. If korang nak letak gambar, boleh je. Tukar semula mode ke 'Compose'.

5. Korang klik je dalam kotak scroll box tu, then add gambar macam biase. Tekan simbol insert image tu untuk upload gambar.

Done. Happy trying :)

Like Kalau Cinta ♥

Tutorial -Note Setiap Post

Selamat malam semua :3 Korang tengah buat apa sekarang ? Apa, boring ? Okay-II, jum belajar buat tutorial ni nak ?
Dashboard > design > edit html
# TICK expand widget template
Tekan CTRL + F dan rajinkan diri mencari code ini : <data:post.body/>
Dah jumpa ? Copy code di bawah ni :

<hr/><center>ayat anda</center><hr/>

Then, paste di bawah code <data:post.body/> tadi.
Preview dan save.

Selamat mencuba ♥

Like Kalau Cinta ♥

Tutorial -Like Button Facebook di Setiap Post

Dashboard > Design > Edit Html > TICK expand widget templates
Tekan CTRL + F dan cari code ini :

<data:post.body/>

Copy code kat bawah ini :

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Dah ? Paste code tu selepas <data:post.body/> tadi.

Macam biasa, preview dulu. kemudian save, oke ?

Selamat mencuba ♥

Like Kalau Cinta ♥