How To Add A Tabbed Navigation Widget to Blogger

The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs.
Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script.

To add this widget to your blog, just follow the steps below:

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button

Step 2. Expand the style of the template, by clicking on the sideways arrow before ...

Step 3. Search using CTRL + F for the following tag:

]]>

Step 4. Just above it, add the following code:

/* Tabview for Blogger
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
font-size:12px; /* Font size of text inside tabs */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; /* The background color of the tabs */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; /* Background color of the tab on mouseover */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; /* Background color of the active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; /* Border around the container */
background:#fff; /* The background color of the gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Step 5. Find the tag and just above it, paste this script:

Step 6. Finally, look for this line:

Or if you use an old template of Blogger, search this line:

Step 7. Paste below one of these two lines, this code:

Step 8. Save changes, and go to Layout and there you will see the new areas to add gadgets.

You just have to click on Add a Gadget to add the gadget to the tab that corresponds, or drag a gadget you already have to that section.

If you want to add more tabs, then just add before the last

5 Creative Ways To Get To Know Your Blogging Audience In Real Life

Many of us think that we know who we are writing to, but do we really? The problem with identifying and understanding our blog audience is that we resort to dated techniques that don't help us understand who they really are. Sure, our audience might be made up of 25-35 year old females, but who is that, anyway? What keeps them up at night? What makes them happy? How can we, as bloggers, motive them to read and share what we have to say?

What Really Matters

For starters, you need to understand what matters to them. I have been an advocate for completing basic audience profiles. The goal of these profiles is to get a sense of how your audience thinks, rather than just who your audience is. In these profiles, you will identify a few key things:

• What is their name?
• What do they do?
• What keeps them up at night? (i.e. What are they worried about?)
• What motivates them to read your stuff?
• What do they need most from you? How can you help them?

The goal is to complete several profiles and then use them as you write new posts. As you write, you should be talking directly to one of your audience members. You should have them specifically in mind. When we write TO someone rather than simple FOR someone we can do a much better job of relating to them on a human level. But, sometimes even this exercise isn't enough.Click Here To View Full Post >>

Expandable Recent Comments Widget for Blogger/Blogspot

This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment.

The expanding content can be shown or hidden by clicking on the plus/minus icon or by pressing the "Show all" or "Hide all" button at run time.
How To Add The Expandable Recent Comments Widget to Blogger

Step 1. Log in to your Blogger dashboard and go to Layout > Click on "Add a Gadget" link

Step 2. From the pop-up window, scroll down and click on the HTML/JavaScript widget

Step 3. Copy and paste this code inside the empty box:

Note: Replace http://helplogger.blogspot.com with your blog/site address.

Step 4. Save your widget and you're done!

Enjoy :)

7 Reasons Why Acting Goofy On Your Blog Helps Business

Bloggers, like any other business owner in the world, take their blogs very seriously. Every bit of information they put on there and every post is somber and serious and high on information. Not many would ever want to tamper with the serious image that they have created in front of their audiences. However, as many successful bloggers know, acting goofy on your blog could be a great alternative to always being super serious. Here are a few reasons why you should consider bringing out your goofy side every once in a while on your blog.

1. It helps you and your content team relax

Click Here To View Full Post >>

A Slick New Featured Posts Image Slider For Blogger

In the past I have provided Blogger users with a number of different Image sliders or featured posts sliders.Recently while working on a blog design job I had a client looking for a very specific slider to display some of their best images.The slider needed to have some specific specifications which were not covered by my previous efforts.I also needed to make the slider lightweight and easy to edit so the client could quickly change the images and links.

So we were looking for the slider to be :

1. Full Width - so it spans the entire width of the blog but also for this tutorial I wanted the width to be easily changed.

2. Auto and manual scroll - We wanted the slider to scroll through images automatically, the slide would stop on hover and also visitors would have the option to scroll at their own pace.

3. Two ways to scroll - We wanted to have the classic Next/Previous buttons but also bullets below the slider to skip to any image.

4. Easy to edit - The HTML code for the slider can be accessed via the layout page rather than buried within the template.

So in this post I have to tutorial to add this new slider to your blog.You can see a live demo of the slider by following the like below :
Click Here To View Full Post >>

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional.
To see this drop down menu in action, visit this demo blog

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:

and search (CTRL + F) for the following line:

class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Remove the code in red.
You may have many parts as the one in red, delete all you find.

....then find this section in your template:

/* Tabs
----------------------------------------------- */

...and remove all that is within it, until you reach to the Headings part.

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Then add this to where the code has been removed (instead of the code in green):

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Having done this, we can finally add our menu.

How To Add Horizontal Drop Down Menu to Blogger

To put this horizontal menu with submenus in your blog, then follow the next steps:

Step 1. From Template, go to Edit HTML and just above ]]> paste these styles:

/* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px; 
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzQl-namkthM42__QJv1h1shPIRwRx3hle0091HHxcPQLUYMunjqyT5jKbfpFvWhnJzpMBcxodz7wPhaPtupPuCQ2bMPcuOrHw6huNIjnIgHKgR9PC2_z-eyy50UmuaY-rdJuCKgyiPs/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzQl-namkthM42__QJv1h1shPIRwRx3hle0091HHxcPQLUYMunjqyT5jKbfpFvWhnJzpMBcxodz7wPhaPtupPuCQ2bMPcuOrHw6huNIjnIgHKgR9PC2_z-eyy50UmuaY-rdJuCKgyiPs/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7uI53pFp0pjViMDN3a2vVuvP4B2718wwsP8SlUy2gPIq0mBQoo3__ZywvvpxLh4RN7ZpCGqOziVr7NaoxYauRx4OCVab2auhm2HNslp_YN173QKgZriCF6ZHOdgqXkK7pBJy6SjfiGs/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Screenshot

Step 2. Save the Template

Step 3. Go to Layout > click on Add a Gadget link

Step 4. Choose HTML/Javascript and paste the following inside the empty box:

• Title 1



• Title 2
  • Submenu 2.1
    
    
    • Submenu 2.1.1
    
    
    • Submenu 2.1.2
    
    
    • Submenu 2.1.3
    
    
    
    
  
  
  • Submenu 2.2
    
    
    
    • Submenu 2.2.1
    
    
    • Submenu 2.2.2
    
    
    • Submenu 2.2.3
    
    
    • Submenu 2.2.4
      
      
      
      • Submenu 2.2.4.1
      
      
      • Submenu 2.2.4.2
      
      
      • Submenu 2.2.4.3
      
      
      
      
    
    
    • Submenu 2.2.5
    
    
    • Submenu 2.2.6
      
      
      
      • Submenu 2.2.6.1
      
      
      • Submenu 2.2.6.2
      
      
      
      
    
    
    
    
  
  
  • Submenu 2.3
  
  
  • Submenu 2.4
  
  
  • Submenu 2.5
  
  
  
  



• Title 3
  
  
  
  • Submenu 3.1
  
  
  • Submenu 3.2
  
  
  • Submenu 3.3
  
  
  • Submenu 3.4
  
  
  
  



• Title 4
  
  
  
  • Submenu 4.1
  
  
  • Submenu 4.2
    
    
    
    • Submenu 4.2.1
    
    
    • Submenu 4.2.2
    
    
    • Submenu 4.2.3
    
    
    • Submenu 4.2.4
    
    
    • Submenu 4.2.5
    
    
    • Submenu 4.2.6
    
    
    
    
  
  
  • Submenu 4.3
  
  
  • Submenu 4.4
  
  
  • Submenu 4.5
  
  
  • Submenu 4.6
  
  
  
  



• Title 5
  
  
  
  • Submenu 5.1
  
  
  • Submenu 5.2
  
  
  • Submenu 5.3
  
  
  
  





• 
  
  
  
  
  

Customization:

- replace the text in blue and red with your links and titles.
- if you need more tabs, then add a line like this just above

Link URL" class="top_link">Title

- if you want to add a tab with sub-tabs, then add this code:

Link URL" class="top_link">Title

• Submenu Title


• Link URL">Submenu Title


• Link URL">Submenu Title

- and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this:

Link URL" class="fly">Submenu Title

• Link URL">Other Submenu


• Link URL">Other Submenu


• Link URL">Other Submenu

And that's it! Now Save your Widget and enjoy your new drop down menu! ;)

How To Use The New Blogger HTML Editor

The Blogger template editor now includes a number of changes that seem interesting and make it much more friendly than it was.

To begin with, what we see now is all the template's code starting with numbered and colored lines showing us different code snippets: tags, variables, properties, etc.. depending on the HTML, CSS, JavaScript and even the language of Blogger - include, b:if and other occurrences.

This is what any decent external editor does, but certainly, from now on it will be much easier to find that little bug that drives us crazy when we omit quotation marks or add one more semicolon. This also applies to CSS, which appears mostly in dark blue without distinguishing selectors and rules, but the rest is a major improvement.
Another great help are the numbers that appear in front of each fragment of code, so that we can easily pinpoint and correct errors of this type: "Error parsing XML, line 103, column 9: The element ... "

Using the New Blogger Template HTML Editor

When you want to search for a code in the HTML editor, click inside the editor and press CTRL + F on your keyboard, then enter what you want to find in the search box that appears inside the editor.

Finally, hit the "ENTER" button on your keyboard and it should take you to the requested code.

If you want to be taken to the section of code that belongs to a particular widget, just click on the Jump To Widget button at the top of the editor, choose the widget's name from the list and it will take you directly to that portion of code.

The CSS rules can be found folded at the top of the template, between ... and ... tags. To expand them, you have to click on the sideways arrow next to the line number.

Another great functionality is that now we can Preview Template in the same window without needing to leave the page and we can easily go back to customize our template by clicking on the Edit Template button.

Finally, Format template re-orders the code, adding indentation automatically.

As always, we must use the Save button for the changes to take effect or we can Revert the changes.

And that's it. With a bit of effort, we can easily familiarize with this new HTML editor. Surely as usual and even reasonable to be something inherent in the human condition, this change does not appeal to many. Same with the Lightbox for images, the new template designer, the new desktop and other new things that have been added in the past. But who now remembers that they once were new?
----------
For more info, check out this post on the Blogger Buzz blog, where Google software engineers +Samantha Schaffer and +Renee Kwang explained the steps for moving the date of a blog post from above the post title to underneath it, as an example in using the new Blogspot HTML editor.

List Of Useful Traffic Monitoring Tools For Bloggers

Do you want to make sure your blog stays in the limelight? Do you want to be certain that it remains almost always in the top 20 stats of any search engine? Then you need to get seriously cracking with the hottest traffic monitoring tools on the net today.

Monitoring traffic, and applying the stats gathered in bettering your blog gives it that extra zest needed to attract more traffic. Tracking visitor traffic and analyzing the information you gather thereby is essential in measuring the high and lows of your SEO tactics.

In today’s digital domain, where the race for fame extends across the waves of a different medium altogether, the following traffic monitoring tools should prove of immense help to bloggers.Click Here To View Full Post >>

Blogging Tips For A Niche That's Not So Exciting

Guest Post - Our host is Lauren Smith, in this post Lauren tackles the problems faced when writing for niches seen as less exciting or boring.See How To Become a guest author on Spice Up Your Blog.

Hello, my name is Lauren Smith and I'm an online editor for safe retail website, ADCSafes. I have been reading Spice Up For Blog for a little while now, and have been wanting to contribute a blog post for a while, the only thing that has been stopping me so far is not knowing what to blog about. I'm not exactly an expert when it comes to blogging, I'm 19 and have a couple of years experience in SEO and Wordpress, so hardly an online guru, I have, however, had experience of writing for a small variety of niches, some of which have been easier than others.

The content I find easiest to write is content that is relevant to my interests, and maybe not even necessarily my interests, but broader interests of people from my demographic. For example, I don't particularly like Nicki Minaj, but I'm pretty sure that with a little research I could write a killer article on her. Why? Because there are plenty of other people surrounding me who do like her, and know a lot about her, so it's easy to find a target audience and thrive on it.Click Here To View Full Post >>

5 Deadly Sins I Committed With My First Ghost Writing Client

Guest Post - Our host is Kingsley Agu, in this post Kingsley has some tips for freelance bloggers.See How To Become a guest author on Spice Up Your Blog.

Do you still remember that moment when you check your email or facebook inbox, and you come across a mind boggling email or message, specifically from a soon-to-be prospective client? Yeah, I know how happy you’d be then - especially if this particular message is your first from any client online.

I think I can relate very well with the short remembrance above; since I can still vividly remember how my first ghost writing client contacted me from facebook; asking me to write for him.

This story goes on and on. But it’s not the story I want to tell you about - it’s about the mistakes and glitches which I did as a newbie who just met his very first client.

I also think you can learn from this story as well; because it practically address problems which newbie freelance bloggers encounter, and how they can possibly avoid such problems.

These were the mistakes or should I say - deadly sins which I committed with my very first client-Click Here To View Full Post >>

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category.

To add this recent posts widget for labels or categories in a Blogger blog, follow the next steps:

Recent Posts with Thumbnails Sorted by Labels

Step 1. From your Blogger Dashboard, go to 'Template' and click the 'Edit HTML' button

Step 2. Click anywhere inside the code area and search (CTRL + F) for this piece of code:

]]>

Just above ]]>, paste this CSS style:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }

Step 3. Now try to find this tag:

... just above add this script:

Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own

Update! For a better image resolution add this script above the tag:

Now Save the template to finish with your changes.

So, what we have added, is the CSS to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a HTML/JavaScript gadget:

Step 4. Go to Layout - click on Add a Gadget

Step 5. From the pop-up window, choose the HTML/Javascript widget and paste this script inside the empty box:

Note: Where it says Name-of-the-label should be the name of the label that you want to display, and if your label is case sensitive, like in my example, then you should type it that way.

Within the last code, there are these parts which can be customized - change true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Remember that the gadget displays the latest posts from a particular label... therefore, if you want to display the latest posts from other labels, repeat step 5 for each additional category that you want to add.

That's it :) Enjoy!

Not a Professional Writer ? An Amateur Writers Guide to Sounding Like an Expert

Guest Post - Our host is Gina Smith, the majority of bloggers are new to writing content but as Gina explains in this post that does not mean they can not write like the pros.See How To Become a guest author on Spice Up Your Blog.

The thought of writing a Blog intimidates a lot of people. Why? Most often, people think they have to be a professional writer to sound articulate and knowledgeable. While details such as proper grammar, spelling and word use is important with any type of writing, the beauty of Blogs is they can be written in your preferred writing style. In fact, it is actually recommended that Blogs be written using a more “informal” language. Therefore, if you focus more on what you say rather than how you say it, it’s not very difficult for an amateur writer to be viewed an online expert.Below are some great tips for the amateur to write like a professional.
Click Here To View Full Post >>