Adding Colorful Vertical Menu Tabs In Blogger

My endless imagination brought me  to make another kind of menu tabs but  for this time  we will position it in a vertical manner. The initial codes was from Muhammad Mustafa and I made some changes on it to  be more compatible with the newbie bloggers. Here are the steps on how to make this vertical menu tabs.

Check also this  post regarding on how to make a horizontal drop menu tabs in a blog which  is a  always present in every blog across the internet.

Live Demo

Adding Colorful Vertical Menu Tabs In Blogger

Note: Back -up your Template
Step 1.  Go to your Blogger Dashboard
Step 2.  Click Template  and have a back-up on it
Step 3.  Hit the Edit HTML button
Step 4. Select among the  21 vertical menu tabs below.  As you have noticed that there are two sets of codes available in every vertical menu tabs, the CSS which is responsible for the appearance and the HTML which is responsible for number of tabs and positioning of the menu. Place the  CSS of the selected menu tabs above the tag ]]></b:skin> (don't forget to Save your Template after putting the css code above the ]]></b:skin tag) and then put the HTML tag directly on your sidebar (either left or right).

How to Customize the Navigation Menu Tabs

 If you want to change the Menu links (mark with the '#1, #2, #3, #4 and #5') and Tab's name (mark with the bolded orange text 'Link 1, Link 2, Link 3, Link 4 and Link 5') as shown in the blockquote below.

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

Replace #1, #2, #3, #4 and #5 with link or url of the page and replace the bolded orange text  ('Link 1, Link 2, Link 3, Link 4 and Link 5') with the  name of your pagetabs.
Adding another tab in your vertical menu tabs is another task especially if you have multi pages in your blog. Just find the  </ul> tag in the set of  HTML codes and add the code '<li><a href="#" >Link</a></li>' just above that </ul> tag as shown below.

<div id="menu6"> <ul>
<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>
<li><a href="#" >Link</a></li>
</ul> </div>

Vertical Menu Tab #1

HTML Code:

<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8f2oRVw0QtihsHHIKzj-qzxdfxG2jJCCjcAEmVZUzMndBNARDZb0VQ056V23wO_f065F9-iKmtjf_aviD6UYZcQtCRf5LQYYmZUYIPCSI7O9PnzP8uJmFTeQr9PfJXuc-iItgrSJ7DQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8f2oRVw0QtihsHHIKzj-qzxdfxG2jJCCjcAEmVZUzMndBNARDZb0VQ056V23wO_f065F9-iKmtjf_aviD6UYZcQtCRf5LQYYmZUYIPCSI7O9PnzP8uJmFTeQr9PfJXuc-iItgrSJ7DQ/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #2

HTML Code:

<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnCI6ak9ouZOwg_uQP1NGWSgJ4jDchsBXcNYavbcm0I2UnZlf2XtGmL4fDv9MDJaHepWnrEWJ-CrYXiC5yjFt61B-PZFth5QQyOJJYxXYq-JBkt-TiJiMue5mknwTdcVStajZ1xkKHCU/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnCI6ak9ouZOwg_uQP1NGWSgJ4jDchsBXcNYavbcm0I2UnZlf2XtGmL4fDv9MDJaHepWnrEWJ-CrYXiC5yjFt61B-PZFth5QQyOJJYxXYq-JBkt-TiJiMue5mknwTdcVStajZ1xkKHCU/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #3

HTML Code:

<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoe5CFNLSAGBYIPxos1GRfd8O0dnt4suDNvpdjZmt21VaSf8iKfP7BFfZWposVDhhMuKui8O9G7OLvdcE9E0pJCFmxx5i_vI33JlhvG9qmOQVe994FPu7oNBtsBLLbyYCX-O_ajA2X9g/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoe5CFNLSAGBYIPxos1GRfd8O0dnt4suDNvpdjZmt21VaSf8iKfP7BFfZWposVDhhMuKui8O9G7OLvdcE9E0pJCFmxx5i_vI33JlhvG9qmOQVe994FPu7oNBtsBLLbyYCX-O_ajA2X9g/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Vertical Menu Tab #4

HTML Code:

<div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Vertical Menu Tab #5

HTML Code:

<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Vertical Menu Tab #6

HTML Code:

<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIm9DkyvgQSprbBfXPRcf-n38b29uTHIxak6FjS9f-TXGa0YVXryYmbJr5HuTpi2aP_DxZ31z3EWO55nMbO-nbyIY-X3zniy-h3PkvUBjkecs9CwLwWAqaP6qDiRc3ad-4yp6sfLX2f_M/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIm9DkyvgQSprbBfXPRcf-n38b29uTHIxak6FjS9f-TXGa0YVXryYmbJr5HuTpi2aP_DxZ31z3EWO55nMbO-nbyIY-X3zniy-h3PkvUBjkecs9CwLwWAqaP6qDiRc3ad-4yp6sfLX2f_M/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Vertical Menu Tab #7

HTML Code:

<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmwiQoOBg8wbvEvhM2LJTQJAeV_ZhdmEFgWcSPPbtZNJ_GzyLZfQCeBudrzoDkO-sRAtLkYgpkpbsc2VFEuV8-oVJ99834TaiF4AlTuLrjK8o2QJQVA3uzrrt-wpMHBtXPf314fwiTLE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmwiQoOBg8wbvEvhM2LJTQJAeV_ZhdmEFgWcSPPbtZNJ_GzyLZfQCeBudrzoDkO-sRAtLkYgpkpbsc2VFEuV8-oVJ99834TaiF4AlTuLrjK8o2QJQVA3uzrrt-wpMHBtXPf314fwiTLE/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #8

HTML Code:

<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLis6t-IJKG_bioMHFTERqKf2GkOmxB75upujhgCtDDF5Y-1oNocskFSbYddhl2UStvWRRK2ZskaQLxSbUKi1ckV9P4yO4Yce5aP0PFDrKDLIJEHiGA07sOrncc4d5rd5zmiamyKB0tU/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLis6t-IJKG_bioMHFTERqKf2GkOmxB75upujhgCtDDF5Y-1oNocskFSbYddhl2UStvWRRK2ZskaQLxSbUKi1ckV9P4yO4Yce5aP0PFDrKDLIJEHiGA07sOrncc4d5rd5zmiamyKB0tU/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #9

HTML Code:

<div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5yYD_uCNkGCqXMXfWHR0g_ABAs7hPpL4U1w1onvjzPT4s5UK1BDY-f_FbctSse7o0VfD9JGsDPPNMag_g-OeDZwwlnREXZEf3MJbj4lzj8lklMueznIJOqA0kI2BplheO2FEHFCLZ-cs/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5yYD_uCNkGCqXMXfWHR0g_ABAs7hPpL4U1w1onvjzPT4s5UK1BDY-f_FbctSse7o0VfD9JGsDPPNMag_g-OeDZwwlnREXZEf3MJbj4lzj8lklMueznIJOqA0kI2BplheO2FEHFCLZ-cs/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5yYD_uCNkGCqXMXfWHR0g_ABAs7hPpL4U1w1onvjzPT4s5UK1BDY-f_FbctSse7o0VfD9JGsDPPNMag_g-OeDZwwlnREXZEf3MJbj4lzj8lklMueznIJOqA0kI2BplheO2FEHFCLZ-cs/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Vertical Menu Tab #10

HTML Code:

<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnCI6ak9ouZOwg_uQP1NGWSgJ4jDchsBXcNYavbcm0I2UnZlf2XtGmL4fDv9MDJaHepWnrEWJ-CrYXiC5yjFt61B-PZFth5QQyOJJYxXYq-JBkt-TiJiMue5mknwTdcVStajZ1xkKHCU/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnCI6ak9ouZOwg_uQP1NGWSgJ4jDchsBXcNYavbcm0I2UnZlf2XtGmL4fDv9MDJaHepWnrEWJ-CrYXiC5yjFt61B-PZFth5QQyOJJYxXYq-JBkt-TiJiMue5mknwTdcVStajZ1xkKHCU/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #11

HTML Code:

<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrlmG6o2yPBMxHRPR__eNmCF0u9QdK53rnH7piQ0G1PxhVE2VqsFSINHkSKLn9oW1G0Jn8_jfa9n3CiCg4UFitoF7Odi58qD5sAcd8ptjf_nIGuCNzFISbOOHNWw4QW4IljQHofp-2ZE/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrlmG6o2yPBMxHRPR__eNmCF0u9QdK53rnH7piQ0G1PxhVE2VqsFSINHkSKLn9oW1G0Jn8_jfa9n3CiCg4UFitoF7Odi58qD5sAcd8ptjf_nIGuCNzFISbOOHNWw4QW4IljQHofp-2ZE/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #12

HTML Code:

<div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZa5eCnHgKJR7VOcu7dszycJAdctw-jndj5M07k6elCh1E4KAJg_XDw74upBbcNQTlKD-a-pfIOxsSyN5ja30HUnDsc4fKP8gT7Uz45Ld1WFk56fZgOTzk8I4sZnCD1uycJcxvSmfVdcI/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZa5eCnHgKJR7VOcu7dszycJAdctw-jndj5M07k6elCh1E4KAJg_XDw74upBbcNQTlKD-a-pfIOxsSyN5ja30HUnDsc4fKP8gT7Uz45Ld1WFk56fZgOTzk8I4sZnCD1uycJcxvSmfVdcI/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #13

HTML Code:

<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfd1Q-RKN_Y1SiGnRBbsW_Ho4q7m4f2PkOMAUdh7ONMyegu-Nr6fvVPiDaLRgC7N4mEqoPZYvPbBOx4rVy2GQBMyn-S9EBEMLW1NplLODLCiAv4ZZNnTHXO3Fkw82HYignZUSsoSI5h5o/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfd1Q-RKN_Y1SiGnRBbsW_Ho4q7m4f2PkOMAUdh7ONMyegu-Nr6fvVPiDaLRgC7N4mEqoPZYvPbBOx4rVy2GQBMyn-S9EBEMLW1NplLODLCiAv4ZZNnTHXO3Fkw82HYignZUSsoSI5h5o/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfd1Q-RKN_Y1SiGnRBbsW_Ho4q7m4f2PkOMAUdh7ONMyegu-Nr6fvVPiDaLRgC7N4mEqoPZYvPbBOx4rVy2GQBMyn-S9EBEMLW1NplLODLCiAv4ZZNnTHXO3Fkw82HYignZUSsoSI5h5o/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Vertical Menu Tab #14

HTML Code:

<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKrCsbo1E1k_Hs5-wGXUrk51MMkYBv0uUD3GFl_dMobMEtDyN3kRUstzA9gBuhaNzVT89OuhUgnAKEznqk0Rv_iWn6fkBJYoE3p97wQlWEEjpTUwkTUoMnQZ7EfaRLR_xCi8RmO1tbyc/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKrCsbo1E1k_Hs5-wGXUrk51MMkYBv0uUD3GFl_dMobMEtDyN3kRUstzA9gBuhaNzVT89OuhUgnAKEznqk0Rv_iWn6fkBJYoE3p97wQlWEEjpTUwkTUoMnQZ7EfaRLR_xCi8RmO1tbyc/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Vertical Menu Tab #15

HTML Code:

<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4jQnqDwQuiY079ExBehXaL8xKEjwfzv178dESEw_cSZXbNksheax3xsKJ78Dsoc_9c-4QJ1jVgGaTm4JsgFG_vfKIdTxXi2tCsNx5DzNr5nccd2N9H1P1km5z2XXBWwJmAuWArpmSVk/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4jQnqDwQuiY079ExBehXaL8xKEjwfzv178dESEw_cSZXbNksheax3xsKJ78Dsoc_9c-4QJ1jVgGaTm4JsgFG_vfKIdTxXi2tCsNx5DzNr5nccd2N9H1P1km5z2XXBWwJmAuWArpmSVk/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }

Vertical Menu Tab #16

HTML Code:

<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkb-21uPI6dQiozqabnqIfXDQjUyJmPnKBXVAGk207cIuBSZiBAlhJ43hoE_JbkoEfsLVVvYSTALYGlbXl1EV3FDgh_C6aMDfrRMQh7j0coT9HbPL1XC_E95BIOlSNSlbM_J7mC_UIcI/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkb-21uPI6dQiozqabnqIfXDQjUyJmPnKBXVAGk207cIuBSZiBAlhJ43hoE_JbkoEfsLVVvYSTALYGlbXl1EV3FDgh_C6aMDfrRMQh7j0coT9HbPL1XC_E95BIOlSNSlbM_J7mC_UIcI/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #17

HTML Code:

<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLis6t-IJKG_bioMHFTERqKf2GkOmxB75upujhgCtDDF5Y-1oNocskFSbYddhl2UStvWRRK2ZskaQLxSbUKi1ckV9P4yO4Yce5aP0PFDrKDLIJEHiGA07sOrncc4d5rd5zmiamyKB0tU/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLis6t-IJKG_bioMHFTERqKf2GkOmxB75upujhgCtDDF5Y-1oNocskFSbYddhl2UStvWRRK2ZskaQLxSbUKi1ckV9P4yO4Yce5aP0PFDrKDLIJEHiGA07sOrncc4d5rd5zmiamyKB0tU/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #18

