Windows Live Writer is a client software used to post to blogs on various platforms directly without using a web browser. Here wre the advantages of using it for creating posts on your blog................ 1. It is free. You can download it here. 2. Insert tables without coding : 3. Make image gallery easily by inserting images in tables : 4. Customize hyperlinks to open in new window and add nofollow and title tags to it without coding it in the html for the link : 5. Post to multiple blogs. 6. Save bandwidth by publishing post once only instead of continuously saving posts as you make them in a web browser Post Editor. 7. Add Technorati/ Delicious/Flickr/Live Journal/Ice Rocket etc Tags to posts. 8. Add Labels in Blogger or Categories in Wordpress using the post properties toolbar below the main Writer window. 9. Insert Maps/Videos/pictures in post 10. Set the publish date for the post 11. Publish Post as draft or as a post directly 12. Ping as soon as post is published. Go to Tools---->Options----->Ping Servers and copy the URLs below and paste them in the box and save : http://ping.feedburner.google.com/ 13. It has plugins to enable you to add more functionality. Be careful of third party plugins. 14. Makes you more productive. You can add more posts and also create your posts offline as soon as ideas strike you. 15. Can be used to publish posts to private blogs also. If by some reason your posts got deleted you can republish them from the copy in Windows Live Writer.
A table made with Windows Live Writer .
Photo by MousyBoyWithGlasses. Photo by Pier Biter.
http://rpc.pingomatic.com/
http://blogsearch.google.com/ping/RPC2
http://www.bloglines.com/ping
15 Reasons to Use Windows Live Writer for Posting to Blogger. |
50 Types of Links for Bloggers and How to Make Them. |
Links, Links and More Links! Successful Blogging is all about creating links and getting linked to.
A link is a connection from one Web resource to another. It consists of a "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video
clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).
Here are the 50 types of links we have seen so far along with the methods used to construct them................
1. Outgoing Links : These are links created by you in your blog to other sites and blogs. You need to be careful in not putting too many outgoing links in your blog lest it becomes a "Link Farm"!!
2. Incoming Links : also called Backlinks are links to your blog or your blog posts created on other sites or blogs. These are valuable because they reference your blog and contribute to your blog's Page Rank. You do not have much control over them unless you take part in a reciprocal link exchange.
3. Internal Links : These are links to pages within your site or blog.
4. Navigation Links : These are links constructed by you on the Main Page (usually in the Header) linking to important pages like "About Me', 'Contact', 'Home', 'Disclaimer'.......etc.
5. Image Links : These are images linking to other sites/blogs. These links can be optimized for the search engines by putting important keywords in their ALT tag. Do not however stuff too many keywords in there.
6. Anchor links : These serve to quickly take the viewer to another part of the same or another page.
7. Skip to Top Links : These are links placed on a long Main Page to quickly return the viewer to the top of the page. At the top of your blog in your header create a Html page element and paste the following code in it :
<a name="top" href="http://MYBLOG.blogspot.com/">
Replace the CAPS with actual blog name. Then go to Template---->Edit Html and put a check in Expand Widgets Template box.
Scroll down till this code :
<p class='post-footer-line post-footer-line-3'/>
and paste the following code :
<a href="#top">Skip to top</a>
Save Template.
8. Email Links : When clicked on these links open the Compose Mail page to send mail.
9. Feed Links : These are links to your blog feeds which enable viewers to subscribe to your blog.
10. No-Follow Links : These are links which instruct the spiders of the search engines not to follow them. This prevents the Google Juice from leeching out of your blog. These type of links are found in Blog Comments and serve as a deterrent to would be spammers.
11. NO-NoFollow Links : You can say NO to the above No-Follow link and share the Link Love with your fellow Bloggers. This encourages viewers to comment on your blog. You can comment on blogs with the NoFollow tag and put your links there.
12. Banner Links : These are image links where the image is a Banner. You can exchange banner links with other blogs.
13. Button Links : These are image links where the image is a button. One example are the small orange RSS buttons you see on sites which are links to the site feed.
14. Affiliate Links : These are links where you will receive a commission on purchases made on the destination site or will be paid a predetermined sum for each person that clicks on the link (PAY PER CLICK).
15. Blogger Navigation Links : These are the links to Previous Post, Next post and Home placed by default under your posts. They are present by default in the new Blogger Layouts template.
16. Links that open in New Window : When clicked these links open in a new window thus preventing the visitor from leaving the site.
17. Links Offline : Used for promotion of blog and printed on books, visiting cards etc.
18. Directory Links : These are links obtained by submitting your blog or site to free or paid directories.
19. Signature Links : These are links to your blog or site below your signature in Forums or Groups which you frequent.
20. Profile Links : Generally when you comment on a blogspot blog your name is linked to your profile. This is a Profile Link. If you choose the 'Other' option. Paste your blog link in the 'Name' and 'Your Web page' fields which open up. Then you have your blog link in your comment. Do not forget to sign off with your name.
21. Header Links : The Header on your blog is linked to the Main Page to enable the viewer to click on it on the Post Pages so as to return to the Main Page.
22. Social Bookmarking Links : These are links placed below your blog posts to enable your viewers to add that post to their social bookmarks. For example Delicious. Instead of adding a lot of icons which increases the clutter at the bottom of a post you can add just one social bookmark.
23. Dead Links : These are links that don’t open a webpage and they don’t even show some error. This usually occurs when a server is down, the page has moved, or it no longer exists.
24. Broken Links : These are links which show an error when clicked.
25. One Way Links : These are links from a site which you have not linked to. These rank very important for Page Rank as they are a measure of importance for your blog especially when coming from a relevant site or blog dealing in the same subject as your blog.
26. Article links : These are links to your blog appearing at the end of articles submitted to article directories.
27. Press Release Links : These are links to your site or blog appearing in Press releases.
28. Deep Links : These are links on blog posts linking to other blog posts deep within the Blog Archives. For example I started this blog to help bloggers who were migrating from Old Blogger to Beta Blogger last year.That is a link to the first post on this blog.
29. Review My blog Links : These are links created to invite blog reviews.
30. Viral Links : These are links put in your blog to take part in Blog Memes or Blog Trains in an effort to increase your Blog rankings.
31. Script Links : These execute JavaScript code or call a specific JavaScript function.
32. Read More Links : These are used at the end of summary posts to expand them to the full post. They serve to decrease the length of your Main Page where you can show the summary of all your posts so that the viewer can quickly scan and choose to read only the post which piques his/her interest.
33. .Edu and .Gov Links : These are links from educational and government sites. These sites are trusted more and hence links from them are a prized lot.
34. Social Media Links : These are links to your blog posts on Digg, Stumbleupon, Myspace etc..
35. Non-Html file Links : These are links to your blog placed on Word Documents or Pdf files.
36. Optimized Links : These are links optimized for search engine spiders.
37. Natural Links : These are links providing visitors with a related resource that could be of interest to them. See my Blog Resources links in the middle column.
38. Artificial Links : these are links to improve the search engine ranking of the site. For example Links taking part in Viral Blog memes.
39. Organic Links : These are links to your blog which have been put on other blogs because the webmaster liked the content. They are a pointer to quality content and are highly prized.
40. Sponsored Links : These are links paid for being placed on sites. You will see their examples when you conduct a Google search and you will get sponsored links in the right column of the results.
41. Download Links : These are links to files. When clicked on you will get a prompt to save the file and then the download will begin to your hard disk.
42. Permalinks : These are permanent links to Blogger Posts. In the Classic Blogger template the post permalink was obtained by clicking on the post timestamp. In the new Blogger Layouts template the post title carries it's own permalink.
43. Screwdriver-Wrench Links : These are special links in the new Blogger Layouts Template. They are used to edit the widget instantly without having to go through the Dashboard.
44. Quick Edit Links : These are used to edit your blog posts with one click. You can remove them by going to Settings---->Basic. They are shown by the pencil icon under your posts.
45. Redirect Links : These are used to redirect the visitor to a different URL using the Meta Tag "Refresh".
44. Spam Links : These are links used to self-promote a blog or site. They are placed on Link Farms, Blog comments etc. and lead to undesirable content.
45. Home Link : Points to the main page of the blog. Placed on post pages to enable visitor to quickly return to Home Page.
46. Archive Links : These are links to your posts in the Blog Archives. They are placed within the Archive widget in the sidebar.
47. Label Links : These are links to your label pages. Clicking on them will bring up all the posts associated with that label.
48. Comments Link : This is a link placed at the end of your blog post to enable viewers to comment on your blog.
49. The 'CREATE A LINK' link : This link is placed at the end of your posts when you enable backlinks to your blog. Clicking on this link brings up the Blog This popup window with the link to the post placed in the Link Field and within the post. This is the counterpart of trackbacks used in Wordpress blogs.
50. Login Link : This is a link to Login to the site for members. It is seen on Wordpress blogs in the sidebar. Blogspot Bloggers can create a 'Create New Post' Link on their blogs.
If you know of any more links add them in your comments to this post.
How To Construct Blog Links? |
This is a question which has always plagued the Newbie. They see all these beautiful links all over the Internet and clicking on any of them magically brings up yet another beautiful eye-candy page. However there is no page with instructions on how to construct these links. Here are some tips and tricks on constructing optimized links in your blog.........WHAT IS A LINK?
A Link on a web page is a word/set of words/image which when clicked on using a mouse brings up another web page/resource. It is also called as a hyperlink.WHAT IS A URL?
URL is short for "Uniform Resource Locator". It is also known as a Web Address of a particular resource/document. For example the URL of your blog at blogspot is given by this :
http://YOURBLOGNAME.blogspot.com
Here just change 'YOURBLOGNAME' to actual name of your blog and 'blogspot.com' is the domain. To go to this site just copy and paste this URL into the AddressBar of your browser and press Enter. This particular URL will not go anywhere since it is a fictitious site.WHAT IS A POST URL?
When you enable post pages by going to Settings----->Archiving then each post gets a separate page/url. The title of the post is linked to its own page. To copy the link of the post right click the title and select 'Copy Link Location'. Then paste it in any email to send to your friends. For example the link to this post is :
http://betabloggerfordummies.blogspot.com/2007/04/how-to-construct-blog-links.html
Notice that it consists of the blog url followed by year and month of publication and then followed by post title. The URL of a post is called the Permalink. The timestamp of each post at the bottom of each post is also linked to the post URL. In New Blogger all posts have their Permalinks enabled by default.MAKING A LINK
To make a link in a document/blog post login to Dashboard and click on +New Post. This will open the Post Editor. Type in the words you wish to make into a link and click the link icon in top frame of post Editor. In Edit Html tab this is the third icon from the left. See picture below
:
A new window pops up. In it type/paste the URL of the webpage you wish to link to and click OK. When you publish the post you will see the words you had selected in link form and clicking on them will bring up the web page whose URL you had used.
To summarize here are the steps to make a link to your friend's blog in your post :
1. Open your friend's blog in browser.
2. Copy the blog address/link/URL from the address bar.
3. Login to Dashboard and click on +New Post.
4. Type your friend's name in the post editor and select it. You can also type in the name/title of the blog. This is also known as the 'Anchor Text' for the link.
5. Click the link icon in the top frame and paste the URL from Step 2 in the popup window and OK it.
6. Publish Post by clicking Publish button.
7. View Blog by clicking on View Blog tab at the top and test the link.THE LINK CODE
Every link has a code which can be seen when you click on edit Html tab of Post editor. It looks like this :
<a href="URL/LINK OF PAGE">TITLE OF PAGE</a>
The 'TITLE OF PAGE' is the anchor text of the link. See How to make anchor links which lead to another place in the web page.
Image links have the following code :
<a href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST" alt="TITLE OF SITE IMAGE IS POINTING TO" /></a>
See How to make Image Links.THE LINK LIST WIDGET
The Link List widget is used to add a list of links to the sidebar. See How to add widgets to your blog. You need the URL for your sites and their Titles before you add them in a Link List widget.
Links by default open in the same window. You can change that to open in a new window. This enables your blog page to constantly remain open in the viewer's browser.
To make Email links and mail-to links you can use either images to prevent spammers from stealing your address or code.
Remove Nofollow on Blogger Backlinks. |
The No-No Follow Movement has gained quite a momentum. We have already seen how to remove it from the Comments. Today we will go after the second No-Follow tag in the new Blogger Layout Templates and remove it..........
This no=follow tag is present in the code for your Backlinks. Blogger does not incorporate Trackbacks per se. Instead Blogger has Backlinks.
Blogger has the Backlinks feature which enables you to keep track of other pages on the web that link to your posts. For example if someone else posts on a topic similar to yours and links back to your post then your post will automatically show a link to the other post. To enable Backlinks go to Settings------>Comments----->Backlinks---
---->Show--------->Save Settings. These links are shown under the posts with the title "Links to this Post" next to the Comments link. Clicking that link takes you to the post page where all the backlinks are shown under the post and the comments.
You have to wait until Google indexes the post which has a link to your blog post. Then the link of that post will appear under "Links to This Post" on the post page.
This link has the no-follow tag on it. Which means that Googlebot will not follow that link back to the originating post and index it. Hence the originating post does not get any "link-love" though it has given it to you.
Here is how to give the originating post some of your link-love back. Login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. First backup Template by clicking the Download Full Template link. Then put a check in the Expand Widgets Template checkbox. Scroll down till you come to this code in the Blog Posts widget :
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
Delete the code in red and save the template. Now GoogleBot will follow the backlinks back to the original post which will also gain from having mentioned your blog/post. You can also mention in a prominent place in your blog that backlinks are FOLLOWED and thus encourage people to link to your blog/posts. See this badge I have inserted to show that my backlinks are followed :
If you want to insert it in your template Login to Dashboard and click on Layouts. Then click Edit Html subtab of Template tab. First backup your template and then put a check in Expand Widgets Template box and scroll down till you come to this code in BlogPosts widget :
<div id='backlinks-container'>
Paste the line below immediately below the above line :
<img src="http://betabloggerfordummies.googlepages.com/BacklinksFollow.gif" style="border-width:0px"/>
If you want another just after the backlinks paste the img src line code again just before the closing tag for the backlinks-container. These images will appear before and after your backlinks on the post page.
Preview and Save template.
If you want to add the above logo to your sidebar with two clicks then click on the "GET BACKLINK BTTN" low down in the right sidebar of this blog.
How to check your Backlinks? |
Backlinks are links on other websites pointing to your blog/site. The number of backlinks are taken into account when calculating the Page Rank for your site/blog. Higher your Page Rank, higher is your site position in the Search Results returned by Google. This is important because if your blog/site is listed in the first few pages of the results returned by search engines then it has a better chance of being visited by the searcher. Hence the higher you are in Search Engine Results Page (SERP) there is increase in blog traffic. Monitoring the number of backlinks is hence important and here are the methods to check them.......Google Webmasters Tools
To use this method first you will have to add a sitemap to your site and verify it. After doing this head over to Google Webmaster Tools and click on the link of your blog. You will get a tabbed interface. Click on the Statistics tab. Then click on Index stats link in the sidebar. You will get a table of Samples of your pages in Google. Click on the Result link. Example :
link:betabloggerfordummies.blogspot.comGoogle Method
This is the same method as the above but you need not go through Google Webmasters Tools. Instead enter this directly in the address bar of your browser and press Enter :
http://www.google.com/search?q=link:YOURBLOGNAME.blogspot.com&hl=en
Instead of YOURBLOGNAME enter the actual name of your blog. The actual name of your blog is 'YOURBLOGNAME' in the link to your blog which is : http://YOURBLOGNAME.blogspot.com. You will get the number of backlinks in the blue bar at the top of the page :
Web Results 1 - 10 of about xxxx linking to betabloggerfordummies.blogspot.com. (0.39 seconds)
XXXX shows the number of backlinks to your blog.Technorati Method
Technorati is a search engine specializing in Blogs.
First claim your blog at Technorati. Then copy and paste your blog url in the Search For box at the top. In the adjoining box click the down arrow and choose Blog Posts. Then click the Search button. You can also paste this directly in address bar of your browser and press Enter :
http://technorati.com/search/YOURBLOGNAME.blogspot.com
Instead of YOURBLOGNAME enter the actual name of your blog. The actual name of your blog is 'YOURBLOFNAME' in the link to your blog which is : http://YOURBLOGNAME.blogspot.com. You will get your Technorati Rank and the number of links and the number of blogs linking to you.OTHER SEARCH ENGINES
For Yahoo, AOL, Excite and WiseNut Backlinks enter this in search box of that search engine and press Enter :
link:http://YOURBLOGNAME.blogspot.com
For MSN SEARCH and Overture enter this in search box of that search engine and press Enter :
linkdomain:http://YOURBLOGNAME.blogspot.com
For the Open directory Project simply enter the URL of your blog in the search box provided and press Enter.QUALITY OF BACKLINKS
Your PageRank increases with the quality of your backlinks. Higher quality backlinks are :
1. Backlinks from Higher PageRank sites.
2. One-way backlinks are rated higher than reciprocal exchanged links.
3. Backlinks from sites with relevant content. If yoursite is on cars a backlink from a wildlife site is considered lower in quality than one from a car manufacturer site.
4. A backlink where the anchor text is the keyword (keyphrase) that you are trying to optimize for.
5. Too many links from one URL is considered spamming and low quality. Beware of firms trying to sell you backlinks from "link farms".
6. Getting a lot of links in a short time span is suspicious and low quality.
7. Links from Article Directories. Hence submit articles to them and put in a link to your blog at the bottom.Check which post has most Backlinks
You can check which page in your blog is most linked to. For this go to Google Webmaster Tools and click on the link of your blog. Then click on the Links tab at the top. You will get a list of your posts with the number of links to each next to it. At the bottom of the table click on the Download this table link. You will get a Excel file which you can load in Excel and examine to see which of your posts is
most linked to.
You can also check who is linking to a single page on your blog. Click the 'Find a Page' link on the same page (Google Webmasters Tools----->Sitemaps----->Click blog link------>Links tab) :
Click on image to enlarge it.
Then in the blank provided enter the URL and click the See Details button.
Remove Nofollow Attribute on Comments. |
All Blogger templates have the Nofollow attribute built into their comments. This is done to discourage comment spam. However you can, especially if you are a new blogger, encourage people to comment on your blog by removing this attribute. The Nofollow attribute instructs the search spiders not to follow the link thus preventing the spread of "Google Juice"...........
You can encourage people to comment on your blog once they recognize that links in comments are being followed. To discourage spam enable comment moderation in your Settings---->Comments. Also put a prominent text widget in your sidebar proclaiming that links in your comments are followed by the search bots. This will act as a freebait by sharing your link juice with fellow bloggers. MODIFYING THE TEMPLATE
To do this login to dashboard and click on layouts of your blog. Then click on Edit Html subtab of Template tab. First backup your template by clicking on the Download Full Template link. Put a check in the Expand Widgets Template Checkbox at the top of the Edit Template text box. This expands the Blog Posts Widget Code within which is the comments code. Then scroll down till you come to :
<dl id='comments-block'>
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
Delete the words in red in the above code : rel='nofollow' and save the template.TEXT BOX WIDGET IN SIDEBAR
Click on Add Page Element link in sidebar on Page Elements subtab of Template tab. Choose Text widget and add following text in it :
COMMENT POLICY
Comments on this blog are made DOFOLLOW for the Google Spiders.
Comments are moderated.
Spam will not be tolerated.
Save the widget and place it in a prominent position in your sidebar.
Comments
Search Engines
Freebait
EMail Link Below Your Posts. |
You can put your email link below your posts but it will be picked up by spam bots and then your inbox will soon be full of thousands of spam mails. It will be better to follow this method of putting it....... Technorati Tags:email, post footer, blogger hacks,
First you will have to create an image out of your email link. For this go to :
Email Generator
OR
http://services.nexodyne.com/email
Follow the steps to make an image out of your email and then download it to your PC. Create an account at a freehost like Googlepages and upload the image there. Copy down the link of the uploaded image.
Login to Blogger Dasbhoard. Click on layouts for the blog where you want to add the link. Click on Edit Html tab at the top. First backup the template by clicking on Download Full Template link. Then put a check in Expanded widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts widget :
<p class='post-footer-line post-footer-line-1'>
Paste the line below just under the code above :
<img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" />
Replace the CAPS with the link of your uploaded image. Preview and save Template.CLICKABLE EMAIL LINK
To make a clickable image link paste this code instead at the same position :
<a href="mailto:xyz@gmail.com?subject=Hello%20again"><img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" /></a>
Instead of xyz@gmail.com put your own address. This method carries the risk of the address being harvested by spam bots. Save Template. Now clicking on the image will open the Compose Mail window with the address already filled in and the subject title as Hello Again.
Create Add Your Comment Link. |
At the bottom of each post there is a COMMENTS link which viewers have to click if they want to comment on your post. However for first time viewers this is not very intuitive so I thought of a way to change it to 'MAKE A COMMENT'....... Technorati Tags:comments, post footer,
To do this go to Template----->Edit Html and first backup your template.
Then put a check in Expand Widgets Template check box and scroll down in Edit Template text box till you come to the Blog Posts widget. Here locate this piece of code
<span class='post-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>
and change it to :
<span class='post-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/> COMMENT ON THIS POST</b:if></a>
</b:if>
</b:if>
</span>
Save Template. Refresh Cache. View blog.
Anchor Links and Mail To Links |
Anchor Links are used to jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for...... Technorati Tags:anchor link, mailto link, faq page
Anchor Links are mainly used in making FAQ (Frequently Asked Questions)type pages. Such pages contain a list of FAQs at the top and detailed answers to each question at the bottom. Clicking on each question makes the page shift directly to the question and its answer at the bottom.
The question at the top has its link made by the following code :
<a href="#Q4">FAQ 4. How to login to Dashboard at Blogger?</a>
This code will make the following Link :
FAQ 4. How to login to Dashboard at Blogger?
The target is coded with following code:
<a name="Q4">FAQ 4. How to login to Dashboard at Blogger?</a>
Clicking on this link will jump you to the Question and Answer at the bottom of this page.ANCHOR LINK TO SPECIFIC WORD ON ANOTHER PAGE
To make an anchor Link which connects/jumps to a specific location on another page use this code :
<a href="http://betabloggerfordummies.blogspot.com/2007/01/making-image-link.html#MAKING THE LINK">
Jump to MAKING AN IMAGE LINK</a>
The above code will produce the following link :
Jump to MAKING AN IMAGE LINK
NOTE : I have already coded in
<a name="MAKING AN IMAGE LINK">MAKING AN IMAGE LINK</a>
on that target page and saved it.OPENING LINKS IN SEPARATE WINDOW
To make your links open in a separate window use this code :
<a href="http://betabloggerfordummies.blogspot.com"
target="_blank">Visit Dummies Guide to Google Blogger (Beta)</a>
This will produce the following link :
Visit Dummies Guide to Google Blogger (Beta)
Try clicking on the above link to see if it opens in a new window. If you want your links in the New Blogger to open in a new window you can paste the code for each link as above in a Html/Javascript Page Element and save.
To do this in a Link List Widget go to Template------->Edit Html------>First Backup Template
Then put a check in Expand Widgets Template text box and scroll down in Edit Template text box till you come to the Link List Widget code :
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank' ><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Insert the code in black in the above code. Save Template. This will open all the links in this section in a new window.MAKING A MAILTO LINK
To make a mail to link use this code in your post or Html/Javascript Page Element :
<a href="mailto:xyz@gmail.com?subject=Hello%20again">
Send Mail</a>
Change xyz@gmail.com to your email address. This will show on your page like this :
Send Mail
Your Email Address maybepicked up by spam bots so make a graphical link at this site :
http://email.about.com/od/stationeryandmorefun/gr/e_mail_icon_gen.htm
http://services.nexodyne.com/email
Upload gif to Googlepages and copy theurl
Paste it in blog layout in a html/javascript element
<img width="96" src="URL of UPLOADED GIF" height="64"/>
See How it appears :
The Target Link produced is :
FAQ 4. How to login to Dashboard at Blogger?
Answer : To login to theDashboard goto http://www2.blogger.com/home and type inyour Username and Password and hit Enter.
Making an Image Link. |
There are several situations where you may need to construct an image link in your blog. The most frequent is when you want arrows pointing to the next page or the previous page as navigation links....... Technorati Tags:older posts, newer posts, home, navigation links, image links
Other uses are when you wish to post the image as a preview. For example the image of a bookcover used to link to Amazon.com. WHAT IS A LINK A link in a document to information within that document or another document. These links are usually represented by highlighted words or images. When a reader selects a hyperlink, the computer display switches to the document or portion of the document referenced by the hyperlink.
You can also use logos/banners as image links to other websites represented by the logo. I have covered this in Adding Banner links. The basic simplest link code is :
<A href="URL OF SITE">TITLE OF SITE</A>CREATING THE IMAGE/LOGO
To create the image you can use online generators such as cooltext.com. These are websites which allow you to create a logo or banner for your blog. Most of them are free, others attach their own logo to the image created on their site. You can search for these sites by typing logo/banner generator in your Google search bar. After creating the image right click the image and choose Save Image As to save the image to your hard disk.
You can also create your own image using Paint or any other image editing program like Paintshop, Photoshop or Irfanview. After creating the image save it to your disk.
You can also search for and download navigation graphics like the following :
UPLOADING THE IMAGE
After creating and saving the image you have to upload it to a freehost on the Internet. This is because though your PC may be connected 24/7 to the Internet it is not a server which can serve your images whenever requested. Googlepages offers 100MB free space per account and you can create five such accounts at present. Other freehosts are Photobucket.com and Imageshack. You can upload your images to Imageshack directly from the link at the bottom of the right column in this blog. Another freehost is Flickr.com
You can also use Blogger to host your images by uploading them in a post. After uploading click on Edit Html tab of Post Editor and you will see the code for the image like this :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s400/Blackberry.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5024576285117553666" /></a>
From this image code extract the url for the image which is :
After this Publish that post as a draft. When you publish post as draft your viewers do not see it though it is available. In the New Blogger when you delete a post you are given option to delete the images within the post. If you do not delete the image there is no guarantee that they will not be deleted.
If you have uploaded your image to a free host then copy down its link which will be in same form as above. You can test the link by pasting it in the address bar of your browser and hitting Enter. The image should display in your browser.MAKING THE LINK
We have the image uploaded to a freehost and we have its link. Now to constructthe link code which is :
<a href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>
Replace URL/LINK YOUR IMAGE IS POINTING TO by the URL of the site your image is pointing to. Replace LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE with the link of the image you extracted from the blogger post or the link of your image at the freehost. Replace TITLE OF SITE IMAGE IS POINTING TO with the title of the site the image is pointing to.
Alt tags provide alternative text for images to visually impaired individuals, who reach the net through audio-based browsers. They also provide alternative text for individuals who have disabled image loading in their browsers.GIVE YOUR LINK A TITLE
To give your link a title include a title tag. This will show the title when the mouse is over the link and also serve to give directions to the viewer eg:
<A title="GO TO THIS SITE FOR A WONDERFUL EXPERIENCE" href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>LINK IMAGE TO A POST
To make an image link to a post in your blog use this code :
<a href="PERMALINK URL"><img src="URL OF PICTURE" alt="POST TITLE"></a>
Instead of PERMALINK URL paste the URL of the post. This can be obtained by opening the post in a browser and copying the link from the address bar.NAVIGATION ARROWS FOR NEW BLOGGER
Perhaps you are tired of the Older Posts and Newer Posts links at the end of each post in the post pages of the New Blogger. Then you can replace them with navigational arrows as follows :
Go to Template------>Edit Html and backup the Template.
Then put a checkin Expand Widgets Template checkbox and scroll down till you see this code in the Blog Posts section :
<div class='blog-pager' id='blog-pager'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
Replace the code in red with the following lines :
<img alt='OLDER POSTS/NEWER/POSTS/HOME' src='URL OF NAVIGATION IMAGES' />
Clickable Image Maps for Blogs. |
A Clickable Image Map is a picture with multiple clickable areas. An Image Map in a blog can be used for navigating the site. Each area on the map is linked to a different target or web page or a different section on the same page........ Technorati Tags:image map, clickable image map, imagemaps
Image maps present visual choices and hence are more intuitive for viewers. It must be obvious that the graphic is clickable or else you need to tell the viewer by adding a line of text. You can have a collage of photographs with the photo of a rolodex linked to your friends list and a photo of a camera linked to the page containing your photo album.
There are many ways of creating an imagemap. You can use an application like Paint Shop Pro or a freeware like Meracl ImageMap Generator. Download it from http://www.stockholm.bonet.se/meracl/mimg.htm. You can also use an online image map generator like http://koti.mbnet.fi/winuus/imagene.php?act=getcode. You can hardcode it using step-by-step instructions from http://www.draac.com/imagemap/main1.html
In Meracl Image map Generator use File----->New Image Map----->Load Image from Hard drive to load the image you wish to convert to a map. Drag the shapes provided onto the map and resize them to include the areas you wish to link to other pages. Then copy and paste the link in the Link text box and set the other settings. After doing this for all the areas save the map by selecting Save as Html page.
In Paint Shop Pro open the image you want to use. Go to File----->Export------>Image Mapper. Select the rectangle or circular tool and draw round the area you want to select. Add the address in the URL field. Write a short description of the link in the Alternate Text box and select _blank as Target so
that the link will open in a new window. Click the Save button to create a Html document containing the map. You will be prompted to save the image also. SAVE THE IMAGE AS A GIF FILE. Open the Html file in your browser and check that the hotspots behave as you had intended.
Before we put the map in our blog we have to make three more steps. First upload the graphic/image to a freehost like Googlepages and copy down its link
location(URL). Next open the Html file in Notepad and you will see code like this :
<HTML>
<HEAD>
<META NAME="Author" CONTENT="tiger06">
<META NAME="Generator" CONTENT="Jasc Paint Shop Pro 7">
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG NAME="SynBloggerClickMap0" SRC="SynBloggerClickMap.gif" WIDTH="533" HEIGHT="709" BORDER="0" USEMAP="#SynBloggerClickMap">
<MAP NAME="SynBloggerClickMap">
<AREA SHAPE="rect" COORDS="368,273,508,403" HREF="http://betabloggerfordummies.blogspot.com/2006/10/what-is-subscribe-to-posts-atom.html" TARGET="_blank"
ALT="Feeds">
<AREA SHAPE="rect" COORDS="12,37,522,181" HREF="http://betabloggerfordummies.blogspot.com/2006/10/how-to-add-picture-to-beta-blog-header.html"
TARGET="_blank" ALT="Add Picture to Header">
<AREA SHAPE="rect" COORDS="26,629,512,677" HREF="http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-banner-link-in-footer.html" TARGET="_blank"
ALT="Add Banner Link To Footer">
<AREA SHAPE="rect" COORDS="8,3,526,27" HREF="http://allblogtemplates.blogspot.com/2006/09/blogger-template-without-navbar.html" TARGET="_blank"
ALT="Navbar Issues">
<AREA SHAPE="rect" COORDS="378,407,490,567">
<AREA SHAPE="rect" COORDS="378,229,492,269" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-correct-sidebar-at-bottom.html" TARGET="_blank"
ALT="Correct Sidebar at Bottom">
<AREA SHAPE="rect" COORDS="44,231,356,569" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-write-perfect-blog.html" TARGET="_blank" ALT="Write
Perfect Blog">
</MAP>
</BODY>
</HTML>
Copy and paste only the code between the <body> and </body> tags like this into another Notepad file:
<IMG NAME="SynBloggerClickMap0" SRC="SynBloggerClickMap.gif" WIDTH="533" HEIGHT="709" BORDER="0" USEMAP="#SynBloggerClickMap">
<MAP NAME="SynBloggerClickMap">
<AREA SHAPE="rect" COORDS="368,273,508,403" HREF="http://betabloggerfordummies.blogspot.com/2006/10/what-is-subscribe-to-posts-atom.html" TARGET="_blank"
ALT="Feeds">
<AREA SHAPE="rect" COORDS="12,37,522,181" HREF="http://betabloggerfordummies.blogspot.com/2006/10/how-to-add-picture-to-beta-blog-header.html"
TARGET="_blank" ALT="Add Picture to Header">
<AREA SHAPE="rect" COORDS="26,629,512,677" HREF="http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-banner-link-in-footer.html" TARGET="_blank"
ALT="Add Banner Link To Footer">
<AREA SHAPE="rect" COORDS="8,3,526,27" HREF="http://allblogtemplates.blogspot.com/2006/09/blogger-template-without-navbar.html" TARGET="_blank"
ALT="Navbar Issues">
<AREA SHAPE="rect" COORDS="378,407,490,567">
<AREA SHAPE="rect" COORDS="378,229,492,269" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-correct-sidebar-at-bottom.html" TARGET="_blank"
ALT="Correct Sidebar at Bottom">
<AREA SHAPE="rect" COORDS="44,231,356,569" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-write-perfect-blog.html" TARGET="_blank" ALT="Write
Perfect Blog">
<map>
In each of the AREA tags above add a TITLE section corresponding to the title of the link. This is the title that will be displayed when you mouseover that particular area. Also paste the url of your image at Googlepages in the SRC specification in the first line. Save the file as Imagecode.txt. See the file below :
<IMG NAME="SynBloggerClickMap0" SRC="http://betabloggerfordummies.googlepages.com/SynBloggerClickMap.gif" WIDTH="533" HEIGHT="709" BORDER="0"
USEMAP="#SynBloggerClickMap">
<MAP NAME="SynBloggerClickMap">
<AREA SHAPE="rect" COORDS="368,273,508,403" HREF="http://betabloggerfordummies.blogspot.com/2006/10/what-is-subscribe-to-posts-atom.html" TARGET="_blank"
ALT="Feeds" TITLE="All About Feeds">
<AREA SHAPE="rect" COORDS="12,37,522,181" HREF="http://betabloggerfordummies.blogspot.com/2006/10/how-to-add-picture-to-beta-blog-header.html"
TARGET="_blank" ALT="Add Picture to Header" TITLE="Add Picture to A Header">
<AREA SHAPE="rect" COORDS="26,629,512,677" HREF="http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-banner-link-in-footer.html" TARGET="_blank"
ALT="Add Banner Link To Footer" TITLE="Add Banner Link To Footer">
<AREA SHAPE="rect" COORDS="8,3,526,27" HREF="http://allblogtemplates.blogspot.com/2006/09/blogger-template-without-navbar.html" TARGET="_blank"
ALT="Navbar Issues" TITLE="Blogger Navbar Issues">
<AREA SHAPE="rect" COORDS="378,407,490,567">
<AREA SHAPE="rect" COORDS="378,229,492,269" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-correct-sidebar-at-bottom.html" TARGET="_blank"
ALT="Correct Sidebar at Bottom" TITLE="Correct Sidebar at Bottom">
<AREA SHAPE="rect" COORDS="44,231,356,569" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-write-perfect-blog.html" TARGET="_blank" ALT="Write
Perfect Blog" TITLE="How To Write the Perfect Blog">
<map>
Copy and paste the above code in the Edit Html tab of your post page. DO NOT PASTE AN IMAGE LINK TO THE IMAGE MAP PICTURE.
If you want the map in the sidebar or header paste the code into a Html/Javascript Page Element. See the image map below. Test its various areas by moving your mouse over it and clicking it.
MAKING A NAVIGATION BAR FOR THE HEADER
You can make a navigation bar for your header in the same way as detailed above. Hover your mouse cursor over the headings below. Click on them to open the appropriate page. (Best seen in Internet Explorer)
Linking to Another Article in the New Blogger. |
You can link your post to another article in the New Blogger. This is done when you are commenting on the other article or your blog post is about the other article...... Technorati Tags:link field, linked article, post editorPermalink
In your blog post you will write about the other article and below the blog post you can show a link to the other article in case the blog reader after reading your post wishes to visit the other article to find out more about the topic. As an example I have linked this post to the original article in Classic Blogger Help section which describes how to use this link field in the old Blogger. Click on Related Article link below this post to see what I am talking about.ENABLE LINK FIELD
First you will have to enable the Link Field in your blog. To do this go to Settings----->Formatting------>Scroll down to Show Link field-------->Yes------>Save Settings. This will enable the Link Field in the Post editor. See Picture below (Click on picture to enlarge it) :
INSERT CODE IN TEMPLATE
The next step will be to insert the code at the appropriate place in the template. To do this go to Template------->Edit Html------->Put a check in Expand Widgets Template box at the top of the Template text box. Use Download Full template link to backup the template to PC before you make any changes to the Template.
Then scroll down in Edit Template text box till you come to the post footer part in the Blog Posts widget. You can place this code anywhere in the post footer. I have placed it below my labels.
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>Related Article</a>
</b:if>
</span>
</p>
The original code is in blue. Insert the new code in red. Preview and Save Template. View Blog. See Picture Below.
FILL IN THE LINK FIELD
Whenever you post to your blog about some other article on the web go to that web page in your browser. Copy its link from the address bar and paste it in the Link field in your Post Editor. It will then automatically appear at the foot of your blog post on publishing.
PERMALINK
Permalinks are "permanent links" to blog posts. For example the link to this blog is :
http://betabloggerfordummies.blogspot.com
While the link or Permalink to this post is :
http://betabloggerfordummies.blogspot.com/2007/01/linking-to-another-article-in-new.html
In the new blogger every one of your posts can live on it's very own page—its the ultimate permalink. In Classic Blogger first you have to enable post pages by goimg to Settings------->Archiving------->Enable Post Pages-------->Yes-------->Save Settings. Then you have to insert this code in your template to make titles into Permalinks :
<a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemTitle$></a>
This is because in Classic Blogger each post does not reside on its own page/URL by default.
How to Add a Banner Link in the Footer. |
To Insert a Banner Link in the Footer you must first............... Technorati Tags:banner link, footer, template
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.
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='footer-wrapper'>
<b:section class='footer' id='footer'>
Replace the second line above with this line :
<b:section class='footer' id='footer' maxwidgets='3' 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 Footer section. 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 Footer I have created at the bottom of this page.
How to insert Banner Link to your Blog in each Post. |
To Insert a Banner Link to your blog you must first............... Technorati Tags:banner link, template
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.












