- Difficulty: Need CSS and HTML knowledges.
- Updates tabs are usually used on tumblr.
IMPORTANT NOTE: CSS Code is put after < style> or before < /style> HTML Code is put after < body>.
##Version One 
This one is suitable if you only need one tab. THE CSS if you want the tabs to be on the left side of your screen:
#updates {
position:fixed;
top:25px;
left:0px;
padding-left:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
}
/*the tabs title */
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
/* the dot and arrow */
.dot {
background:#000000;
width:20px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
/* the tab box */
.updatebox {
background:#000000;
color:#ffffff;
position:absolute;
width:150px;
overflow:hidden;
margin-top:-30px;
left:-230px;
padding:10px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
/* the color have to be the same with updates box and dots background */
border-right: 20px solid #000000;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .updatebox {
left:50px;
margin-top:-30px;
}```
THE CSS if you want the tabs to be on the right side of your screen:
```css#updates {
position:fixed;
top:25px;
right:0px;
padding-right:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
}
/*the tabs title */
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
/* the dot and arrow */
.dot {
background:#000000;
width:20px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
/* the tab box */
.updatebox {
background:#000000;
color:#ffffff;
position:absolute;
width:150px;
overflow:hidden;
margin-top:-30px;
right:-230px;
padding:10px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
/* the color have to be the same with updates box and dots background */
border-left: 20px solid #000000;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .updatebox {
right:50px;
margin-top:-30px;
}```
Only choose one CSS, don't copy both!
**The HTML**
<pre class="language-html">
<div id="updates"><!-- The Tab -->
<div class="dot">
<div class="updatebox">
<h3>THE TITLE HERE</h3>
THE TEXT HERE.</div>
</div>
<!-- copy and then paste under this line to add more tab --></div>
</div>```
<div id="ver2">
<h2>Version Two</h2>
<center><img src="http://i.imgur.com/49fumro.gif" alt="" /></center>This one is also suitable if you only need one tab. <strong>THE CSS if you want to put the tabs on the left of your screen:</strong>
```css#updates {
position:fixed;
top:25px;
left:0px;
padding-left:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
}
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
/* the dot and arrow */
.dot {
background:#7d7d7d;
width:20px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
/* the tab */
.updatebox {
background:#7d7d7d;
color:#ffffff;
position:absolute;
overflow:hidden;
width:0px;
max-height:0px;
left:50px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
/* the color have to be the same with updates box and dots background */
border-right: 20px solid #7d7d7d;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .updatebox {
margin-top:-30px;
width:150px;
max-height:400px;
padding:10px;
}```
<strong>THE CSS if you want to put the tabs on the right of your screen:</strong>
```css#updates {
position:fixed;
top:25px;
right:0px;
padding-right:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
}
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
/* the dot and arrow */
.dot {
background:#7d7d7d;
width:20px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
/* the tab */
.updatebox {
background:#7d7d7d;
color:#ffffff;
position:absolute;
overflow:hidden;
width:0px;
max-height:0px;
right:50px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
/* the color have to be the same with updates box and dots background */
border-left: 20px solid #7d7d7d;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .updatebox {
margin-top:-30px;
width:150px;
max-height:400px;
padding:10px;
}```
Only choose one CSS, don't copy both!' <strong>The HTML</strong>
<div id="updates"><!-- The Tab -->
<div class="dot">
<div class="updatebox">
<h3>THE TITLE HERE</h3>
THE TEXT HERE.</div>
</div>
<!-- copy and then paste under this line to add more tab --></div>
</div>
<div id="combine">
<h2>Combine</h2>
<center><img src="http://i.imgur.com/XFNH4MT.gif" alt="" /></center>You can make this if you want more than two different tabs, with more colors and version. <strong>THE CSS if you want to put the tabs on the left of your screen:</strong>
```css#updates {
position:fixed;
top:25px;
left:0px;
padding-left:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
}
/*the tabs title */
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
.dot {
width:0px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
.updatebox {
position:absolute;
width:150px;
overflow:hidden;
}
/* first color */
.color1 {
background:#000;
border-right: 20px solid #000;
color:#fff;
}
/* second color */
.color2 {
background:#7d7d7d;
border-right: 20px solid #7d7d7d;
color:#fff;
}
.versionone {
margin-top:-30px;
left:-230px;
padding:10px 0px 10px 10px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .versionone {
left:50px;
margin-top:-30px;
}
.versiontwo {
width:0px;
max-height:0px;
left:50px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover .versiontwo {
margin-top:-30px;
width:150px;
max-height:400px;
padding:10px 0px 10px 10px;
}THE CSS if you want to put the tabs on the right of your screen:
#updates {
position:fixed;
top:25px;
right:0px;
padding-right:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
}
/*the tabs title */
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
.dot {
width:0px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
.updatebox {
position:absolute;
width:150px;
overflow:hidden;
}
/* first color */
.color1 {
background:#000;
border-left: 20px solid #000;
color:#fff;
}
/* second color */
.color2 {
background:#7d7d7d;
border-left: 20px solid #7d7d7d;
color:#fff;
}
.versionone {
margin-top:-30px;
right:-230px;
padding:10px 10px 10px 0px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .versionone {
right:50px;
margin-top:-30px;
}
.versiontwo {
width:0px;
max-height:0px;
right:50px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover .versiontwo {
margin-top:-30px;
width:150px;
max-height:400px;
padding:10px 10px 10px 0px;
}```
Only choose one CSS, don't copy both!' <strong>The HTML</strong>
<div id="updates"><!-- version one color one -->
<div class="dot color1">
<div class="updatebox versionone color1">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
<!-- version two color two -->
<div class="dot color2">
<div class="updatebox versiontwo color2">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
<!-- version two color one -->
<div class="dot color1">
<div class="updatebox versiontwo color1">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
<!-- version one color two -->
<div class="dot color2" style="margin-bottom: 0px;">
<div class="updatebox versionone color2">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
</div>
</div>
<div id="add">
<h2>Add Title, Border, and Lines</h2>
<center><img src="http://i.imgur.com/Q2QaBl5.gif" alt="" /></center>If you want to use this one you have to have 4 or more tabs. <strong>THE CSS if you want to put the tabs on the left of your screen:</strong>
```css#updates {
position:fixed;
top:25px;
left:0px;
padding-left:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
border-left:20px solid #000;
}
/* the updates title */
#updates .title {
position:absolute;
left:-15px;
text-transform:uppercase;
font-size:9px;
text-align:center;
color:#ffffff;
margin-top:70%;
}
/* the tabs title */
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
.dot {
width:0px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
/* the lines */
.dot:before {
position:absolute;
content:'';
width:35px;
height:1px;
left:0px;
margin-top:10px;
background:#000;
z-index:-1;
}
.dot:hover:before{
margin-top:0px;
}
.updatebox {
position:absolute;
width:150px;
overflow:hidden;
}
/* color 1 */
.color1 {
background:#000;
border-right: 20px solid #000;
color:#fff;
}
/*color 2 */
.color2 {
background:#7d7d7d;
border-right: 20px solid #7d7d7d;
color:#fff;
}
.versionone {
margin-top:-30px;
left:-230px;
padding:10px 0px 10px 10px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .versionone {
left:50px;
margin-top:-30px;
}
.versiontwo {
width:0px;
max-height:0px;
left:50px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover .versiontwo {
margin-top:-30px;
width:150px;
max-height:400px;
padding:10px 0px 10px 10px;
}THE CSS if you want to put the tabs on the right of your screen:
position:fixed;
top:25px;
right:0px;
padding-right:15px;
font-family:Cambria;
font-size:11px;
text-align:justify;
border-right:20px solid #000;
}
/* the updates title */
#updates .title {
position:absolute;
right:-15px;
text-transform:uppercase;
font-size:9px;
text-align:center;
color:#ffffff;
margin-top:70%;
}
/* the tabs title */
#updates h3 {
text-transform:uppercase;
background:#333333;
border:1px solid #666666;
padding:4px;
text-transform:uppercase;
font-size:9px;
text-align:center;
margin-top:0px;
color:#ffffff;
}
.dot {
width:0px;
height:20px;
margin-bottom:15px;
border-radius:100%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}
/* the lines */
.dot:before {
position:absolute;
content:'';
width:35px;
height:1px;
right:0px;
margin-top:10px;
background:#000;
z-index:-1;
}
.dot:hover:before{
margin-top:0px;
}
.updatebox {
position:absolute;
width:150px;
overflow:hidden;
}
/* color 1 */
.color1 {
background:#000;
border-left: 20px solid #000;
color:#fff;
}
/*color 2 */
.color2 {
background:#7d7d7d;
border-left: 20px solid #7d7d7d;
color:#fff;
}
.versionone {
margin-top:-30px;
right:-230px;
padding:10px 10px 10px 0px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover {
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
width:0px;
height:0px;
background:transparent;
border-radius:0px;
}
.dot:hover .versionone {
right:50px;
margin-top:-30px;
}
.versiontwo {
width:0px;
max-height:0px;
right:50px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dot:hover .versiontwo {
margin-top:-30px;
width:150px;
max-height:400px;
padding:10px 10px 10px 0px;
}```
Only choose one CSS, don't copy both!' <strong>The HTML</strong>
<div id="updates">
<div class="title">U<br />P<br />D<br />A<br />T<br />E<br />S</div>
<!-- version one color one -->
<div class="dot color1">
<div class="updatebox versionone color1">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
<!-- version two color two -->
<div class="dot color2">
<div class="updatebox versiontwo color2">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
<!-- version two color one -->
<div class="dot color1">
<div class="updatebox versiontwo color1">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
<!-- version one color two -->
<div class="dot color2" style="margin-bottom: 0px;">
<div class="updatebox versionone color2">
<h3>THE TITLE</h3>
THE CONTENT</div>
</div>
</div>
</div>
<div id="__if72ru4sdfsdfrkjahiuyi_once" style="display: none;"> </div>
<div id="__if72ru4sdfsdfruh7fewui_once" style="display: none;"> </div>