But let’s start with a very simple example. Let’s rotate a single image. Here is an arrow:
How do I reverse this arrow while drafting a post on Blogger.com? It is actually simple:
1 – I insert the image in the post at the place I want it to be.
2 – I switch to the HTML view.
3 – I find the end of the ‘img‘ HTML tag added by blogger during the insertion of the image. Here what blogger generated when I inserted the arrow above:
4 – I add the following expression just before ‘/>‘:
style=”transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);“
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);“
The CSS magic operates and here is what you get:
Here is the HTML code after insertion of the style:
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ89IEjtX2q85-x5Wz9jxsjssQ7ihcFmf8Nr0XiKC80iqxwSG9Tro54R9H63f0P9rWHm8ADo6fwPNEcqyyvcmGS1Ry8YmY9qJ2bW6Oh0UP4fp331rGtj5YZbWujPk-ow_ORJp-q6OATWU/s1600/arrowtop-10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Arrow" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ89IEjtX2q85-x5Wz9jxsjssQ7ihcFmf8Nr0XiKC80iqxwSG9Tro54R9H63f0P9rWHm8ADo6fwPNEcqyyvcmGS1Ry8YmY9qJ2bW6Oh0UP4fp331rGtj5YZbWujPk-ow_ORJp-q6OATWU/s1600/arrowtop-10.png"title="Arrow" style="-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);" /></a></div>
Rotation is not limited to 180 degrees, you can use any positive or negative value. Here are more examples of rotations using the same image:
Try it now. Good luck.
Distributed By : Brtemplate
Designed By :Problogger tricks
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comments:
Post a Comment