Saturday 14 May 2016

How To Customise Simple Blogger Page Tabs


Learning HTML and CSS can be quite the headache. I know it, I've done it. Alas, it doesn't have to be so, learning how to code can actually be a walk in the park when you know what the heck it is you're actually reading and writing. Through the Basic Blogspot CSS series, I'll be taking you through the code behind your blog, from top to bottom, and how to customise the heck out of some of the most important aspects of your design. Today, I'll be teaching you the code behind your page tabs and the different ways you can style them.

Getting To Grips With Blogspot Page Tabs


Blogspot already has some customising options when it comes to your tabs. You can easily change the tabs text style and colour, and the background and separator colours, but aside from that, the options are limited, and limitations are not good. You need to kick those limitations out the door and get to grips with some actual code if you're going to create something awesome. So, what code is worth knowing concerning your tabs?

div.tabs-outer This code controls the outer area your tabs lie in within your design.
div.tabs-inner This code controls the inner area your tabs lie in within your design
.tabs-inner .PageList ul li This code controls the tabs themselves.

These three codes are the bare basics when it comes to coding your tabs area. Once you know what these codes are and what part of your tabs they control, the sooner you can start to understand what you want to achieve, and what code you need to use to create your perfect look. Now, let's move onto the fun part.

Make Sure You Back-Up Your Template Before Doing Anything!


Make your way through to your Template tab in the sidebar, moving along to Customise just below your blogs preview. Before we start playing with CSS, make sure in your tab options, you have your text options set to black, and your background options set to transparent. Move onto the Advanced area, and then scroll your way to Add CSS. This my friends, is where the magic happens.

First, lets take a look at the 3 different styles of tab you can have. Click to view larger size.


