This template uses a minimalist, grid-based layout and a unique presentation of post meta-data (labels, posting date, etc) which appear in a column to the left of each post. You can preview a larger version of this template by clicking on the image or viewing the demonstration blog.
More features of this template include:
- Navigation links beneath the header
- Icon to the right of the header (which can be replaced with your own photo or avatar if preferred)
- Fully widgetized sidebar
- Three column footer section
- Styling (and code) to display your own Flickr photostream
- Fonts and colors can be customized through your Blogger dashboard
How to upload the Halo 01 Template to your blog
Download the Halo 01 template and save this to a location on your computer. This template is contained in a Zip folder which you will need to extract using Winzip or your favorite extraction program (if you use WIndows XP, you should be able to decompress the file automatically).
Ensure you have saved the Halo_01.xml file to a location on your computer which you can remember easily. Then log into your Blogger dashboard and go to Layout>Edit HTML.
Near the top of the screen, you will see the "Backup and restore" section where you can upload a new template to your blog:
If you have many widgets in your existing layout, you may be prompted to delete these before the changes can be saved. Be sure to make a back-up of any important widgets before saving these changes! Alternatively, take a look at my tutorial for how to retain widgets when changing Blogger templates.
Once you have uploaded your new template (and confirmed deletion of widgets if necessary), your new template is ready to be configured.
How to change the navigation links
The navigation links beneath the header section have been coded into the template. To edit or add your own links, you will need to edit this section of the template code:
<div class='nav'>
<ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home</a></li>
<li><a href='#' title='Read about this blog'>About</a></li>
<li><a href='#' title='Link title'>Link</a></li>
<li><a href='#' title='Link title'>Link</a></li>
<li><a href='#' title='Link title'>Link</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS</a></li>
<li class='skip'><a href='#main' title='Skip to content'>Main</a></li>
</ul>
</div>
The code highlighted in red demonstrates the actual links you should change: replace these with the URL which you want the navigation buttons to point to.
The code in blue is the link text. You should replace these snippets with the text you would like to be displayed on the navigation buttons.
How to configure your Flickr Photostream
The CSS code required to style the Flickr Photostream is already present in the Halo 01 Blogger template. To add the code required to display a Flickr Photostream, go to Layout>Page Elements in your Blogger dashboard and click the "Edit" link for the Flickr Photostream widget.
Then copy and paste the following code into the content section for this widget:
<script src='http://www.flickr.com/badge_code_v2.gne?count=9&display=random&size=s&layout=x&source=user&user=8131003%40N03' type='text/javascript'/>
Replace the user ID number (highlighted in bold red) with your own unique Flickr ID. If you do not know what your Flickr ID is, you can find this easily using idGettr; simply enter your Flickr username and this simple utility will find your Flickr ID for you!
Finally, save your changes to this widget. Now when you view your blog in your browser, your own Flickr images will appear as thumbnails in this widget.
How to change the icon in the header
The generic icon in the top right of the header section can be replaced with your own avatar if you prefer.Firstly, design your avatar and ensure this is 60px wide and 50px tall. Upload this new avatar to your favorite image host (I prefer Picasa Web Albums, though you could use Photobucket or any hosting service you prefer). Be sure to copy the URL of your avatar to your clipboard.
Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box. Then search for the following line of code:
<p id='authorIntro'><img alt='Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpWuVVFjbrGkL8f7gqOIL66NV067u-zCrUT4ChtquaT1uxQOfYUQEZy_rFh3__L_5mxUANA2rjp3sQVXkJV9_1uahheqLQrsQnJjNAcbNF9IV4npG325zzjE5DRdgwe1pJExDFqGE4hZB/s144/avatar.gif'/><span><data:description/></span></p>
Replace the code highlighted in red with the URL of your new avatar, being sure not to disturb the surrounding single quotes ('). Preview your template to ensure no mistakes have been made when pasting your URL, and if all is well, proceed to save your template.
Licensing and copyright information
All images and content used in this template were created by myself, including the mini-icons used for the post meta-data.
This template is distributed under the Creative Commons Non-Commercial Attribution 3.0 license. This means you can use the template in any of your projects and make any modifications you choose, so long as you do not sell this template and provide attribution to the original author in some way.
No comments:
Post a Comment