Password = 1234
Add A Reflection Effect To The Images In Blogger Posts
Every bloggers desire is to make their blog more different from others. Someone likes to make their blog more professionally in looks and try to make their blog post more beautiful with images. Now Its time to know about adding reflection effect to your blog post images using simple tricks. Its absolutely awesome because you never wanna depend on other Image editing software as well as Online image editors. Reflection hack gives a nice reflection effect to the images. Reflection effect is made by using java script. Reflection Effect is shown only at the bottom of the image. Before we dive into the code, take a look at the demo image shown below to get an idea of what we are going to build here.
Reflection Effect To The Images In Blogger Posts Demo
How To Add A Reflection Effect To The Images In Blogger Posts
- Go to Blogger Dashboard
- Click on DropDown Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML --> Proceed --> Expand Widget Templates
- Press Ctrl + F and search the code shown below
- Now Paste the Code Shown Below just above/before it
<script src='http://latest-hacks.googlecode.com/svn/gadgets/extras/reflection.js' type='text/javascript'/>
- Now save your template
- Now when you upload an image to blogger post click on Edit HTML tab and add a class="reflect" attribute inside the image tag as shown below
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pIiY-CqRDeRBRR6fS2w0aMdFMD7hRhaZgtc9BNBVDj3hWe9B0ZxDeNa_sxnzttaLrKTovdR0rlxRqK70ctvey-Nburcjrfm3JIDM3rsdS4s-d-_4-di_4bkQ2tg7cWrQm68yQ9p55tI/s1600/reflection-effect-to-images.png" imageanchor="1" style="clear: right; float: center; margin-bottom: 1em; margin-left: 1em;"><img border="0" class="reflect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pIiY-CqRDeRBRR6fS2w0aMdFMD7hRhaZgtc9BNBVDj3hWe9B0ZxDeNa_sxnzttaLrKTovdR0rlxRqK70ctvey-Nburcjrfm3JIDM3rsdS4s-d-_4-di_4bkQ2tg7cWrQm68yQ9p55tI/s1600/reflection-effect-to-images.png" /></a>
Done...
0 comments:
Post a Comment