Releasing Two Column Blogger Template “The Cute Box” - Speedy Yet Professional!



CUTE-BOX-DISPLAY-PIC 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)

Cute-Box


Features

Lets look at some of its Main features,
  1. Spitted Header
  2. Two Column
  3. Well organized Post Heading with separate date, time and label sections
  4. Wide Post body with Stylized BlockQuote
  5. Bullet lists with Image Hover Effect
  6. Post Footer With Seductive Social Bookmarking Icons –The Flapper!
  7. Post Footer With Related Post Widget
  8. Posts summarized With Read More link
  9. Embedded and stylized Comment section. Author and Readers comment with different style
  10. Wide Open Comment Form!
  11. Comment Avatars
  12. Flexible Search Box
  13. Unique Subscription Form
  14. Best Advertisement sections
  15. Four Column Footer Widget. One Column Can accommodate as many widgets as you can add!
  16. Stylized Author Profile 
  17. Bookmarking Widget For Homepage
  18. 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.
  1. Back Up your current Blogger template
  2. Back Up your Blogger widgets
  3. Upload Cute Box
  4. Edit The Navigation Menu
  5. Add The Subscription Email Form
  6. Author Profile
  7. Add The Bookmarking Widget

You will have to save your current blogger template for safety precaution. To do this follow the steps below,
  1. Go To Layout > Edit HTML
  2. Click the link that says “Download Full Template“. As shown in the image below,
backup-template1
    3.    When asked where to save the template, choose a safe location in your hard drive.
    4.    Done!
To save your current widgets follow the steps below,
  1. Go To Layout
  2. 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)
  3. Save the notepad in a safe location
  4. Done!
Once you have downloaded Cute Box then follow the steps below to replace your current template with it,
  1. Go To Layout > Edit HTML
  2. You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,
backup-template
    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!
navigation-menu
To edit the navigation menu, follow the steps below,
  1. Go to Layout > Edit HTML
  2. Search for <div id='navleft'> using the browser search box     (Tip:- Press Ctrl + F )
  3. 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.themobilehub.blogspot.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. Replace http://www.themobilehub.blogspot.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
subscription-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://feeds.feedburner.com/TheMobileHubs" rel="alternate" title="Subscribe using a Feed Reader" type="application/rss+xml"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVgLpJqxvBadbx5YnQ7WQiKVwSkHL3bVgTym5nQ09pYNf27iiTue1zYM9sTZVWCTgsw6BqAyPMVq8KS1hUFXN_KgwwAre4SoeLv6rqPUP29gkHs0ayA9KrcxIRA0UD5VPA1P9Jz2-7W03/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
bookmarking-widget
I will write a comprehensive post on how to add this very important widget.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)