Creating a Picture Link in Blogger Posts

You can also create picture link so that when a user clicks an image in your post, a new blog or a website will open. By default, when you upload a picture, it is linked to itself. For example, I've uploaded the following image, click it to see what happens:



So by default this image is linked to itself. If you've clicked it, you would have seen that same image is opened in the same tab. So, we'll change this image link.

Creating an Image Link in New Post Editor

To change the image link, please switch to the 'Edit HTML' tab of your post editor.



You'll see that there is no image there. Instead, there will be only code. Actually, this code is the HTML of our image. 'Compose' mode shows us the compiled HTML and 'Edit HTML' mode shows the raw HTML code. Anyways, now we'll do a little bit of editing.

This is the code for the above uploaded image.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMR85XkpkNAK-gsrgIa3MPT8hPSkmaXRCn6sHnhDVeNSqzm79Shx1X9f1E4jqLDQrvbBI35YzIrY2tjAV3rx5LwETWQfpbm9YxSB_w8IRfDvH_goKkelQydRCzC17CffW9AzHRX6JvTdrC/s1600/1330057_flower.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMR85XkpkNAK-gsrgIa3MPT8hPSkmaXRCn6sHnhDVeNSqzm79Shx1X9f1E4jqLDQrvbBI35YzIrY2tjAV3rx5LwETWQfpbm9YxSB_w8IRfDvH_goKkelQydRCzC17CffW9AzHRX6JvTdrC/s400/1330057_flower.jpg" /></a></div>

Please note that there will be 2 addresses or URLs in the uploaded image. For my image, these are the URLs.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMR85XkpkNAK-gsrgIa3MPT8hPSkmaXRCn6sHnhDVeNSqzm79Shx1X9f1E4jqLDQrvbBI35YzIrY2tjAV3rx5LwETWQfpbm9YxSB_w8IRfDvH_goKkelQydRCzC17CffW9AzHRX6JvTdrC/s1600/1330057_flower.jpg

&

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMR85XkpkNAK-gsrgIa3MPT8hPSkmaXRCn6sHnhDVeNSqzm79Shx1X9f1E4jqLDQrvbBI35YzIrY2tjAV3rx5LwETWQfpbm9YxSB_w8IRfDvH_goKkelQydRCzC17CffW9AzHRX6JvTdrC/s400/1330057_flower.jpg

There is only 1 difference in the image URLs which is s1600 and s400. First URL with s1600 is actually the link URL. It is responsible for making this image a link. Second URL with s400 is the source URL. It displays the image.

As I've already told you that, by default, the image is linked to itself. So we need to change the first URL in our image code. For example, if I want to link the above uploaded image to my blog's homepage which is http://www.betatemplates.com/. I'll only replace my blog homepage URL with the first URL in the image code. After that, the image code will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMR85XkpkNAK-gsrgIa3MPT8hPSkmaXRCn6sHnhDVeNSqzm79Shx1X9f1E4jqLDQrvbBI35YzIrY2tjAV3rx5LwETWQfpbm9YxSB_w8IRfDvH_goKkelQydRCzC17CffW9AzHRX6JvTdrC/s400/1330057_flower.jpg" /></a></div>

As you can see that I've only changed the first URL. Second URL is still an image. Now, if you'll click the following image, it will take you to my homepage.

Make Image Link Open in a New Window or Tab

If you're linking your image to some other blog or website then it is pretty desirable to make it open in a new window or tab. By doing this, visitors will stay on your blog.

To do this, I'll just add target="_blank" in the image code just after the link address. The code will look like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMR85XkpkNAK-gsrgIa3MPT8hPSkmaXRCn6sHnhDVeNSqzm79Shx1X9f1E4jqLDQrvbBI35YzIrY2tjAV3rx5LwETWQfpbm9YxSB_w8IRfDvH_goKkelQydRCzC17CffW9AzHRX6JvTdrC/s400/1330057_flower.jpg" /></a></div>

And the image will look same. However, now it will open in a new window or tab.

How to Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer

Blogger officially supports 'after the jump' summaries. You can insert a jump break anywhere in a post to make it short on the blog homepage. The part after the jump break will be visible only when user will click on the Jump Break or Read More link. In this tutorial, we'll add some coding in the template HTML. After that, you'd be able to change the font, color or even the background color of the Jump Break or Read More from the Template Designer.

Please don't use this tutorial on your blog if you're not using 'Simple' Blogger template, otherwise you might get an error!

This tutorial is also available in video form at my YouTube channel:
http://www.youtube.com/user/BloggerEngineer

What is Jump Break or Read More Link?

If you don't know anything about Jump Break or Read More links, please read the following article in the official Blogger help.

Creating 'After the jump' summaries

Steps

Follow these simple steps to complete this Blogspot tutorial.

