How to Use the New Blogger Template

Just a few months ago when Blogger headed by Samantha Schaffer and Renee Kwang   introduced the new Template HTML editor to web developers, many  were not appealed with because of its new features being introduced. In my case, I was really  thinking if there was something wrong with my browser but when I tried to refresh it, same thing appeared so I check my inbox if there are a new emails from Blogger and to make that story short, I was relieved with those negative thoughts that bothered me after reading and familiarizing the different enhancements. 

Upon opening the new Blogger Template editor’s page,  we will see at the top the Back, Save template, Jump to widget, Edit template, Preview template, Format template, Revert changes and Revert widget template to default. In the body are number lines arrow (at the left side)  with some black arrow  “►“ and at the center  are the HTML codes  which is responsible of the total appearance of your blog.

I will explain below the functions of each button and the other interesting features of this new Blogger template HTML editor.

Jump to Widget

 If we find difficulty in searching of what particular widget  we are looking for, simply click this button (Jump to widget >> Jump to widget dropdown menu)  and select the widget we want  to edit and  we  will be directed to the widget you are searching. See the screenshot below.

 

Preview Template

To see the initial effect of the customization we  have made  with our template we may opt to click this button. But what is the difference of the old and the new Blogger template . The sole answer is that  the old Blogger template editor allows us to preview our template in the other window while the new Blogger template editor will preview the template in the same window.

Expandable Code Markers

These  expandable code segments (at the left side)  keeps our Blogger template codes in short and makes our Blogger template editor look less cluttered and more clean than before.
In the past, everytime we need to put CSS codes in our template, we keep on expanding our template in order to find the code (ex.  ]]></b:skin>) but through this new Blogger template editor we  just simply click inside the editor’s page and press Ctrl+F on the keyboard , then type at the search box the code/tag  that we want to find and  finally hit the Enter button in the keyboard and you will be brought to the requested code . See the screenshot below.

But there are times that we  need to expand it manually and individually by clicking the  markers fold “►“ in order to expand our Blogger template codes especially when we want to show or hide widgets in a particular page or post. See the picture below.

Format Template

This is something new in this improved Blogger template HTML editor.  If you are using a highly modified template for your blog, I recommend you, for not trying this option because it will re-order the codes to its original settings and add indentation automatically. If you use this, you must preview your Blogger template before saving any changes.

Revert changes

This is the same with the clear edits option before with the old Blogger Template HTML editor. If you are not satisfied with the results upon previewing your template, use this option to go back to the most recent settings of your blog’s template.

Revert widget templates to default

If you click this button you will be asked to select which widgets to revert to their default settings. Using this option will erase all those selected installed widgets in your template and sets back to its default settings. See the screenshot below.

My Conclusions:

The Aims of the New Blogger Template Editor:

•  Let Blogger users to create, edit, and design Blogger template a lot easier than before.
•  It is newbie blogger friendly. User who are not so skilled in coding and the language of programming like HTML and CSS  can be easily be familiarized because of its user friendly lay -out. User can easy to locate those error because a note will appear at the top of the page showing line number in read texts after you made mistakes in editing.
• And the best thing is that if you accidentally save your template (without any back up on it) with codes not parsed correctly, your template will not be lost.

For more information, you can visit the post made  Samantha Schaffer and Renee Kwang  regarding on the improvements to the Blogger template HTML editor.

Note: The informations above were written based of my own experienced and study with the topic. If you have any additional informations, questions and comments regarding this post, feel free to share it through the comment box below.
Thank you for giving your precious time in reading this post! Have a Blissful Day!!!

Adding Background Image in Blogger "Read More" Link

Recently, I made an updated version of adding "Read More" in blogger but that tutorial doesn't mention on how to replace the the "Read More" link with an image. In this tutorial we will add image on it in be half of the usual style of adding that widget in your blogger  without using any image. Please see first the live demo of what is that thing we are trying to achieve here.

Live Demo

Adding Background Image in Blogger "Read More"

Step 1. If you have not yet put the "Read More widget in blogger, please click it here for the tutorial.
Step 2. Now we will just make some changes on the code that you have you put in replacement of the code "<data:post.body>"  in step no. 7 in that previous tutorial.
The original code is:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

Step 3. Replace the orange bold texts above with code below:

<a expr:href='data:post.url'> <div class='readmore' style='float: right;'>
</div></a>
</b:if>
</b:if>

Step 4. To add the CSS code, look for the tag ]]></b:skin>  and just above it paste the code below:

.readmore {
background: url("Select image url below") no-repeat scroll 0% 0% transparent;
width: 120px;
height: 36px;
top: 88px;
left: -7px;
position: relative;
}

Customization:

