How to Add Element under Header in Blogger Blog

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!

Free Tool to submit your pages to Social Bookmarking sites

Submitting your pages to Social Bookmarking Sites provides multiple opportunities for your content exposure without violating any rules, creating similar publication, and with minimum time and efforts spent. The offer presentation will show you a way to make the process easier for your visitors to submit your site automatically to major social bookmarking site. That might give you an enormous boost in terms of site exposure and related AdSense income.

1. About BlogSocializer

BlogSocializer is a simple widget for your Blogger based blog. It enables blog readers or visitors to submit your blog to major social bookmarking sites, including Digg, Technorati, Delicious, Yahoo! MyWeb, Google Fusion, Blink, Furl, and Simpy.

2. Copy the code
First just copy the widget code below. (right click, than Copy)

<!-- Start of BlogSocializer Widgets -->
<script language="JavaScript" type="text/javascript">
<!--
var addtoMethod=1;
var AddURL = document.location.href;
var AddTitle = escape(document.title);
-->
</script>
<script language="JavaScript" src="http://blogsocializer.googlepages.com/blogsocializer.js" type="text/javascript"></script>
<!--
Get this Blogger widget at
http://fariezweb.blogspot.com/
and
http://blogsocializer.googlepages.com/
-->
<span style="cursor:pointer;" title="Add to Technorati" onclick="addto(8)"><img src="http://blogsocializer.googlepages.com/technorati.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Delicious" onclick="addto(2)"><img src="http://blogsocializer.googlepages.com/delicious.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Google Fusion" onclick="addto(5)"><img src="http://blogsocializer.googlepages.com/google.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Digg" onclick="addto(3)"><img src="http://blogsocializer.googlepages.com/digg.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Yahoo! MyWeb" onclick="addto(7)"><img src="http://blogsocializer.googlepages.com/yahoo.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Blink" onclick="addto(1)"><img src="http://blogsocializer.googlepages.com/blink.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Furl" onclick="addto(4)"><img src="http://blogsocializer.googlepages.com/furl.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Simpy" onclick="addto(6)"><img src="http://blogsocializer.googlepages.com/simpy.gif" border="0"/></span>
<span style="cursor:pointer;" title="Add to Stumbleupon" onclick="addto(9)"><img src="http://blogsocializer.googlepages.com/stumble.gif" border="0"/></span>
<br />
<span style="font-family: Trebuchet MS, Tahoma, Arial; font-size:10px;" title="Get this bookmarking widgets for your blogger"><a href="http://blogsocializer.googlepages.com/">[get this widget]</a></span>
<!-- End of BlogSocializer Widgets -->

3. Paste the code
Now paste the code to your Blogger template. Can work either on new or classic template. In New template (.xml mode) you can simply add a new widget in ’edit layout’ area. But for classic template you just need to paste it at ’edit html’ area. Just for tips, you may insert the code below post content area. You can find some templates with this widget ready to use at TheFachia.

4. Save and Test
Now time to test your new widget. Try to submit one page of your blog to Digg or Delicious. And see how simple it works. Or you can test the script now as demo how it works. Submit this page to one of your favorite social bookmarking below.

You can find detailed instructions of adding new widget here: http://www.smartbloggerz.com/2008/04/how-to-add-bookmarker-widgets-in.html

Developers website: http://blogsocializer.googlepages.com/index.htm

How to Delete ‘nofollow’ Attribute from Blogger Blog

Blogger by default, and other blogging software such as WordPress, automatically adds the "nofollow" microformat extension to all links from user generated content. User generated content is defined as comments or external sources such as linkbacks and trackbacks.

Difference Between NoFollow and Follow Links?

Follow Back Links

These links pass on all “link juice” to the site being linked to, which means search engines follow this link to your site and take note of it. This is why the link is called a follow link, and this is also why these links are the best for your SEO.


Pros

* Link Juice - The most obvious and lucrative benefit of follow back links is the link juice they send to your site. This will help boost your rankings in search engines because most search engines (Google being the main one) calculate your rankings based largely on the amount of links you have coming into your site.

* Increased Interaction - Every visitor of your site had something they were looking for. If you own a webmaster or make money blog or site like mine, follow back links can increase your interaction because these readers are often looking for ways to get a free back link when they visit your site.

* Higher Value - If you sell links on your site, they will no doubt sell for more if they are follow back links rather than if they are no follow back links.

