Create Vertical Menu

We have learned how to create horizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose "Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Vertical Menu Color :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.

6. Then click "Save"

Read More

How to Increase the Width of Comment Form in Blogger

In many Blogger blogs you may have found that the default comment
form’s width is much smaller than rest of the post body width. When you
are customizing the design of your blog then you must be also thinking
to increase the width of the Blogger’s comment form. In this simple tutorial I will tell how to expand it.

Normally, the default width for the comment form of blogger is fixed to 425 pixels. So we just need to override this with a CSS definition.

Step 1: Go to Dashboard > Design > Edit HTML tab.

Step 2: Find ]]></b:skin> and before it add:

.comment-form{

min-width: 100% !important;

}

As you can see that a minimum width has been set to let browsers know that the minimum width of the form should match with the width of the post body.

Step 3: Save your template and view your blog. After going inside of any of the post you will find that the size of the Blogger’s comment form has increased in size (width).

Normally this should work with any template.

Read More

Add Two Sidebar Columns Below Posts in Blogger

Today I will tell you how to add two extra widget sections / sidebar columns below Blogger post sections within main wrapper.

Step 1: Go to Design > Edit HTML tab and find for:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

Step 2: Add the following snippet before the closing DIV. It is </div> marked in bold in step 1.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='sidebar' id='col-left' showaddelement='yes' />

<b:section class='sidebar' id='col-right' showaddelement='yes'/>

<div style='clear: both;'/>

</b:if>

I have used the conditional tags highlighted in red to show these sidebar sections only in homepage of your blog. If you want these widget sections to be shown also on post pages then delete the conditional tags.

Step 3: Find ]]></b:skin> and before this add:

#col-left {

width: 48%;

float: left;

}

#col-right {

width: 48%;

float: right;

}

Step 4: Save you template and go to Blogger “Page Elements” tab.
You will find that there are two widget sections added just below the
post body. Now add some widgets to these and view your blog.

One more thing you will notice that the sidebar columns will be visible after the blog pager and blog feed links. Blog-pager links are “Older Post”, “Home” and “Newer Post” links and blog-feed
links are “Subscribe to: Posts (Atom)” and “Subscribe to: Post Comments
(Atom)” links that are visible in Blogger homepage and in item pages
below every posts.

If you think that it looks bad then you can hide or remove these links so that the two sidebar widget sections will appear only after the post body. So let’s do another step.

Step 5 (Optional): Go to Design > Edit HTML tab and find for “]]></b:skin>”. Immediately below it add the following styling properties:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>

#blog-pager {

display:none;

}

.feed-links {

display:none;

}

</style>

</b:if>

Again note that here also I have used the conditional tags for homepage only. At last save you template

It’s done.

Read More

Add Two Sidebar Columns below Main Sidebar in Blogger

I have told you about creating three columns in Blogger template. Many of us try to avoid this as it may sometimes look clumsy but we need widget sections to add some blogger gadgets. Now if you want to add two small sidebar columns below main sidebar in your blogger template, then I will tell you how to do it.

So let's start!

First go to Design > Edit HTML and backup your template.

1. Find the below section:

#sidebar-wrapper {

width:220px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

2. And just below it add the following codes:

#right-col {

width:48%;

float:right;

word-wrap:break-word;

overflow:hidden;

}

#left-col {

width:48%;

float:left;

word-wrap:break-word;

overflow:hidden;

}

3. Now find:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

</div>

4. And add the bold codes or replace the whole code with:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>

These bold snippets are added which would actually add two widget sections below the main sidebar.

Preview your template for any errors and save it.

Update:
Some of you are having trouble adding the two small sidebar columns in
their templates and may be getting an XML error. So, here's the
solution:

You must be having widgets in your sidebar like:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

< ..widgets here.. >

</b:section>

</div>

Put the bold codes below as shown below:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

< ..widgets here.. >

</b:section>

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>

Now go to Design > Page Elements and check for your newly added two small sidebars below you main sidebar.

To be Noted:

This works only with layout templates.

Read More

How to Make Footer Increase in Width in Blogger

In previous tutorial I have told you how to expand Blogger Header the width of the Browser. Now apply this same rule to increase the Blogger footer section the width of the browser.

Let's have a tutorial.

1. Go to Layout > Edit HTML. Backup your template.

2. The footer has 660px in width and may be different for other
templates, so we need to increase this width. Find this section of code
in your template:

#footer {

border: 1px solid #000000;

width: 660px;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Replace it with:

#footer-wrapper {

border: 1px solid #000000;

width: 950px;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

letter-spacing:.1em;