1. Log in to your Blogger account.
2. Open 'Design' tab then 'Edit HTML' tab.
3. Scroll down a bit and you'll see this code:
   

   /* Variable definitions
   ====================

   Tip: Windows users can press 'Ctrl + f' to fing the code.
4. Replace the above code with the following code:
   

   /* Variable definitions
   ====================
   
   <Group description="Read More" selector=".jump-link">
   <Variable name="rm.font" description="Font" type="font"
   default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
   <Variable name="rm.color" description="Color" type="color"
   default="#f9f9f9" value="#eeeeee"/>
   <Variable name="rm.h.color" description="Hover Color" type="color" default="#eeeeee" value="#eeeeee"/>
   </Group>
   
   <Group description="Read More Background" selector=".jump-link">
   <Variable name="rm.bg.color" description="Color [www.betatemplates.com]" type="color"
   default="#000000" value="#000000"/>
   </Group>

5. After that, find ]]></b:skin> and replace it with the following code:
   

   .jump-link { float: right; font: $(rm.font); background: $(rm.bg.color); }
   .jump-link a, .jump-link a:visited { color: $(rm.color); }
   .jump-link a:hover { color: $(rm.h.color); }
   ]]></b:skin>

6. Now, save your template.
7. After saving template, open the 'Template Designer'.
8. In 'Template Designer', expand the Advanced tab and you'll see 'Read More' and 'Read More Background' tabs at the top.
   
   
   
9. You can change the font, color and background color and instantly see the preview. However, change in 'Hover Color' can't be previewed instantly. You'd have to open the blog and bring your mouse over the Jump Break or Read More link to see the 'Hover Color' effect.
10. After customizing the Jump Break or Read More link, click 'APPLY TO BLOG' link to save your changes.

How to Post Links in Comments

Let's get started

Ever wondered how to post links in Blogger comments??? Let me tell you a very simple way to do that. A basic HTML link is like this:

<a href="URL">Title</a>

You need to post the above code in the comment box and then all you need to do is to replace "URL" with the URL of the site you want to link to and "Title" with the title of your link.

A Simple Example!

I want to link to "http://www.blogger.com/" with title "Blogger". The code which I'll put in the comment box, will be:

<a href="http://www.blogger.com/">Blogger</a>

Final Words!

Well, it was a simple tutorial regarding Blogger. There are a lot of things for you to discover in Blogger. I encourage to see other sections of this blog for more useful info.

How to Customize 'Older Posts' & 'Newer Posts' Links

In this tutorial, I'll explain how you can customize or change "Older Posts" and "Newer Posts" links which are present at the bottom of your blog posts. By default, these links are just simple text and most of the users won't even notice that these are actually navigation links. However, we can simply add some spicy CSS (?) or replace these links with beautiful icons.

Important things first!

Before moving on, let me tell you that I'll be using Minima template during this tutorial. If you don't have Minima installed, you can simply install it by going to Layout tab then Pick New Template tab and chose Minima from there.

As we'll be making changes in the template HTML, so it would be better to backup your current layout just in case (?).

Find & Change the Default Styling Code for "Older Posts" & "Newer Posts"

We need to find & change the default code which is responsible for the appearance of blog navigation links. First of all, find the following code from the Layout -> Edit HTML tab:

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

This CSS code is responsible for the style and look of navigation links so just replace the above code with the following:

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
font: $navfont;
}

#blog-pager a, #blog-pager a:visited {
color: $navcolor;
background: $navbgcolor;
padding: 5px;
}

#blog-pager a:hover {
color: $navhovercolor;
background: $navhoverbgcolor;
padding: 5px;
}

Make Navigation Links Customizable Through Fonts & Colors Tab

To edit the links through Fonts and Colors tab, we need to do some more coding work. Don't worry, for you, it will be only copy-paste stuff. Now, in Edit HTML tab, scroll down a little and you'll see some code like this:

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">

Please note that I'm not displaying the full code, this is just to give you an idea. Alright, now you have to put the following code in the above mentioned code [View Screen Shot]:

<Variable name="navcolor" description="Links Text Color"
type="color" default="#fff" value="#ffffff">
<Variable name="navhovercolor" description="Links Text Hover Color"
type="color" default="#000" value="#000000">
<Variable name="navbgcolor" description="Links Background Color"
type="color" default="#FE6602" value="#FE6602">
<Variable name="navhoverbgcolor" description="Links Background Hover Color"
type="color" default="#FFD25F" value="#FFD25F">
<Variable name="navfont" description="Links Font"
type="font"
default="normal normal 15px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 15px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

Save your template and resulting code in Edit HTML tab would look something like this [View Screen Shot]!

So, now coding time is over and you can simply go to the Fonts and Colors tab and start editing the "Older Posts" & "Newer Posts" links. You'll find them at the top of the list there.

Links Text Color

It will only change the color of all the navigation links and you'll be able to see the preview instantly.

Links Text Hover Color

This setting represents the color of the links when mouse comes over the link otherwise known as hover effect. You won't see the preview of this setting. To see the result, you'd have to save changes and then see the blog in real time.

Links Background Color

This is the background color of the links in normal state and it can be seen instantly in preview mode.

Links Background Hover Color

Again, this is the background color only when mouse comes over the link and you'd have to save and then see the template to see the result.

Links Font

It will allow you to modify the font of navigation links.

Change the "Older Posts" & "Newer Posts" Text

You can also change the text and replace it with something else like Next & Previous. Before moving on make sure you check Expand Widget Templates.

Change "Older Posts"

Find <data:olderPageTitle/> and replace it with something else like Previous or Previous Page. This text is actually "Older Posts".

Change "Newer Posts"

Find <data:newerPageTitle/> and replace it with some other text like Next or Next Page. This text actually prints "Newer Posts".

Final Words

I've tried my best to explain everything I know in the easiest possible way. This tutorial is free and helpful so please help promoting it by sharing it with friends, commenting here, linking to this tutorial page or main page. If you need any kind of help regarding Blogger, feel free to ask.