Tutorial : Image Opacity Effect

Assalamualaikum. Someone ask me how I make the picture being fade when the cursor touch it. So, here is the answer for the question.

Image opacity effect 1
Gambar menjadi pudar apabila cursor menyentuh gambar.

Image opacity effect 2
Kesan adalah sebaliknya, iaitu gambar yang pudar bertukar terang dan jelas apabila cursor menyentuh Gambar.

Mudah je nak pasang Image opacity effect nie. Ikut step je :).

1. Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript

2. Copy salah satu kod di bawah dan paste pada content HTML/Javascript.

Kod Image opacity effect 1 

<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>

Kod Image Opacity Effect 2

 <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>

3. Save :)

Edit Template Denim

Assalamuaalaikum semuaa! Banyak orang tanya Kihah guna template apa. Ok. Acc, Kihah guna Dennim. Mesti korang tak tahu nak guna macam mana kan? Meh Kihah ajarkan. Sebelum itu, Terima Kasih bebanyak kepada Kak Nazihah  for the info and tutorial. 

Korang jangan risau. Buat 1 persatu. Ikut dengan berhati-hati dan teliti. InsyaAllah. Kalau tak de apa-apa Jadi macam blog Kihah la. Best kan? Jom mulakan.

Tukar ke Denim

Memandangkan blogger dah tak sediakan template ni, so korang boleh amik codes dia

>DI SINI<

 mesti ada macam ni.

Nampak tak? Ada biru kat header tu. Tunggu pe lagi? Jom la buang!

Buang Biru Dekat Header

Dashbor-> Design -> Edit HTML

CTRL+F serentak. Search kod ini. 

