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

top 5 stylish sub-heading design bloggers blog ke liye jarur padhiye

hello frnds 

aaj ham sikhenge ki apne blogspot blog me stylish heading kaise use kar sakte hai waise to aap jante hi honge ki agar hamare pass html ki acchi jankari nhi hai to ham apne blog ke kisi bhi post me stylish heading nhi use kar sakte hai isliye ham apke liye lekar aye hai kuch bahut hi acche heading style apko ye jarur use karni chahiye,qki aaj har ek blogger adwance ho raha hai apne blog me kuch alag karna chah raha hai isliye ham apke liye lekar aaye hai ye bahut hi accha collection aap bhi use kijiye 

chaliye sikhate hai 

step1:log in your blogger dashboard(blogger dash board me log in ho jaiye)

step2:apko apne dashboard me dikh rahe TEMPLATE>> EDIT hTML click kare 

step3:apko ab ctrl+f press karna hai or ye code pest karna hai </b:skin> hit search

step4:ab apko niche diye huye kisi style ka code jo apko pasand aa jaye usko copy karna hai or </b:skin>ke just pahle pest kar dena hai 

chaliye style or code dekhate  hai

style 1

code 

.post h3{
margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #05A8FC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
  border-left:10px solid #FC2B2C;
}

style 2

post h3 {
color:#222222;
border-left:10px solid #222222;
border-right:10px solid #222222;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;
}
.post h3:hover {
color:#219DFC;
border-left:10px solid #219DFC;
border-right:10px solid #219DFC;
box-shadow:0px 0px 13px #219DFC;
-webkit-box-shadow:0px 0px 13px #32A4FC;
-moz-box-shadow:0px 0px 13px #32A4FC;
}

style 3

code

.post h3{
background: #F9F9F9;
font-family:'Oswald',sans-serif;
font-size: 120%;
padding: 6px 12px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #03DA03;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height:1.0em;
}
.post h3:hover {
border-bottom: 4px solid #003F80;
}

style 4

code 

.post h3 {
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border: 3px solid rgb(251, 10, 38);
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px3px;
color: rgb(251, 10, 38);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;

style 5

code 5

.post h3 {
padding:5px;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
color:#333333;
font:140% 'Oswald',Sans-Serif;
text-transform: uppercase;
}

customization:

1.aap apni custom font ka use kar sakte hai
2.aap font ke size ko badal sakte hai 
3.aap kisi bhi colour picker ka use karke colour ko bhi badal sakte hai

use kaise kare:

1.aap sabse pahle apne blogger ke post editor mr jaye 
2.apko janha pe bhi heading use karni hai us jagah pe SUB HEADIN use kare 
3.ab apko kuch type karna hai or preview dekhana 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

code box kaise add post ke bich me karte hai janiye hindi me

hello frnds 
kya aap blogging me apna ek bahut acha future talash rahe hai to ye to pakka hai ki apke blog ko bhi iske liye ready rahna hoga apko apne blog me ache ache post dene honge hamesha apne blog ke readers ka dhyan rakhna hoga or agr apko apne blog ko bahut famous banana hai to apko apne blog ke post qulity ke sath sath uske designe pe bhi dhyan dena hita hai to aaj ham apko batate hai ki POST KE BICH ME CODE BOX KAISE ADD KARTE HAI OR  YE Q JARURI HAI

sabse pahle jante hai ki code box blog ke liye kyo jaruri hai?
to chaliye ham apko batate hai ki apko ye code box apne blog me q add karna chahiye

1. apke blog me ye space<jagah >kam leta hai 
2. apka post behad acha lagne lagta hai apke post proffeshional look me aa jate hai 
3. apke blog ko log kahi jyada like karte hai 
4. apke post ki lenth short ho jati hai 

or bhi bahut kuch change ho jata hai apke post me or apka post ek behad acha lagne lagta hai 

ye bhi padhe:

• realeted post widget apne blog me kaise add kare
• blog me contact box add karne ka sabse easy trick
• blog me live demo or download button q or kaise lagaye

chaliye jante hi ki isko apne blog me ya post me add kaise karte hai?

aap agar is code box ka maza apne blog me lena chahte hai to apko ye steps follow karne honge

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 

ye bhi padhe:)

• free me blog ya website kaise banaye
• har kisi ko apna blog q banana chahiye
• kisi bhi photo ko run kaise karaye
• blog me high traffic kaise paye

ye hai apka screen shot

ye hai apka code

