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 Remove Showing Posts With Label in Blogger

For any default Blogger layout, the "Showing posts with label" message shows up above the posts whenever you click on a label link. As its a pretty useless and annoying message, many people like to have it removed. If that is your wish, just follow the tutorial below:

Removing "Showing post with label...show all posts"

Step 1. Go to Dashboard - Template - Edit HTML (if necessary, click on Proceed button)

Step 2. Click somewhere inside the template code, then search - using CTRL+F - this code:

<b:includable id=status-message>

After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Screenshot:

Step 3. Below is this code that you need to remove - along with the first one, as well:

     <b:includable id=status-message>
      <b:if cond=data:navMessage>
      <div class=status-msg-wrap>
        <div class=status-msg-body>
          <data:navMessage/>
        </div>
        <div class=status-msg-border>
          <div class=status-msg-bg>
            <div class=status-msg-hidden><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style=clear: both;/>
      </b:if>
    </b:includable>

Screenshot 

 Step 4. Replace it with this one:

<b:includable id=status-message>
<b:if cond=data:navMessage>
<div>
</div>
<div style=clear: both;/>
</b:if>
</b:includable>

Step 5. Save the template. Now view your blog and click on some label....there should be no box anymore.

Read More..

Tutorial portable with NSIS

A little Tutorial trying to explain how to compile launchers for portable with NSIS.

Post your questions here.

Tutorial mirror



Thanks to KursadOlmez and Anthony for hosting.



Portable Total Uninstall 4.10 Multilingual 1.4 MB

Read More..

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond=data:blog.pageType == &quot;item&quot;>
<style type=text/css>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type=text/javascript>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0vxfF_MHiz0EAzpTG1YQixKwB59uz7_mP_MWYoDhk20SZOa0i2aA11Gu7OjaK8Rw-j3J4VRyQCDFFgpahsQgs259cpN-pZ5cScdyYJZZYBRVYCtZOMQuLrltQMQELHd6T9kEowCBiYFb/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src=http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js type=text/javascript/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

    <div class=post-footer>

Step 6. And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond=data:blog.pageType == &quot;item&quot;>
<div id=related-posts>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != &quot;true&quot;>
</b:if>
<script expr:src=&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot; type=text/javascript/></b:loop>
<script type=text/javascript>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style=clear:both/>
<!-- remove --></b:if>
<b:if cond=data:blog.url == data:blog.homepageUrl><b:if cond=data:post.isFirstPost>
<a href=http://helplogger.blogspot.com><img alt=Blogger Tricks src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHMb73o1xO9ntaU5T8CgV3v8rrA8McU_jR0N-Xy8inCvEy9LoLCuZeYeIe9XNBQuFzEDzHUwm2sQ2fwzO54CZQoBngYe9EGWG6BMOEoaaDE_2lUVgXb4fn9x6FNE9q5u06k2Mj6Kw890ai/s1600/best+blogger+tips.png/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

Read More..

FileZilla 3 7 3 Multilingual

Fast and reliable cross-platform FTP, FTPS and SFTP client without installation.

Download Portable FileZilla MultiVersion Online (0.5 MB)

In first screen enter: 3.7.3

Extract and run FileZillaPortable.

Language of installer: English, Arabic, Bulgarian, Catalan, Czech, Danish, German, Greek, Spanish, Estonian, Basque, Finnish, French, Galician, Hebrew, Hungarian, Italian, Japanese, Korean, Kurdish, Lithuanian, Macedonian, Norwegian, Dutch, NorwegianNynorsk, Polish, PortugueseBR, Portuguese, Romanian, Russian, Slovak, Slovenian, Swedish, Thai, Turkish, Ukrainian, SimpChinese, TradChinese.

Settings created in Data, drive letter of portable path updated.

Settings of installed FileZilla should be preserved.

Read More..

How to put Adsense ads on Blogger Blogspot

If you want to earn money from your site/blog, Google Adsense is the most popular service to monetize your blog or website content. When implemented, Adsense will display targeted Google ads on your blog and they can generate revenue on either a per-click or per-impression basis.
Of course, to display ads on your site, you should first Sign Up to Google Adsense program.


Before adding your ads, keep in mind that Adsense allows only up to 3 ad units, 3 link units and 2 search boxes per page.

In this tutorial i will show you the three ways you can add Adsense ads to your blog.

1. Adsense Gadget

Use this method to add ad unit as a widget, in places outside the blog post area. You can position it by simply dragging it in Page Elements, just like any other widget. To add the Adsense Gadget, go to:

1. Blogger Dashboard >> Design >> Page Elements >> click on the "Add a Gadget" link
2. From the pop-up window, select AdSense Gadget:

3. Configure ad format and colors.
4. Click Save and youre done.

2. Inline Ads

This will display an ad unit at the end of each post. To show ads between posts:

1. Go to Design > Page Elements and click the Edit link in Blog Posts gadget box.

2. Check the "Show Ads Between Posts" box.

3. Configure ad frequency, ad format, and colors. Live preview is provided beneath the settings.
4. Click Save.

3. Adsense code

The most notable benefits of using this method are:

• You can place ad anywhere in your blog
• You can add the code anywhere in your blog template - in your post content or page.
• To find out which format perform the best, custom channels will help you to track the performance of specific groups of ad units.
• You can choose types other than ad unit i.e. link unit, search box.

To create an ad unit:
1. Go to Google Adsense website.
2. Click on My ads tab, go to Ad units and then press on the "New ad unit" button.

3. Choose your ad type, choose format and colors and assign channels.
4. When you have finished editing, click on the Save and get code >> button and copy the code provided.

To add an ad unit to your blog, you have the following options:

• Paste the code in a HTML/Javascript gadget
• Paste the code in a blog post or page, or
• Paste the code direct in your template. (if you choose this option, first you should convert adsense ad code)

If you have any more questions, leave a comment below.

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..