Wednesday, November 4, 2009

Create Blogger Backup For Images And Get Image URLs



Backup-Images-in-Blogger Many bloggers including some professional ones suggest to store Blogger images on services like www.Photobucket.com , www.tinypic.com etc. but I really don’t understand why would someone do that when one has unlimited Image storage and bandwidth inside Picasa web albums that is where Blogger saves all your images. Well its time to change the way people use Blogger and we are here to let you help make better use of resources available to you.

 

Today I will share a different way of managing all your images in blogger by letting you know how to create a Backup for all your images and we will also learn how to get Unique URLs for images. This tutorial will also help you in reducing your blog load time by 40% i.e 150-200kb

To create an Image Backup you will need to do the following,

  • Go To Blogger
  • Create a draft Post and name it Backup For Images
  • Now start uploading all your images to blogger using the normal method. These images can be images that you have saved elsewhere and have link to it in your blogger template. For example: Background Image, Sidebar Headers, Icons, Header Background etc. If you scan your template you will find many image URLs inside the CSS part that starts from <b:skin> and ends at </b:skin>. An image URL/link can end as .gif  | .png  |  .jpeg   |  .bmp etc. Open each URL/link in your browser and save the image in your Hard Drive by right clicking on it and then choosing “Save Image As”
  • Once you have uploaded all your images, your backup will look like that of mine,

BACKUP FOR IMAGES

 

  • Now Comes the interesting part. In order to get Image URLs and use them somewhere inside your blog template or sidebar widgets, you will need to do the following,
    • Make sure you are using Firefox Browser
    • Click the Preview Link at the top-right corner of your Backup post

    Preview-link

    • Once the images are displayed below the draft post, simply right click on your desired image and then choose “Copy Image Location”

      Copy-Image-Location

    • Now paste this Image URL inside your Browser Address bar,

Paste-Image-URL-in-Browser-

  • Your Image URL will look something like the one below,

http://4.bp.blogspot.com/_7wIwo/Spr1Lxjk6I/AABu0/uS0zY4/s400/MyBloggerTricks.jpg

The important part in this link is s400 . If you want the image to appear in full size then change s400 to s1600 . The image will appear in its original size.

Now this is how I store all my images and get their unique URLs. This way you will never loose images. By adding such image URLs to your blogger templates, you will observe a significant decrease in the load time of your blog.

I will publish a detailed post tomorrow on how to reduce Blog Load time. Make sure you don’t miss it.


Respected Readers:
As a 20 year old student, the only income I rely on is my pocket money. Bearing the running costs of MBT Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter

8 comments:

chinna on 6:00 PM, November 04, 2009 said...

hello what about my blogger header split into two sections in your MBT Church theme
regards:-jayarajyadav.blogspot.com

Mohammad Mustafa Ahmedzai on 12:56 AM, November 05, 2009 said...

@China

Out of my busy schedule I was only able to get that comment bubble work with your blog.
The tutorial had a wrong CSS code that made the bubble align to the left rather to the right. I managed to fix the code.

This what you need to do,
1. Inside your template paste the code below just above ]]></b:skin>

.comment-link {
margin-left:.6em;
}

.post-comment-link {
float : right;
width : 48px;
height : 48px;
font-size : 18px;
margin-top : -12px;
text-align : center;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
margin-right : 2px;
}

2. Now search for
.post h3 {
margin: 0 0 5px;
padding-bottom:5px;
background:url(http://www.kriesi.at/demos/reflect/images/border.jpg) repeat-x bottom;
}
And change padding-bottom value to 20px.

3. Now save and backup your template

4. Now search for <h3 class='post-title entry-title'> and just after it paste the code below,
<b:if cond='data:post.allowComments'>
<a class='post-comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

5. Then search for <span class='comment-link'>
Delete all the code that looks like the one below,
<span class='comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Now Save your template and enjoy the new look!

kajarangithan on 1:33 AM, November 05, 2009 said...

you every artical is very usefull for me i like your blog

kajarangithan on 1:36 AM, November 05, 2009 said...

keep writting

Mohammad Mustafa Ahmedzai on 5:13 PM, November 05, 2009 said...

@kajarangithan

You welcome :>

chinna on 6:19 PM, November 05, 2009 said...

thanks for Ur help i am grateful to u
please consider my request for header splitter to two sections
thank uuuuuuuuuuuuuuuuuuuuuuu

Mohammad Mustafa Ahmedzai on 7:14 PM, November 05, 2009 said...

@Chinna

I would do that after my next post release. I hope You understand.

Joe on 7:16 PM, November 05, 2009 said...

Mohammad that is a wonderful tip. Thanks dude it was extremely useful. Hats off to you!

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:-
1. Please do not spam Spam comments will be deleted immediately upon my review.
2. For asking Off-Topic questions please comment on this page -> Blogger Help

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

229 Followers

Join The Team!

Licensed Under CC

Creative Commons License

Recent Comments

Follow Me On Twitter

| My Blogger Tricks (MBT) © 2009. All Rights Reserved | Template Style by Mohammad Mustafa Ahmedzai |