By default, when a user clicks a picture in a Blogger post, the picture opens up in a light box. However, you can also create a picture link so that when a user clicks a picture, a new blog or a website will open. For example, the above image is linked to this post itself which is very handy. In this tutorial, I'll explain how you can link a picture to any blog or webpage.
Default of Upload Image in Blogger (No link in picture). When you click picture to open in lightbox
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" /></a></div>
<a href="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" /></a></div>
Code Making Click On Picture link To Open In New Tab All Browser
linking your image to some other blog or website then it is a good practice to make it open in a new window or tab. By doing this, visitors will stay on your blog.
To do this, I'll just add target="_blank" in the image code just after the link address. The code will look like this:
To do this, I'll just add target="_blank" in the image code just after the link address. The code will look like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.akbalthom.blogspot.com/" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" /></a></div>
<a href="http://www.akbalthom.blogspot.com/" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" /></a></div>
Code Making Click On Picture To Open In Same Tab All Browser
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.akbalthom.blogspot.com/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" /></a></div>
<a href="http://www.akbalthom.blogspot.com/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-ZAIQb3wu2u4/VSpALfbykZI/AAAAAAAANm8/G_tB3cKuSJY/s1600/Khmer%2BNew%2BYear%2B2015.png" /></a></div>
Note: In this tip you can make download button.
0 comments:
Post a Comment