text-align: center;

word-wrap: break-word;

overflow: hidden;

}

The changes are high-lighted in bold.

2. Add a new property just before #footer-wrapper section:

#footer-expand {

background: #333333;

}

3. Find this section on your template and delete it:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

4. Find the ending of the outer-wrapper. In an example of Minima template, it will be:

</div></div> <!-- end outer-wrapper -->

And just bellow it add the following codes:

<div id='footer-expand'>

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

</div>

You can change the background color of the header and footer sections by changing the hex value #333333 according to your chosen hex value. And you can also add images to it, like:

#footer-expand {

background: #333333 url(your hosted image);

}

Now preview your template and save it.

So you got your footer customized and styled and increase the width of the Blogger template footer section across the browser also. Now style it accordingly.

To be Noted:

This works only with layout templates.

Read More

How to Make Blogger Header Expand the Width of the Browser

So in this segment, we will customize and expand the blogger's header section to the width of browser.

1. Go to Layout > Edit HTML, backup your template.

2. Find this section in your template code:

#header-wrapper {

width: 660px;

border: 1px solid #ffffff;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

The bold code can be different in different templates.

And increase 660px to 950px. This will look like:

#header-wrapper {

width: 950px;

border: 1px solid #ffffff;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Also change the outer-wrapper and footer width to 950px.

3. Preview for errors and save it when it's done.

Advance Way to Increase Blogger Header's Width Across the Browser

If you want to expand the background color of blogger header section across the width of the browser, then apply this tutorial.

#header-expand {

background: #333333;

}

2. Find this section in your template code:

#header-expand {

background: #333333;

}

2. Find this section in your template code:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

And delete this.

Find:

<div id='outer-wrapper'>

And paste the following code just before it:

<div id='header-expand'>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

</div>

3. Now Preview your template for confirmation and save it.

You can change the background color of the header section by substituting #333333 for your chosen hex value or even by your image in the style of outer-header.
Like For example:

#header-expand {

background: #ffcc66 url(Your hosted image URL);

}

So you got your style and increased the width of your Blogger template header section with the width of the browser. Now all you have customize it accordingly to match your style.

To be Noted:

This works only with layout templates.

Read More

Add Three Columns in Footer to Blogger

Keeping you sidebars clean makes your blog look good. This is where the role of the columns in footer section comes in. Also it will give your blog a new style. For example, see at the bottom of my blog. This simple tutorial will explain how to do create and add three sidebar columns to footer section in Blogger templates.

1. Go to Design > Edit HTML and first backup your template.

2. Move your gadgets/widgets (if any) from the footer section to your sidebar.

3. Find the closing "]]></b:skin>" tag and immediately before this line, add the following styling definitions and properties:

#footer-left {

width: 33%;

float: left;

margin:5px;

text-align: left;

}

#footer-center {

width: 34%;

float: left;

margin:5px;

text-align: center;

}

#footer-right {

width: 33%;

float: right;

margin:5px;

text-align: right;

}

#footer-column-container {

clear:both;

}

.footer-column {

padding:5px;

}

3. Find the codes:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

And replace this section with the below codes to add three widget sections to blogger footer:

<div id='footer-wrapper'>

<div id='footer-column-container'>

<div id='footer-left'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer-center'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer-right'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

5. Preview for any error and save it. Go to Design > Page Elements, you will find out that you have added three columns in Blogger footer section.

Now move and add some of the widgets there and see how it looks.

To be Noted:

This works only with layout templates.

Read More

Download 3 Sidebar Columns Minima Blogger Template

Blogger Layout templates, especially Minima, are still famous among the designers and developers as it can be highly customized. But Blogger don't have default three column layout Minima templates. So I have made two Minima Blogger templates with three sidebar columns for tutorial purpose and for those who want to make their own templates from the scratch.

Download Minima Template with Sidebar to Left

Download

Download Blogger Minima Template with Sidebar to Right

Download

Also don't forget to have a look at three column blogger template tutorial for Layout (XML) tempaltes.

Read More

How to Create Three Column Blogger Template

You must have seen many blogs having three columns. You may also want to make your own three column Blogger Layout Template and give your blog a new level in style. So let's do it with a simple tutorial.

You can see in Design > Page elements that you already have two column, one for the main body and the other is the sidebar. So you need to create and add an extra sidebar column.

Adding the Third Sidebar Column in Blogger Template

1. Go to Design > Edit Template and backup your template.

2. Find:

#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 */
}

And change float to:

float: right;

3. Bellow it add:

#left-sidebar-wrap {

width: 220px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