HTML Code:

<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpic18EOv1nzO0LpLY4FNstZLJFC5rSxXAPjBqpSzeGHjgEbkaGE-PJjx8AjUE5tvBUki2IJvW0Kozo1EjXZRxWd_PEeBgC3_WrqThXUX69XIHpAuFDJ0AtuaV5dMlHtaTNFXuBNakrxU/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpic18EOv1nzO0LpLY4FNstZLJFC5rSxXAPjBqpSzeGHjgEbkaGE-PJjx8AjUE5tvBUki2IJvW0Kozo1EjXZRxWd_PEeBgC3_WrqThXUX69XIHpAuFDJ0AtuaV5dMlHtaTNFXuBNakrxU/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Vertical Menu Tab #19

HTML Code:

<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88F4zte45xX-KVM7GWXHedVbpfl7kSfvBkaY1lbjfAqzQ6ZLBddRqcRMbW-3xXXrFxOGa7Es_a4qesrqb8REiRbbTw8zjSxv-GXYnFVB3dQKZzBVhJR7d_p8wrcic7zIRJeVv3wRt528/s800/menu14.gif); padding: 8px 0 0 10px; }

Vertical Menu Tab #20

HTML Code:

<div id="star"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

CSS Code:

#star ul { list-style: none; margin: 0; padding:0; } #star img { border: none; } #star { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #star li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none;text-align:right; } #star li a:link, #star li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUXiO95dH_CPpnbhj3-XCs_gqLHz6dHcEmSOhTF3zmZ8HY30870Xc4XvLXgldBIKTG0pQ6dQDdbrtLs64DhG3STPtk79kzRo_LPSRvSkJ3iUsokV0KMPvLjqbf09zxf1tHh76ZfFD73lj/s1600/vt122.jpg); padding: 8px 0 0 10px; } #star li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUXiO95dH_CPpnbhj3-XCs_gqLHz6dHcEmSOhTF3zmZ8HY30870Xc4XvLXgldBIKTG0pQ6dQDdbrtLs64DhG3STPtk79kzRo_LPSRvSkJ3iUsokV0KMPvLjqbf09zxf1tHh76ZfFD73lj/s1600/vt122.jpg) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #21