• You can change the background url (in red bold texts) with your own image url.
• Adjust the margin of the image by increasing and decreasing the numerical value in top attribute (in orange color). High value will put the image on a higher position and lower value will put the image in lower position respectively.
• Adjust the horizontal position of the image by customizing the numerical value (in light blue color). Higher value will place the image more in the right position while lowering the value will put it more in  the left position.
• You can use  some of my images url below:

Image URL -  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyRCbRGDN86lO_UU_QHIvUljBsSRQ6kSksUfud08dTd281mpXY0PNTkGjwUyRahmyhg8O7BabVRViz6SqOxJ67zRRKsuk8qlcnMgwJ1rbun9dZa6qzme1icFgI09-chWFddcPujk6tzQ/130/readmore+background.jpg

---

Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgglMOvX-ZUXfoZyO7lMXxCeISISpsYxiHQqlEUomiEVfIJatJPq-1YfKrlfd0Y7PZxzyD3Al4PfYHcgQGCO9nLy1qp-tsFkqemPdSEPDjENuGOLQjgGmTUW7o9PQjYdEKeJ8eLFMGw9Vk/1600/read+more+background451.jpg

---

Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYG7Ctp-dcqgbuj0WzU4TV7CinI6oMp0f-6Ohcl3qA14CstMt2_YWJrF8gosEBwIKk0BoI1PkzT7go_X590jl278i2T_QDmXJ4Oo-YZsg7vWmE_tinraaZA2o_eSI7RRtaaxyVq06qfhI/1600/read+more+background1.jpg

---

Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRnjz6ZuzS64xHmNe_UjitM9oxKuN07oZrd3sUVdt1IjzJIqSkU71o0RyHgYLyvyYAImHq2V5GWEoIQWqsUFFMiUdyEXuTvQj-w-C-pqNs_nBuvECxTtMaaXN20lN2cL1iD2eXCNU7lo/1600/read+more+background3.jpg

---

Image URl - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtZTBocCX16rjSu7LUPALwZs60m1fr7Eo7jBY2pFVRXWy0PGt2hajHKox4tK8gR8cvviTXKhYFZ4MCSO3sUkhfvDXUloBHKkDzKkDkRjQ0X41k4j_i8AKqkzk1CtVpTYZDSh_WIiGYaY/1600/read+more+background+1a.png

---

Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqKnsADUnHvspHErOvS9q87c2VyskmGsMRHKxkuQAmGelu4LSfrAwvqZkj2VgVSmroah0FFCwONRQp3zlxjbpIA0ewhVf2xip388BKXr5KLbLJMEun-EgnEIgAA0FHJ3CPPmLQI0sMaE/1600/read+more+background10.jpg

---

Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUu4I6kX92cxDjVFbm_JeQkb9vh_xFM7NC_BPrJJtOUEpXWfdbx0KaMFdQn9VblB3U4nkms0zR50qxD4NchRj_vawNKZWk-ybv585jvp9ui6RQG5btJbmOfbfdgDdc-CneDO56Qcsr7Uc/1600/read+more+background9.jpg

---

• You can change the size of the above images by changing the red bold number. Higher value will increase the image size and lower value will also decreases the size of the image.

Step 5. Save your Template and Enjoy!

Adding Read More To Blogger Updated Version!

As you read my previous tutorial on adding read more with thumbnails to blogger you found it difficult how to adjust the texts and the size of the image thumbnail. Now in order to answer that question, I made another version of it wherein you can customize the number of words or texts and the thumbnail size.

Adding Read More To Blogger Updated Version!

Step 1.  Log-in to your Blogger Account (if you have not).
Step 2.  Go to Blogger Dashboard and click Template button (back-up your template and store it an a safe place for your reference).
Step 3.  Hit the Edit HTML button.
Step 4. In the Blogger Template Editor's page, look for the tag below

</head>

Step 5. Just above the tag in step 4., paste the following code

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Customization of the above code

•  The number in red color (250) signifies the number of characters to display when there is no image.
• The number in orange color (200) designates the number of characters to show when there is an image.
• The number in light blue color (150) denotes the height of the image being displayed. 
• And the  number in dark blue color (150) implies the  width of the image.

You may increase or lower the above numerical value as you want!

Step 6. Now look for the next tag below and delete it

<data:post.body/>

Note: Choose the second occurrence of the code.

Step 7.  Replace the tag in step 6 with code below

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

• The bold texts above are condiotional tags in order to hide this widget in your static pages and post pages.  Click here  for the tutorial if you want to hide this widget  in your archives.


• Change the texts Read More with any other word or phrase like 'Continue Reading' or 'Show More>>'.
• Change the position of the text Read More from right to left by simply replacing the texts 'right' in the fifth line from the buttom of the above codes.

Step 8. Click Preview to see the initial effect then hit the Save button. See your home page now with its new appearrance.
Have a Blissful Day and Enjoy!

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!