Cons

* Search Engine Backlash - Search engines, Google in particular, are really cracking down on follow back links. They are not only penalizing the site that sells the links or distributes them, but if they have proof of a paid link they will go even further and penalize the buyer. This could backfire on you, so you have to make sure your links look and seem organic, all while not overdoing the whole process.

* Decreased Value - Too many follow links on your page and Google will label you as a link farm and discount the value of each individual link and may even reduce your rankings. Generally speaking, the fewer follow links on a page, the more juice to pass on to each one of those links.

NoFollow Back Links


No follow back links are just like any other link, except they have a small “rel=nofollow” added to the end of them, which means that a search engine crawler will not follow the link to the next site and therefore will not index your page and mark the link as a backlink. These links will still bring you traffic though, which means they are just as useful for normal visitors.


Pros

* Make Genuine Ones Count - By keeping the majority of your links as no follow, you will be making sure your actual in-post or on site links are worth more. So if you’re selling paid reviews and paid links, it may be in your best interests to keep the paid links nofollow to increase the sales of your paid reviews and to make the actual links in your post count more.

* Search Engine Favour - Google has repeatedly been quoted as saying that sites with more nofollow links will fare better in the future, and many are pointing this out as a clue on their part that if you use nofollow links for all your irrelevant or link sales, you will rank higher in the search engines.

* Made for Users - Even though a nofollow backlink may not be helpful to search engine or a webmaster, it is made for users. There is no visible difference in the link, first of all. Secondly, you are helping keep the web clean and to maintain its high quality. Finally, since you are not changing the appearance of a nofollow link, you are still sending traffic or allowing users to visit a site of a commentator or a friend.


Cons

* Link Juice - Once again, the primary and most important factor in the entire nofollow vs follow debate is the “juice” you get from high pagerank or high quality pages linking to yours. This juice is not passed on in a nofollow link and therefore you get minimal SEO benefit.

* Reduced Interaction - Some of your visitors might be “turned-off” by a nofollow link on blog comments, and many times they will not comment if the links the blog is providing are nofollow. This can be a big hit if your blog is fairly small and in a webmaster related niche as commenting and interaction on your site and blog will dip.

* Lost Revenue - If you sell text-links on your site and you mark them as nofollow, be ready to take a hit in your revenue. Like I’ve pointed out above, nofollow text links do not bring nearly as much money or sales as a follow text link will. The reason behind this is because people who are looking for text-links are primarily looking for SEO benefit.

As you see, the advantages of removing no follow attributes in your Blogger blog are not straightforward, and you might decide not to do that removal after all. But if you want to experiment with that modification, or you are positive that potential advantages are overwhelming, you will find below the Blogger hack on how to remove “no follow” attribute from you account.

How to Delete ‘nofollow’ Attribute on Blogger

1. Login into your blogger. Usually you will bring to Dashboard after login.
2. Choose your blog and click “Layout”.
3. Click “Edit Html” subtab on the “Template” tab.
4. Before removing ‘nofollow‘ attribute (as with any other template modification), it is recommended to backup you template by clicking Download Full Template and saving in the safe location on your Hard Drive. You can re-enable it if your template modification producing the errors.
5. Check “Expand Widgets” checkbox at at the top of the Edit Template text box. This expands the Blog Posts Widget Code within which is the comments code.
6. Scroll down the template and find below code

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’expr:id=’"comment-" + data:comment.id’>
<a expr:name=’"comment-" +data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

7. Detele the code rel=’nofollow’ (or you can remove only no, making it rel=’follow‘) and save the template.

You are done!

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.

Content Tree on Blogger Blog

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)

Content Tree on Blogger Blog

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.

For a full description of the add() function see here. You don’t have to provide consecutive (or adjacent) IDs for all the child nodes at a given level. For example, node 15 of the above snippet is attached as a child of node 1 called ’3 Columns’. You can have the nodes anywhere as long as you maintain the uniqueness of the node IDs and provide the correct parent node IDs. Step 3 Once you finish adding the nodes, copy the entire code starting from the <div class="dtree"> to the corresponding </div>. Then insert the entire code using an ’Add HTML/Javascript Element’ widget of the ’Add Page Element’ option. Place the widget where you want the tree to appear. Save the template and view your blog. You will have the tree sitting nicely in your blog! One limitation is the fact that node names do not wrap at the edges. So you have to give names that fit withing the width of the containing sidebar (or whatever location). Let me know what you think of it and also if you come across any problems when installing it.

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.

