CSS3 Tabs With Beveled Corners For Blogger

Oleh Unknown

16 Ekim 2012 Salı

Bagikan :

Tweet

This is also nice tutorial for bloggers.  This is about CSS3 tabs  with  beveled   corners. You can place this  gadget   on sidebar. Im using  Jquery, HTML, CSS for  this tutorial. Im already    added 3  tabs  for  this tutorial, you can add more if you want.You can check
Beautiful JQuery Multi tab Gadget For Blogger

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here */

#tabs
{
  overflow: auto;
  width:100%;
  list-style: none;
   
  margin: 0;
  padding: 0;
}
#tabs li
{
    margin: 0;
    padding: 0;
    float: left;
}
#tabs a
{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);     
    background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}
#tabs a:hover
{
    background: #c93434;
    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);     
    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);     
}
#tabs a:focus
{
    outline: 0;
}
#tabs #current a
{
    background: #fff;
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);     
    background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:         linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;    
    color: #333;
}
#content
{
    border:1px solid #000000;
    background-color: #fff;
    width:200px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}
/* Remove the rule below if you want the content to be "organic" */
#content div
{
height: 220px; }
   

7. Find this tag by using Ctrl+F    </head>

8. Paste below code Before </head> tag

<script type='text/javascript'>

$(document).ready(function() {     
$(&quot;#content div&quot;).hide();   
$(&quot;#tabs li:first&quot;).attr(&quot;id&quot;,&quot;current&quot;);  
$(&quot;#content div:first&quot;).fadeIn();          
$(&#39;#tabs a&#39;).click(function(e) {         e.preventDefault();                 $(&quot;#content div&quot;).hide();       $(&quot;#tabs li&quot;).attr(&quot;id&quot;,&quot;&quot;);          $(this).parent().attr(&quot;id&quot;,&quot;current&quot;);  $(&#39;#&#39; + $(this).attr(&#39;title&#39;)).fadeIn();   }); })();
</script>

9. Go to blogger and click Layout

10. Click Add Gadget and select 'HTML/Javascript

11. Paste below code.

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>   
</ul>

<div id="content"> 
    <div id="tab1">One - content</div>
    <div id="tab2">Two - content</div>
    <div id="tab3">Three - content</div>    
</div>

12. Now save your HTML/Javascript'.

    You are done...

Tag : CSS, HTML, JQuery