HTML Code:

<div id="pink arrow"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

#pink arrow ul { list-style: none; margin: 0; padding:0; } #pink arrow img { border: none; } #pink arrow { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #pink arrow li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none;text-align:right; } #pink arrow li a:link, #pink arrow li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5RMLiHlodRqf1oYJFN_W8h_jkoT15Omu1JMoZQywbrqGVaTSJ8EU9NVj0jvGkpsp7QsxzUqZ1-Gj8VEsridhetGBVBLCNgFTmiiUv1-c4hMQI9q5EZ1FKR6DUHdQh3PNeNflY8pRjtQp/s1600/v7777.jpg); padding: 8px 0 0 10px; } #pink arrow li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5RMLiHlodRqf1oYJFN_W8h_jkoT15Omu1JMoZQywbrqGVaTSJ8EU9NVj0jvGkpsp7QsxzUqZ1-Gj8VEsridhetGBVBLCNgFTmiiUv1-c4hMQI9q5EZ1FKR6DUHdQh3PNeNflY8pRjtQp/s1600/v7777.jpg) 0 -32px; padding: 8px 0 0 10px; }

Thank for your patience Bro! Hope you like this tutorial. If you have some questions, problems, or even additional informations, please share it below. It is highly appreciated!
Enjoy!

How to Upload Images in Blogger and Get the Image Link

