Blogger Tips & Tricks

Backlinks Checker Tool

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 22:16:00 -0700

HTML Parser Tool

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 22:15:00 -0700

Color Picker

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 22:13:00 -0700

Moving Down Background for Blogger Widget

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 22:10:00 -0700

Now, I will share about Moving Down Background for Blogger. This trick is very unique. Why? Because the blog background will move without scrolling. So I called this "Unique Background". Want to see the DEMO? OK, now if you want to try Moving Down

Background for Blogger, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
// ***
// Scrolling background
// ***
// height of background image in pixels
var backgroundheight = 4000;
// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);
// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;
// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);
function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}
// Start the animation
scrollbackground();
});
//]]>
</script>

4. Then try to find

body {

just copy this code and put under body {

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8
/yP_7acjnv5U/bgscroll.jpg);

5. Click SAVE TEMPLATE

Meteor Shower on My Blog!!! Amazing Blogger widget

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 22:06:00 -0700

Now, we will try to make an effect. That's Meteor Shower on My Blog. This effect is very interesting. When you open your blog (has added this effect) you blog will be get meteor shower. Very nice right? OK, now if you want to add meteor shower on your blog, just follow the steps below. Want to see the DEMO?

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Then, add the code below

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js">
</script>

5. Click SAVE

Add Zoom Hover Effect to Image to blogger

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 21:59:00 -0700

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

4. Then if you want to active the effect, use this code

<a class="hovergallery" href="http://full-tricks.blogspot.com/" target="_blank">
<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg" /></a>

=> Replace the blue code with your link
=> Replace the red code with image URL
5. Finish... Hopefully useful.

Add Floating Spoiler Menu Jquery Image

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 21:56:00 -0700

Hi, guys! Now, we will try to add floating spoiler menu. This spoiler menu is difference with others. We don't need to click the button to display the menu. Just put your cursor on this menu, and the menu wil be slide out. Want to see the DEMO? Now, if you wanna add floating spoiler menu into your blog, just follow the steps below.
1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#bmenu li a:hover{
color:#fff;}
#bmenu:hover{
z-index:5;
height:175px;
</style>
<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">FBT-1</a></li>
<li><a href="#">FBT-2</a></li>
<li><a href="#">FBT-3</a></li>
<li><a href="#">FBT-4</a></li>
<li><a href="#">FBT-5</a></li>
</ul>
</div>

Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location
5. Click SAVE

Social Sharing Pearl Type Widget Below Every Post

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 21:48:00 -0700

A great and amazing widget that catches the eye of a lot of people this widget is created by to start blogging and its given to our loyal readers so I hope that you all like it. From tostartblogging.com

How To Add This Widget?

As its great we will go on the steps directly so I hope that you all like it.

1- Choose design then go to edit html.

2- Click on expand widget templates.

3- Search for

]]></b:skin>

4- Paste this code above it.

.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

5- Search for:

<data:post.body/>

6- Just after it paste this code Note: if you have added the read more then after the read more code paste it.

<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>If You Enjoyed This Post Please Take 5 Seconds To Share It.</b></span><br/>

<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='70px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/TWITTER.png' width='70px'/></a>

<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='90px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/DIGG.png' width='90px'/></a>

<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/STUMBLE.png' width='100px'/></a>

<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='90px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/FACEBOOK.png ' width='90px'/></a>
<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='70px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/Technorati.png ' width='70px'/></a>
</center><a href="http://www.tostartblogging.com/2012/03/top-social-sharing-plugins-all-in-one.html" style="float:right;font-size:10px;">Top Social Sharing Plugins</a>
<a href="http://www.tostartblogging.com/" target="_blank" style="float:right;font-size:10px;padding:0 4px 0 0">To Start Blogging</a>

</b:if>

Removing our credits will let your site be closed because its against law so please leave the credits.

Now you are done and congratulations for this new look for your site and for the amount of traffic you will get.

Last Words:

I hope you like it please share this post with all your friends and peace : )

Sharing Button Below Post Title Advanced

noreply@blogger.com (Blogger Mentor) — Sat, 31 Mar 2012 21:44:00 -0700

Now here is it another new amazing sharing widget that all of you will like it and I am one from its lovers and I use it in my blogs so I hope you like it, this post will be related to ourblogger widgets and to top social sharing plugins.

Lets see how to add it:

How To Add This Widget:

Go to blogger
Click on design and then go to edit html
Check expand widget templates
Search for <data:post.body/>
Above it you can paste this code

<b:if cond='data:blog.pageType == "item"'> <div style='background:#fffff; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>

<td>

<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

<td>

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'>

<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td> <td><div style='margin-right:5px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td><div style='margin-right:5px;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script></div>
</td>

<td>

<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: "To Start Blogging", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script>

</td> </tr> </table></div> </b:if><br/>

you have to add this code to make Google + button work but if you have added any button before then don’t add it, you have to add it before

</head>

and this is the code

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

and now you are done.

Wordpress Vs Blogger Which is Best

noreply@blogger.com (Blogger Mentor) — Sat, 24 Mar 2012 09:15:00 -0700