Removing Newer and Older Post Links in Blogger Blog

If you are using Blogger as blogging platform, you might be used to some of the built-in features, that you consider hard coded, but can be changed with slight template code modification. One of the hacks, presented in this publication, addresses a seemingly minor issue on the page - two links “Older Posts” and “Newer Posts” on the bottom of the page.

For those, who prefer their blog to be maximally close to the static webpages, these links not just unnecessary, but are plainly irritating. There is a way to remove them once and forever. And that is quite easy to do, even for not very experienced users. Note, that this hack will also remove “home” link from the bottom of the blog page.

Open Layout Tab in your blog profile page, choose Edit HTML, and search your code in your blog template for the following text:
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}


Now replace that code with the following code:

#blog-pager-newer-link {
display: none;
}
#blog-pager-older-link {
display: none;
}
#blog-pager {
display: none;
}


Save the template and you are done. I hope that was indeed an easy and straightforward one.

Additional Reading:

http://bloggeruniversity.blogspot.com/
http://tipsforwebsite.blogspot.com/2008/09/how-to-remove-post-and-post-link-on.html

How to disable text selection on Blogger blog

In one of the previous publications, we presented a way to disable right click on the page of your Blogger blog to decrease the copyright violations from your readers “borrowing” your content for their own purposes. To go further in your content safeguarding efforts, you can make the next step, disabling text selection on your page entirely.

This hack was created by Dynamicdrive as well in the form of Javascript, and is also applicable to those bloggers who don’t like their content copied by others. If this concern is on top of your priorities list, then Copy the following code and Paste it to your blog template:


<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false} How to disable
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"

</script>

How to Remove NavBar in Blogger

There might be multiple reasons, why would you like removing Blogger Navbar from the top of your page:

• This bar highlights that you are part of the Blogger community, and you might not want emphasizing that.
  
• The bar might not fit well to your template design.
  
• Blogger has started random advertisement above the Navbar and this has taken valuable space on you blog page.

Due to the simple fact the fact that the Blogger TOS (Terms of Service) do not specify that keeping Navbar on the blog is a mandatory feature of the Blogger account holder, you have no legal or ethical restrictions on the Navbar removal.

Fortunately, removing the Navbar is a quite easy task, and it can be done in different ways.
1. Go to your blogger Dashboard and select Layout.
2. Click Edit HTML.


Method 1

Find the following record in the template layout
<b:skin><![CDATA[/*
Paste this simple code
#navbar-iframe { display: none !important; }


Method 2 (By Aditya)
Look for <b:skin> and paste the following after that:
/* By Aditya http://the-lastword.blogspot.com/ ----------------------------------------------- */ div.navbar { opacity:0.0; display:none; }


Method 3 (By Praveen)

Look for <b:skin> and paste the following after that:

/* By Apnerve http://www.apnerve.blogspot.com ----------------------------------------------- */ #navbar #Navbar1 iframe { display:none; visibility:none; }



Method 4
Just add the following lines anywhere in your Blogger template [enclosed by <style> tags] and the blogger banner will be gone forever.
#navbar-iframe { height:0px; visibility:hidden; display:none; }


Additional Reading:
http://blogger-tricks.blogspot.com/2008/10/hide-new-blogger-xml-navbar.html
http://www.cyberspirits.net/2008/06/hiding-navbar-in-blogger-how-to-hide-navbar-in-blogger/
http://www.jaystech.com/2008/08/how-to-hide-blogger-navbar-in-old-new.html
http://labnol.blogspot.com/2007/01/how-to-hide-blogger-navbar-in-new.html

Disabling Right Click in Blogger Blog

Have you noticed, that some web sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.

Provided cross browser DHTML script from dynamicdrive will help you achieving the same result on your own blog, preventing default right menu from popping up when right mouse is clicked. There are actually two options for this script are provided: Alert Option and Non-alert Option. If the Alert Script is enabled, if someone tries to execute Right click on the blog, then a Message, which can be customized per your desire, appears. If the Non-alert script is activated, then no message is displayed.

To setup this tool in your blog Copy the Following code and paste it to your blog by adding a new page element.

Message Alert Script:

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Message Non-Alert Script:

<script language=JavaScript>
<!--

//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com

var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
</script>