In the first example, you can see how the div.tabs-outer code controls the entire tab area, stretching from left to right, covering the entire width of the screen. This style is pretty common among a lot of Wordpress blogs and is usually found above the header (something else I'll show you a little later on). In the second example, you can see how the div.tabs-inner code controls a smaller area surrounding the tabs, shortening the area to the same width as your blog and it's entire content, sidebar included. In the third example, you can see how the .tabs-inner .PageList ul li code controls the individual tabs, separating them from one another, a style similar to my own.

Now we've got the look, it's time to start playing with some code, but first, what does specific code do?

background This changes the background colour of an element.
padding This clears the area around an element within the elements margins.
margin This clears the area around the outside of an element.
font-size This changes the font size of an element.
font-weight This changes the weight of the font in an element.
text-transform This changes the style of the font in an element.
border-radius This changes the edges of an element making them rounded.
transition This controls the speed :hover effects come into play.

Now you know what different types of code change and control in terms of design, it's time to play around.

Creating Page Tab Styles With CSS


To achieve the first example, start with the following CSS:

div.tabs-outer {
background: #HEX-CODE;
}

From this starting point, you can incorporate different design elements that take your fancy.

You could, for example, decide to change the background colour, the padding around the tabs, the space between each tab and centre the tabs themselves. Your CSS would look something like this:

.PageList {text-align:center !important;}
.PageList li {float:none !important; display:inline !important;}

div.tabs-outer {
background: #ff10ff;
padding: 10px;
}

.tabs-inner .PageList ul li {
margin-right: 40px;
}

The above code would result in this look.


Let's explain a few of the details..

The first block of code controls the aligning of your tabs to the centre.
The second block of code controls tabs outer design; the background colour and space around tabs.
The third block of code controls the tabs inner design; the space between each individual tab.

To achieve the second example, start with the following code.

div.tabs-inner {
background: #e6e6e6;
}

If you were to use the same example CSS code used in the previous example, the only change you'd make in the code would be switching out outer for inner, resulting in this look.



The third example is a little more difficult to achieve, but is oh so worth it. Start with the following CSS:

.tabs-inner .PageList ul li {
background: #e6e6e6;
padding: 0px 10px;
margin: 5px;
}

Now, because this style allows you to view each tab individually, you can add more design elements in the code, resulting in a better look. Using most of the CSS code used in previous examples, you could use CSS like this:

.PageList {text-align:center !important;}
.PageList li {float:none !important; display:inline !important;}

.tabs-inner .PageList ul li {
background: #ff10ff;
padding: 10px 40px;
margin: 5px;
border-radius: 10px;
}

You could remove the border-radius: 10px; for more square tabs, but the above code would result in this:



How To Utilise :Hover Effects For Page Tabs


Alas, there's still more ways you can customise your tabs, with :hover effects.

I mentioned briefly earlier about :hover effects and how they relate to transitions.
This is where we learn more about that.

When you hover over something, 9 times out of 10, there's an effect in place that changes the look or style of the something your hovering your cursor over. Nellie and Co. has effects that change the width and shape of an object, that change the transparency of an object, or the colour of an object, and all these are achieved by creating a :hover effect for your element.

Let's go back to style example one.

For this style, you would need to add CSS coding below the previous code like this:

.tabs-inner .PageList ul li:hover {
background: #6e6e6e;
padding: 10px;
margin-right: 20px;
transition: all 0.5s;
}

The hover effect would look like this:



The CSS code you'd need to add to create a ;hover effect for style two would be like this:

.tabs-inner .PageList ul li:hover {
background: #6e6e6e;
padding: 10px;
margin-right: 20px;
transition: all 0.5s;
}

The hover effect for this style would look like this:



The CSS :hover code you'd need to add for style three is much more simple, like this:

.tabs-inner .PageList ul li:hover {
background: #6e6e6e;
transition: all 0.5s;
}

The hover effect for that style would look like this:



:hover effects don't just have to be a change in background colour.

By changing the padding values to: padding: 10px 20px; - you could alter the size of the tab box, or by changing the :hover value to a:hover, you can change the text colour by using a hex colour.

One more piece of coding that you may like to know..

You can move your blog header to below your page tabs.


Once you've saved all your CSS, come out of the customising area by clicking < back to Blogger and then go to your HTML next to Customise. You'll be met will a wall of code. Wowzer indeed!

Do not panic, the next step is easy as pie and will allow you the flexibility to either have your tabs above your blog header, or below, as you can see on Nellie's design.

Once in, press Ctrl and F on your keyboard, and a little search box will appear on the right hand side at the top of all the code. In that search box, copy and paste in the following:

<div class='region-inner header-inner'>

Directly underneath that code, you'll see the following:

<b:section class="header" id="header" maxwidgets="1" name="Header" showaddelement="no">
<b:widget id="Header1" locked="true" title="Nellie and Co. (Header)" type="Header">

Swap out 'no' for 'yes' and 'true' for 'false', then save your template.

Now that you're able to move your header below your tabs, your blog could now look like this:



Phew, That Was a Lot To Take In, Right?


Hopefully, you're now not only a little more up on what different coding values mean and do, but you should also now know how to customise your Blogspot Page Tabs simply and effectively. There are many other ways you can customise your tabs, and you'll learn these with time and confidence, and the longer you learn CSS for, the more you'll come to understand. For colour hex codes, check out either colour-hex.com or colorhexa.com, and for more CSS coding options, check out w3schools.com.

Did You Know How To Customise Page Tabs on Blogspot?

19 comments:

  1. This was amazing, Amanda!! I've been looking for a tutorial like this for so long and your tutorial is such a godsend! Thank you for breaking it down and explaining it so patiently and easily - I actually feel like I understood everything you said when normally I'm completely lost when people start talking about HTML and CSS! Thank you again! I'm definitely going to come back and use this xD

    ReplyDelete
  2. This tutorial is so helpful and easy to follow, Amanda! I'll definitely bookmark this for future reference. :)

    ReplyDelete
  3. Great tutorial! Thank you for sharing it. I'm not going to be playing around with my blog's layout anytime soon as I bought a premade one, but I will be saving this for future use.

    Carrie @ Paper Bindings

    ReplyDelete
  4. [img]http://i.imgur.com/k5lq3Y9.jpg[/img]
    One of the tabs is making two lines. It should be in one line.
    How do I fix it?

    ReplyDelete
  5. Thanks for the post and tips..even I also think that hard work is the most important aspect of getting success..

    HTML basics

    ReplyDelete
  6. I use this codes but it isn't working :( What's wrong?

    ReplyDelete
  7. the last one i chose is not working, my tabs are still below why, please i need help

    ReplyDelete
  8. You made my day! Thanks a lot. I looked such a long time for separating the tabs in my blog. Now, with your help, it works. If you want to have a look at my blog: www.gecko-reisen.blogspot.com

    Best regards
    Wolfgang

    ReplyDelete
  9. BLESS YOU. Here is the weird problem it took me an embarrassingly long time to figure out: my page list would not display its' background color correctly. I'd set it hot pink, it'd look dark purple. Every color turned out weird. I figured it was a template problem, since my bad template had other weird overlays. Today I finally figured it out. It was showing my page's background color, but since my background is custom it was just putting a weird translucent grey over every color I set it as. It was doing this because I didn't realize all nav bars are translucent!! Then I had to figure out that the widget I use is a PAGE LIST not a NAV BAR. YOUR CODE IS THE ONLY ONE THAT WORKS. It is opaque now, the colors are finally correct!!!! WEEEEEEEEEEEEEEEEEEEEEEEEEEE tytytytyty

    ReplyDelete
  10. This information is meaningful and magnificent which you have shared here about the ****. I am impressed by the details that you have shared in this post and it reveals how nicely you understand this subject. You can also visit Transparent LED Display for more **** related information. I would like to thanks for sharing this article here.

    ReplyDelete
  11. Goappx is one of the leading clone app solution provider with the latest feature at an affordable price. We are specialized to develop clone app like Uber, Whatsapp, e-commerce and justeat clone.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Uberlikeapp's TikTok clone App can be useful for businesses that want to get into the short video-sharing social media market. Our team of technical experts adds cutting-edge features and an easy-to-use design to the app. Do not pass up this chance to make money. Visit our site to see the live demo!

    ReplyDelete
  14. يجب أن يكون هذا أحد أكثر محتويات الويب ذكاءً التي صادفتها في الآونة الأخيرة. يتشابه الأسلوب والتسليم مع NCLEX CERTIFICATE FOR SALE ONLINE التي تغير حياة الناس في الوقت الحالي. سأضع إشارة مرجعية على هذا الرابط حتى أتمكن دائمًا من العودة لمزيد من المحتوى الإعلامي. تحياتي لكم جميعا وسنة جديدة سعيدة

    ReplyDelete
  15. Excellent content. It will be beneficial to those who seek information Pakodus offer you ready-made Postmates Clone Alternative allow you to completely manage ordering and delivery system. We also render you the Holachef & Evernote Clone with 100% sourcecode.

    ReplyDelete
  16. Thanks for sharing this post. It's very nice topics to share about create customise blog page with simple guidelines.
    Developing a Gojek clone app involves creating a multi-service platform that offers a variety of on-demand services to users.

    ReplyDelete