Super Accordion Widged Memeperindah Tampilan Blog

Pada postingan ini saya akan share mengenai cara membuat super accordion widged untuk lebih memperindah tampilan blog sebenarnya accordion widged ini adalah pengembangan dari accordion sebelumnya yang saya bagikan tempo hari fungsinya tergolong sama namun ada sedikit perbedaan pada tampilannya dan desainnya..

CSS

#page-wrap {
    width: 300px;
    margin: 10px auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.box {
    background: #a7a7a7;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    margin: 0 0 15px 0;
}

.box ul li {
    font-size: 11px;
    margin: 0;
    border-bottom: 1px solid #666;
}

.box ul li a {
    color: #222;
    display: block;
    padding: 4px 4px;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

.box ul li:last-child,
.box ul li:last-child a {
    border: none;
}

.box ul li a:hover {
    background: #ccc;
    text-decoration: none;
}

#catNav {
    background: #494949;
    padding: 5px 5px 5px 37px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 0 10px 0;
}

#catNav li {
    display: inline;
}

#catNav li a {
    display: block;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url(http://1.bp.blogspot.com/-69-QqA5WTog/UIgt60nz0TI/AAAAAAAAANI/FQL2BK6hA4Q/s1600/catSprite.png);
    float: left;
    border: none;
    padding: 0;
}

#catNav li a#list-one-button {
    background-position: -50px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-one-button {
    background-position: -50px -100px;
}

#catNav li a#list-one-button:hover {
    background-position: -50px 0;
}

#catNav a#list-two-button {
    background-position: -100px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-two-button {
    background-position: -100px -100px;
}

#catNav li a#list-two-button:hover {
    background-position: -100px 0;
}

#catNav a#list-three-button {
    background-position: 0 -50px;
}

#page-wrap #catNav li.activeCatButton a#list-three-button {
    background-position: 0 -100px;
}

#catNav li a#list-three-button:hover {
    background-position: 0 0;
}

#catNav a#list-four-button {
    background-position: -150px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-four-button {
    background-position: -150px -100px;
}

#catNav li a#list-four-button:hover {
    background-position: -150px 0;
}

Javascript

<script type="text/javascript">
    //<![CDATA[
    $(function () {

        $("#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(function () {
            $(".cat-list").slideUp(600);
            $("#list-two").slideDown(600);
        });

        $("#list-three-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-three").slideDown(600);
        });

        $("#list-four-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-four").slideDown(600);
        });

        $("#catNav li a").click(function () {
            $("#catNav li").removeClass("activeCatButton");
            $(this).parent().addClass("activeCatButton");
        });
    });
    //]]>
</script>

HTML

<div id="page-wrap">
<div class="box">
<ul id="catNav">
<li class="activeCatButton"><a href="https://www.blogger.com/null" id="list-one-button" title="menu 1">Menu 1</a>
            </li>
<li><a href="https://www.blogger.com/null" id="list-two-button" title="menu2">Menu 2</a>
            </li>
<li><a href="https://www.blogger.com/null" id="list-three-button" title="menu 3">Menu 3</a>
            </li>
<li><a href="https://www.blogger.com/null" id="list-four-button" title="menu 4">Menu 4</a>
            </li>
</ul>
<ul class="cat-list" id="list-one">
<li><a href="http://imronfhatoni94.blogspot.com/">EMP-BLOG</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
<ul class="cat-list" id="list-two">
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 1 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
<ul class="cat-list" id="list-three">
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 1 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
<ul class="cat-list" id="list-four">
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 1 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
</div>
</div>

Sedikit penjelasan :

Letakan CSS nya diatas kode ]]></b:skin>
Letakan  Javascript nya diatas kode  </head>   untuk lebih efektif  bisa juga diatas kode  </body>
Letakan HTML nya dimanapun anda ingin menampilkan accordion widgednya..

Silahkan di edit lagi cssnya untuk modifikasi tampilan accordionnya...



Selamat mencoba semoga bermanfaat...

Read More

Konsep Logo Blog Menggunakan CSS

Pada kesempatan ini share mengenai cara memperindah logo blog sebenarnya ada banyak cara namun jika agan berminat tidak ada salahnya mencoba cara ini,,sebelumnya dalam membuat logo ini saya terinspirsi dari Maz-waone dan Opic-Blog yang keren dan menarik..nah untuk caranya ikuti langkah dibawah ini..

Masuk blog agan
pilih menu template/edit html
kemudian letakan kode dibawah ini pada bagian header blog agan
kalau di template ini saya meletakannya dibawah kode <div id='header-wrapper'>

<a class='emp-logo' href='http://digratisan.blogspot.com/'>
<span class='char char-e'>a</span>
<span class='char-hidden'>rie</span>
<span class='char char-b'>a</span>
<span class='char-hidden'>die</span>
</a>

dan seperti biasanya letakan kode cssnya diatas ]]></b:skin>

