JSFiddle

  • Sidebar Accordion

    Membuat Sidebar Accordion Pada Blog Dengan JQuery Efek

    jQuery.easing['jswing'] = jQuery.easing['swing'];
    
    jQuery.extend( jQuery.easing,
    {
    	def: 'easeOutQuad',
    	swing: function (x, t, b, c, d) {
    		//alert ...
  • CSS Animasi @Keyframes

    Pembuatan Animasi

    <p id="box"></p>
    <br/>
    <div class="fly-eye">‚óŹ</div>
    <br/><br/>
    <p id="box2"></p>
  • jQuery Accordion Sprites

    jQuery Accordion Widget with CSS Sprites

    $(function(){
     $("#list-one").show();
     $("#list-two").hide();
     $("#list-three").hide();
     $("#list-four").hide();
    
     $("#list-one-button").click(function(){
      $(".cat-list").slideUp(600);
      $("#list-one").slideDown(600);
     });
    
     $("#list-two-button").click ...
  • Creating Tab Menu With jQuery #1 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

    (function($) {
    
        $.organicTabs = function(el, options) {
        
            var base = this;
            base.$el = $(el);
            base.$nav = base.$el.find(".nav");
                    
            base.init = function ...
  • Creating Tab Menu in Blog

    jQuery 1.8.3, HTML, CSS, JavaScript

    //<![CDATA[
    var columnReadyCounter = 0;
    
    // This is the callback function for the "hiding" animations
    // it gets called for each animation (since ...
  • CSS List Style #2 is the latest revision

    Experimen CSS List Style

    <table class="full reference" border="1">
    <tbody>
    <tr id="table-2_row-1">
    <th>Circle</th>
    <td><ul class="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul></td>
    </tr>
    <tr id="table-2_row-2">
    <th>Square</th>
    <td><ul class="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul></td>
    </tr>
    <tr id="table-2_row-3">
    <th>Upper Roman</th>
    <td><ol class="upper-roman">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ol></td>
    </tr>
    <tr id="table-2_row-4">
    <th>Lower Alpha</th>
    <td><ol class="lower-alpha">
    <li>Coffee</li>
    <li>Tea ...</li></ol></td></tr></tbody></table>
  • Drop Down Menu with jQuery #2 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

        $(function () {
            $('#menu li').hover(function () {
                $('ul', this).filter(':not(:animated)').slideDown(600, "easeOutBounce");
            }, function () {
                $('ul', this).slideUp(600, "easeInExpo");
            });
        });
  • Random Post Thumbnail

    Random Post Thumbnail

    // Feed configuration
    var homePage = 'http://kod-tutor.blogspot.com',
    	maxResults = 7,
    	summaryLength = 170,
    	noImageUrl = 'http://1.bp.blogspot.com/-E71ffY-ngcA/Ulwqgnkeu5I ...
  • Scroll to Top Animation with jQuery #1 is the latest revision

    Scroll to Top Animation with jQuery on Blogger

    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#backtoTop').fadeIn();
            } else {
                $('#backtoTop').fadeOut();
            }
        });
        $('#backtoTop> img').click(function () {
            $('body,html').animate ...
  • Navigasi Menu Transition

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul class="navbar color1">
        <li><a href="http://kod-tutor.blogspot.com/"><i class="icon20 home"></i><span>Home</span></a>
        </li>
        <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a>
        </li>
        <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>
    
            <ul class="drpcontent">
                <li><a href="#">Latest Posts</a>
                </li>
                <li><a href="#">Popular Posts</a>
                </li>
                <li><a href="#">Private Posts</a>
                </li>
            </ul>
        </li>
        <li><a href="#"><i class="icon20 login"></i><span>Login</span></a>
        </li>
        <li class="drpdown"><a href="http://kod-tutor.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a>
    
            <ul class="drpcontent" id="themeselect">
                <li><a href="#" data-color="color1">Orange</a>
                </li>
                <li><a href="#" data-color="color2">Marine</a>
                </li>
                <li><a href="#" data-color="color3">Green</a>
                </li>
                <li><a href="#" data-color="color4">Purple</a>
                </li>
                <li><a href="#" data-color="color5">Red</a>
                </li>
            </ul>
        </li>
    </ul>