CAR STYLUS: Blogger

Friday, 25 June 2010

Open all anchor links in new window

I believe this post is going to be very interesting to many people who read this post. Because the first question is what is the need to open links in new window? Is it a big deal to open links in new window? What are the advantages? Why we need to implement this in our sites or blogs?

Take my blog for example. I have write big posts some times and place more links. I want the user to see the links to be opened in new windows as they are still reading my pages. If the link opened in the same page, then it will be a problem to go and come back and start reading from the position they were. That won't give good experience. I want them to be stayed on my blog page and open all the links in new window. So that user is always on my blog page and if they wants then they can move across pages. It's not bad at all.

How many ways are there to implement this?
1. Make all links in web page open in new window.
2. Only some part of the web page links will be opened in new window.

I have two options: Number 1,
Open all links on the web page in new window: Default HTML supports this.
Work around:
Add this line in the <head> tag of your HTML: <base target='_blank' />

If I make all links needs to be opened in new window then home link, navigation links, search everything will opened in new window and it will frustrate user that whatever you click on the link it will open in new window. Dozens of windows in user system if you click 10-12 links. Not a good idea.

Option 2: Only specific region anchor links open in new window. This looks promising and good. But, how to. For example, in my blog, I like to open the content links only in new window.
I have a parent for all content inside a div with id='content'. Now, my goal is to add some logic to open all links in new window which are under content only.
Work around:
Add the below javascript to the <head> tag of the HTML.

<script type='text/javascript'>
//<![CDATA[   
window.onload = function () {
        var links = document.getElementById('content').getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
            links[i].setAttribute('target', '_blank');
        }
    }
//]]>
</script>

This small function will do the trick. So, on window load, we are finding all the links in the particular division then adding the target='_blank' attribute to it. So, I found this is the only best solution to achieve this.
Once you add this to your page, then you will see all links inside content will open in new window and all others in the same window. This working perfectly to me. Try it on my blog by clicking on some link in the content.

If you are Jquery lover, then this is JQuery version,
$('#content a[href^="http://"]').attr("target", "_blank");

Great advantage is for blogs. All blogs needs this as there are lot of external links and other links in content. This will be the best and suitable solution.

Wednesday, 16 June 2010

Read More link to blogger posts without HTML changes

This is really a very helpful post I believe. Most of the times I write long posts and explain each and every part in the solution I found. So, I really need to show only specific length of each post and add a link called Read More at the end of the post on the blog home page. So, that users get chance to see more posts and look more posts. And the loading of the main page will be faster as the content is less. So, there are lot of advantages by placing the read more link on the home page for each post.

I have tried so many solutions and didn't impress by any of them. Some of them are disturbing my HTML as after specific characters add the read more link. Another option is, strip the HTML from the post and add the read more link after specific characters, but that also removes the blog styles for P tag, div Tag or any other custom styles we have applied. Sp, to get this working either we need to change the Blog HTML or add bunch of Javascript code to do that. This is not very easy to maintain and useful. So, what to do, can't I do it? So, after a very long research and read so much I want to give better user experience to my users to read what they want on my blog. Finally came up with a nice and simple solution which do not need much HTML changes or customization.

What is Jump Break and what it will do?
This is the option which is available in blogger by default and not known to most of the people. Lot of people are doing lot of customization to add read more links to their blogs. With this feature we don't need to do anything as it provides everything for us.

Solution:

Go to create post or edit post and place the cursor in the content where you need to add the read more link. Once set the mouse cursor, from the editor toolbar find the option "Insert Jump Break" as shown below, this option will be visible in new blogger template editors and in editor Compose mode only. In "Edit HTML" mode all these option will go off. So, make sure you are in "Compose" mode to insert jump break.

Note: If you did not find the jump break as shown below then add the text <--more--> in the Edit HTML mode of the editor wherever you want.
Now, it will insert a bar which represents the Jump Break [see below image how it looks like]. This can be dragged to the place wherever you need it. First set the position of it. You are half done by doing this.
Now, publish the post and go to Edit HTML option from the blog navigation links Layout or Design[Tab name changed recently].
Take the backup of the full template before do any changes.
Now, check the option "Expand Widget Templates".
Search for the tag in your HTML <data:post.body />.
Add this simple HTML text, just below the above tag.

<b:if cond='data:post.hasJumpLink'>

</div>

</b:if >

Here, it just finds whether the data in the post has the jump link set, if yes, then it will insert the anchor text for read more, otherwise it skips the line. You can place whatever text or image or any other HTML tag instead of anchor tag in the above example code for read more.
Now, save your template and just go to your home page for testing the functionality.

The great advantage is very simple. People like it to use it or maintain it. Very simple and easy right? The only thing you need to do is, just follow the same for each post where you want to place the read more. Don't think like, if your blog already had 100's of posts then the first question in mind will be "Do I need to apply the same for all those posts?". Not needed. Read more is only useful most of the times for only home page posts. So, add to the current home page posts and to new upcoming posts.
Hope this gives you good idea on how to add read more link for your blog posts. Like it? then please share it.