.emp-logo {display : block;width : 170px;height : 40px;margin :5px;
position : relative;}
.emp-logo span {display : block;float : left;margin : 0;height : 35px;margin-left :-3px; font-family:Alike,Georgia,"URW Bookman L",Serif;}
.emp-logo .char-e, .emp-logo .char-b{text-shadow :0 2px 2px #000;
color : #eee;font-size:48px;font-weight:bold !important;
transition : all 1s ease-out;}
.emp-logo .char-b {}
.emp-logo .char-b {left : -2px;border-color :none;}
.emp-logo .char-b + span {margin-left :0px;}
.emp-logo .char-hidden {font-size:28px;font-weight:bold !important;
text-decoration : none;letter-spacing : 0px;color : #58FAF4 ;width : 0;
opacity : 0;margin-top : 12px;overflow : hidden;
transition : width 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-out;
text-shadow :0 2px 2px #000;}
.emp-logo:hover .char-hidden {width : 50px;opacity : 1;
transition : width 0.6s 0.5s ease-in-out, opacity 0.3s 0.3s ease-out;} 
.emp-logo:hover .char-e, .emp-logo:hover .char-b{color:red;transition-duration: 1s;}
  .emp-logo:hover .char-m{margin-left :-12px;}

sampai langkah ini memang sudah selesai...
tetapi judul blog agan yang sebelumnya akan berbenturan dengan logo yang agan pasang

untuk menyembunyikan judul blog agan yang sebelumnya tambahkan kode display:none
pada script header sebelumnya

dan untuk beberapa script yang saya tandai  bisa agan sesuaikan atau dimodifikasi lagi sesuai kemauan dan selera masing - masing....

Selamat mencoba semoga bermanfaat...

Read More

Tooltip Sederhana on Related Post

 

Pada Postingan ini saya kana share mengenai tooltip on related post mungkin agan sudah tau maksudnya yaitu memberi efek tooltip pada related post untuk penggunaannya sebagai berikut..

Masuk blog agan
pilih menu template
kemudian cari kode  ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
setelah ketemu letakan kode dibawah ini tepat diatasnya

/* EMP-BLOG Related Posts --- */
        .related-post .post-thumbnail {
        z-index: 1;
        position: relative;
        width: 98px;
        height: 98px;
        margin: 0;
        display: block;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 2px 2px 5px #444;
        -moz-box-shadow: inset 2px 2px 5px #444;
        box-shadow: inset 2px 2px 5px #555;
        }
        .related-post {
        float: left;
        position: relative;
        width: 98px;
        height: 98px;
        margin: 0 10px 10px 0;
        background: #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        }
        .related-post .related-post-title {
        display: none;
        float: left;
        background: #000;
        color: #fff;
        text-shadow: none;
        font-weight: bold;
        padding: 10px;
        position: absolute;
        top: -75px;
        left: 40px;
        z-index: 2;
        width: 200px;
        -webkit-box-shadow: 0 0 2px #444;
        -moz-box-shadow: 0 0 2px #444;
        box-shadow: 0 0 2px #444;
        }
        .related-post:hover .related-post-title {display: block;}

Selanjutnya paste kode dibawah ini dimana anda ingin menempatkan related postnya
misalnya agan ingin menempatkan dibawah postingan maka cari kode <data:post.body/>
kemudian paste kode dibawah ini tepat diatasnya

<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

untuk penyusuaiannya silahkan di edit lagi kode yang diatas  ]]></b:skin> sesuaikan dengan tampilan blog agan,selamat mencoba semoga bermanfaat...

Read More

Membuat Floating Formulir Kontak Blogger

Pada postingan ini saya akan share mengenai cara membuat floating kontak widged terbaru dari blogger ini untuk pemasangganya cukup simple silahkan ikuti langkah dibawah ini...

masuk blog anda telebih dahulu
kemudian menuju halaman tata letak/add gadged
kemudian pilih gaged lainnya
setelah itu pada urutan kedua pilih Formulir Kontak

Setelah itu simpan widged 

kemudian kita beralih ke menu template/edit html

jika sudah cari kode ]]></b:skin> gunakan ctrl + f

setelah itu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

/*Floating Contact by empblogspot.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 255px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #2E9AFE;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 2px solid #848484;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: left;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Setelah itu cari kode </body> dan letakan kode dibawah ini tepat diatas tag  </body>

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact by empblogspot.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

 Silahkan di edit sendiri kode yang saya tandai sesuai selera agan masing masing
terakhir Simpan template agan dan lihat hasilnya...
selamat mencoba semoga bermanfaat....

Read More

Menciptakan Fungsi Accordion Pada Widged

View Demo

Pada Postingan ini saya akan share mengenai cara membuat Accordion Widged di blog accordion widged ini saya rasa cukup mampu untuk menampung widged dan memaksimalkan penampilan blog agar blog terlihat rapi dan teratur nah utuk membuatnya sangat mudah silahkan ikuti langkah dibawah ini untuk menerapkan accordion widged ini di blog anda..

Masuk blog anda
Pilih menu template/edit html
kemudian gunakan ctrl + f dan temukan kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

/*------ Accordion Widget by EMP  -----*/

    ul.container{

        width:275px;
        margin:0 auto;
        padding:0px;    
    }

     

    li.menu{

        padding:5px 0;
        width:100%;

    }

    li.button a{

        display:block;
        font-family: Arial, sans-serif,Helvetica;
        font-size:14px;
        overflow:hidden;
        padding:0px 0px 5px 0;
        position:relative;
        width:100%;
            text-transform:capitalize;
    }

    li.button a:hover{

        text-decoration:none!important;
    }

    li.button a span{
       
        right:0px;
            top:0px;
        position:absolute;
        color:#ccc;
        display:block;
    }


    .dropdown1{

        display:none;
        padding-top:5px;
        width:100%;
    }

    .dropdown1 li{
       
       
       
    border:1px solid transparent;
        color:#111;
        margin:5px 0;
        padding:4px 10px;
           
    }

    .dropdown1 li:hover {
    border:1px solid transparent;
    text-decoration:none;
    }


    .dropdown1 li a:hover {
    text-decoration:none;
    }

