Khamis, 8 November 2012

Tutorial : image becomes grey when hover

Salam..how are you today?.. ok?...jangan banyak cakap, jom kita mulakan tutorial ini. Tutorial macam mana nak bagi image dalam blog kita tu nampak warna grey. So, kita step2 nya


first: open your template;
second:  search code </style>;
third: paste this code in ABOVE/ATAS </style>;




/*------ IMAGE ANIMATION------*/
img, a img {
filter: none;
-webkit-filter: grayscale(0);}
.photo img {
opacity:1;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
img:hover, a:hover img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}

cuba buat k..kalau dah jadi tu ok la tu... Kalau yang use design template tu korang boleh letak  di mana2 je. Just letak bawah a:hover..

credit to zara nerd

Selasa, 6 November 2012

Tutorial : Favicon

putri nak teach korang mcm mane nak uat tutorial favicon..hehe..sory xder contoh nak tnjuk kat korang..ni pun putri bljr cara2nye kat blog lyssa..tq lyssa...just share je...klau nak tau jgk try buat dahulu ok!!!...

mudah and senang je...
cuba ikut langkah di bawah :)


1. Dashboard >Design >Edit HTML >Tick expand widget template .

2. tekan CTRL+F , search code dekat bawah ni ok :)

</head>
3. dah jumpa dah ? ok good . then copy code kat bawah ni .



<link href='URL gambar' rel='shortcut icon' type='image/x-icon'/>

<link href='URL gambar' rel='icon' type='image/x-icon'/>

    paste kan dekat atas code </head> tu ok :)

4. lepas tu preview , kalau jadi save jela terus :)

*Letak URL gambar dekat Warna Merah ! :)

Tak tahu nak caru URL gambar mcm mana ? LIHAT SINI !!


credit by : lyssasecret


Tutorial : Effect Senget Bila Cursor Menyentuh Blockquote


salam....Tapi , hari ni , putri nak ajar korang maca mana nak buat blockquote senget macam putri punya tuh . hehe .oklah . Jom tngk and lihat .  tahu tak apa yang putri maksudkan ? msti ader yg tau kann..kann..dan ader yang xtau....kan..kan...if xtau biar putri tunjukkan.. tengk step2 kat bawah tau!!!!...



Macam dalam gambar di atas tu la, Ok, Let's start.

1. Log in > Dashboard > Design > Edit Html

2. Tekan Ctrl F serentak dan search kod ini :

.post blockquote {  ATAU   blockquote:hover {


3. Dah jumpa ? Copy kod ini pulak :


blockquote:hover {
     -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px 12px;
    -webkit-transform: skew(1.deg,1.5deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg); }
    border:2px dashed #000000;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    }


4. Paste di bawah kod yang korang cari tu ok ?

5. Then , SAVE lah . Jadi tak ? Jadi Tak ? =) 


Perhatian yea !!! tutorial di atas hanya akan jadi apabila korang guna design/layout !
If sesiapa yang guna template tu , harap maaf ! Maybe , tak kan jadi lah :)

credit by : lyssasecret.. 

Buat Tab Menu yang Comel


Assalamuailaikum semua, hari ni nak share tutorial buat tab menu..ok aku xnak ckp banyak mula buat

1.Dashboard> Posting> Edit pages
edit page yg ada kat atas tuu..
2. tulis la apa2 dkt ruangan edit page tu..
3.kalau da siap..tekan Publish Page..
4.pastu dia akan bagi 3 bahagian kan..macam dlm gmbr ni




korang tekan NO GADGET.. jangan tekan yg lain..tekan no gadget..
lepas dah tekan no gadget..tekan save and publish..lepas tu akan pergi ke (mcm dalam gmbr)


tekan view page..kemudian korang amik link page tuu..link yg atas tu..mcm dalam gmbr


ok paham kan..ok korang jgn buang page tu..

korang pergi

Dashboard>design>Add Gadget>Html Javascript
then copy code bawah ni and paste dekat ruangan html.javascript

<a href="LINK KORNG""><img src="URL GMBA KORNG" /></a>

LINK KORANG: Korang letak URL page mcm dlm gmbr atas tuu..
URL IMAGE: tukar dengan url gmbr la..mcm aku punya..tpi kalau korang nak guna icon..boleh2...

kat bawah ni aku bagi sikit url gmbr..kalau buruk buat la sendiri...oh yee, kalau korang nak ada banyak tab menu, korang tambah je kod atas ni..
contoh:

<a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a>

paham ?..ok nah freebies die





korang tekan right click..tekan copy image url..ok paham..kalau x paham baca banyak kali..kalau paham buat..kalau xtahu baca tuto orng lain..haha ok...


credit by Des Fleurs Amour


Tutorial : Tambah Comment Di Blogskin


Tambah Comment Di BlogskinHy3!!...Putri nk ajar  
cara mcm mane nak tambah Comment Di Blogskin. huhuhuhu.
. korang ikut je step di bawah ye 



Dashboard >> Template
Cari code di bawah :

</Blogger> 



Kalau dah jumpa, Copy n pastekan code ni di ATAS code tadi :

<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;"><$BlogItemCommentCount$> comment(s) <img src="URL ICON ANDA"/></a></BlogItemCommentsEnabled>

Biru : Blog ID Korang
Merah: Ayat Korang
Coklat : Url ICon Di Sebelah Comment

PREVIEW & SAVE TEMPLATE CHANGES

Credit by : nurin

k~la Babai   Happy Blogging