Are you confused with which blogging platform to choose to start your blogging career? The major blogging hosting platforms are no doubt Blogger and WordPress. Now to judge which one is better I have written a detailed comparison chart below that will be of great help in making a smart decision.

Note:- I am not an employee of either Blogger or WordPress. The below chart is solely my personal research.

WordPress VS Blogger Comparison Chart 2010. ©

FEATURES	BLOGGER	WORDPRESS	WHO WON?
Template Customization	Offers Free Layout/Style Sheet Customization	No style sheet customization. Payment required	Blogger
Tutorials/Help	Innumerable Tutorials on Blogger Tricks	Hardly some	Blogger
Number of un-official Themes	Innumerable Designers Creating Free Templates each day	Few Designers Involved in offering free templates	Blogger
Coding Used	Uses user friendly scripting and coding i.e HTML, XML, CSS	Uses advance scripting like php that few can understand	Blogger
Dashboard Interface	Highly user friendly. Easy to navigate.	Complicated Interface with hectic navigation	Blogger
Default Template Collection	Limited Collection Of Default templates mostly un-professional	Over 70+ high quality Templates	WordPress
Template/Theme Replacement	Default Template can be replaced by a more free professional template	No template change allowed	Blogger
Widgets	Innumerable Official and Un official Widgets available	Limited Official widgets available. Rarely few un- official gadgets available.	Blogger
Comments	No commenting editing. Moderation allowed. No Spam protection. No user friendly comment form	Comments can be edited and moderated. Spam protection available. User friendly comment form	WordPress
SEO, Optimization	Though Owned by Google, no favoritism. Manual optimization is required	Owned by a private party. Meta Tags Plugins used. Easy To optimize	Both
Blog Privacy	You can limit access to your blog to 100 Authors and 100 readers. All must be Google account holders.	You can limit access to your blog to 35 Wordpress account holders. Posts can be password protected or Private.	Blogger
Comment restriction	You can restrict comments to Google account holders, Open ID users or Any one (includes Anonymous)	Comments can not be restricted. Anyone can comment	Blogger
Blog Import	Only from one BlogSpot blog to another	A Blog can be imported from another WordPress blog or from Blogger, Yahoo! 360, LiveJournal and Movable Type and TypePad	WordPress
Posts and Comment Notification	Authors and subscribers can be notified of latest posts and comments via Email	Same here	Both
Comment Verification	Asks users to verify if they are humans using a 4-6 digit code	Does not asks for any verification. More spam effected	Blogger
Video Storage Limit	Unlimited with Google Video and an upload limit of 16GB	Just 3GB. More space on upgrade.	Blogger
Image storage limit	1 Gigabyte With Picasa Web Albums	3 Gigabytes. More space can be gained through upgrade. You can also upload.ppt, .doc, .odt and .pdffiles	WordPress
File type Storage	Only allows image uploading	Allows upload of files like .ppt, pdf .doc and .odt files. More file types can be uploaded on upgrading.	WordPress
Blog Stats	Does not have any default stats system. But allows third party tracking scripts.	Has a default visitor stats system that shows statistics for two days only and does not provide detailed stats reports. Does not allow third party tracking scripts.	Blogger
Blog co-partners	100 Google account holders can be added as Administrators or Authors	35 WordPress account holders can be added as Administrators, Editors, Authors or Contributors.	Blogger
Advertisements	Displays no advertisement of its own on your blog.	Displays discreet AdSense advertisements on your blog for small percentage of the page views	Blogger
Posts By Email	Has a Mail-to-Blogger feature which turns any email account into a blog-posting application	Posts can be published using emails	Both
Post Feed On Mobile Phones	Supported	Not Supported	Blogger

how to create a blogger account

noreply@blogger.com (Blogger Mentor) — Sat, 24 Mar 2012 06:06:00 -0700

Step 1: Sign Up to Create a Blog at Blogger.com

Visit the Blogger.com home page and select the "Create Your Blog Now" button to begin the process to start your new Blogger.com blog.

Step 2: Create a Google Account

If you don't already have a Google account, you'll need to create one by completing the form on this page.

Step 3: Sign In with Your Google Account

If you already have a Google account, you can bypass the "Create Google Account" step and simply sign in with your existing Google account username and password.

Step 4: Name Your New Blog

Enter the blog name and corresponding domain name (to precede '.blogspot.com') in the spaces provided.

Step 5: Choose a Template

Select a standard template for your new blog.

Step 6: Congratulations - Your New Blog is Active!

Your blog is now live and ready for you to start writing content.

Step 7: Write Your First Post

That's all there is to it! You're now ready to write your first blog post in your new Blogger.com

NewsWeb Popular Blogger Template

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 19:50:00 -0700

Demo | Download

Template name : NewsWeb

Template type : 1 Sidebar, 2 Column, Adapted from WordPress, Featured Section, Fixed width, Grey, Header Banner, Magazine, Right Sidebar, Slider, Top Navigation Bar, Web 2.0, White, News

Release date : July 8, 2011

Coder/Designer Name(s) : Lasantha Bandara / New WP Themes

Coder/Designer URL(s) : http://www.premiumbloggertemplates.com/

http://newwpthemes.com/

Basic Instructions : How to install a Blogger template

