HOSTING MURAH 2014

/* The CSS Code for the tabs menu */
#btabcontainer{
 margin:0 auto;
 width:280px;
 margin-top:4%;
}
.btab-container {
 position: relative;
 width: 100%;
 z-index:0;
}
.btab-container > div {
 display: inline;
}
.btab-container > div > a {
 position: relative !important;
 text-decoration: none;
 color: #D7D7D7;
 display: inline-block;
 padding: 4px 14px;
 font-size:15px;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-transform:uppercase;
 margin:2px;
 background: #4C4648; /* old browsers */
 background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
 background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
 -pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E));
 border:dashed 2px #CFA840;
 padding: 4px 14px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 0px;
 border-radius: 3px;
    text-shadow: 0 -1px 0 #000000;
 -moz-box-shadow: 0 4px 10px -5px #000000;
 box-shadow: 0 4px 10px -5px #000000;
 -webkit-box-shadow: 0 4px 10px -5px #000000;
}
.btab-container > div:not(:target) > a {
}
.btab-container > div:target > a {
    background: none repeat scroll 0 0 #948a81;
    text-shadow: 0 1px 0 #4C4648;
}
.btab-container > div > div {
 background: #4C4648;
 background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
 background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
 -pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E));
 -moz-box-shadow: 0 0 12px 1px #000000 inset;
 -webkit-box-shadow: 0 0 12px 1px #000000 inset;
 box-shadow: 0 0 12px 1px #000000 inset;
 z-index: -2;
 top: 50px;
 padding: 20px;
 border:solid 6px #4C4648;
 outline: 2px dashed #CFA840;
 outline-offset: -8px;
 min-height:250px;
 position:absolute;
}
.btab-container > div:not(:target) > div {
 position: absolute;
}
.btab-container > div:target > div {
 position: absolute;
 z-index: 3 !important;
}
div.tab-content{
 padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
.btab-content img{
 margin:0 auto;
 display:block;
 padding-bottom: 20px;
    padding-top: 10px;
}

 <div id="btabcontainer">
<div class="tab-container">
 <div id="c1">
  <a href="#c1" title="First">First</a>
   <div class="tab-content">
            <h3>This is the first tab</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.</p>
    </div>
 </div>
   
 <div id="c2">
  <a href="#c2" title="Second">Second</a>
   <div class="tab-content">
            <h3>Add as many tabs as you like</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
 
            </div>
 </div>
 <div id="c3">
  <a href="#c3" title="Third">Third</a>
   <div class="tab-content">
            <h3>5 Preset Styles &amp; Color Themes</h3>
            <p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
            </div>
 </div>
</div>
</div>

•  Anda dapat mengubah deskripsi dan nama tombol dengan selera Anda.