This "float: left" will make the sidebar float to left. Thus you will be having a sidebar to the left of your blogger template.

4. Find and change the width of the outer-wrapper to 900px or more to avoid overlapping of sidebar over the main-wrapper.

5. Find #main-wrapper and replace it with:

#main-wrapper {

width: 410px;

float: left;

margin:0 20px;

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 */

}

Here a margin to left and right of 20px is
added to avoid overlapping of sidebars with the main wrapper. You can
change it accordingly to overcome the issue of overlapping of sidebars.

>

7. Find the section:

<div id='main-wrapper'>

And just before this add:

<div id='left-sidebar-wrap'>

<b:section class='sidebar' id='left-sidebar' preferred='yes'/>

</div>

8. Save your template and "Wallah", its done. You have created an extra sidebar for your Blogger template.


Now you have to do some adjustments yourselves. Adjust the widths by altering the pixels (px) of the "outer-wrapper", "main-wrapper", "sidebar-wrapper" and "left-sidebar-wrap". Adjust the margins, paddings and width by same way to "header-wrapper" and "footer-wrapper" to match the style.

See an example by downloading 3 sidebar columns Minima Blogger Template.

Read More

Static Pages are Now Available in Blogger

Static pages are now finally made available in Blogger. Now you can create a static 'About' page or 'Contact Me' page for your blogs. So it became easy to hide your "Contact Me" page and other pages from appearing in blog's homepage. It is simple to add static pages and create a page similar to how you write a blog post. But the limitation is upto 10 posts.

How to add static pages to Blogger

As posted on Pages come to Blogger In Draft, Go to Posting > Edit Pages tab and click New Page.

After making your desired static page and after publishing the page, you can link to it from the new Pages widget.

This widget lets you add links to your pages as navigation bar at the top of your blog, or in your blog's sidebar.

In the Pages widget, you can decide which pages will have links and the order that they will appear. By checking the "Add new Pages by default" box, you can also choose whether you want the links to be automatically created for static pages whenever you create them.

For those who have customized their template, they may not automatically support Pages as horizontal "tabs". So to add this feature, go to Layout > Edit HTML and check the Expand Widget Templates box.

Now find:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

and change showaddelement='no' to showaddelement='yes'.

If the above HTML does not exist, then paste the following codes after <div id="content-wrapper"> (default position).

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Lastly, Preview your template for any errors and save it. You will get horizontal links now.

Read More

Using Conditional Tags in Blogger

Conditional tags in Blogger are used to tell browsers what to do in certain conditions. For example, when we use:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Hello world

<b:else/>

Goodbye Cruel World

</b:if>

It gives the browser the condition that when it’s an item (post) page then show “Hello world” otherwise, for every other pages show “Goodbye Cruel World”. Interesting, isn’t it.

A conditional tag comes handy when you are designing your Blogger blogs and customizing it from the scratch to take it to the next level. But first you need to know how many types of pages are there in Blogger and then how to use the conditional tags respective to that type of page. In this tutorial I will try to cover most of it, so let’s start.

Type of Pages in Blogger and Conditional Tags For It

Item Page

Item page refers to the individual post pages. It’s the page when you click the tile of the post or the read more link in blogger to read the full post. The conditional tag:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Hello World

</b:if>

Index Page

It refers to every other page except item (post) pages. The conditional tag:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Hello World

</b:if>

Archive Page

It’s for your archive pages in Blogger. The tag will be:

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

Hello World

</b:if>

Static Page

For static pages in blogger it will be:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Hello World

</b:if>

For a Particular Page

If you want to do something on a particular page then the conditional tag for it will be:

<b:if cond='data:blog.url == &quot;URL of the page&quot;'>

Hello World

</b:if>

The only thing that you have to do is replace “URL of the page” with your page’s URL which you want to have.

Homepage only

It's for the homepage only.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Hello World

</b:if>

Alternative Condition

Now suppose you want a conditional tag that alternates every rule. Say, in example 1, I showed how to display something only in post pages but just an “!” mark can alternate the condition. For example, when we apply:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Hello World

</b:if>

It will set the condition that to show it on every page other than post page.

Conclusion

“Hello world” is an example, but if it’s implemented correctly, you can add conditions to particular widgets or gadgets to show them in specific pages. However, you can find in most of my tutorials that I have used it. Have a look at my getting social tutorials for blogger, you will find the tags.

Read More

How to Show HTML and JavaScript Codes within Blogger Posts

While writing my blog posts for my readers I noticed that every time I use "<" or ">" signs to show JavaScript or HTML codes and snippets within my Blogger post editor in "Edit HTML" mode, it's not visible. This happens because Blogger post editor recognizes it as snippets that should be used with your blogger template.

