How to insert Banner Link to your Blog in each Post. ~ The Blog Doctor.
Loading...

How to insert Banner Link to your Blog in each Post.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

To Insert a Banner Link to your blog you must first...............

have a banner ready. You can create your own banner in an image editing program like I have done or go to an online banner generator. To find an online banner generator just type 'free banner generator' in Google's Search Box and hit Enter.

Once you have made a banner upload it to a free host like GooglePages. At present GooglePages offers 100 MB free space for hosting your files. After uploading it copy the Url of the image.

You can even upload the banner picture to Blogger. To do this click on Create Post and click on the Add Image icon in the top frame of the Post Editor.

NOTE :THE ONLY FILE YOU CAN UPLOAD TO BLOGGER IS A IMAGE FILE.
Choose the picture in your PC by browsing to it and upload it to the post. Now click the Edit Html tab in the top frame of the Post Editor. There you will see the code for the picture which will look like this :


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s1600-h/PIC_NAME.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s400/PIC_NAME.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5005503282919547810" /></a>



You can extract the URL of the picture from the above code like this :

http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s400/PIC_NAME.jpg


Copy this and use it later. You can now save this post as a draft so that it is not seen by viewers.

Log in to Dashboard of your blog and click on Layout. Click on Edit Html tab next to Page Elements tab below the Template tab. Do not put a check in the Expand Widget templates box. Scroll down in the Edit Template text box till you come to :

<div id='main-wrapper'>
<b:section class='main' id='main'>

Replace the second line above with this line :

<b:section class='main' id='main' showaddelement='yes'>

Save Template. Click on Page Elements tab. On Page Elements view you will now see a link to Add Page Elements has been added to the Blog Posts section.
CHOOSE TEXT PAGE ELEMENT TO CREATE A PERMANENT MESSAGE ON TOP OF YOUR POSTS.
Click on this link and a popup window will open with 12 choices. Choose the Html/Javascript option. DO NOT choose the picture option because that will only add a banner and not a banner-link. In the content section of the Add Html/Javascript window add the following code :

<a href="http://MYBLOG.blogspot.com"><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a>

Substitute MYBLOG with name of your blog, URL OF YOUR BANNER AT GOOGLEPAGES with the link of your banner you uploaded to Googlepages in Step 2 and YOUR BLOG TITLE with the title of your blog. Save Changes. Refresh Cache. View Blog.

See the banner I have created at the top of this post.

Technorati Tags:,

11 comments:

Doug DeLune said...

So. I just started my blog and have never used beta. things have changed a little. Should I try to use the older version. Also, I put in some code that randomizes the banner from a list of 4. Any thoughts?

vin said...

Doug,
I have news for you!
You are already in beta/New Blogger with one of the new layouts.
Nice rotating banner btw.

Alan Bacchus said...

Hi. This is great.

I have added my banner, but i want it to link to another site. This I have done. But is there a way for the link to open in a NEW window??

my site is www.dailyfilmdose.com

vin said...

Alan,
Add target="_blank" to the link code like this :
<a href="http://MYBLOG.blogspot.com" target="_blank"><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a>

Michael Bass said...

I have been able to "Add a Page Element" the size of the Header element, but it is always located above (closer to the top of the screen) the header section.

How can I get it below the header, just on top of the left and right columns?

Michael

vin said...

Michael,
Change maxwidgets to 3 or more in the header code and save the template. Then on page Elements tab drag and drop it to below the header. For any difficulties you can email me direct. The address is in left column.

Devilbluedress said...

Wow! This looks like just what I'm looking for. I can't believe that I'm completely out of time though... It will have to wait. That's OK. You are now on my template and easy to find again!

Souheila said...

Hi!
thank you very very++much
for the helpful informations.
Good luck!

Deepak said...

I had like this and created a blog called Add Blog Banner.Here you can place your site or blog banners for free.Take a look.

Ravi said...

Hi,
This post as well as the replies to comments was of great help in building my blog. Thank you.
Please post a code for multiple banners in a single post, so that each banner space has a number of banners rotating in it.

Thanks once again.

Ziggy said...

Great post. It wasn't exactly what I was looking for, but it will be very useful in the future.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.