Advanced Details : http://www.premiumbloggertemplates.com/2011/07/newsweb-blogger-template.html

Configure Meta tags

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

Replace DESCRIPTION HERE,KEYWORDS HERE as below.

DESCRIPTION HERE:Write your blog description

KEYWORDS HERE:Write the keywords of your blog separated by comma.

How To Configure Favicon:

<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.

Configure Featured Content Slider:

Login to your blogger dashboard--> layout- -> Edit HTML.Find .Now scroll down slowly and you can see each featured slider codes between <div class='imageElement'> and </div> .

Now replace,

"This is featured post X title" with your featured post title.

"SLIDER-X-URL-HERE" with your featured post URL.

Slider description with your slider description.

Slider image with your slider image.

for each featured slider.

How To Add a Header Logo

You can add a header logo for this template easily in the "Page Elements" section(Blogger Default Method).Logo image size must be 363px width and 68px height.

If you have any problem regrading this template,leave a comment below.

Important !!!:

Please do not remove the footer credit. I spend several hours to create this blogger template. So that you can use it for your blog. All I ask is, stay the credit intact.

Magazine Style Blogger Templates

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 19:45:00 -0700

Note:- All templates below are high quality Magazine Style templates. These templates are highly professional free blogger themes that are customized, stylized and optimized by default. These are the only templates available which are equipped with everything a blog author may want. Just download them and start using them. No effort required on your side!

Newsweb

Demo | Details

Emperors

Demo || Download

Tanzanite

View | Details

Cute Box

View | Details

( Church Theme )

View | Details

( Buster Theme Series )

View | Details

Allurement

Demo || Download

Tanzanite Template - Three Column Stunning Blogger Template!

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 19:37:00 -0700

Demo | Download

Features

I kept some features secret from Manisha because unique resource is what we always aim for :D Here is a complete list of the features found in Tanzanite Template

Header With Posts Feeds and Comment Feeds
Beautiful Navigation And Sub Navigation
Left and Right Sidebars. With two mini sidebar on right
Well organized Post Header with separate date, time and label sections
Post body with Attractive BlockQuote
Bullet lists with Image Hover Effect
Author and Reader Comments Different Style
Post Footer With Stunning Social Bookmarking Icons –The Flapper!
Post Footer With Related Post Widget
Posts summarized With Read More link
Customized Blogger Comment Form!
Comment Avatars
Flexible Search Box
Four Column Footer Widget. One Column Can accommodate as many widgets as you can add!
Customized Author Profile With Hover Effect!
Bookmarking Widget For Homepage!
And The List Continues…

Customization

Below I have discussed some important precautionary and customization steps for UsingTanzanite. Click each link for details.

Back Up your current Blogger template
Back Up your Blogger widgets
Upload Tanzanite Template
Edit The Main Navigation Menu
Edit The Sub Navigation Menu

Back Up your current Blogger template

You should save your current blogger template first for safety precautions. To do this follow these steps,

Go To Layout > Edit HTML
Click the link that says “Download Full Template“. As shown in the image below,

3. When asked where to save the template, choose a safe location in your hard drive.

4. Done!

Back Up your Blogger widgets

To save your current widgets codes, follow these steps,

Go To Layout
Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)
Save the notepad in a safe location
Done!

Upload Tanzanite Template

After you have downloaded Tanzanite Template, you will then have to replace your current template with it,

Go To Layout > Edit HTML
You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,

3. Click the browse button, locate the “Tanzanite Template” file and then click the upload button

4. Now you will be asked that certain widget data will be lost if you click save. Since we have already backed up all our widgets so we don’t care. So Click the button that says “Confirm Save”. View your blog to see the new change! :>

Edit The Main Navigation Menu

To edit the Main navigation menu, follow these steps,

Go to Layout > Edit HTML
Search for <div id='navleft'> (Tip:- Press Ctrl + F )
Just below <div id='navleft'> you will see a long chain of code as shown below,

<div id='navleft'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page 1</a>
<ul>
<li><a href='#'>Sub Sub Page 1</a></li>
<li><a href='#'>Sub Sub Page 2</a></li>
<li><a href='#'>Sub Sub Page 3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='http://www.mybloggertricks.com'>Download Tanzanite</a></li>
</ul>
</div>

