Install Jquery Tab on Blogspot Blog, Fully CSS3 Powered

Today publishing an awesome jquery tab section widget for blogspot user fully CSS3 powered and containing an awesome Date Timestamp along with Social Bookmarking buttons. This light weight tab is perfect geared on dark viewed templates and on top above header it has perfect and fading location to the users. This will keep users prompted to share your content on social media as well as they could see current Date by the timestamp. This tab is commonly seen on Commercial websites and this script extended a new boundary of Blogger traditional widgets.

How To Install Widget
1) Go to Blogger>Template
2) Backup Your Template
3) Search for the following code

]]></b:skin>

4) Now add the following css above it

     #top_bar{
    background:#191919;
    }
    #top_bar .content_wrap{
    margin: 0 auto;
    max-width: 1030px; width: 100%;
    padding: 0 30px;
    background: #191919;
    height: 33px;
    border-top: 5px solid #ff3232;
    border-bottom: 1px solid #2c2c2c;
    }
    #social_networks{
    display:block;
    float:right;
    text-align:right;
    }

    #social_networks ul {
        display: block;
        height: 32px;
        margin: 0;
    }

    #top_bar #social_networks li{
    display:inline-block;
    float:left;
    width:32px; height:32px;
    opacity:0.3;
    background-position:left top;
    -webkit-transition:All 0.4s ease;
    -moz-transition:All 0.4s ease;
    -o-transition:All 0.4s ease;
    }
    #top_bar #social_networks li:hover{ opacity: 1; background-position:left -32px; }
    #top_bar #social_networks li a{
    display:inline-block;
    width:32px; height:32px;
    }
    #top_bar #social_networks li a span{ display:none; }
    #top_bar #social_networks li.facebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8NiwzH89-ZPR3fONjcaSNm-uEBc1Ci4R8f1Ivhk4tT0t2RMrLJ6W-AdAl11UEXe4JuZ-kZ3YD8VpKdNMaZdezTjM3RalDPQjBZblFWzPhC6JJwL5y5yE1bo1Tkp9LuVKRLqMtbYVvtFQ/s64/social_network_facebook.png); }
    #top_bar #social_networks li.twitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZSmR3rAPlIeDVHfQ4kqeOuURtiMOHZzzqF0KQiDutlRifS9CUjNRQWppo63MefTI36OarWUd3sMi8rOCgJV1mzNXMYfgIEyXnfEu8jJxSOZBG8QwlqiNWDvzZYXoCcpWCxCX4IRiX6s3l/s64/social_network_twitter.png); }
    #top_bar #social_networks li.linkedin{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifU4WjDUgqv4Q_OWlyh2LbRnquaE3yuehRe-5hCbIkqvEj3ln4yuIkqKsOdb0JxvI-QbXTVG9WuwiU_Qqv7HUEfcgpNYskQFJxz6IsYFAvhhl255iug7EpKJBddtUHzH3w4LkjNimGnbf4/s64/social_network_linkedin.png); }
    #top_bar #social_networks li.tumblr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXPCgw1_e8tIbSIKAeDLLqiDD_chuAgUFvBqyoYqnc-53SKs_E_wJXCI2XhJblZ_N_lZLOc0-em0cSR4LUVpF48PAiqtx-wm4pFMMOEKUHxPd20UxYfeAFESSZOhi6-6_XsMCuCyxaguz/s64/social_network_tumblr.png); }
    #top_bar #social_networks li.vimeo{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qTKbBqZAYlNQHlBt3gPck88MgYMXLQ265iYISGkb6S57Tz3Xoc0U5-OINdf-HmzPpqilNC2g0W0MELtnh3dBJ1G0vdLT2Bl47WcnjrgzZlfghS00a79lwo_7eYQIaP1jhy_GmCpFkIcy/s64/social_network_vimeo.png); }
    #top_bar #social_networks li.skype{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVwirfV5ebXdmV67nbnaAFxvgcOIYhcCudu9StaFRq7pcxfV8ODMgVrleJy3uvMMASDgavxGH36eQj7Qr3bq_qSnPYSYtj68i-n1DDniukRScYwnp7HglJTnWbOJClnF65ozFqUzKFlbnK/s64/social_network_skype.png); }
    #top_bar #social_networks li.youtube{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0K6G9XabrvNBAfY7huieE7cs8BcHJAZh9ZF0cokibvg2FBvvtPC58L7xceoMbFcQzKy1R3dHLGg-VEDKe-bc_b-nqsk0WS7yCGHy5A8SRit1yLauMgTPnAI3HCpv6x4ULe0Gpj1cefOMu/s64/social_network_youtube.png); }
    #top_bar #social_networks li.myspace{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd45oDhttkyKKUBYw0xjd-yaSV_ytnSinaxI6ZqdLxGQciy5mR1Q5RDts4_Jf80ISTfBo4FCxnFIjA0xbnHXmCZA6KXIeQ_XT_Fs1xRx-zA-C3g2fhyphenhypheneIb2PQ95OLaUDIYejMIiN9V6pCC/s64/social_network_myspace.png); }
    #top_bar #social_networks li.googleplus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvDDDOCNu9IRRAMtLmKDcBWnMVrcArBWHxbZgUQ24O7c6ItCPYWX3-T5uiGrDS_bd2mANqSF3hZT0nF1h0_2SlHNhTuXaex7rJtldZpPThcpvwLV3k_ekHzJLnMKRFW5LRF8f6MPb2AK-/s64/social_network_googleplus.png); }
    #top_bar #social_networks li.behance{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-bPq4BtwNaZPrIZun6cA-RUlIXEo8ieI3BYnoNqAApaWOR_znBQnQHELMhr1snze3oLf8JlDDY9Jr2DPz5wFjp-5v8nwAInDD2RxKQ8n6zbFE2zSbsprJ5KDas9pHDkiLSy9MDD9Em3l/s64/social_network_behance.png); }
    #top_bar #social_networks li.deviantart{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tQyTa2qAVxqw9v9g4WVq0qfu9Yv9z9FHYnPX4wUTzpODAT06dfpygYgR0SvP4Ulniqr1J0t1Dyhm-Q5UhNhXJgEQ-ScZ1jZq0GZUgYcIkCvZpyZsBgm0BsiPiUgnrjfyDBSIsOHkTlAW/s64/social_network_deviantart.png); }
    #top_bar #social_networks li.envato{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfbxaHY1EZFUDD7DAUkvNia3BkeRAdB7NxhwryGelUvbwyUhwLn12fvG2-fYIdkBEoPEBFEk2BocU3zzrqPgjn0oudAqkqAbnTupaF66NyooOn1ScIlzJnMgETY81scAi0-5bRc5xlUUy/s64/social_network_envato.png); }
    #top_bar #social_networks li.flickr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCm_yUufb5CP6wARFeLmxZl4zUVtyAMnWZLugLw1SHz1yaKqA8GqWjrcJYGb3NDmRN3EZ2Y6FRp5O1qRg0dVB2lFgdiJNgGQhJO0zhpsq5TQpPJ01qqAM4UM8UsfoeP3U8wrom_ijcnfS-/s64/social_network_flickr.png); }
    #header-wrapper{background:#101010;}
    #header-wrapper .content_wrap{margin: 0 auto;max-width: 1030px; width: 100%;}
    #header{float:left}
    #header-inner {}
    #header,#header a { color: #fff }
    #header a:hover {}
    #header h1 {padding: 20px 0 0 30px;}
    #header img {max-height:80px}
    #header .description {padding: 5px 0 0 30px;}

    .date-time {
        color: #ABABAB;
        display: block;
        float: left;
        font-size: 10px;
        padding: 7px 0;
    font: normal 11px Tahoma;
    margin-top:2px;
    }

