Pairs Tab View To Beautify Blog

Starry night and thus also on the blog that we belong, to be more beautiful than the sky surrounded by many star-studded. OK, we go into the matter, with this title I'll give a little review how to attach the tab view to beautify the appearance of a chaotic blog.


Maybe this way so many have used it, but I will still publish posts again with a newer and more exciting.



1. go to Dhasbor and click Design.

2. select 'Edit HTML' and do not forget to check the little box. (as usual if we Edit Templete): D

3. Find the code ]]></b:skin> and enter the code below right above the code that has been sought.

Click To

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 85px;
background: #CCC;
text-align: center;
height: 30px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999;
border-bottom-width: 0;
text-decoration: none;
color: #0F0B0B;
font-family:"Arial", Helvetica, sans-serif;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background: #E6E6E6 url(http://i1203.photobucket.com/albums/bb399/faisalhu1404/nav_bg.png);
color: #1B0B0B;
font-family:"Arial", Helvetica, sans-serif;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000;
overflow: hidden;
background-color: #CCC;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px;
}

4. then locate the code </head> and enter the code below right also above it.

<script src="http://blogger-blegedes-com.googlecode.com/files/tabs-view.js" type="text/javascript"/>

5. click save, wait for it to finish loading.
6. back to "Page Elements" (Click Design) and click "Add a Widget", enter the code below into the box "Text / HTML".

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div class="Pages" style="width: auto;height: 275px;">

<div class="Page">
<div class="Pad">

Content 1

</div>
</div>

<div class="Page">
<div class="Pad">

Content 2

</div>
</div>

<div class="Page">
<div class="Pad">

Content 3

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

NB: Replace width, height to their respective tastes. ^_^

until here I am sharing this post first, may be helpful and useful for all, Greetings.





Regards Blegedes,
Blogger Blegedes

By Blogger Blegedes

thank you for taking the time to read the article Pairs Tab View To Beautify Blog and you can find articles Pairs Tab View To Beautify Blog this with the url http://blog-blegedes.blogspot.com/2011/12/pairs-tab-view-to-beautify-blog.html. you may disseminate or copy and paste if the article This Pairs Tab View To Beautify Blog is very beneficial to your friends, but do not forget to put the link Pairs Tab View To Beautify Blog Soure.