• How To Add Clickable Images/Pictures In Blogger/Blogs/Websites | BST

    Advertisements


    Adding clickable images (pictures) into your post or sidebar is a better idea. Let's you have written a long post with full of text without any images. Once you're published, read your own post as a visitor, and feel the user experience. You will be bored because lots of content without any images looks like a garden without flowers. It will lead to stay away your visitor from your website. Therefore, it is a better idea to add some clickable pictures into your articles that are related to your post. It is true that an image speaks the thousand of words so by using the images in the post body may give instantly ideas that what the post is about. You can also add clickable images to your sidebars because the sidebars placed side by side of the content area.
     adding clickable images how to
    Clickable Images in Blogger

    For example, check out my previous post adding clickable links in HTML code, look on the full post, and now imagine this post without any images. Images can attract the visitors to reading the posts. Therefore, here is how to add clickable images in Blogger.

    How To Upload High Quality (HQ) Images To Blogger
    Can I upload high quality images to Blogger? Check this
    Blogger hack to upload your high quality images...
    www.bloggertipsseotricks.com/2011/01/add-high-quality-hq-images-blogger-post.html

    Image Search Engine Optimization To Blogs For Google SEO
    Do you not see any images of your blogs into the Google image search?
    Here is a solution for SEO of your images for your...
    www.bloggertipsseotricks.com/2011/04/google-seo-for-images-optimization.html


    Create Unclickable/Clickable Images/Photos/Pictures To Blogs/Blogger

    Firstly, you will have to upload your images into an image hosting site, if you don't have any idea about image hosting site, then you can use free image hosting site imageshack.us, and copy your direct link to use it later. You can host any images to your blogger itself that will give you the direct link to use it anywhere. Now, you have the direct link of your images so you can show it anywhere on the web such as in your blogs, websites, social media sites or comment section on other blogs or forum that allows you to write HTML code. Therefore, here is a quick guide to show images by HTML code.

    1. To Add Unclickable Images To Your Blogs /Blogger/websites:

    Look at the below code,
    <img src="YOUR IMAGE DIRECT LINK" />
    Replace YOUR IMAGE DIRECT LINK with image's direct link that you copied before (make sure it would be start from http://). This is the code for an unclickable image. Now, copy the whole code and use it anywhere, where the HTML code allowed (look at the bottom section for using in Blogger).

    Here <img> tag represent that you want to show the image, but which image will be show I will use src attribute with the value of your image direct link. See a preview of unclickable image,


    search engine optimization blogger tips and tricks photos

    2. To Add Clickable Images To Your Blogs /Blogger/Websites:

    <a href="URL WHERE YOU WILL GO AFTER CLICK"><img src="YOUR IMAGE DIRECT LINK" /></a>
    Replace URL WHERE YOU WILL GO AFTER CLICK with the URL where you want to redirect, and replace YOUR IMAGE DIRECT LINK with your direct image link. Look a live preview of this code,

    hyperlinks and clickable links for seo best

    3.Adjust Height and Width of Images in Blogs/Blogger/Websites:

    You can adjust the height and width of your images by adding some attributes, called height and width in img tag. When you include the height and width attributes in this tag, then doesn't matter the original image size. It will show the size what you have mentioned in the newly added attributes. If you don't use height and width attributed in this tag, then the original size of the images will be display. Look the below code,
    <a href="URL WHERE YOU WILL GO AFTER CLICK"><img src="YOUR IMAGE DIRECT LINK" height="VALUE" width="VALUE" /></a>
    Replace VALUE with your image size as width and height. if you want to show 300px in width then replace VALUE with 300 corresponding to width, similarly do for height. Look at the below preview,

    hyperlinks and clickable links for seo best

    In the above preview, I am using width="400" height="200" so image is bigger than the original one as you can see the top of the above preview image. You can adjust width and height of images as your need.

    4. Adjustment of Images to Left, Right or Center in Blogs/Blogger/Websites:

    You don't have to do anything special for doing it, just add an additional attribute align in img tag, and assign a value to this attribute. Let you give left value to this attribute, which will lead your image to left. Look at the following code,
    <a href="URL WHERE YOU WILL GO AFTER CLICK"><img src="YOUR IMAGE DIRECT LINK" align="VALUE"/></a>

    Look at the preview with align="right" attribute.

    hyperlinks and clickable links for seo best


    you can use align="left" for left
    align="center" for center









    Where can you paste these HTML codes?

    You can use these HTML codes anywhere on the web, where you are enable to write HTML such as in forum comments, websites comment, posting articles, Yahoo answers etc... Now, for Blogger;

    1. Blogger:

    1. In your blogger sidebar: Sign in to your blogger dashboard :


      hyperlink in blogger blog


      --> Click on Layout under more options ::

      clickable links in blogging

      --> Now click on Add a Gadget ::

      how to add clickable link in blogger

      Then you will see a pop-up window and find HTML/Javascript and click on it ::

      clickable link in blogger

      Now paste your code and save it!

      clickable link in blogs


      You done !
    2. In your blogger post: Sign in to your blogger dashboard ::


      create clickable link in blogger


      -->Click on create new post ::

      clickable link tips and tricks

      --> Click on Edit HTML and paste your codes and see your preview and publish.

      anchor text in blogger




    Share the Love!

    Did You Like This Post? Get the Latest Blogger & SEO Technology Directly From Your Inbox Just Enter Your Email and Verify it!



3 comments:

  1. Anonymous says:

    Thanks for this info. I am basically used it in scraps.

  1. Anonymous says:

    Thanks for this info. I am basically used it in scraps.

  1. I think this article is easy way to know about how to add clickable images in blog. Good job. Thanks.

Leave a Reply