Replace The Hash signs (#) with your page links and bolded black text with your Page titles. If you don’t want the drop down menu then simply delete the blue and red portion. Replacehttp://www.mybloggertricks.com with your own page link.

If you want to add another link then simply paste this code just above </ul>

<li><a href='#'>Your Page Title</a></li>

Edit The Sub Navigation Menu

To edit the Sub navigation menu, follow these steps,

Go to Layout > Edit HTML
Search for <ul id='subnav'> (Tip:- Press Ctrl + F )
Just below <ul id='subnav'> you will see the following code,

<ul id='subnav'>
        <li>
          <a href='#'>Quick Tour</a>
           </li>
        <li>
          <a href='#'>Other Webs</a>
        </li>
<li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
   </ul>
    </div>

Replace The Hash signs (#) with your page links/URL and bolded black text with your Page titles. To add another link simply paste this code just above </ul>

<li><a href='#'>Your Page Title</a></li>

“The Cute Box” - Speedy Yet Professional!

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 19:26:00 -0700

I was on EID holidays and during these three days a part from spending some time with my family and friends I spent a portion of my time in designing a really cute and speedy “two column” Blogger template. I named it “Cute Box”. It is unbelievably fast loading, well optimized, monetization friendly, has an attractive magazine style look and is surely cute!

Let’s not waste any time and have a look at it, (The Screenshot may be different from actual demo)

View | Download

Features

Lets look at some of its Main features,

Spitted Header
Two Column
Well organized Post Heading with separate date, time and label sections
Wide Post body with Stylized BlockQuote
Bullet lists with Image Hover Effect
Post Footer With Seductive Social Bookmarking Icons –The Flapper!
Post Footer With Related Post Widget
Posts summarized With Read More link
Embedded and stylized Comment section. Author and Readers comment with different style
Wide Open Comment Form!
Comment Avatars
Flexible Search Box
Unique Subscription Form
Best Advertisement sections
Four Column Footer Widget. One Column Can accommodate as many widgets as you can add!
Stylized Author Profile
Bookmarking Widget For Homepage
And So on…

The bolded features are those that are found in 1/10,000 blogger templates found in the blogosphere. I am not kidding!

Customization

Below are important precautionary and customization steps for Cute Box . Click each link for details.

Back Up your current Blogger template
Back Up your Blogger widgets
Upload Cute Box
Edit The Navigation Menu
Add The Subscription Email Form
Author Profile
Add The Bookmarking Widget

Back Up your current Blogger template

You will have to save your current blogger template for safety precaution. To do this follow the steps below,

Go To Layout > Edit HTML
Click the link that says “Download Full Template“. As shown in the image below,

3. When asked where to save the template, choose a safe location in your hard drive.

4. Done!

Back Up your Blogger widgets

To save your current widgets follow the steps below,

Go To Layout
Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)
Save the notepad in a safe location
Done!

Upload Cute Box Template

Once you have downloaded Cute Box then follow the steps below to replace your current template with it,

Go To Layout > Edit HTML
You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,

3. Click the browse button, locate the “Cute Box” file and then click the upload button

4. Now you will be asked that certain widget data will be lost if you click save. Since we have already backed up all our widgets so we don’t care. Go on and click the “Confirm Save” button. View your blog to see the good change!

Edit The Navigation Menu

To edit the navigation menu, follow the steps below,

Go to Layout > Edit HTML
Search for <div id='navleft'> using the browser search box (Tip:- Press Ctrl + F )
Just below <div id='navleft'> you will see a long chain of code as shown below,

<div id='navleft'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Cute Box</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='http://www.mybloggertricks.com'>Download Cute Box</a></li>
</ul>

</div>

Replace The Hash signs (#) with your page links and bolded green text with your Page titles. If you don’t want the drop down menu then simple delete the red portion. Replacehttp://www.mybloggertricks.com with your own page link.

If you want to add another link then simple paste this code just above </ul>

<li><a href='#'>Your Page Title</a></li>

Add The Subscription Email Form

To add the subscription email form do the following,

Go To Blogger > layout
Click the edit link next to Subscribe
Paste the code below inside it,

<style>
.emailform {
padding:0px; margin: 0px 10px 0px 0; float: left; width:100px; height:77px; border:0;
}
input.mbt1 {
color:#fff;
font: bold 10px "ms sans serif",Arial, sans-serif;
background:#41C952;
border:0;
padding:3px;
}
input.mbt1hov {
background:#F39100;
}
</style>

<a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe using a Feed Reader" type="application/rss+xml"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJKm0InOiNlFl6aRgt9iNP8XoweGogUA8ITGaW4i6j-YC96PJdrQI65-o76KCvmbvv9-GD9IWR1_Dw8RsuC2NdPRJUL_uQFvdSMlD6i9E-uJwBp0-aZq13EXqnzama7IS5xfE1XAgOwWz/s400/Email+Orange_128.png" class="emailform"/></a><p><a href="http://feeds2.feedburner.com/TntByStc"rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Receive Updates </a><span style="color: #383838;">By Submitting your email address below:</span></p>

<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#289728; background: #fff; border:1px dotted #289728; width: 90px;" name="email" type="text"/><input value="TntByStc" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="Enter" class="mbt1" type="submit"/></form>

Replace the above links with your feed links. Read this post for detail -> Beautiful subscription form for blogger
Hit Save
Done!

Add Author Profile

To write a new bio for your self or to delete this widget, do the following,

Go To layout
Click the edit link next to About Me
And make the necessary changes that you like to make

Add The Bookmarking Widget

I will write a comprehensive post on how to add this very important widget.

“MBT Church Theme”. Wordpress Converted Blogger Template Free worth $300

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 19:23:00 -0700

This template is different and unparallel in every aspect as compared to any other Blogger template found in the blogosphere. Its not just a Wordpress template converted to blogger but it is a precious blog template which is highly Stylized,Customized and Optimized by default!

See it for yourselves,

Demo | Download

Downloads: 1135

This is how the Church Theme originally looked when converted to blogger.

Demo

Amazed to see the difference, aren’t you? Lets look at some important features that makesMBT Church Theme the only template with “extensive customization”.

Features related to Customization

Some Important features and built-in widgets are highlighted in the image below,

Blogger Navigation Bar invisible by Default (1)
Coloured title (2)
Curtain Style Header (3)
RSS Feed Widget/Subscription Email Form Widget, with a customized email form and button (4) (Not Built-in)
Built-in Pop up image effect (5)
Built-in Fading image effect (6)
Beautiful Social Bookmarking Icons (7)
Related Post Widget (8)
Adsense adds appear in sub-pages only for fast Page-load-time (9)
Built-in Comment counter! (10)
Author comments appear in different style (11)
Different Sidebar Web Bullet (12)
Page Navigation! (13)
Highly stylized Three Column Footer Widget – The most important edition to the template (14)
Blinking Back To Top Link (15)
3D style Sidebar Top Area (16)
3D style Sub Navigation Bar (16)
Built-in Read More or Continue Reading Link visible on homepage

Layout Screen Shot

Here is a screenshot of the layout, where you can see extra “add a gadget” widgets above header, post-body and footer.

Optimization Guide

MBT Church Theme is a well scripted and optimized BlogSpot template. I have done whatever I could to let search engines better crawl your blog content and let your blog rank higher in search results.

By default I have added some very important meta tags under the <head> tag. Meta tags help search engines to better know what your blog is all about. These meta tags need some edition. To edit them follow the steps below,

Go To Layout > Edit HTML

And search for <head> (Press Ctrl + F to use a search box for finding <head>)

You will find 4 important meta tags under the <head> tag as shown in the image below,

You just need to edit the Meta tags as guided in the bolded text below.

Update:- I have observed that for some unknown reasons the meta tags get automatically deleted. If you see no metas in your buster theme than simple copy paste the code below just under <b:include data='blog' name='all-head-content'/>

<link href='mailto:Your Email Address Goes Here' rev='made'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Add your blog description here. Maximum Characters (including spaces) should be 120' name='Description'/></b:if>
<meta content='Add your keywords here, Maximum Characters (including spaces) should be 200' name='keywords'/>
<meta content='Write your name here' name='Author'/>

A meta Description can be a simple sentence that defines the overall topic of your blog.

A meta keywords tag is supposed to be a brief and concise list of the most important terms on your page

I am giving a dummy example below for my blog to help you get an idea

<link href='mailto:mustafa.xyz@hotmail.com' rev='made'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content=’Get dozens of tricks related to blogger hosted blogs with free download of highly professional blogger templates' name='Description'/></b:if>
<meta content='Blogger widgets,templates, download, free, seo tips, blogspot tricks' name='keywords'/>
<meta content='Mohammad Mustafa Ahmedzai' name='Author'/>

Avoid duplicate meta keywords/ repetitive keywords. For instance, for meta keywords I have written 'Blogger widgets,templates, download, free, seo tips, blogspot tricks ‘

and not ‘Blogger widgets, Blogger templates, download Blogger templates, free Bloggertemplates, Blogger seo tips, Blogger tricks’

You can observe that the word Blogger is used 6 times and templates 3 times. Please avoid repetition of a single keyword. You don’t need to worry about the arrangement of your keywords because search engines are clever enough to create good combination of words by themselves out of the keywords you have provided.

Customization Guide

To customize the Navigation Menu, do the following,

To edit the Main navigation menu, follow the steps below,

Go to Layout > Edit HTML
Search for <div id='NavbarMenu'> using the browser search box (Tip:- Press Ctrl + F )
Just below <div id='NavbarMenu'> you will see a long chain of code as shown below,

<div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sitemap</a>
<ul>
            <li>
              <a href='#'>Sub Page #1</a>
       <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>About Me</a></li>
        <li><a href='#'>Contact Me</a></li>
      </ul>
    </div>

Edit the bolded text in the code above with your own Page links and Page Titles. Replace the hash sign (#) with your Page URLs/Links and bolded black text with your Page Titles

If you don’t want sub pages then simply delete this part of the code

<ul>
            <li>
              <a href='#'>Sub Page #1</a>
       <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>

To edit the Sub navigation menu, follow the steps below,

Go to Layout > Edit HTML
Search for <div id='subnavbar'> using the browser search box (Tip:- Press Ctrl + F )
Just below <div id='subnavbar'> you will see a long chain of code as shown below,

<ul id='subnav'>
       <li>
         <a href='http://www.mybloggertricks.com/2009/08/releasing-amazing-mbt-church-theme.html'>Download This Theme</a>
         <ul>
           <li>
             <a href='http://www.mybloggertricks.com/2009/08/releasing-amazing-mbt-church-theme.html'>My Blogger Tricks</a>
<ul>
               <li>
                 <a href='#'>Sub Sub Page #1</a>
               </li>
               <li>
                 <a href='#'>Sub Sub Page #2</a>
               </li>
               <li>
                 <a href='#'>Sub Sub Page #3</a>
               </li>
             </ul>
   </li>
           <li>
             <a href='#'>Sub Page #2</a>
           </li>
           <li>
             <a href='#'>Sub Page #3</a>
           </li>
         </ul>
       </li>
       <li>
         <a href='http://www.mybloggertricks.com'>Template Gallery</a>
       </li>
       <li>
         <a href='http://www.mybloggertricks.com'>Blogger Tricks</a>
       </li>
     </ul>

Again replace the hash sign (#) with your Page Links and Bolded Green Text with your Page Titles. Also Replace http://www.mybloggertricks.com/2009/08/releasing-amazing-mbt-church-theme.html and http://www.mybloggertricks.com with your own Page Links

If you don’t want sub pages delete this part of the code,

<ul>
               <li>
                 <a href='#'>Sub Sub Page #1</a>
               </li>
               <li>
                 <a href='#'>Sub Sub Page #2</a>
               </li>
               <li>
                 <a href='#'>Sub Sub Page #3</a>
               </li>
             </ul>
   </li>
           <li>
             <a href='#'>Sub Page #2</a>
           </li>
           <li>
             <a href='#'>Sub Page #3</a>
           </li>
         </ul>

“MBT Buster Theme Series”. Highly Stylized, Customized and Optimzed by Default! Free To Download.

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 19:19:00 -0700

Have a glance of them by clicking the link below each theme,

MBT Buster Theme Series

View | Download

View | Download View | Download

There are many new features in these MBT template series which will be of great interest to even Amanda herself. And as I say always MBT templates are stylized, customized andoptimized by default! There is absolutely no work required on your side but a little push start at first :>

Lets look at some of its Main features,

Navigation bar
Well organized Post Header with separate date, time and label sections
Wide post body with Stylized Post images and BlockQuote
Post Footer With- MBT Social Bookmarking Icons
Post Footer With- Subscription Block
Post Footer With- Built-in Related Post Widget
Sidebars with rounded header corners
Stylized and un-stylized Sidebar Sections for multiple use
Flexible Search Box
Flexible Subscription Form
Flexible Advertisement section
Cross Browser Compatible Multi Tab Widget – Highly User Friendly!
Embedded and stylized Comment section. Author and Readers comment with different style
Comment Count
Comment Avatar, with Comment Icon for anonymous users
Footer Three Column Widget. One Column Can accommodate as many widgets as you can add!

IMPORTANT WIDGET SECTIONS IN LAYOUT

As shown in the image below, there a total of 4 widget sections in right sidebar. Widget Section 2 and 4 are stylized sections whilst section 1 and 3 are un-stylized. Add only those widgets to section 1 and 3, for which you want a completely unique customization. To know what I mean by that read the Customization Instructions

Now you need to Boost up your selected template with Three Important Professional Procedures. Which are,

Customization
Optimization
Monetization

Customization

Below are important steps to upload and customize your MBT Buster Theme. I have also shared codes to flexible widgets used in the template. Click each link for details.

Back Up your current Blogger template
Back Up your Blogger widgets
Upload MBT Buster Theme
Edit The Navigation Menu
Add The Search Box
Add The Subscription Form
Add The Advertisement Section
Add The Multi Tab Widget
Create The Header Background Image

Back Up your current Blogger template

You will have to save your current template for future use. To do this follow the steps below,

Go To Layout > Edit HTML
Click the link that says “Download Full Template“. As shown in the image below,

3. When asked where to save the template, choose a safe location in your hard drive.

You are done!

Back Up your Blogger widgets

To save your current widgets follow the steps below,

Go To Layout
Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)
Save the notepad in a safe location

You are done!

Upload MBT Buster Theme

Once you have downloaded MBT Buster theme then follow the steps below to replace your current template with it,

Go To Layout > Edit HTML
You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,

3. Click the browse button, locate the buster theme file and then click the upload button

Edit The Navigation Menu

To edit the navigation menu, follow the steps below,

Go to Layout > Edit HTML
Search for <div id='subnavbar'> using the browser search box (Tip:- Press Ctrl + F )
Just below <div id='subnavbar'> you will see a long chain of code as shown below,

<ul id='subnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
<li>
          <a href='#'>Sitemap</a>
        </li>
<li>
          <a href='http://www.mybloggertricks.com'>Download This Theme</a>
        </li>
</ul>

4. Edit the bolded text in the code above with your own Page links and Page Titles.Replace the hash sign (#) with your Page URL and bolded green text with your Page Name/Title. Also Replace http://www.mybloggertricks.com with your own Page URL

5. If you want to add another link/tab but have no option left than paste the code below just above </ul>

         <li>
          <a href='#'>Page Name</a>
        </li>

6. Save your template and view your template to see the changes in action.

you are done!

Add The Search Box

To add the search box you will have to follow the steps below,

Go To layout
Click Add a Gadget from the widget section-3 and choose HTML/JavaScript
Paste the code below inside the HTML/JavaScript widget,

<div id="search">
<form id="searchform" action="/search" style="display:inline;" method="get">
<input id="s" onfocus="if (this.value == "Looking For Something..?") {this.value = ""}" value="Looking For Something..?" name="q" onblur="if (this.value == "") {this.value = "Looking For Something..?";}" type="text"/>
<input onmouseover="this.className='mbt mbthov'" onmouseout="this.className='mbt'" class="mbt" value="GO >>" type="submit"/>
</form>
</div>

5. Click save and view your template to see the change.

you are done!

Add The Subscription Form

Adding this widget needs a bit comprehensive instructions so I will soon publish a separate post on it.

Add The Advertisement Section

Follow the steps below,

Go To layout
Click Add a Gadget from the Widget Section-3, and choose HTML/JavaScript

Add The Multi Tab Widget

To add this beautiful widget, follow the steps below,

Go To layout
Click Add a Gadget from the Widget Section-3, and choose HTML/JavaScript
Paste the code below, inside the HTML/JavaScript widget

<form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 350px;" class="TTs"> <a>TAB 1</a> <a>TAB 2</a> <a>TAB 3</a></div>
    <div style="width: 350px; height: 270px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>

TAB 1 CONTENT GOES HERE

    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>

TAB 2 CONTENT GOES HERE

    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>

TAB 3 CONTENT GOES HERE

    </div>
    </div>
    </div>
    </div>
    </form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Replace Tab 1, 2, 3 With Tab Titles and TAB 1,2,3 CONTENT GOES HERE with the HTML code of your Recent Comments, Posts and Popular Posts Widgets. You can add anything in Tab Content Area.

I worked really hard to make this widget user friendly. You will find this widget code really handy. Further I have also solved the Browser compatibility Issue i.e The tabs will look rounded in Firefox, Safari, Opera, Chrome and they will only look rectangular in IE. IE was a real headache for me!

Create The Header Background Image

You will have to create a Header image in gif format and with dimensions 1024 by 214. After you have created one, upload it to your template as follows,

Go To layout
Then click the Edit link at the top of your layout as shown below,

3. A window will open. Click the Browse button and locate your header image. Make sure you check the box saying “Instead of Title and Description”

4. Hit save and you are done!

Optimization

As I said all MBT Templates are optimized by default! Hence you do not need to find meta tags and add them inside your templates. You only need to add the required keywords, description and your name to the metas. Follow the steps below,

Go To Layout > Edit HTML
And search for <head> (Tip:- Press Ctrl + F to use a search box for finding <head>)
You will find 4 important meta tags under the <head> tag as shown in the image below,

You just need to edit the required fields as guided in the bolded text below.

<link href='mailto:Your Email Address Goes Here' rev='made'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Add your blog description here. Maximum Characters (including spaces) should be 120' name='Description'/></b:if>
<meta content='Add your keywords here, Maximum Characters (including spaces) should be 200' name='keywords'/>
<meta content='Write your name here' name='Author'/>

Once done, hit Save. You have now successfully optimized your Buster Theme by allowing search engines to crawl your template smoothly.

For Details on how to choose good keywords and how to write effective keywords and description, read the Optimization Guide for MBT Church Theme

Monetization

For adding Adsense code below posts, you will need to follow the steps below,

Get Your Adsense Code From www.adsense.com Make sure to select a horizontal banner or horizontally aligned 5 links.
Convert Your Adsense Code into an embeddable one by using the MBT Tool
Now Go To your Layout > Edit HTML
Check The Expand Widgets Box
And search for <div class='adsense'> You will see something like the code below,

<div class='adsense'>
<center><b>YOUR ADSENSE CODE GOES HERE</b></center>
</div>

6. Replace the bolded black text with your Adsense code and hit save. You are Done!

Contact Us

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 18:51:00 -0700

&lt;p&gt;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;Loading...&amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;gt;&lt;/p&gt;

Get 1000$ Worth Money Making Ebooks

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 18:40:00 -0700

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 05:03:00 -0700

Templates

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 04:58:00 -0700

Template

BIZMAX - New !!

Tips - Tricks

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 04:57:00 -0700

Blogger Tips

Bugs-Fixes

How To Remove Threaded Comments in Blogger?

Downloads

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 04:56:00 -0700

Downloads

Social Icons

Widgets

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 04:55:00 -0700

Widget

Social Widget

How To Create Vertical Slider Menu Using Pure CSS3?

noreply@blogger.com (Blogger Mentor) — Fri, 23 Mar 2012 04:36:00 -0700

The objective of the tutorial:
1. Create a vertical menu slider using CSS3 transitions.
2. Create multiple levels of menus under the main menu layout.

DEMO

IMPORTANT:
If you are trying it on Blogger>>>>Backup the template before proceeding.
Tutorial to implement CSS3 Menu Slider:
HTML Markup:

<div class="slider">
                <span id="root"></span>
                <span id="parent1"></span>
                <span id="parent2"></span>
                <span id="parent3"></span>
                <span id="child1"></span>
                <span id="child2"></span>
                <span id="subchild1"></span>
                <div id="tabs">
                    <dl>
                        <dd>
                            <a class="fwd" href="#parent1">Parent #1</a>
                            <a class="fwd" href="#parent2">Parent #2</a>
                            <a class="fwd" href="#parent3">Parent #3</a>
                        </dd>
                    </dl>
                    <dl class="parent1">
                        <dd>
                            <a class="fwd" href="#child1">Child #1#1</a>
                            <a class="fwd" href="#child2">Child #1#2</a>
                            <a href="#">Child #1#3</a>
                            <a href="#">Child #1#4</a>
                            <a href="#">Child #1#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent2">
                        <dd>
                            <a href="#">Child #2#1</a>
                            <a href="#">Child #2#2</a>
                            <a href="#">Child #2#3</a>
                            <a href="#">Child #2#4</a>
                            <a href="#">Child #2#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent3">
                        <dd>
                            <a href="#">Child #3#1</a>
                            <a href="#">Child #3#2</a>
                            <a href="#">Child #3#3</a>
                            <a href="#">Child #3#4</a>
                            <a href="#">Child #3#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="child1">
                        <dd>
                            <a class="fwd" href="#subchild1">SubChild #1#1</a>
                            <a href="#">SubChild #1#2</a>
                            <a href="#">SubChild #1#3</a>
                            <a href="#">SubChild #1#4</a>
                            <a href="#">SubChild #1#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="child2">
                        <dd>
                            <a href="#">SubChild #2#1</a>
                            <a href="#">SubChild #2#2</a>
                            <a href="#">SubChild #2#3</a>
                            <a href="#">SubChild #2#4</a>
                            <a href="#">SubChild #2#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="subchild1">
                        <dd>
                            <a href="#">Links #1</a>
                            <a href="#">Links #2</a>
                            <a href="#">Links #3</a>
                        </dd>
                        <dd><a href="#child1">Back</a></dd>
                    </dl>
                </div>
            </div>

CSS3 Code:

.slider {
    background-color: #fff;
    border: 1px solid #000000;
    margin: 50px auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 200px;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
box-shadow:0px 0px 4px rgba(0,0,0,5) inset, 0px 0px 0px 4px rgba(31,31,102,0.5);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,5) inset, 0px 0px 0px 4px rgba(31,31,102,0.5);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,5) inset, 0px 0px 0px 4px rgba(31,31,102,0.5);
}
}
.slider span {
    display:none
}
#tabs {
    background-color: #FFFFFF;
    margin-left: 0;
    overflow: hidden;
    width: 2000px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#tabs dl {
    float: left;
    height: 300px;
    margin: 0;
    opacity: 10;
    padding: 0;
    position: relative;
    width: 200px;
}
#tabs dl:first-child {
    opacity:1;
}
#tabs dl dd a.fwd {
    background-color:#C8CEFF;
}
#tabs dl dd a {
    background-color: #F4F5FE;
    color: #000000;
    display: block;
    font-size: 18px;
    line-height: 32px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