Most of time when you are going to add background images to your header, sidebar, post body, footer etc.  It is necessary to upload an images to an image-hosting sites such as imageshack and photobucket  and get the link from it. But there is another way to upload images without going to another sites and that is through your  Blogger's post editor page. A special feature on this is that you can resize your image 

How to Upload Images in Blogger and Get the Image Link

Step 1. Go to Blogger Dashboard and click  new post, and upload an image like you normally do. You don't have to publish this post (just save as draft).

Step 2.  Switch your Blogger post editor page in compose mode and hit the image icon above the page as shown in the screenshotshot below.
Note:  You can also upload an image by switching the Blogger post editor's page in an HTML mode  but I find it easy to upload images in the compose mode.

Once you've uploaded and inserted your image to the post editor, click on 'Edit HTML' (as opposed to 'Compose' mode). You will see some HTML lines like the one shown below:

Step 3.  If you try to look closely at the HTML lines, you will notice two set of addresses. The first one is next to the 'href' tag, and the second is next to the 'src' tag. All you have to do is copy the address next to the 'href' tag. I've highlighted the addresses (choose the link next to the a href tag  ) that you need to copy in the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46ahNoYJwlsrBKZHXKGOc2HPykNqK7yygckXdRGV57A8vGSaKKi0_zXcnHuWI8emfSJQaIuqhxhP5XR-6MxfeOBtSFe6Yi8vu9o547bqsjfMbwhSPM7dHYH9MIINxqB2cFaR68Ys-BJ6-/s232/sample+picture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46ahNoYJwlsrBKZHXKGOc2HPykNqK7yygckXdRGV57A8vGSaKKi0_zXcnHuWI8emfSJQaIuqhxhP5XR-6MxfeOBtSFe6Yi8vu9o547bqsjfMbwhSPM7dHYH9MIINxqB2cFaR68Ys-BJ6-/s232/sample+picture.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />

And that's it. You've gotten the direct link to your Blogger uploaded image. But wait,  as what I have  mentioned above that  the image that you  uploaded in Blogger is special because you can resize it according to your likeness. Just change the value next to the 's', as shown in the blockquote below. Greater value will increase the size of the image and lower value  shortened the size of the image respectively.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46ahNoYJwlsrBKZHXKGOc2HPykNqK7yygckXdRGV57A8vGSaKKi0_zXcnHuWI8emfSJQaIuqhxhP5XR-6MxfeOBtSFe6Yi8vu9o547bqsjfMbwhSPM7dHYH9MIINxqB2cFaR68Ys-BJ6-/s232/sample+picture.jpg

You can now use this link in many applications like adding background to different areas of your blog.
 Have a nice day and Enjoy!

Adding Professional Background Photo in Blogger Sidebar

 As a blogger or web developer we need to attract advertisers to our respective blog in order to support   or sustain our career. In order to achieve this goal we need to beautify our sidebar as one of the places where to put those advertisements. Here, I will show you a very simple steps on how to do that.

Adding Professional Background Photo in Blogger Sidebar

Step 1. Log -in to your Blogger Account
Step 2. Click the Template button (have  a back-up of your template)
Step 3. Hit the Edit HTML button and locate the code below at the Blogger Template Editor's page

]]></b:skin>

Step 4. Just above the code ]]></b:skin> paste the code below

.fauxcolumn-right-outer .fauxcolumn-inner {
background-image: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9n2SwUzH-_0POqGOBfcZJLJb9pmdWBQMk6_LGmeelvS_3O3dYYuk4N22l3yB5l4BFsc6t9VSTbCmfq_yqVTvWwuRmTuXJWc1uCybtsGiOcyZ8mtpjr484m7lQb2TcRaO6yahsCSuYWIzk/s1600/background+right.png);
border-radius: 16px;
margin-left: 20px;
height: 100%;
}

Customization

• You can replace the url of the image (text in red) with your own image or wall paper.
• Adjust the border radius or the rounded corners (16px). Greater value will make the rounded corners big while  lesser value will   make the rounded corners small. 
•  You can also get the wall paper from http://www.dinpattern.com/
  
  
  Hope you like this tutorial and if you have questions, feel free to ask. God Bless!

