How to Create dTree Navigation Menu

Do you want Great Navigation for your Blog? I suggest you to use this stuff! We called dTree Navigation Menu. Maybe you have ever see this Menu. That's right! Like Windows Explorer Navigation Menu. You must have to try this. Just by following these simple steps, you will have Great dTree Navigation Menu on Your Great Blog:

1. Login to your Blogger Account

2. Go to Layout tab

3. Click Edit HTML

4. Download Full Template for your Back Up

5. Copy the code below, and paste before </head> (You can find this code by Ctrl+F)

<link rel="StyleSheet" href="http://www.hotlinkfiles.com/files/2669839_ry7co/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.hotlinkfiles.com/files/2669840_otete/dtree.js"></script>

6. SAVE TEMPLATE

7. Go to Page Elements

8. Click Add a Gadget

9. Choose Add HTML/JavaScript

10. Fill the code below to the Gadget

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://bloggertrick4u.blogspot.com');


d.add(1,0,'Example 1')

d.add(3,1,'Example 1.1','');
d.add(10,3,'Example 1.1.1','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-create-blog.html');
d.add(20,3,'Example 1.1.2','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-setting-blog.html');
d.add(30,3,'Example 1.1.3','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-select-and-use.html');
d.add(40,3,'Example 1.1.4','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-setting-fonts-and.html');
d.add(50,3,'Example 1.1.5','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-post.html');
d.add(60,3,'Example 1.1....','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-upload-photos-to.html');

d.add(5,1,'Example 1.2');
d.add(10,5,'Example 1.2.1','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-post-html-codes.html');
d.add(20,5,'Example 1.2.2','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-setting-my-profile.html');
d.add(30,5,'Example 1.2.3','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-upload-photo-to.html');
d.add(40,5,'Example 1.2.4','http://bloggertrick4u.blogspot.com/2009/06/blogger-trick-bloging-tips-for-beginner.html');
d.add(50,5,'Example 1.2.5','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-create-banner.html');
d.add(60,5,'Example 1.2....','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-create-animated.html');

d.add(2,0,'Example 2','','','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/globe.gif','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/globe.gif');
d.add(10,2,'Example 2.1','http://bloggertrick4u.blogspot.com','','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/user_icon.gif');
d.add(20,2,'Example 2.2','http://21hotbiker.blogspot.com','','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/user_icon.gif');

d.add(4,0,'My friendster!','http://profiles.friendster.com/rie21hotbiker','My Friendster!','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/my_friendster.gif');
d.add(6,0,'My Facebook!','http://www.facebook.com/Rie21','My Facebook!','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/my_facebook.png');


document.write(d);

//-->
</script>

</div>

11. SAVE

12. Now you can see the Result

13. But you must edit the code in the Gadget with yours

 

Good Luck!

»»  read more

Blogger Trick: Set the Blog Width

Many of the good templates in the internet ready for your blog. But for some people feel this is not special. Special is that we create and modified by your own. Results will also be very satisfying because we get a template like what we want. Where to begin? I suggest to you to begin to set the blog width of the view that its header wrapper, outer wrapper, main wrapper, sidebar wrapper and footer. Not too difficult to do it. With little change to the code number, you have to do it successfully. You ready to get started now? Please follow a few steps below:

Note: This example is using Minima Default template by Blogger

 

1. Login to your Blogger Account

 

2. Go to Layout Tab

 

3. Click Edit Html

 

4. Download Full Template! Important to back up your data.

 

5. To set Width of Header, find this code:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Change the red with your want. Example:

#header-wrapper {

width:990px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

 

6. To set Width of Outer, find this code:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Change the red with your want. Example:

#outer-wrapper {

width: 990px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

 

7. To set Width of Main, find this code:

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Change the red with your want. Example:

#main-wrapper {

width: 650px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

 

8. To set Width of Sidebar, find this code:

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Change the red with your want. Example:

#sidebar-wrapper {

width: 300px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

 

8. To set Width of Footer, find this code:

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Change the red with your want. Example:

#footer {

width:990px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

 

9. Click PREVIEW

 

10. If you want to set again, don't click SAVE TEMPLATE!

 

11. If you have done, click SAVE TEMPLATE

 

12. If you want to back to your last template, just upload back up template that your download with Download Full Template.

 

Next post I will tell you about next trick to modified your blog template to be great! Good Luck!

»»  read more

Blogger Trick: Install Date Properties

Date is one of many important information that we can give to visitors. Visitors will more like your blog. Not too much intro for this trick. If you want to Install Date Properties on your blog, go to Free Blog Content right now. And follow these steps:

1. In the Free Blog Content, choose your style.

2. In the below style you choose, save that code.

3. Login to your Blogger Account.

4. Go to Layout tab.

5. In the Page Elements, click Add a Gadget.

6. Choose Add a Html/JavaScript.

7. Paste that code on this form.

8. Click SAVE.

9. See your result.

10. Good Luck and see you in the next post.

»»  read more

Instant Submit Blog to Search Engine

Want to have a famous blog? Submit your blog to Search Engine! Have no time for submit one by one? Use Instant Submit Blog to Search Engine. You just need to fill your Blog URL and your Email. If you want to submit with instant, you can do this way. Here the list:

1. Free Web Submission

2. Submit Express

3. Coming Soon

Note: this list always update when I find another Instant Submit to Search Engine Service.

»»  read more