kemudian dengan cara yang sama temukan silahkan cari kode </head>
setelah ketemu letakan script dibawah ini tepat diatas tag  </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){

/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();

/* Closing all other drop down sections, except the current one */
$('.dropdown1').not(dropDown).slideUp('slow');
dropDown.stop(false,true).slideToggle('slow');

/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */
e.preventDefault();
})

});
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
  //alert(jQuery.easing.default);
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
},
easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
//]]>
</script>

Setelah itu masuk pada menu tata letak/add gadged
kemudian letakan kode dibawah ini pada halaman yang telah tersedia

<ul class="container">
    <!- menu satu -->


          <li class="menu">
         
              <ul>
                <li class="button"><a href="#" >EMP Page<span>▼</span></a></li>             

                <li class="dropdown1">


                    <ul>
     <li>1. <a  href="URL MENU" >Nama Menu</a></li>
    <li>2. <a  href="URL MENU">Nama Menu</a></li>

    <li>3. <a href="URL MENU">Nama Menu</a></li>

    <li>5. <a href="URL MENU">Nama Menu</a></li>

    <li>4. <a href="URL MENU">Nama Menu</a></li>

                    </ul>
                </li>

              </ul>
             
          </li>

     

    <!- menu dua -->


    <li class="menu">
         
              <ul>
                <li class="button"><a href="#" >Categories<span>▼</span></a></li>

                <li class="dropdown1">
                    <ul>

    <li>1. <a  href="URL MENU" >Nama Menu</a></li>
    <li>2. <a  href="URL MENU">Nama Menu</a></li>

    <li>3. <a href="URL MENU">Nama Menu</a></li>

    <li>5. <a href="URL MENU">Nama Menu</a></li>

    <li>4. <a href="URL MENU">Nama Menu</a></li>
                   
                 </ul>
                </li>

              </ul>

          </li>

 <!- menu tiga -->


    <li class="menu">
         
              <ul>
                <li class="button"><a href="#" >Friends Link<span>▼</span></a></li>

                <li class="dropdown1">
                    <ul>

    <li>1. <a  href="URL MENU" >Nama Menu</a></li>
    <li>2. <a  href="URL MENU">Nama Menu</a></li>

    <li>3. <a href="URL MENU">Nama Menu</a></li>

    <li>5. <a href="URL MENU">Nama Menu</a></li>

    <li>4. <a href="URL MENU">Nama Menu</a></li>


                   
                 </ul>
                </li>

              </ul>

          </li>

<!- menu empat -->


    <li class="menu">
         
              <ul>
                <li class="button"><a href="#" >Apa saja Boleh<span>▼</span></a></li>

                <li class="dropdown1">
                    <ul>

    <li>1. <a  href="URL MENU" >Nama Menu</a></li>
    <li>2. <a  href="URL MENU">Nama Menu</a></li>

    <li>3. <a href="URL MENU">Nama Menu</a></li>

    <li>5. <a href="URL MENU">Nama Menu</a></li>

    <li>4. <a href="URL MENU">Nama Menu</a></li>


                   
                 </ul>
                </li>

              </ul>

          </li>


<!- menu lima -->


    <li class="menu">
         
              <ul>
                <li class="button"><a href="#" >Boleh Apa Saja<span>▼</span></a></li>

                <li class="dropdown1">
                    <ul>

   <li>1. <a  href="URL MENU" >Nama Menu</a></li>
    <li>2. <a  href="URL MENU">Nama Menu</a></li>

    <li>3. <a href="URL MENU">Nama Menu</a></li>

    <li>5. <a href="URL MENU">Nama Menu</a></li>

    <li>4. <a href="URL MENU">Nama Menu</a></li>


                   
                 </ul>
                </li>

              </ul>

          </li> 
      </!-></!-></!-></!-></!-></ul>

Catatan : Silahkan ganti semua tulisan yang saya beri warna dengan suruhan masing-masing

Warna Coklat      Judul Tab Menu         
Warna Merah       URL Tujuan
Warna Biru          Nama Menu

Untuk pengaturan Warna,lebar menu dll silahkan sesuaikan sendiri agar cocok di blog anda
Jika Sudah simpan template anda dan lihat hasilnya..
selamat mencoba semoga bermanfaat...

Read More