Upload images and get the URL of the image

As each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as how we could get the URL of an image?

On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.

The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.

A pop-up window will open, then click on the Choose files button, browse for your image(s), double click or click on Open and then hit Add selected.

When you have uploaded you will see that in the post editor shows the code of the image.

That code is the URL of the image. Youll see two URLs (Web addresses):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhPOjPHpZImwdVZp1un8IWHzEN7i6mFv_A2LjuETMWrJDbzJjLF7pC_hD8d7Np4wNc8dJF1RXzhyi5DLSFvgMwV3xtXbnDmlm_Zvh6P9DNQLB7GcAkDmWbLL4NFMBFJy5erbboLkjJSnM/s1600/Bliss-Windows-XP.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhPOjPHpZImwdVZp1un8IWHzEN7i6mFv_A2LjuETMWrJDbzJjLF7pC_hD8d7Np4wNc8dJF1RXzhyi5DLSFvgMwV3xtXbnDmlm_Zvh6P9DNQLB7GcAkDmWbLL4NFMBFJy5erbboLkjJSnM/s320/Bliss-Windows-XP.png" /></a>

The first is the URL of the image that you need to take. It is not necessary to publish this entry where you uploaded the picture, you could as well not publish it, leave it as a draft or delete it, the image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the image to remove). You could also upload image directly from Picasa. Just login to PicasaWeb, select the album where you want to host the image, and click on Add photos.

Select the image from your computer and upload it.

After we have uploaded, click on OK.

There you will see the thumbnail, along with other photos, if there are more.

If you want to get the URL of the image from Picasa then click on the image to open in full size.
With the right mouse button click on the picture and select option depending on the browser you use...

If using Google Chrome, then select Copy Image URL:

If you are using Mozilla Firefox select Copy Image Location:

If you are using Opera select Copy Image URL:

If you are using Safari select Copy Image Address:

If you are using Internet Explorer (I hope not), first select Properties, a window will open, there you will find the Address section from where you can select the URL of the image and copy it:

Having selected any of these options youll have in the clipboard the URL of the image. Simple isnt it?

Remember that all images you upload on Blogger are stored in your Picasa account, so if you find an image previously uploaded to your blog, go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The procedure to obtain the URL of the image is the same as explained above.

Read More..

How to Add Different Background Color or Image in Each Blogger Post

When you have multiple authors on a blog and want to make a specific post stand-out, then you can change your posts background color or place a background image behind them, each time is needed. Therefore, this tutorial will show you how to style each post differently by adding some codes in your Blogger posts. (this wont take effect if you have the read more function enabled on your blog)

 Demo

How to Change the Color of the Post Background

When you create a post, switch to HTML, near the Compose tab and add the following code just at the beginning and at the end of your post content.

<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

</div>

• add the red line at the BEGINNING of your post.
• add the div tag in blue at the END of your post.
• replace the part in green with your own color (search for colors hex value)
• "Your text here...." is where the Post content goes

Its done by wrapping your Post content into a "div" element. You can apply this setting anytime to your already published posts as well or you can change/remove it later.

Heres the example of the placed code in the Post Edit box:

How to Add a Background Image in a Blogger Post

Add the following code just at the beginning and end of your post content.

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

</div>

• in green, you need to paste the URL address of your hosted picture (use Photobucket, Tinypic etc.)
• the red line has to be added at the beginning of your post.
• the blue part has to be added where your post ends.
• "Your text here...." is where your Post content should be

Now click Publish and you are done.

Read More..

FastStone Image Viewer 4 8 Multilingual

Powerful and Intuitive Photo Viewer, Editor and Batch Converter without installation.

Download Portable FSViewer Online (0.4 MB)

Extract and run FSViewerPortable.

Settings kept in Data.

Settings of installed FSViewer should be preserved.

Read More..

Replace Older Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.

What we can do:

A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links

So lets start customizing them...

1. Log in to your Blogger Dashboard, go to Template > Edit HTML

2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:

    <b:if cond=data:newerPageUrl>
      <span id=blog-pager-newer-link>
      <a class=blog-pager-newer-link expr:href=data:newerPageUrl expr:id=data:widget.instanceId + &quot;_blog-pager-newer-link&quot; expr:title=data:newerPageTitle><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond=data:olderPageUrl>
      <span id=blog-pager-older-link>
      <a class=blog-pager-older-link expr:href=data:olderPageUrl expr:id=data:widget.instanceId + &quot;_blog-pager-older-link&quot; expr:title=data:olderPageTitle><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class=home-link expr:href=data:blog.homepageUrl><data:homeMsg/></a>

