hello readers Adding different effect to your blog images is another great way of
engaging your readers, probably they will stay longer on your blog if
they found out that your blog images are having different effect and
they might want to check more of your blog images to see the awesome
effect.
first go to blogger dashboard>template>edit HTML >Use ctrl F to find ]]></b:skin> and paste the following code above/before it.
now hit on save template..
customization..
To change the rate (time taken) at which the image rotate, simple edit 0.8s
You can also change the degree at which the image rotate by editing 360deg
How To Activate It On Images..
Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the div class of the image to spinningeffect.
Example: Your image class in post editor will be <div class="separator", now change the class to <div class="spinningeffect"
If you want to apply the effect to other images, use the code below.
Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!
How To Add rotating Effect To Images
first go to blogger dashboard>template>edit HTML >Use ctrl F to find ]]></b:skin> and paste the following code above/before it.
.spinningeffect img { /* Spinning Social Icons Widget By www.realcombiz.com */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .spinningeffect img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
now hit on save template..
customization..
To change the rate (time taken) at which the image rotate, simple edit 0.8s
You can also change the degree at which the image rotate by editing 360deg
How To Activate It On Images..
Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the div class of the image to spinningeffect.
Example: Your image class in post editor will be <div class="separator", now change the class to <div class="spinningeffect"
If you want to apply the effect to other images, use the code below.
<a class="spinningeffect" href="YOUR-IMAGE-URL/" target="_blank"> <img src="http://YOUR-IMAGE-URL" /></a>
Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!
ConversionConversion EmoticonEmoticon