How to Use Google Chrome to Customize My Blogger Templates

Most of my tutorials  that I am sharing in this blog were done through the use of Google Chrome and  as a matter of  fact not only your own website where you can customize or edit the style sheet but any websites you wish, that is the beauty of having a Google Chrome browser. If you have not yet downloaded Google Chrome, download it here and set it as your default browser.

If you are not fun of using this method, you will find difficulty on customizing your own template because it will take time in going to your Blogger Template Editor's page, make some changes on it, save or preview and finally see the effect or the changes you have made. But the worse thing is if it doesn't go with what you would like to happen. Therefore you will repeat the whole process and that is very disgusting.
In this tutorial, I will show some basic techniques on how to align and style elements in your blog. You can also go to other blogs/sites to investigate what cascading style sheets (css) they are using. So, let us now go with steps!

How to Use Google Chrome to Customize My Blogger Templates

Supposing, I would like to redesign the appearance of my Menu Tabs.

 I will just point the mouse cursor on it then right click, and choose inspect element.

After choosing the inspect element button, you will  be directed to the new widow with two columns.The first column (left side) shows the main HTML of my blog and the right column displays the CSS styles applied to each div section.

As you  try to move up or down with your mouse cursor over the div tags in the HTML section (left side) you will see that area being clearly highlighted inside your blog. Since I clicked on my menu tabs therefore the div section for the menu tabs is highlighted by default in the html section and I can clearly see its CSS styles appearing at right under the CSS column. Here is the CSS styles for the navbar as shown in the CSS column:

#bbtnav {
1. width: 960px;
2. background: #000000;
3. margin: -32px 0 0 -1px;
4. padding: 0;
5. height: 30px;
6. -webkit-box-shadow: 0 -2px 30px #1751ff;
7. box-shadow: 0 -1px 30px #1751ff;
8. border-top: 1px solid #1484fc;
9. border-bottom: 0px solid#1484fc;
}

You can see we are provided with 9 different properties.
a. Change the background color of the menu (2)
b. Adjust its width (1), and height (5), webkit-box-shadow (6 and 7)
c.  Adjust the alignment using margin (3) and padding (4)
d.  We can also adjust the thickness and the border styles my border-top and border-bottom.
e. And if we want to change the hexadecimal color of my border-top and border-bottom we just simply delete the hex#1484fc and replace it with another hexadecimal colors.

To edit any property above, just double click and change it. Lets change the background from (black) #000000 to blue (#158aee).

I simply double clicked the background property and changed the color to #158aee from #000000. At the same time you can see it changing live on your blog too. See the screen shot below,

The good thing is we can also add another property from the 9 given properties above. Let us say, we want to add a border-left with  the attributes of 1px solid #1484fc. Just point the mouse cursor beside this symbol " } " (without the quotation mark) and click then you will see a blank space. In that blank space you are going to type the additional property. See the screenshot below.

Clicking on the ul tag will open its separate CSS properties on your right and clicking the li tag will open the list properties. You can then play around with the codes to see how the look changes on the blog and all these changes can be seen live on your blog as you edit without the need to log into your blog. Once your satisfied with the new settings just copy that CSS style and replace your current template style with it by logging into your blogger account.

Hope you enjoy this tutorial and if you have some queries regarding this post feel to leave it at the comment box below. Enjoy!!!

Putting a Show - Hide Effect or Content Spoiler in Blogger

I have already shared an article on how to add read more in blogger. But in this article I'm gonna show a trick on how to "show more or show less" a long article  in a certain page or post. I've learned the initial  codes from Greenlava and I modified it to make this tweak more fitted to newbie bloggers. You can utilize the code in pages, posts and even in widgets.

Live Demo

Here are the features of this Content Spoiler

• The button text changes accordingly. The "show more" will appear if it is in the hide state or the texts are hidden and "show less" will appear if it is in the show state mood.
• You can use this spoiler in multiple manner  even in a single page.
• The spoiler will not work in Internet Explorer .

Putting a Show - Hide Effect or Content Spoiler in Blogger

Step 1. Log-in to your Blogger account
Step 2. Click the Template button ( have a back - up of your template)
Step 3. Hit the Edit HTML button
Step 4. Look for the code below

</head>