Or find in this code the following fragments which corresponds to each page links

• <data:newerPageTitle/> represents Newer Posts link
• <data:olderPageTitle/> represents Older Posts link
• <data:homeMsg/> represents Home link

Now change these fragments of codes as it follows:

A. Change the text of Newer Posts, Older Posts and Home Links

You need to REPLACE following parts in original code with ANY TEXT you like:

• replace <data:newerPageTitle/> with, for example NEXT POST 
• replace <data:olderPageTitle/> with, for example PREVIOUS POST
• replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

B. Place a picture beside Newer Posts, Older Posts and Home links

Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>

So it should look like this:

<img src="URL Address"/><data:newerPageTitle/>

Note: Replace URL Address text with the url address of the image you want to appear

C. Replace Older Posts, Newer Posts and Home links with an image/picture

You can place any kind of picture you want All you have to do is use this code for the pic:

<img src="URL ADDRESS"/>

...just replace URL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code

• replace <data:newerPageTitle/> with the pic for newer (next) posts
• replace <data:olderPageTitle/> with the pic for older (previous) posts
• replace <data:homeMsg/> (only the first one) with the pic for homepage

Screenshot

3. Thats it! Preview and Save the Template.

Read More..

How to add an image next to Blogger Post Title

It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above.

Show Image Icon before Blogger Post Title

Step 1:

First thing first you have to do is to prepare an image. After that youll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You dont want to see a huge image next to your post title.

Step 2: Go to Dashboard - Template - Edit HTML - Proceed if needed

Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code:

<b:includable id=post var=post>

Step 4. After you found it, click on the left arrow next to it to expand the widgets code

Step 5. Then delete it until you reach to <div class=post-header>:

              <b:includable id=post var=post>
  <div class=post hentry itemprop=blogPost itemscope=itemscope itemtype=http://schema.org/BlogPosting>
    <b:if cond=data:post.firstImageUrl>
      <meta expr:content=data:post.firstImageUrl itemprop=image_url/>
    </b:if>
    <meta expr:content=data:blog.blogId itemprop=blogId/>
    <meta expr:content=data:post.id itemprop=postId/>

    <a expr:name=data:post.id/>
    <b:if cond=data:post.title>
      <h3 class=post-title entry-title itemprop=name>
      <b:if cond=data:post.link>
        <a expr:href=data:post.link><data:post.title/></a>
      <b:else/>
        <b:if cond=data:post.url>
          <b:if cond=data:blog.url != data:post.url>
            <a expr:href=data:post.url><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

The code to be deleted:

Step 6:

Paste the following code in the place of the deleted code in Step 5:

<b:includable id=post var=post>
  <div class=post hentry itemprop=blogPost itemscope=itemscope itemtype=http://schema.org/BlogPosting>
    <b:if cond=data:post.firstImageUrl>
      <meta expr:content=data:post.firstImageUrl itemprop=image_url/>
    </b:if>
    <meta expr:content=data:blog.blogId itemprop=blogId/>
    <meta expr:content=data:post.id itemprop=postId/>

    <a expr:name=data:post.id/>
    <b:if cond=data:post.title>
      <table><tr>
        <td class=posttitle>
           <img src=IMAGE-URL/></td>
        <td><h3 class=post-title entry-title itemprop=name>
      <b:if cond=data:post.link>
        <a expr:href=data:post.link><data:post.title/></a>
      <b:else/>
        <b:if cond=data:post.url>
          <b:if cond=data:blog.url != data:post.url>
            <a expr:href=data:post.url><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
        </td>
        </tr></table>
     
      <style>
        h3.post-title {
          margin: 0px !important;
        }
      </style>
   
    </b:if>

Step 7:

Replace the IMAGE-URL text in blue color from above with the URL address of your image (the one that youve gotten from Step 1).

Step 8: Save the Template and thats it! Enjoy :)

Read More..

Burn image Files

How to Burn image Files with Nero?

1. Install Nero.

2. Insert Blank CD.

3. Open it, choose what is the storage type you gonna use to burn the image, or is a CD or a DVD.

4. Go to Copy and Backup > Burn Image to Disc.

5. Choose the image you want to burn > Next.

6. Done.

Read More..