#tabs dl dd:first-child {
    height: 250px;
    overflow: auto;
    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
#tabs dl dd a:hover {
background:#ffa6b8;
    box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
#root:target ~ #tabs {
    margin-left:0;
}
#parent1:target ~ #tabs {
    margin-left:-200px;
}
#parent2:target ~ #tabs {
    margin-left:-400px;
}
#parent3:target ~ #tabs {
    margin-left:-600px;
}
#child1:target ~ #tabs {
    margin-left:-800px;
}
#child2:target ~ #tabs {
    margin-left:-1000px;
}
#subchild1:target ~ #tabs {
    margin-left:-1200px;
}
#parent1:target ~ #tabs .parent1 {
    opacity:1;
}
#parent2:target ~ #tabs .parent2 {
    opacity:1;
}
#parent3:target ~ #tabs .parent3 {
    opacity:1;
}
#child1:target ~ #tabs .child1 {
    opacity:1;
}
#child2:target ~ #tabs .child2 {
    opacity:1;
}
#subchild1:target ~ #tabs .subchild1 {
    opacity:1;
}

DEMO

That's it, you are done!! You can try it on your site and enjoy. This is going to save you lots of space on your site because your site's complete categories and sitemap can be got into one simple menu container. Thanks for reading and do look at other interesting tutorials on this site.

