Thursday, June 5, 2008
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:
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:
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.
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 !
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 :
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 :
Add the code below immediately after the above code :
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 :
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.
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. 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:
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:
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.
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
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:
If there are no widgets present in the sidebar of your new template, the code may look like this instead:
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:
courtesy:Amanda
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.
