Usually, when you are new to the World of Blogging, you start from scratch. You use on of the default templates offered by Blogger on their site. Little-by-little, you realize that there are so many blogs in blogospere that look like yours, and you want to distinguish you blog from others. You can choose one of the free or paid templates available online to change the blog interface. Later on, you can experiment even more, tweaking the GUI to your particular needs. The following simple tweak will show you how to add an extra element under your blog Header in 9 steps. The credit goes to BlogSpotTutorial:
1. Login to Blogger with your ID.
2. Click Layout.
3. Click tab Edit HTML.
4. Click sentence Download Full Template, it is very important for you to backup this!
5. Copy the code below, then paste it before code ]]></b:skin>
#under_header{ margin:10px 0; padding:1%; width:98%; }
6. Find out code which look exactly like this :
<div id=’header-wrapper’> <b:section class=’header’ id=’header’ maxwidget="1" showaddelement="no"> <b:widget id=’Header1’ locked=’true’ title=’test (Header)’ type=’Header’/> </b:section> </div>
7. Copy the code below, and paste it exactly after that code :
<div id="under_header"> <b:section class=’header’ id=’underheader’ preferred=’yes’/> </div>
8. Click SAVE TEMPLATE buttons, and wait until your template saved.
9. Now you already have an element which placed exactly below your header. Feel free to add any elements do you wanted to. Want some Google Advertise, or maybe some photos, it’s all up to you!
Showing posts with label templates blogger. Show all posts
Showing posts with label templates blogger. Show all posts
Sunday, February 15, 2009
Wednesday, December 3, 2008
Dynamic Tree DTree for Blogger Blog
In course of my experiments to bring normally dynamic content in the Blogger blog to the appearance and functionality of the static Websites, I was trying to implement the Blogger hack, allowing displaying the blog Table of Content in the Windows Explorer similar interface. While there are multiple scripts available online for this modification, I had to try several of them before I actually found one, which worked right away with relative simplicity. It is my pleasure to offer it to you. All credit for this excellent script is to the author of The Blogger Guide. I will repost the article without modification in respect to the script developer.
A tree control (i.e. the GUI element found in the left pane of Windows Explorer) provides a useful way of organizing a set of hierarchical items. This article will present a method to incorporate such a tree control in to Blogger blogs.
Before we proceed, let’s take a look at how our final tree will look like.
Now let’s see how to include a tree like the above in your blog.
Step 1
First step is to include two resources, a JavaScript file and a CSS file, in to the Blogger template. Copy the following two lines of code and insert them in to the head section of your template.
<link href=’http://thebloggerguide.googlepages.com/dtree.css’ rel=’StyleSheet’ type=’text/css’/>
<script src=’http://thebloggerguide.googlepages.com/dtree.js’ type=’text/javascript’/>
You can copy it immediately under the <head> tag as shown in the figure below. (These two resources are hosted on the Blogger Guide companion site. Don’t worry, there is no tracking code or any thing of that sort there. It’s used purely for hosting files referred to from these articles)
Save your template and exit Edit HTML mode.
Step 2
Next step is to write the code necessary to create the tree. I will first present a sample code and then explain it.
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree(’d’);
d.add(0,-1,’Favorite Articles’);
d.add(1,0,’3 Columns’);
d.add(2,1,’3 Columns Explained’,’http://bguide.blogspot.com/2008/02/three-column-templates-explained.html’);
d.add(3,1,’Skeleton of a Template’,’http://...’);
d.add(4,1,’Adding a Third Column’,’http://...’);
d.add(5,1,’Layout Wire Frame Editor’,’http://...’);
d.add(6,1,’3 Columns with LR Sidebars’,’http://...’);
d.add(7,0,’Blog Traffic’);
d.add(8,7,’How to Monitor Visitors’,’http://...’);
d.add(9,7,’Feedjit’,’http://...’);
d.add(10,7,’Exclude Your Traffic from GA’,’http://...’);
d.add(11,0,’Customizations’);
d.add(12,11,’Add a Custom CSS class’,’http://...’);
d.add(13,11,’Related Posts Table’,’http://...’);
d.add(14,11,’Limit Widgets to Specific Pages’,’http://...’);
d.add(15,1,’3 Column Step by Step Guides’,’http://...’);
document.write(d);
//-->
</script>
</div>
The first line defines a generic div element and applies the class dtree in to that. This CSS class is defined in the dtree.css file which we included in Step 1 above. Next line inserts two buttons (in fact, links) to Expand and Collapse all the nodes in the tree. Thirdly, you find a Javascript enclosed within a <script> element. The first line in the script, d = new dTree(’d’), creates a new tree object to which we can insert nodes. The following lines which start with d.add(...) are the statements that insert all the nodes in to the tree. Then the last line of the script, document.write(d), renders the created tree on to the browser.
The add() function of the dTree takes in several parameters. The first 3 parameters are required (i.e. you must provide values for them) and the other parameters are optional. The above example uses the following 4 parameters.
Acknowledgment: I have used the free tree control offered by Geir LandrŅ at Destroydrop. The original files have been slightly modified to make them available online, to be used inside Blogger.
Note: You are free to use the resources used in Step 1. But if you do use, please link to this article from your blog.
If you want to see the practical implementation of this script, you can visit my new blog Data Recovery Techniques.
A tree control (i.e. the GUI element found in the left pane of Windows Explorer) provides a useful way of organizing a set of hierarchical items. This article will present a method to incorporate such a tree control in to Blogger blogs.
Before we proceed, let’s take a look at how our final tree will look like.
Now let’s see how to include a tree like the above in your blog.
Step 1
First step is to include two resources, a JavaScript file and a CSS file, in to the Blogger template. Copy the following two lines of code and insert them in to the head section of your template.
<link href=’http://thebloggerguide.googlepages.com/dtree.css’ rel=’StyleSheet’ type=’text/css’/>
<script src=’http://thebloggerguide.googlepages.com/dtree.js’ type=’text/javascript’/>
You can copy it immediately under the <head> tag as shown in the figure below. (These two resources are hosted on the Blogger Guide companion site. Don’t worry, there is no tracking code or any thing of that sort there. It’s used purely for hosting files referred to from these articles)
Save your template and exit Edit HTML mode.
Step 2
Next step is to write the code necessary to create the tree. I will first present a sample code and then explain it.
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree(’d’);
d.add(0,-1,’Favorite Articles’);
d.add(1,0,’3 Columns’);
d.add(2,1,’3 Columns Explained’,’http://bguide.blogspot.com/2008/02/three-column-templates-explained.html’);
d.add(3,1,’Skeleton of a Template’,’http://...’);
d.add(4,1,’Adding a Third Column’,’http://...’);
d.add(5,1,’Layout Wire Frame Editor’,’http://...’);
d.add(6,1,’3 Columns with LR Sidebars’,’http://...’);
d.add(7,0,’Blog Traffic’);
d.add(8,7,’How to Monitor Visitors’,’http://...’);
d.add(9,7,’Feedjit’,’http://...’);
d.add(10,7,’Exclude Your Traffic from GA’,’http://...’);
d.add(11,0,’Customizations’);
d.add(12,11,’Add a Custom CSS class’,’http://...’);
d.add(13,11,’Related Posts Table’,’http://...’);
d.add(14,11,’Limit Widgets to Specific Pages’,’http://...’);
d.add(15,1,’3 Column Step by Step Guides’,’http://...’);
document.write(d);
//-->
</script>
</div>
The first line defines a generic div element and applies the class dtree in to that. This CSS class is defined in the dtree.css file which we included in Step 1 above. Next line inserts two buttons (in fact, links) to Expand and Collapse all the nodes in the tree. Thirdly, you find a Javascript enclosed within a <script> element. The first line in the script, d = new dTree(’d’), creates a new tree object to which we can insert nodes. The following lines which start with d.add(...) are the statements that insert all the nodes in to the tree. Then the last line of the script, document.write(d), renders the created tree on to the browser.
The add() function of the dTree takes in several parameters. The first 3 parameters are required (i.e. you must provide values for them) and the other parameters are optional. The above example uses the following 4 parameters.
- Node ID - A unique numerical ID number. Assign a sequentially increasing number to each new node.
- Parent Node ID - If you want to create a child node, then the ID of the parent node should be given here. This will be ’-1’ for the root node. (See the first d.add(...) line in the example)
- Node Name - A textual description for the node
- Node URL - If you want the node to link to some resource (e.g. an HTML page or some online image), provide the URL of the that resource as the 4th parameter.
Acknowledgment: I have used the free tree control offered by Geir LandrŅ at Destroydrop. The original files have been slightly modified to make them available online, to be used inside Blogger.
Note: You are free to use the resources used in Step 1. But if you do use, please link to this article from your blog.
If you want to see the practical implementation of this script, you can visit my new blog Data Recovery Techniques.
Subscribe to:
Posts (Atom)