Showing posts with label templates. Show all posts
Showing posts with label templates. Show all posts

top css hover image effect blogspot blogger ke liye jarur padhe

hello frnds 
aap sabhi blogging ka MAZAA le rahe hai or ham apko aaj fir apke blog me kuch mazedaar karne ki trick lekar aaye hai,frnds apne bahut se blogs me dekha hoga ki us blog ki kisi bhi imege per mouse le jate hai to kisi blog ka imege half spin hota hai or kisi ne hover effect laga rakha hai jisase usme kuch change ho jata hai jaise uska colour ka change hona etc to apka man bhi karta hoga ki aap apne blog me bhi aise hi kuch kar sakte to kitna accha hota to frnds aaj ham apko o sabhi trick or image effect ke baare me batayenge jo apko jarur try karna chahiye 

apko ham code de rahe hai aap try kare or jo accha lage usko use kare

1.Opacity

bahut saare bloggers is style ko use karte hai,bahut hi COOL style hai aap bhi use kijiye or dekhiye apke blog ke liye kaisa hai 
code1
.post img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
opacity:0.7;
filter:alpha(opacity=50);
}

2.zoom out on hover

ye kuch alag hi style hai ye bahut hi accha hai jab koi imege pe mouse le jayega to imege autometic zoom hoga jo bahut slowly hota hai aap try kare 
code2
.post img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
.post img:hover {
-o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
}

3.brightness

ye bhi ek accha option hai ham sabhi bloggers ke liye jo apne blog me kuch new karna chahte hai apne reader ko attract karna chahte hai to apko ye jarur try karna chahiye 
code3
.post img{
-webkit-filter: brightness(60%);
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
-webkit-filter: brightness(100%);
}

4.360* rotate on hover

frnds agar apko uper di hui designe pasand nhi aai hai to apko style ek baar jarur use karna chahiye 
code4
.post img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

5. rotet and spin effect

is style ke baare me itna kaha ja sakta hai ki agar apko uper di hui style me se koi style nhi use karna hai to ye style jarur use kare bahut hi best hai rotet ke sath spin effect hai
code5 
.post img:hover {
opacity: 1;
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;  rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}


template me code kaise add karte hai janiye step by step

  1. sabse pahle apko apne blogger.com me log in karke apne blog ke dashboard me jana hoga
  2. uske baad apko TEMPLATE pe click karna hoga
  3. ab apko EDIT HTML PE click karna hoga fir apko CTRL+F press karna hai
  4. ab apko ek search box show hoga usme apko  ]]></b:skin> code search karna hai
  5. jab apko ye code mil jaye to apko niche diya gaya apko]]></b:skin> ke uper pest karna hai 
  6. ab apko apne template save kar dena hai 
frnds ye rahi aaj ki post agar apko is post ke baare me kuch puchna hai to plzzz comment kare mai apki help jarur karunga 

request for you/agr apki thodi bhi help hui hai to

plzzz share this post with your frnds
 thannkxxx for read this

kisi bhi blog ya site ka template name kaise jante hai janiye yeha pe

hello frnds
aaj ham baat karenge ki kisi bhi blog ya site ke template ya theme ka naam kaise jante hai waise to apko ye pata hi hoga ki aaja kal bahut se blog har ek minute me bahut se blog bante hai to unme template bhi alag alag hote hai or agar blog wordpress pe hai to theme bhi alag hote hai or jab ham koi bhi blog ya site open karte hai to hamko agar uska tempalte pasand aata hai to sochte hai ki hamko bhi apne blog pe aisa hi theme use karna chahiye lekin hamko us template ka name nhi pata hota hai jisase ham ye apne liye le sake 
to chaliye aaj jante hai ki



kisi bhi blog ya website ki theme ya template ka naam kaise jante hai?
ham apko bahut hi simple trick denge jiski help se aap kisi bhi blog ya site ka template name jan sakte hai or sath me apko ye bhi pata ho jayega ki ye template apko kaha pe milegi

  1. sabse pahle apko jis bhi blog ya site ka name janana hai usko crome me open karna hai 
  2. ab apko usme kahi pe bhi LINK KO CHORKAR right key press karni hai 
  3. ab apko ek option dikhega VIEW PAGE SOURCE dikhega 
  4. apko uspe click karna hai 
  5. aap jaise hi uspe click karenge apko new window me HTML coding milegi
  6. ab apko CTRL+F press karna hai jab aap press karenge to apko ek search box show hoga right hand me uper
  7. usme apko template name type karna hai agr o blog blogspot.com pe hai to apko usase judi sabhi jankari apke samne aa jayegi  
  8. or agar o blog wordpress pe hai to apko theme name type karna hai jaise aap isko enter karke ENTR button press karenge apko sabhi jankari mil jayegi 

apko sari details mil jayegi jaise template ya theme ka naam kya hai isko kis site ne designe kiya hai or isko aap kaha se download kar sakte hai in sabhi jankri apko mil jayegi jisase app bahut hi asani se kisi bhi blog ke bare me poori jankari le sakte hai

hame asha hai ki apko ye post jarur pasand aayi hogi,agr apke pass koi sawal hai ya hamse kuch janana chahte hai to aap comment karke puch sakte hai ham apki help jarur karenge 

agar agr apki is post se thodi bhi help hui hai to share jarur kare 


thankxx for read this 


Ads Inside Post