- 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 ![Version One](http://i.imgur.com/nkI4Rv5.gif) 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:

    #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**




THE TITLE HERE
THE TEXT HERE.

Version Two

This one is also suitable if you only need one tab. THE CSS if you want to put the tabs on the left of your screen:

    #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;
    }

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;
    }
    
    #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!' The HTML

THE TITLE HERE

THE TEXT HERE.

Combine

You can make this if you want more than two different tabs, with more colors and version. THE CSS if you want to put the tabs on the left 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;
    }
    
    .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!' The HTML

THE TITLE

THE CONTENT

THE TITLE

THE CONTENT

THE TITLE

THE CONTENT

THE TITLE

THE CONTENT

Add Title, Border, and Lines

If you want to use this one you have to have 4 or more tabs. THE CSS if you want to put the tabs on the left of your screen:

        #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:

    #updates {
        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!' The HTML

U
P
D
A
T
E
S

THE TITLE

THE CONTENT

THE TITLE

THE CONTENT

THE TITLE

THE CONTENT

THE TITLE

THE CONTENT

On The Web

Email