Image Shortcode - Embed Images in Blogger Comments!

Image Shortcode for bloggerImage Shortcode lets you insert images anywhere on your blogger blog with a simple one line textual code. You can now embed images with links or without links inside blogger comments form, posts, pages, HTML/JavaScript widgets almost anywhere! You can customize the width and height of your image, link the image to a URL, add nofollow attribute to the URL or simply insert the image in its actual resolution with a simple code. You may use the images to link any page or post inside your website, or use it to link an external page. Blogger Shortcode plugin has revolutionized BlogSpot blogs and it is the biggest development so far Alhamdulillah after the JSON API.  Just like you insert images in bulletin boards or forum threads, you can now embed images in blogger comments box and the shortcode will render it perfectly. Lets see it in action!

Interesting: It's the first shortcode which we implemented on MBT too. You can test it with [img/] shortcode

1. Install Blogger Shortcode Plugin

In order to use Image shortcode you must first install the shortcode plugin for your blogger blog by following 7 easy steps shared on the link below:

Skip installing it if you have already added it in your blogspot template

2. Start Inserting Images using Image Shortcode!

Now when you wish to insert images in original resolution simply use the shortcode below. Paste it anywhere you like and the image will be perfectly displayed.

[image src="IMAGE LINK"/]

  • Replace IMAGE LINK with the Image Link where it is hosted

If you wish to link the image to a post, page or external website then add the Image URL attribute in this format

[image url="URL HERE"  src="IMAGE"/]

  • Replace URL HERE with the URL of the page, post or site you wish to link to

If you wish to nofollow the link to what the image points then add the nofollow attribute in this format

[image rel="nofollow" url="URL HERE" src="IMAGE"/]

 

Example Of Image Shortcode

Now lets suppose I want to embed an image on a post. I want its width to be 500px and its height to be 260px, I want it to link to http://blogger-shortcode.blogspot.com/ and I want this link to be a nofollow because I don't want to pass precious PageRank juice to it. The image is located at http://ask.mybloggertricks.com/uploads/default/767/77f624bc8120838b.png

The shortcode will be

[image width="500px" height="260px" rel="nofollow" url="http://blogger-shortcode.blogspot.com" src="http://ask.mybloggertricks.com/uploads/default/767/77f624bc8120838b.png"/]

Output

Blogger shortcodes

That simple!

Complete list of shortcodes

Attribute Definition
src Insert Image Link here where it is hosted
url Insert the URL where the image will point. You can point the image to a post on your blog, page or any external site.
width Adjusts the width of the image. Can be defined in pixels or percentages.
height Adjusts the height in pixels or percentage
nofollow A SEO Friendly option that lets you mention whether you want to nofollow the link or not.

Need Help?

You can contact us 24/7 for any help on our forum or you can post your queries below in the comment box to ask for any assistance needed. I hope the image shortcode may bring a positive change in your blogging hobby and may help you better express your thoughts with your readers through images. Subscribe and stay tuned because a lot more has to come! Peace and blessings buddies. =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

12 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. See a live example of image inserted in blogger comments. The image below is the vector art service that we offer. Hope you like it :)

    [img src="http://lh5.ggpht.com/-t3SgDGueKgA/UPMHobxU6YI/AAAAAAAAIoY/x6Nbgy0jORA/image29.png?imgmax=800" url="http://www.mybloggertricks.com/2013/01/launching-service-vector-face-art.html"/]

    ReplyDelete
    Replies
    1. nice one Mohammad Mustafa Ahmedzai, Such a Great vector Design.
      http://gonaukari.in

      Delete
  2. This is really great idea and first of its kind. You are coming with more and more shortcodes and it looks like you will end up converting Blogger to WordPress like platform.
    Thanks for the great idea.

    ReplyDelete
    Replies
    1. Thank you pravin. We have a lot more tools coming on its way and many widgets that we wish to convert to a simple shortcode so that blogger users may get the best possible front end experience without worrying about the coding part. :)

      Delete
  3. awesome our legend

    http://www.trick-freakz.com/

    ReplyDelete
  4. Mohammad, none of the shotcodes works on mobile phones (at least on Andorid). Have you seen it? I hope this could be changed, because your idea for shortcodes in Blogger is really great.


    Veselin.

    ReplyDelete
  5. Fortunately these shortcodes are compatible with all mobile devices.

    Here is a prove for iPhone where I took a screenshot

    [img width="90%" src="http://2.bp.blogspot.com/-MGWrITZC9SM/VVb_93wZxNI/AAAAAAAAO5M/a_-s6hilSk0/s1600/IMG_0866.PNG"/]


    Here is a screenshot from a Samsung Tablet

    [img width="90%" src="http://2.bp.blogspot.com/-23yOf_NzQMg/VVb_-3JQfcI/AAAAAAAAO5U/j4RrA4xOdUQ/s1600/IMG_0865.JPG"/]


    Works just perfectly! :)

    Which handset are you using?

    ReplyDelete
    Replies
    1. Thank you for checking it and showing that it works on mobiles. Yes, now I also see it works. The last several times I checked it didn't. My phone is HUAWEI Ascend Y511.

      Sorry for the disturbance.


      Veselin.

      Delete
    2. You are most welcomed. I had forgotten to disable the mobile view. It works on all devices now :)

      Delete
  6. Hello, When I add this code - [image src="IMAGE LINK"/] on my blog it is not working and also the page where I added this code is becoming blank only left with some images.

    ReplyDelete