Step 5. And just above that code </head> paste the following css code

<style type='text/css'>
/* animated spoiler CSS by Bloggingtipsandtrix.blogspot.com */
.spoilerbutton {
display:block;
margin:5px 0;
}
.spoiler {
overflow:hidden;
background: #f5f5f5;
}
.spoiler &gt; div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}
.spoilerbutton[value=&quot;Show - More&quot;] + .spoiler &gt; div {margin-top:-100%;}
.spoilerbutton[value=&quot;Show - Less&quot;] + .spoiler {padding:5px;}
</style>

Step 6. Save your template!
Everytime you want to use the content spoiler, just paste the HTML (code) below in your blogger editor's page (be sure to switch your blogger editor page in HTML mode)

<input class="spoilerbutton" onclick="this.value=this.value=='Show - More'?'Show - Less':'Show - More';" type="button" value="Show - More" />

<div class="spoiler">
<div>
Your text here that you want to hide
</div>
</div>

Customization

• You can change the background color of the "Show - More/Show - Less" or the content spoiler button by replacing the hexadecimal color f5f5f5 with your own. You can use our color code generator.
• Replace the text Show - More with "Show"  and Show - Less with "Hide" or any text that you want, both in css code (step 5) and in HTML (below step 6 code).
• You can adjust the speed of the texts that you hide in getting in and out  by adjusting the texts in green (0.2s). The unit is in seconds (s), therefore if you will lower the number from 0.2 s to 0.1s the speed will increase and if you increase the number from 0.2s to 0.3s, 0.4s, 0.5s, 0.6s, 0.7s the speed of getting in and out will  decrease.

If you have some questions regarding this post, kindly drop it at the comment section below. Thank you and
God Bless Us All!

Customize Post Title In Blogger- Increase Traffic

Customizing post title is no excuse if you are a good blogger. Having the options to change the margin, adding border-radius on it,  styling and adjusting the size of the font, adding background and have a hover effect on it really admire your vistors upon landing your site. In this article I will   show you not only the steps on how to customize the post titles but also on how to increase traffic in your blog  upon applying the H2-tag on it settings.

First, we will change  the settings of your Post Title. By default, all blogger templates are designed  in such a way  that the  Homepage Main Title is treated with the H1 tag, Blog Description or Header dates and sidebars headers are treated with an H2 tag , H3 is assigned for post titles. We know the fact  that your Post Titles are second most important part of  the blog after the main title and Sidebar Titles and Post description are just next in line  after to your post titles. Therefore we should threat your Post Titles with an H2 tag not H3 tag.

Live Demo

Treat Post Titles with an H2-tag

Step 1. Log in to your Blogger account
Step 2. Go to Blogger Dashboard
Step 3. Click the Template button (back-up your template for reference purposes)
Step 4. Hit the Edit HTML button
Step 5. Look for the opening code below and change it to <h2 [keep changing that for all (12) occurrences]

<h3

 Step 6.  Now search the closing tag below and change it  to </h2> [again keep on changing that tag for all (12) occurences]

</h3>

Step 7. It is now time to customize your Post Titles by treating them also with an h2-tag.
        7.1 Look for the code below

h3.post-title {

and change it to

h2.post-title {

       7.2 Just below the above code  (h2.post-title { ), paste the following css code

border-radius:5px 5px 5px 5px;
font:24px Boogaloo;
font-weight:normal;
margin-left:0;
margin-top:-15px;
padding:0;
color:#000000;
text-transform: capitalize;
text-align:center;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background:#ddd;
}
 h2.post-title:hover {
border-radius:0;
 background:#F78181;
-webkit-box-shadow: 0 -2px 15px #FE2E2E;
 box-shadow: 0 -1px 15px #FE2E2E;
border:1px solid #ff0000;
}

Customization:

• Change the font size (24px). Higher value will increase the size of the font and lower value will also decreases its font size.
•  And the  family (Boogaloo) to Helvetica, Sans-serif, Arial, Georgia, Times New Roman etc.
• Remove the text in orange if you want to disable the hover effect on the post titles.
• Change the hexadicimal color 000000 with your own. Please select it here.

Step 8. Save your Template and Congrats!You have now a newly customize post titles and I believe that in some other way this could help  increase your traffic. God Bless!!!