/* Code Box ----------------------------------------------- */ .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; } .code:hover { background: #FAFAFA; background-repeat:no-repeat; }

isko post ke bich me use kaise karte hai jante hai iske baare me

ye to apko pata ho chuka hai ki code box ko apne template me kaise add karte hai or isase kya fayada hota hai ab apko batata hu ki isko post ke bich me kaise lagate hai

1. sabse pahle aap o jagah<place>nishit kar le ki apko apne post  kis jagah lagana hai 
2. uske baad ap janha bhi lagana chahte hai waha pe HTML section me jakar ye niche diya gaya code pest karde 
3. jab aap code pest karte hai to apko usko kuch change karne ki jarurat hoti hai 
4. aap dekh rahe honge ki niche jaha pe ye likha hai APNA CODE YEHA PE DALE waha pe apna code replace kar de 
5. fir aap COMPOSE section me jaye or apne post ka preview dekhe 

apka dusra code ye hai

<div class="code">
YOUR CODE 
</div>

ab aap apne post ke bich me code box add karna sikh gaye hai agr apko is post ko lekar koi confusion hai to plzzz aap hame comment kare hamare forum me apna sawal puche ham apki poori help karenge 

thankxxx for  read this

Blog Post Me Live Demo Or Download Button Kaise lagate hai Janiye yeha Pe

hello frnds 
aapne bahut se sites pe live demo or download button jaise bahut se button dekhe honge to apke man me dimag me ye sawal uthata hoga ki ye button kaise banate hai to aaj ham apkoye batane aaye hai ki aap bhi is tarah ke button bana sakte hai or apne blog ke kisi bhi post me bade pyar se add kar sakte hai to chaliye jante hai iske baare me

hame live demo or download button kyo add karna chahiye?

 sabse pahle ham apke un sabhi sawalo ke jawab bhi ek baar me hi dete hai 

1. apko koi bhi link add karna hota hai to direct link editor ka use karte hai jisse hamre post me ek bhadda pan aa jata hai 
2. aap jab ye button apne blog me add karte hai to apka blog or post dono ache lagne lagte hai 
3. apke post is tarh ki chije add karne se bilkul profeshional lagne lagta hai 
4. ye apke visitors ko bhi attract karta hai 
5. apko apne post editor me link editor ki jarurat nhi padti hai

live demo or download button blog me kaise add karte hai?

1. sabe pahle aap apne blog ke dashbord me jaye uske liye www.blogger.com pe jaye 
2. ab apko TEMPLATE pe click karna chahiye
3. ab apko EDIT HTML pe click karna chahiye
4. ab jab apka html box open hoga to apko usme kahi CLICK karke CTRL+F press karna hai ab apko ek search box show hoga apke right side me uper 
5. us search box me apko ]]></b:skin> ye code search karna hai or jo niche code diya gaya usko is code ke ABOVE[UPER] pest kar de 
6. ab apne template ke save button pe click kare 

code for template

/*---download button by anytimehelp7.blogspot.com css start---*/
.button {-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);background:url("#") repeat-x scroll 0 0 #252424;border-bottom:1px solid rgba(0, 0, 0, 0.25);color:#FFFFFF !important;cursor:pointer;font-weight:bold;line-height:1;overflow:visible;font-size:17px;padding:8px 19px 9px;position:relative;text-decoration:none;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);width:auto;}.by-demobutton {background-color:#222222;text-align:center;width:150px;}.by-demobutton:hover {background-color:#00A0EE;}.by-downloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.by-downloadbutton:hover {background-color:#00AC00;}.button:hover {-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}
/*---download button by anytimehlp7.blogspot.com css end---*/
in short>>go to dashbord>>template>>edit html>>click any where in template editor box>>press CTRL+F>>enter in search box ]]></b:skin> >>copy code >> paste above of this code>>and last HIT ON SAVE BUTTON 

screen shot dekhe

post me ya kahi or jagah pe download button kaise lagate hai?

maan lete hai ki hamko apne kisi post me lagana hai to sabse pahle apko apne blog ka post editor open karna hai or apko apne post me LIVE DEMO or DOWNLOAD button lagana hai to apko ye code apne blog pe copy pest karne honge 

code

code for download

Download

<a class="by-downloadbutton button" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Download</span></a>

code for  live demo

Live Demo

<a class="by-demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float:right;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

customization:

1. aap jo red colour me pe apko link dalna hai 
2. aap jo pink colour me dekh rahe hai waha se aap ye set kar sakte hai ki aap button kaha pe show karna chahte hai jaise right,left or centre me
3. app jo green me dekh rahe hai waha pe apko o likhna hai jo aap button pe show karna chahte hai jaise download,click hare,learn more,live demo etc

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 imeage ko chalte huye kaise dikhaye

hello frnds
hamne apne kuch post me ye jana tha ki kisi bhi text ko moving<chalte > huye kaise show karte hai
lekin apko batana chahunga ki ye jo style hai yahi pr hi finish nhi hote hai ap inke bare me jitna jante jayenge utna hi gahre honge ye

aaj ham apko batayenge ki kisi bhi photo ko moving mode me kaise lagate hai

sabse pahle ap jis imeage ko chalte huye show karna chahte hai usko HTML me change kar le
 kaise kisi photo ko HTML me change karte hai to janane ke liye yeha click kare

jab apka imeage HTML CODE me change ho jaye to apko bas usme kuch add kar dena hai o hai

<marquee>apke photo ka HTML CODE<marquee/>

ab apko apniphoto chalti hui show hogi 
AP LIVE DEKHE

agar apko kuch DOUGHT hai to plzz hame  comment kare 

moving words me koi bhi link ko kaise jodte hai

hello frnds
pichle post me hamne jana tha ki kisi  bhi wods text ko gatimaan kaise karte hai or aaj ham uski aage ki topic me janenge ki kisi bhi gatimaan words text me koi bhi link kaise add karte hai 

chalne wale sabd kaise banate hai janiye bas EK CLICK ME

sabse pahle ham iske use ko janenge

1. iske use se hamare blog ya post me ek acha sa look aa jata hai
2. isko ham kahi bhi use kar sakte hai 
3. sabse hatkar ispe bahut jyada clicks milne ki sambhawna hoti hai

ye to ho gayi iske use ki baat isko banate kaise hai jante hai iske baare me

1. sabse pahle aap NOTE PAD open kare
2. usme <marquee><a href="yeha link dale">yeha aap jo show karna chahte hai o dale</marquee>ye poora code type kare
3. YEHA LINK DALE ki jagahapko us page ya post ka link dalna hai jaha per aap visiter ko le jana chahte hai or YEHA AAP ki jagah apko jo show karna hai o dale
4. uske baad aap jo red me dekh rahe hai usko apne anusaar replace kar de
5. ab ap is code ko jaha bhi chahe laga sakte hai

apko ye code is tarah se dikhai dega  yeha aap jo show karna chahte hai o dale

free me SMS kaise karte hai janiye bas EK CLICK ME