/* Variable definitions

Bawah /* Variable definitions tu ada kod ini.

<Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#336699" value="#336699">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#528bc5" value="#528bc5">

Delete kod tu, Gantikan dengan ni

<Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">

Preview. Save Template.

Letak Background


Dashbord -> Design -> Edit HTML

CTRL + F Serentak, search kod ni

body {

Pastekan kod dibawah. Dibawah kod Body tu ok?

background:$bgcolor;
Background-image:url(URL IMAGE);
background-repeat: repeat;
background-position:Center center;
background-attachment:Fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 Gantikan URL image tu dengan gambar yang suka. Boleh ambik yang ni

http://i630.photobucket.com/albums/uu21/ReginaLovaSweet/31.gif

http://dl3.glitter-graphics.net/pub/2725/2725413buoul6giov.gif

http://dl4.glitter-graphics.net/pub/658/658634cdu9wz29u9.gif

 http://dl3.glitter-graphics.net/pub/264/264393ps0ft3rzze.gif

 http://dl2.glitter-graphics.net/pub/915/915132gu2cewfq0i.gif

Lepas dah isi, SAVE TEMPLATE,, blog Korang akn jadi macam ni

Buat Header Bersambung Dengan Blog
Kalau nak buat, mesti ada Gimp dengan Photoscape. Hee. First, Buka Gimp

Tekan CTRL+N serentak. Keluarla kotak automatik.

Width untuk Denim template ialah 761 ( Melainkan korang dah ubah ) So tukarkan Width jadi 761. Height boleh tukar ikut suka hati. Jangan tekan OK lagi! Korang tekan simbol + sebelah  Advanced Options dulu. Nanti keluar macam ni : 

Kan ada bahagian Fill with: tu kan? Sebelah dia pulak Background color kan? Tekan arrow kat situ pastu keluar drop down menu. Pilih Transparency. Then tekan OK. Nanti keluar camni :

Jeng jeng jeng. Sekarang kat bahagian toolbox tu, pilih button kotak then bawah tu pilih rounded corners. 

Yang kat radius kat bawah rounded edges tu ubah jadi 20 - 60 camtu. jangan banyak sangat.

Sekarang korang bawak mouse korang kat bakal header korang punya hujung. Tarik dia sampai memenuhi bahagian bawah header korang. kalau terkeluar pun takpe. nanti dia jadi dashed ( - - - - - ) macam ni : 

dashed tu bergerak. sbb tu tk nmpk sgt kay.

Sekarang, tekan Brush tool pulak. tukar kan color jadi warna putih. pastu just color kan dekat bakal header korang tuu.

Tengok gambar .

Kalau time nak warna kan tu, warna kan je cacai barai. dia takkan ganggu bahagian luar sbb td korg dah highlight hujung header korg tu :D

Ni baru siap dia punya bahagian untuk sambungkan pada blog T_T hehe

headeruntuktesterblog.PNG

Skrg untuk edit di photoscape pula. Savekan bakal header korang tadi. Savekan jadi .PNG file tau. contohnya :  headersaya.PNG

Bila tekan Save , nanti keluar kotak mcm ni :

bila keluar kotak ni, tick ikut gmbr di atas ok :D Tick  Save Resolution dan Save Creation Time SAHAJA.

Sekarang bukak bakal header korang dekat Photoscape.

Nanti bila bukak nampak semua putih kan? Jgn risau! sbnrnya header korang still transparent. Cuma dia tak tunjuk transparency je.

DIINGATKAN BAHAWA VIEWER DIA MMG CMTU. nmpk semua putih tp ekcuali dia transparent. Korang edit-2 lah & letak gmbr semua tu *Doodle tu saya yang buat okay!*. Pastu Save jadi .PNG file. takpun korang tekan butang Save terus. takyah tekan Save As. Kalau korang tak caye dia transparent, cuba bukak dekat folder. Anyway, upload la ke blog korang. 

WAIIIITTTTT. belum habis lagi. Skrg edit kat code pulak.

 Dashbord > Design > Edit HTML > cari kod Ini 

#header {

 Bawah header tu ada kod ini.

border: 1px solid $headerBgColor;

Delete kod itu.Cari kod ini juga. CTRL+F juga yaa.

#content-wrapper { 

 Bawah #content-wrapper {  bawah kod tu ada kod ini.

background-color: $mainBgColor; 

Delete kod tu, Preview. Pastu, SAVE TEMPLATE 
Tengoklah blog anda. =) Cantik tak? Jadilah macam ni

Hahax =D Cantik blog kedua Kihah? TEKAN SINI. Huh. Penat juga la. Nantikan Part 2 pulak yee =D. Wassalam ;)

Tak jadi Main Background?

Assalamaualikum dan camat pagiyy.

Ok. Kalau korang buat main background, mesti dia akan jadi macam ni : I mean, tak sama.

Klik kalau tak nampak k?. So, ikut tutorial kat bawah ni.

1. Pergi Dashbord --> Design --> Template Designer. Kalau tak tahu template designer kat mana, tengok gambar ni,

2. Pergi Advanced. Cari Main Background. 

3. Dah jumpa? Baguss ambik transparent punya. Rujuk gaambar buruk kat bawah ;)

4. Save!

Tutorial : Main Background

Assalmaualikum dan Good Morning semua! Semalam, masa check Shoutbox, Cik Fieyhans ada tulis something la. Cetengok.

Nampak? Kalau tak, pergi beli spek mata. Kalau nak jimat duit, Tekan je gambar tu. Jom bongkaarr!

1. Log in --> Dashbord --> Design --> Edit HTML

2. CTRL+F search kod ini

#content-wrapper {

3. Dah jumpa? Baguss. Copy kod ini dan pastekan dibawah #content-wrapper { tadi. 

background-image: url(http://i138.photobucket.com/albums/q247/Nina-Dreamz/bkgnd5.gif);

*Tukarkan tulisan berwarna merah tu ok? Dengan gambar yang korang nak. 

4. Preview dulu, baru tekan SAVE TEMPLATE.

Tutorial : Copyright

Assalamualaikum. Hari ni nak buat Tutorial Copyright. Tak tahu apa tu copyright? Tengok gambar bawah nih.

Click untuk besarkan

Credit to : Kak Hana. Terima Kasih kak Hana. ;) Sayang akak! muahhhhhXD. Hahaha Jom start!

1. Dashboard --> Design --> Edit HTML --> Tick Expand Widget Template.
2. Lepas tu, korang tekan CTRL+F search code dekat bawah ni okeh?

</body>

3. Dan jumpa? Bagus. Copy kod kat bawah ni. Pastekan diatas/Sebelum kod </body> tadi. Pahemm?

<center>your own word</center>

4. Preview dulu tengok jadi ke tak. Scroll bawaahh sekali okeyh?
5. Kalau puas, SAVE TEMPLATE

p/s : Nanti kalau rajin, Kihah buart Tutorial lagi ok? sabar la kepada yang request tu. 

Freebies : Header Awan

Assalamualaikum warahmatullahiwabarakatuh.

Syss Wiwin tanya Kihah kat Facbook tadi. Dia kata ,,

"mcam mne faqihah buad header yg ade awan awan tuu . background dea tuu , dulu kann faqihah ade buad kann ? haraf bole tlong

Ok. Kihah tolong ni. Haha.. Ambila =D

http://i630.photobucket.com/albums/uu21/ReginaLovaSweet/awan_for_header.png

That'll. Credit to : NinaZaharin and syss Nana

Mid-Year Giveaway by Nisa Menaip !

Tekan gambar untuk ke Entry Giveaway =D

Assalamuaalikum Warahmatullahiwabarakatuh.  Hahaha. Nervouse gilaaa! Sebab? Ini adalah kali pertama Kihah join Giveaway. Sebelum ni pun mana pernah. =,= Kesian tak? alaaa. Kesian laa.

Ini merupakan giveaway terbesar Syss Nisa setakat ni. Hadiah pula best-best pulak tuh. Cayalaahh! Nak tahu hadiah? TEKAN SINI.

Giveaway ni ada sponserrsss yang terhebad diimport dari luar negara. Cehhhh. Hahaha. Antaranya ialah :

• Sandra Azwan
• Darkbatman
• Pink Heart Craft
• Ayunar
• Mas Ahmad Safwan
• Yuyu Musa
• Myra Amira
• Ciminny
• Alfi Kasran
• Sarang Jerung

p/s 1: yang Kihah bold tu, orang yang Kihah kenalla. Haha,, Sorry ek Yang tak dibold ;) Hua3x

p/s 2 : Harap dapat.  Lalala. =D