5) Again search for

</head>

6) Now add the following jquery above it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Note: If you have any previous jquery installed on your template, need not add it then.

7) Now search for <body> and add the following HTML after it

Note: This thing absolutely depends upon you where you want this tab to embade. Then choose the location and just add the script and thus you're done!

<section id='top_bar'>
    <div class='content_wrap'>
    <div class='date-time'>
    <script type='text/javascript'>
    //<![CDATA[
    function makeArray() {
    for (i = 0; i<makeArray.arguments.length; i++)
    this[i + 1] = makeArray.arguments[i];
    }

    var months = new makeArray('January','February','March','April','May',
    'June','July','August','September','October','November','December');
    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var yy = date.getYear();
    var year = (yy < 1000) ? yy + 1900 : yy;

    document.write(months[month]+ " " +day + ", " + year);
    //]]></script>
    </div>
    <div id='social_networks'>
    <ul>
    <li class='sorting-01 facebook'><a href='http://www.facebook.com/'><span class='inv'>Facebook</span></a></li>
    
    <li class='sorting-03 twitter'><a href='http://twitter.com'><span class='inv'>twitter</span></a></li>
    
    <li class='sorting-11 behance'><a href='http://www.behance.net'><span class='inv'>behance</span></a></li>
    
    <li class='sorting-13 envato'><a href='http://activeden.net'><span class='inv'>envato</span></a></li>
    
    <li class='sorting-02 googleplus'><a href='https://plus.google.com'><span class='inv'>googleplus</span></a></li>
    
    <li class='sorting-05 linkedin'><a href='http://linkedin.com'><span class='inv'>linkedin</span></a></li>
    
    <li class='sorting-10 youtube'><a href='http://www.youtube.com'><span class='inv'>youtube</span></a></li>
    
    <li class='sorting-06 flickr'><a href='http://www.flickr.com'><span class='inv'>flickr</span></a></li>
    
    <li class='sorting-04 vimeo'><a href='http://vimeo.com'><span class='inv'>vimeo</span></a></li>
    
    </ul>
    </div>
    <div class='clear'></div>
    </div>
    </section>