List tuto and free hover
Bismillah.Assalamualaikum.Dirah kembali.Tadi dirah bgi freebies doodle handmade punye kan ? Sekang nk ajo korang cara buat tuto and freebies list hover cam dirah..K,sebelum buat mesti paham dulu,dah paham?Cer hover benda kat bawah nie :
The Blog
Main House
Dah faham?Nak try?Yg nie sesuai untuk blogskin aja ye ;)Maaf kepada pemilik tuto ini.Dirah x ingat sape punye tuto.Nie dirah type ndiri.Maaf sangat.Tak berniat nk buang kredit.Thx pade siape yg bgi tuto nie :)
1.Blogger-->Template-->Search perkataan </style> menggunakan f3 or ctrl + f serentak !
2.Dah? Letak kode nie kat bawah kod </style> :
<style>
.list {
background:url( URL ICON );
background-repeat:no-repeat;
background-size:10px;
padding-left:25px;
color:#999;
display:block;}
@font-face{
font-family:'Short Stack';
}
.list:hover {
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
text-shadow: -6px 0 000, 0 6px 000,
6px 0 000, 0 -6px 000;
background:url(URL ICON);
background-repeat:no-repeat;
background-size:15px;
}
</style>
<a class="list" href="Link">Tajuk</a><br /></div>
<a class="list" href="Link">Tajuk</a><br /></div>
Kuning = Bentuk icon
Biru = Font
Merah = Link
Oren = Tajuk
Labels: hover, request, tuto
Hover Image *9
Ari nie nk bgi tuto ttg image hover.Credit :
Kak Afiqah.
Labels: hover, image, image hover, tuto
Hover Image *8
Hello!Kali nie nk bgi tuto about hover image n then kluar words
Contoh :
Before :
Hovering :
Finally :
Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style>.side2{
position:absolute;
overflow:hidden;
padding:17px;}
#side {
top:180px;left:110px;
position:fixed;
height:auto;
width:200px;}
#side:hover #text {
opacity:0.9;
margin-top:70px;
-webkit-transition: 0.8s;}
#text {
opacity:0;
margin-top:-100px;
margin-left:17px;
font-size:8px;
font-family:arial;
padding:7px;
font-style:normal;
position:absolute;
width:236px;
text-align:center;
height:auto;
text-transform:lowercase;
color:#000;
background-color:pink;
-webkit-transition: 0.8s;}
</style>
<div id="side"><div class="side2"><img src="urlimage" width="250px;" height="140px;"</div>
<div id="text">your word at here</div></div>
OREN : Url Image :)
PURPLE : Ayat jiwang awak xD
Labels: hover, image, image hover, tuto
image hover * 7
Assalamualaikum ! Hello ! Hai ! Bonjour !
Hello! Ari nie dirah dah kat umah! dah blik dri GANU pastu MUAR ! kalo org muar ckp 'MUO' .. sye kturunan MUO ! K..ari nie nk ajo cre buat hover image kluar ayt..mcm dirah punye..yg STAR OWNER tuh...K,nah ..
Before :
Hovering :
After :
Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style type="text/css">
#side{
margin-right:-1px;
width:250px;
height:150px;
overflow:hidden;}
#text
{text-align:center;
width:250px;
height:200px;
padding:5px;
overflow:auto;
color:#363636;
background-color:#fff;}
#picture
{margin-left:-280px;
width:280px;
height:220px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;}
#side:hover #picture
{margin-left:-550px;}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">
You can put anything at here.</div>
</td>
<td><div id="picture"><img src="URL IMAGE"></div></td>
</tr></table>
Kuning : Ayat korg
MERAH : Url Image
Labels: hover, image, image hover, tuto
Hover Image*6
Assalammualaikum !!! Ari nie kat ganu II .. I think I want to jump as high as I can !
pahal dirah tetibe brsmngt nie ?!!! Halnye adelah kerane dirah kat kmpg sepupu yang ade line .. sblum nie x de line lngsg kat ganu ( umah moyang ) sedih T________________T !!! K nah ! Hover image with words
Hover it :
Template Designer :
i.) Dashboard --> Design --> Page Elements --> Add a Gadget ---> Html/Javascript
ii.) Paste dekat Html/Javascript
ii.) Preview and Save !
Blogskins :
i.) Design --> Template --> Edit Html
ii.) Copy semua code dekat bawah dan paste dekat bawah </style>
iii.) Preview and Save !
<style type="text/css">.navs {width:100%;height:114px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:11px;font-family:arial;text-align:center;opacity:0;color:#777;background-color:white;-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
.navs a {color:white;}
.outside:hover .navs {opacity:1;}
.outside {float:left;margin-right:2px;height:120px;width:95%;}
#outside1 {border:5px solid #444;background-image:url('URLIMAGE');background-color:#555;} </style>
<div class="outside" id="outside1"><div class="navs">YOUR WORDS</div></div>
ABC : Url Image
ABC : Ayat Korang
Labels: ade mood!!!!, cite serdahana pnjg, hover, image, image hover, tuto
Image Hover*5
Image Hover : 7.35 a.m.
sory kecik..kalo besarkan nnti border blog melebar :D
- Blogskins/ Classic template : Paste codes ni selepas code img:hover {
- Template designer : Paste codes ni sebelum ]]></b:skin>
img:hover{
-webkit-animation-name: MMCa2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa2 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
50% { -moz-transform: translate(0px, 0px) rotate(360deg); }
}
@-ms-keyframes MMCa2 /* IE9*/
{
0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }
}
@-webkit-keyframes MMCa2 /* Safari and Chrome */
{
0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }
}
Done!
Labels: gambar, hover, image, image hover, tuto
Tutorial : Image Hover*4
tuto yg ke-5 ari nie : 7.05 a.m. .. tuto kali ini die mcm nie :
nmpak?k..nk buat ?
For Blogskin
Dashboard > Template > Edit HTML
Tekan ctrl + f serentak dan cari code img { or .img {
Copy code bawah ni:
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;}
Paste code di atas kode tdi >,<
Preview and save.
Labels: gambar, hover, image, image hover, tuto
Image Hover *3
Nie Post yg ke -4 ari ni.. : 6.50 a.m. ... tuto yg nie brkisahkan image hover terang.. so tak yah nak panjangkan cerita lagi jom mula..malaz nk ckp ppnjg 
For Blogskin
Dashboard > Template > Edit HTML
Tekan ctrl + f serentak dan cari code img { or .img {
Copy code bawah ni:
img { border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }
img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
Paste code tadi di atas img { or .img {
Preview & save.
Labels: hover, image, image hover, tuto
Tutorial : Image Hover *2
Assalamualaikum..nie tuto ke-2 dirah pade pagi yang gile II pagi..: 6.18 a.m. .. k..image hover yg kedua nie..die awal II cam nie:
*jelas dan tidak melengkung*
pastu bila kita hover.jadi cam nie:
*tidak jelas dan melengkung..*
TEMPLATE DESIGNER/BLOGSKIN
1. Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2. Press Ctrl + f serentak dan cari code /* Header----------------------------------------------- */
3. Kemudian, copy code dekat bawah ni
img {
border-radius:10px;
opacity:13.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:130px;
opacity:0.3;
-webkit-transition-duration:2.5s;
}
4. Paste di bawah code tadi
5. Preview & save
korang boleh tuko yg dirah kalakan tuh :
merah : border
oren : kekaburan (0.9 ---> 0.0) / kejelasan (1.0 --> 99.9)
hijau : masa effect
Labels: hover, image, image hover, tuto
Tutorial : Image Hover *1
Assalammualaikum..Wow!Awalnye dah buat tuto..baru kul 6.06 .. tdi lbih sahur trus mbik laptop dari bilik angah xD..
k..ari ni dirah nk tunjukkan tuto ttg image hover :D
TEMPLATE DESINGER
1.Dashboard > Design > Edit HTML > Tick Expand Widget Templates2.Press Ctrl + f serentak. cari code ni /* Header3.Copy code bawah ni
/*------ IMAGE ANIMATION------*/img, a img { border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
4.Paste dekat atas code /* Header5.Preview & save.
BLOGSKIN
1.Dashboard > Template >
2.Press Ctrl + f serentak.Cari code ni img { kalo x de yg tuh..kowg cari nie .img {
3.Copy code bawah nie..
border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
4.Paste dekat atas bawah code img { or .img {5.Preview & save.Labels: hover, image, image hover, tuto
 List tuto and free hover
Bismillah.Assalamualaikum.Dirah kembali.Tadi dirah bgi freebies doodle handmade punye kan ? Sekang nk ajo korang cara buat tuto and freebies list hover cam dirah..K,sebelum buat mesti paham dulu,dah paham?Cer hover benda kat bawah nie :
The Blog
Main House
Dah faham?Nak try?Yg nie sesuai untuk blogskin aja ye ;)Maaf kepada pemilik tuto ini.Dirah x ingat sape punye tuto.Nie dirah type ndiri.Maaf sangat.Tak berniat nk buang kredit.Thx pade siape yg bgi tuto nie :)
1.Blogger-->Template-->Search perkataan </style> menggunakan f3 or ctrl + f serentak !
2.Dah? Letak kode nie kat bawah kod </style> :
<style>
.list {
background:url( URL ICON );
background-repeat:no-repeat;
background-size:10px;
padding-left:25px;
color:#999;
display:block;}
@font-face{
font-family:'Short Stack';
}
.list:hover {
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
text-shadow: -6px 0 000, 0 6px 000,
6px 0 000, 0 -6px 000;
background:url(URL ICON);
background-repeat:no-repeat;
background-size:15px;
}
</style>
<a class="list" href="Link">Tajuk</a><br /></div>
<a class="list" href="Link">Tajuk</a><br /></div>
Kuning = Bentuk icon
Biru = Font
Merah = Link
Oren = Tajuk
Labels: hover, request, tuto Hover Image *9
Ari nie nk bgi tuto ttg image hover.Credit : Kak Afiqah.
Labels: hover, image, image hover, tuto Hover Image *8
Hello!Kali nie nk bgi tuto about hover image n then kluar words
Contoh :
Before :
Hovering :
Finally :
Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style>.side2{
position:absolute;
overflow:hidden;
padding:17px;}
#side {
top:180px;left:110px;
position:fixed;
height:auto;
width:200px;}
#side:hover #text {
opacity:0.9;
margin-top:70px;
-webkit-transition: 0.8s;}
#text {
opacity:0;
margin-top:-100px;
margin-left:17px;
font-size:8px;
font-family:arial;
padding:7px;
font-style:normal;
position:absolute;
width:236px;
text-align:center;
height:auto;
text-transform:lowercase;
color:#000;
background-color:pink;
-webkit-transition: 0.8s;}
</style>
<div id="side"><div class="side2"><img src="urlimage" width="250px;" height="140px;"</div>
<div id="text">your word at here</div></div>
OREN : Url Image :)
PURPLE : Ayat jiwang awak xD
Labels: hover, image, image hover, tuto image hover * 7
Assalamualaikum ! Hello ! Hai ! Bonjour !
Hello! Ari nie dirah dah kat umah! dah blik dri GANU pastu MUAR ! kalo org muar ckp 'MUO' .. sye kturunan MUO ! K..ari nie nk ajo cre buat hover image kluar ayt..mcm dirah punye..yg STAR OWNER tuh...K,nah ..
Before :
Hovering :
After :
Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style type="text/css">
#side{
margin-right:-1px;
width:250px;
height:150px;
overflow:hidden;}
#text
{text-align:center;
width:250px;
height:200px;
padding:5px;
overflow:auto;
color:#363636;
background-color:#fff;}
#picture
{margin-left:-280px;
width:280px;
height:220px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;}
#side:hover #picture
{margin-left:-550px;}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">
You can put anything at here.</div>
</td>
<td><div id="picture"><img src="URL IMAGE"></div></td>
</tr></table>
Kuning : Ayat korg
MERAH : Url Image
Labels: hover, image, image hover, tuto Hover Image*6
Assalammualaikum !!! Ari nie kat ganu II .. I think I want to jump as high as I can !
pahal dirah tetibe brsmngt nie ?!!! Halnye adelah kerane dirah kat kmpg sepupu yang ade line .. sblum nie x de line lngsg kat ganu ( umah moyang ) sedih T________________T !!! K nah ! Hover image with words
Hover it :
Template Designer :
i.) Dashboard --> Design --> Page Elements --> Add a Gadget ---> Html/Javascript
ii.) Paste dekat Html/Javascript
ii.) Preview and Save !
Blogskins :
i.) Design --> Template --> Edit Html
ii.) Copy semua code dekat bawah dan paste dekat bawah </style>
iii.) Preview and Save !
<style type="text/css">.navs {width:100%;height:114px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:11px;font-family:arial;text-align:center;opacity:0;color:#777;background-color:white;-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
.navs a {color:white;}
.outside:hover .navs {opacity:1;}
.outside {float:left;margin-right:2px;height:120px;width:95%;}
#outside1 {border:5px solid #444;background-image:url('URLIMAGE');background-color:#555;} </style>
<div class="outside" id="outside1"><div class="navs">YOUR WORDS</div></div>
ABC : Url Image
ABC : Ayat Korang
Labels: ade mood!!!!, cite serdahana pnjg, hover, image, image hover, tuto Image Hover*5
Image Hover : 7.35 a.m.
sory kecik..kalo besarkan nnti border blog melebar :D
- Blogskins/ Classic template : Paste codes ni selepas code img:hover {
- Template designer : Paste codes ni sebelum ]]></b:skin>
img:hover{
-webkit-animation-name: MMCa2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa2 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
50% { -moz-transform: translate(0px, 0px) rotate(360deg); }
}
@-ms-keyframes MMCa2 /* IE9*/
{
0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }
}
@-webkit-keyframes MMCa2 /* Safari and Chrome */
{
0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }
}
Done!
Labels: gambar, hover, image, image hover, tuto Tutorial : Image Hover*4
tuto yg ke-5 ari nie : 7.05 a.m. .. tuto kali ini die mcm nie :
nmpak?k..nk buat ?
For Blogskin
Dashboard > Template > Edit HTML
Tekan ctrl + f serentak dan cari code img { or .img {
Copy code bawah ni:
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;}
Paste code di atas kode tdi >,<
Preview and save.
Labels: gambar, hover, image, image hover, tuto Image Hover *3
Nie Post yg ke -4 ari ni.. : 6.50 a.m. ... tuto yg nie brkisahkan image hover terang.. so tak yah nak panjangkan cerita lagi jom mula..malaz nk ckp ppnjg
For Blogskin
Dashboard > Template > Edit HTML
Tekan ctrl + f serentak dan cari code img { or .img {
Copy code bawah ni:
img { border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }
img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
Paste code tadi di atas img { or .img {
Preview & save.
Labels: hover, image, image hover, tuto Tutorial : Image Hover *2
Assalamualaikum..nie tuto ke-2 dirah pade pagi yang gile II pagi..: 6.18 a.m. .. k..image hover yg kedua nie..die awal II cam nie:
*jelas dan tidak melengkung*
pastu bila kita hover.jadi cam nie:
*tidak jelas dan melengkung..*
TEMPLATE DESIGNER/BLOGSKIN
1. Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2. Press Ctrl + f serentak dan cari code /* Header----------------------------------------------- */
3. Kemudian, copy code dekat bawah ni
img {
border-radius:10px;
opacity:13.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:130px;
opacity:0.3;
-webkit-transition-duration:2.5s;
}
4. Paste di bawah code tadi
5. Preview & save
korang boleh tuko yg dirah kalakan tuh :
merah : border
oren : kekaburan (0.9 ---> 0.0) / kejelasan (1.0 --> 99.9)
hijau : masa effect
Labels: hover, image, image hover, tuto Tutorial : Image Hover *1
Assalammualaikum..Wow!Awalnye dah buat tuto..baru kul 6.06 .. tdi lbih sahur trus mbik laptop dari bilik angah xD..
k..ari ni dirah nk tunjukkan tuto ttg image hover :D
TEMPLATE DESINGER
1.Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2.Press Ctrl + f serentak. cari code ni /* Header
3.Copy code bawah ni
/*------ IMAGE ANIMATION------*/img, a img { border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
4.Paste dekat atas code /* Header
5.Preview & save.
BLOGSKIN
1.Dashboard > Template >
2.Press Ctrl + f serentak.Cari code ni img { kalo x de yg tuh..kowg cari nie .img {
3.Copy code bawah nie..
border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
4.Paste dekat atas bawah code img { or .img {
5.Preview & save.Labels: hover, image, image hover, tuto
|
You can request here
.jpg)
.jpg)