Create Blogger Backup For Images And Get Image URLs
Go to this link: http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html
Many bloggers including some professional ones suggest to store Blogger images on services likewww.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,
- 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
- Once the images are displayed below the draft post, simply right click on your desired image and then choose “Copy Image Location”
- Now paste this Image URL inside your Browser Address bar,
- Your Image URL will look something like the one below,
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.http://4.bp.blogspot.com/_7wIwo/Spr1Lxjk6I/AABu0/uS0zY4/s400/MyBloggerTricks.jpg
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.
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!
Related Tricks:
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 »
SUBSCRIBE NOW!
TAKE A BREAK
BACK AT HOME
4/8
Presentation on Blogging - Developers Day 2011
- Facebook Video Calling: How To Set Up & Start a Video Call?
- Count Characters In Post Titles & Meta Description
- Disable Facebook Timeline App
- Can't Undo Facebook Timeline? Know Why
- Add Facebook Comments Box To Blogger Blogs - New!
- How to Join Google Plus? and Who Can Join It?
- Create a Drop Down Menu In Blogger
- Create Free Email address Using Your Website Domain with Google Apps
- Create Floating Bar For Pinterest & Other Sharing Buttons
- Add Twitter To Google Plus: Send & Receive Tweets
WIDGETS
- Mashable Subscribe Boxv1, v2
- Facebook popup v1, v2,v3
- Floating Sharing 1, 2,3,4
- Sharing Below Titles 1,2,3, 4, 5, 6 , 7
- Touch Me, Flipper
- Sharing at Post Bottom1, 2, 3,
- You like this story? 1, 2
- jQuery Sliders, slidehsow1, 2, 3, 4
- Three Column Footer 1,2
- Contact Form with upload option
- Featured Posts with thumbnails
- Fluid Text Resizer, Skins
- Announcement widget
- Thumbs up, star rating
- Multi Tabs Widget 1, 2,3
- Subscription Box (advanced) 1, 2, 3, 4, 5,6, 7, 8, 9, 10
- Read More Buttons
- StickyBar 1, 2, 3, 4, 5
- Block Quotes 1, 2, 3
- Syntax Highlighter ,themes
- Music Player 1, 2, 3, 4
- Random Banners 125 X125, 468 X 60
- Back To Top Button v1,v2
- Floating Feedback buttons
- Google Search Box A-Z
- Display Author Box 1, 2
- Author Picture in titles
- Custom Counters
- Expand/Collapse comment Box
- Customize comment Box
- Menu From labels
- Menu From Pages
- Threaded comments
- Reply Button
- Table of Contents
- Recommended Slides Widget
- Popular Posts , rotating
- Feedburner Recent Comments, Posts, Tricks 1, 2
- Related Posts Thumbnails
- Flying Twitter Bird
- 404 Error Page
- Paypal donate Box
- Count Down Widget
- Track Downloads
PLUGINS
SUPPORT US
If our Tutorials have helped you a little, then kindly spread our voice using the badge below:-
or try a Beautiful Banner
.jpg "Ana Laura"){kind=small}
25 comments:
regards:-jayarajyadav.blogspot.com
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 != "item"'>
<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!
You welcome :>
please consider my request for header splitter to two sections
thank uuuuuuuuuuuuuuuuuuuuuuu
I would do that after my next post release. I hope You understand.
http://4.bp.blogspot.com/_7wIwo/Spr1Lxjk6I/AABu0/uS0zY4/s400/MyBloggerTricks.jpg ...
Just del nominal to be .... http://4.bp.blogspot.com/_7wIwo/Spr1Lxjk6I/AABu0/uS0zY4/....MyBloggerTricks.jpg....
that's for all size
At the time when I published this post there was no storage limit but now there is a 1GB limit.
Anyways 1 GB still means unlimited =D
this is really help me...
ThaNk!!
Go to my blog and help me to make my blog being Nice..
Thank you!
Thanks
I use Windows Live Writer and it does the job automatically. I simply add the image to live writer and it uploads it to blogger when the post is published. Else you can use the following code for making the image to appear,
<img border="0" src="Image URL"/>
For Window live writer read: http://www.mybloggertricks.com/2011/05/use-windows-live-writer-kick-blogger.html
according to me we should live it and not apply. what say you mustaffah?
http://studytipsandtricks.blogspot.in
and if i upload through image uploader from blogger it is not showing plz help my website is http://www.bhartinaukri.in
i hav also write on blogger help http://support.google.com/blogger/bin/answer.py?hl=en&answer=42528
but it not help
Regards,
Admin of manual article submission
Click Here To add Comment