adv

Create Pages breakers jump your blogger

by Sean McCullough, Software Engineer, Blogger

It's time to announce another Blogger Birthday feature! Many users have been asking for an easy way to implement "Read more" links on their blog's index page. In fact, for years bloggers have been implementing "Read more" jump breaks themselves by manually editing their HTML --- a process that was complicated and error prone.

 
Today we are excited to announce our latest birthday present: Jump Breaks. With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a "Read more" link to the full post page where your readers can keep reading.



There are a couple of ways to insert a "Read more" jump to your posts. If you use the new post editor (available on Blogger in Draft, or by enabling it via the Settings tab), you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.



If you don't use the new post editor, you can still insert a jump break in Edit HTML mode by adding <!-- more --> where you want to position the jump break.



Want to change the "Read more" text to something more your style? No problem. You can edit the "Read more" text by clicking Layout and then Edit the Blog Posts widget.


One more note, the Jump Break feature does not change how your post appears in your feed. You can configure post feed options by going to Settings | Basic | Site Feed, and editing Allow Blog Feeds.

Update
: Users that have customized their Blog Posts widget or otherwise have highly customized templates: You may need to edit your HTML to enable Jump Breaks. First, back up your template, then follow the instructions at the bottom of this help article.

Blogger Pages are finally out








Blogger has now released the pages feature just like in Wordpress blogs. You can use these pages for about mecontact me etc. The blogger pages are more or less like the blogger posts. But these pages wont appear in the blog archives and the blog feeds.

How to create a Blogger Page?

1. Login to your Blogger Account2. In the posting Tab you will find an Edit Pages optionimage
3.Click on the New Page button and you will get a new page editor(same as the post editor that you normally use)image
4.You can make the page, in the same way as you create a post.If you want to enable commenting on the page, then you can do so from the post options
image
5. When you hit the Save And Publish Page button, you will be asked if you would like to add the Page Gadgets onto your blog
image
You can add the page gadget on the sidebar or as Top navigation Tabs.These widgets may not properly sync with your blog template.So i would advise you to choose the No Gadget option and add the links manually to your blogger template. You can obtain the links to the newly created pages from the Edit Pages Tab.
If you opt to add any of Pages gadget, then you will get an easy interface to add the page links to your blog. (now available on draft.blogger.com only) Here is what the Gadget options will look like
image

Limitations
1. You can only create a maximum of 10 pages.
2. Separate templating for pages would be a little too difficult(but not impossible :) )
3. The Static Pages are not included in the Post Exports till now.(at the time when this post is made)

Advanced options.

If you are familiar with the usage of blogger’s conditional tags and want to do something special with the pages, then you can use the following conditional tag for that
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
When condition is true this will be done
</b:if >
eg: If you want to hide the sidebar on the Static Pages, then you can use these conditional tags properly to implement that
Here is the incomplete sample code for the same
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
.sidebar-wrapper{display:none;}
</style>
</b:if >
This code should be placed above </head> in your template.
you will have to add some more CSS definitions to make it complete(you should increase the width of the post area.. ) these will be different from template to template. So  you will have to figure it out :)
So are some of my Blogger Pages

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

# am-technology.blogspot.com,

<a href="http://am-technology.blogspot.com/"  title="Technology knowlegde Blog. Engineering Education.  Make Money Online and Work from Home.">Study For Make Money</a>

Copy and paste the above HTML code into your web page's HTML to create the following link:


<a href="http://azymadteam.blogspot.com/2011/01/master-official-website.html#links" ><img src="images/PhaseQuest-Logo-100.gif" alt="Technology knowlegde Blog" style="border:0;float:none" /></a><br /><a href="http://am-technology.blogspot.com/"  title="Engineering EducationMake Money Online and Work from Home.  and Internet Marketing">Study For Make Money</a>

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Related Posts Plugin for WordPress, Blogger...
perPage: 1, numPages: 1, var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; }