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
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 »
Mohammad
5/12/2015
Shortcode
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 :)
ReplyDelete[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"/]
nice one Mohammad Mustafa Ahmedzai, Such a Great vector Design.
Deletehttp://gonaukari.in
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.
ReplyDeleteThanks for the great idea.
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. :)
Deleteawesome our legend
ReplyDeletehttp://www.trick-freakz.com/
My legends are my readers like you :>
DeleteMohammad, 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.
ReplyDeleteVeselin.
Fortunately these shortcodes are compatible with all mobile devices.
ReplyDeleteHere 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?
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.
DeleteSorry for the disturbance.
Veselin.
You are most welcomed. I had forgotten to disable the mobile view. It works on all devices now :)
DeleteThanks, works great! :)
ReplyDeleteHello, 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