So to show JavaScript or HTML codes within Blogger posts or comments, use "<" instead of "<" and ">" instead of ">" (without quotes).

Now if there are big codes then go to Plus2net.com and convert your codes.

This is the simplest method to show JavaScript and HTML codes within blog posts.

Read More

Create and Add your Own Contact Form to Blogger

If you are a blogger then you must have your own contact form to communicate with your blog readers and visitors. You cannot post your email ID to public because you will get lot of SPAM massages.

Blogger don't give any contact forms for their blogs, so we need to create it and add it ourselves. You can create contact form through Google docs or the simple way is to get it easily from another source.

There are many contact form providers but I will go with Kontactr because it's easy. Register with them and they will give you the code.

Button Code

It is a text link or a button. When the link is clicked it will direct the user to your contact page which is provided by Kontactr. This can be useful when any person wants to contact you and his browser does not supports JavaScript or you want to use it in any other website, forums, etc.

HTML Embed Contact Form

This is best to use for your blog as it uses no JavaScript. It's based on HTML codes using table form, and can be seen in any Lynx based browsers.

Adding Contact Form to Blogger

Choose any one of the above told ways and after selecting and customizing the type of form you want, copy any one of the code that they will provide to your clipboard.

Now, to add the contact form, create a new post, write ‘when, why, how, etc.’ to contact you, paste the any one of the codes mentioned above and publish it. You will have your own contact form for blogger.

Hiding the Contact Me Page Appearing on Homepage of Blogger

You don’t want the contact page to be viewed on homepage. So while publishing the post, back-date it. For example: today’s date is 7/8/2009, then set the date to 6/25/2009 and then publish it. You can also create Static Pages which is now made available to Blogger, which will be easier. See an example of my contact me page.

Read More

Basic Settings for Blogspot

New to Blogger? After creating your blog don't just start blogging because you need to know and configure some settings for your newly created blog on Blogger Platform. From your blogspot dashboard, click “Settings” which will lead you to do some basic settings and tweak your blog.

Under the Settings tab, the first thing you need to do is a basic setup for your blog. So let’s discuss the options.

Blog Tools: Here you can Import your blog, Export to another blog and Delete your blogger blog. It comes handy because you can backup your blog by clicking the “Import blog button”.

Title: Give a title for your blog. It will be better if you choose a title that matches your blog’s niche.

Description (Optional): Don’t forget to give a nice and brief description with some keywords in it. But I prefer to leave it blank as you may don't want to have same description for the posts that you write for SEO reason.

Add your blog to our listing: This will add your blog to Google's blog list. You will also find a navbar on top of your blog which enables you to search and go to next or previous blog that are listed and linked with Blogger.com. If you want others to come to your blog through these options, you may select “Yes” otherwise “No”.

Let search engines find your blog: If you want your blogspot blog to be found by the search engines then select “Yes” otherwise “No” if you want to blog privately.

Show Quick Editing on your Blog: This option will let you to automatically add a quick edit icon to your blog posts after they are published. Only you can see this button after logging in to your blogger account. This allows you to quickly edit your post form your blog directly.

Show Email Post links: Select “Yes” if you want to add a small “Email to Friends” button beneath your blog posts.

Adult Content: Select “Yes” if your blog contains adult content which will ask you blog viewers to confirm that they want to proceed to your blog, otherwise “No”.

Now comes to Global Settings that will be applied to all of your blogs.

Select post editor: There you will find “Updated editor”, “Old editor” and “Hide compose mode” which will not contain WYSIWYG editor. You may like to select the updated editor because it’s easy to write and format your posts accordingly.

Enable transliteration: If enabled, it will let you add a toolbar to the editor to convert English language to users selected language.

At last, save your basic settings for your blog.

Read More

Update Page Rank Juni 2011

Sambil melancarkan menulis karena sudah lama tidak update blog, pagi ini saya perhatikan beberapa blog yang saya miliki ada perubahan Page Rank, ada yang meningkat dan ada juga yang mengalami penurunan google page rank termasuk blog ini yang mengalami penurunan dari page rank 5 ke page rank 3 Crying face. Tapi tidak apa-apa karena beberapa blog yang lain ada beberapa yang mengalami peningkatan.

Tidak tahu persis apakah ini update page rank minor atau bukan, yang pasti banyak yang mengalami perubahan. bagaimana dengan page rank blog anda, adakan mengalami perubahan?

Untuk yang mengalami peningkatan, selamat deh Thumbs up

Read More