Navigation Buttons in your blog

Many blogs and websites feature "navigation button" links like a menu at the top of the page or beneath the header. This can be really helpful for readers to navigate to areas of interest in your blog, such as the home page, about page and contact links.







To create these buttons for your blog, we don't need to use any external images!

There are two main steps to creating these buttons for your blog:

1. Add some styling code to your blog's template
2. Create a new HTML/Javascript widget, and create your links

You can use these links anywhere in your blog that you are able to place an HTML/Javascript widget, such as your sidebar, the header section, or above your blog posts.

Here are the steps in detail:

Add some code to the style section of your blog template

The "style" section of "layouts" blogs is contained between the b:skin> and /b:skin> tags in your template. The simplest way to add extra styling code is to place this just before the closing tag (key CTRL+F to easily find this in your template).

The styling code used for the buttons featured above is as follows:

a.navigation {background: #000000;color: #ffffff;margin:1px;padding: 5px 35px 5px 5px;border-width: 0;text-transform: uppercase;text-decoration: none;font-weight: bold;}a.navigation:hover {background:#5d5d54;text-decoration: none;}

If you prefer, you can change the color of the backgrounds to colors which better suit your blog.

Create your links in an HTML/Javascript widget

Once you have added this style code to your template, you should save your template and go to the layouts section of your blog (Template>Layout). Here you should create a new HTML/Javascript widget where you would like your buttons to appear.

In this new widget, you should add your links in the following format:

<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a><a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a><a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>

Be sure to replace "http://your-link-url.blogspot.com" with the URL of the post page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.

Read more!

Make Wordpress blog - free n easy

You like Wordpress.com blogs and want more customization? You have no Linux/Unix knowledge to download Wordpress from Wordpress.org and set it up? Or you don’t want to buy hosting service that has Wordpress services since they are expensive or you just wanna try it out? Believe me you can do it all for free and its simple…



1. Go to www.freehostia.com and signup for a free account(bannerless) - yeah its 100% ad free! Notable features are:

- 250MB Webspace
- 5GB Bandwidth per month
- and 2 domains can be hosted

2. On the Signup form you have the option to ‘register a new domain’ or ‘use my existing domain’. Use your domain if you have one already, buy one or if you don’t want to buy - get a free domain name from DynDNS.




3. Check your mail and login to the Control Panel with the given Username and Password. Press Hosted Domains icon on the control panel, and you will see your domain name listed there. Click your domain name and you’ll be presented with DNS and other configuration options for the domain. Now go back to the Domain Control Panel and point an ‘A’ record to the IP of the freehostia server. Or you can also point the name server of your domain to freehostia name servers which can be seen when you press the icon under the DNS tab. But be warned that this method takes time. Make sure you can see your freehostia website when you type in your domain name.

4. With DNS all set, you are ready to install Wordpress, just a few mouse-clicks !

5. But to install Wordpress, you’ll need to create a database. Choose Mysql Databases from Control Panel Home, and give a name to the DB like wordpress. Type in a password to use with the new database and click create. You have now created the MySQL DB needed to setup wordpress.

5. Go back to the home of your CP, and choose Elefante Free Scripts under the Web Tools directory. Choose Wordpress and you’ll be taken to the Wordpress installation page. Press Install Wordpress link from that page and you’ll be given a chance to do some customization and stuff. The fields of importance include admin login and password which will be used by you to update your blog and administer.
Pay attention to the path if you want your visitors to see your wordpress blog instantly when they type in your URL, type a single / in that field. and press continue, you are done !

Read more!

Expandable Post Summaries

Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he gets sufficiently interested........

Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page for this hence I have tried to put the help in more easy to follow terms here. There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.



The first step is to put the code for the conditional css. This changes how posts display on different pages. To do this login to Dashboard and click on Layout for your blog. Then click on Edit Html and first backup your template by using the Download Full Template link. Then scroll down till you come to tag and add the following code immediately above it :


<style><b:if cond="'data:blog.pageType">span.fullpost {display:inline;}<b:else/>span.fullpost {display:none;}</b:if></style>


Save Template.

"READ MORE" LINKS

The second step is to add the Read More links which will appear after the paragraph summaries. To do this put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box.

NOTE : If you do not put a check in Expand widgets template checkbox at the top of the TEMPLATE CODE BOX you will not see this code.

This is in the Edit Html subtab of Template tab. Then scroll down in the code till you come to the Blog Posts Widget code where locate this line of code :


<data:post.body/>


Add the code below immediately after the above code :

<b:if cond="'data:blog.pageType"><a href="'data:post.url'" target="'_blank'">Read more!</a></b:if>

Save Template. This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post.
IMPORTANT NOTE : Do not use any other code or it will give error.

You can also add your Post Title at the end of the Read More link so that it will read "Read More on "My Best Post"!"




POST MODIFICATIONS

The last step is to modify the post template so that each post when created will show you where to place your summary paragraph and where to place the rest of the post. To do this go to Settings------>Formatting and scroll down to the end of the page to the box for the Post Template. Copy and Paste the following lines there :


<br />Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Save Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following






Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Then click Publish to publish post.



CREATING YOUR POSTS

Login to Blogger.com and click on +New Post link on Dashboard. Creat ur Post now....


Before publishing make sure that the two span (code) lines are present and the line is at the bottom and the span=readmore line in between your summary post and the second half of the post.

Read more!

How To Copy Widgets from one template to another

When you choose a new default Blogger template, all of your widgets are copied over to the new template. However, if you try to upload a customized template (such as the ones featured here), you will probably get a message asking if you want to delete most of your existing widgets. It is often asked "how can I copy my widgets over to a new template?", so in this tutorial will share the method used to do this quickly and painlessly.

Your blog widgets are saved in your Blogger account, rather than in the actual template of the blog. The widgets are called to your blog by anchors within the template which look like this:




<b:widget id="'HTML1'" locked="'false'" title="'My" type="'HTML'/">


As you can see in this example, each widget in your blog is given a unique identity (in this case, "HTML1") and a title, which is the same as the title you provide when you create the widget.

If you upload a template to your blog which contains the same widget identifiers, then the widgets will be called from your account by the template, and will display in your blog as normal. On the other hand, if you upload a template which does not contain the same widget identifiers, you will be prompted to delete widgets from your account.

So to ensure you can maintain your widgets from your existing blog template in your new blog template, we must copy these widgets over to the new template before uploading this to your blog.

The method I use to accomplish this is by using a second "test blog". I have explained all about creating and using a test blog in this post. If you don't already have a test blog available to use, you will need to create one temporarily to help you copy your widget identifiers over to your new template. Once you have created your test blog, here is the method for copying over your widgets from your old template to your new one:

1. Log in to your Blogger dashboard.
2. You will need to be able to edit both your existing blog template and your test blog template, so it's advisable to have two browser windows (or tabs) open at the same time. You can easily do this by keying CTRL+N to bring up a new page. So for the moment your Blogger dashboard will be available in both browser windows.
3. Now, in the first browser window, select your test blog and go to Template>Edit HTML. Click on the "Upload New Template" link near the top of the page and upload the new XML template you wish to adapt for your main blog. Once this template has uploaded, deselect the "expand widget templates" box.
4. In the second browser window, select your existing blog template and again go to Template>Edit HTML. Do NOT check the "expand widget templates box", as this will make things much easier for you. Now, locate the widget content identifiers in your template sidebar. Most likely, the section will look something like this: The code featured inside the red box displays the identifying code for your widgets, which calls the widgets to appear in your blog. You need to copy all of these sections to yout clipboard, or paste into Notepad for easy editing in a few moments.
5. Once you have copied the widget identifiers from your old template, go back to the browser window in which you can edit your new template.
6. Find this section in your blog template:

<div id="'sidebar-wrapper'"><br /><b:section class="'sidebar'" id="'sidebar'" preferred="'yes'"><br />There may or may not be content here... </b:section><br /></div>

If there are any widgets defined here, it is advisable to delete them. Otherwise you may end up with duplicated widgets. Then in their place, paste the widget codes from your old template:


<div id="'sidebar-wrapper'"><br /><b:section class="'sidebar'" id="'sidebar'" preferred="'yes'"><br />Paste the widget identifiers here </b:section><br /></div>



If there are no widgets present in the sidebar of your new template, the code may look like this instead:


<div id="'sidebar-wrapper'"><br /><b:section class="'sidebar'" id="'sidebar'" preferred="'yes'/"><br /></div>

In this case, you should delete the trailing slash from the end of the line (highlighted in red). Make a line break then paste your widget content as before. Then finally create another line break and add the following line:




</b:section>

1. The finished result should look something like this:
2. IMPORTANT! Do not preview your template at all during this process! If you do, you run the risk of duplicating the widgets which will cause you many problems. This seems to be a glitch on Blogger's behalf rather than an error of this method. In any case, do not preview the template.
3. At this point, you should save the test blog template, after which you can view your blog in the normal manner. You will notice that no widget content is actually showing, only the widget titles. This is perfectly normal: as I mentioned earlier, the widget content is stored in the settings for your original blog.
4. Okay, now we have copied over the widgets, we can download the XML template ready to transfer over to the original blog. To do this, go to Template>Edit HTML and select "Download full template" near the top of the page. Save the template to your computer with a name you can easily identify.
5. Now back to the other browser window where you should have the Edit HTML page for your original blog still on the page. Here you should look for the "upload new template" section near the top of the page. Browse for the template you just downloaded from your test blog and upload it. You should NOT receive any error messages, like this: If you do see such error messages, take note of the widgets the template wants to delete, then choose to cancel the process. You should then copy the appropriate widgets from the old template into the new template in your test blog (as before), save the template and attempt to upload it again.
6. If you receive no error messages, your template will be saved, and you can now view your new blog template with all your old widgets still in place. You can then move the widgets around however you wish in the Layouts section of your dashboard.

courtesy:Amanda

Read more!