Blogger Tips & Tricks

Backlinks Checker Tool

HTML Parser Tool

Color Picker

Moving Down Background for Blogger Widget

Meteor Shower on My Blog!!! Amazing Blogger widget

Add Zoom Hover Effect to Image to blogger

Add Floating Spoiler Menu Jquery Image

Social Sharing Pearl Type Widget Below Every Post

How To Add This Widget?

Last Words:

Sharing Button Below Post Title Advanced

How To Add This Widget:

Wordpress Vs Blogger Which is Best

FEATURES

BLOGGER

WORDPRESS

WHO WON?

how to create a blogger account

NewsWeb Popular Blogger Template

Magazine Style Blogger Templates

Cute Box

Tanzanite Template - Three Column Stunning Blogger Template!

Features

Customization

“The Cute Box” - Speedy Yet Professional!

Features

Customization

“MBT Church Theme”. Wordpress Converted Blogger Template Free worth $300

Customization Guide

“MBT Buster Theme Series”. Highly Stylized, Customized and Optimzed by Default! Free To Download.

MBT Buster Theme Series

Customization

Optimization

Monetization

Contact Us

Get 1000$ Worth Money Making Ebooks

Table Of Contents

Templates

Tips - Tricks

Downloads

Widgets

How To Create Vertical Slider Menu Using Pure CSS3?