™Galery™: menu

Tampilkan postingan dengan label menu. Tampilkan semua postingan

Navigasi Efek Slide Out dengan jQuery

Tampilannya seperti gambar di samping... untuk cara membuatnya :

Seperti biasa log in blogger
Rancangan , edit html
Masukkan kode dibawah ini di atas kode ]]></b:skin>

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Selanjutbya cari kode </head> dan kopikan kode ini di atsnya :

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

Selanjutnya cari kode </body> dan kopikan kode berikut diatasnya :

<ul id='menusisi'>
<li class='beranda'><a href='LINKANDA' title='Beranda'></a></li>
<li class='tentang'><a href='LINKANDA' title='Tentang'></a></li>
<li class='cari'><a href='LINKANDA' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKANDA' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKANDA' title='Komentar'></a></li>
<li class='kontak'><a href='LINKANDA' title='Kontak'></a></li>
</ul>

yang berwarna biru silahkan isi sesuai kebutuhan.....
Simpan template......

selamat mencoba.......

Membuat menu accordion

Demonya bisa dilihat disini

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

#accr{
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;font:12px trebuchet ms;
line-height:2.4em;padding:5px;margin:0;
}
#accr h3{
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
background:-moz-linear-gradient(top, #051547, #999, #051547);;padding:5px 5px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #000;
}
#accr h3 a{
color:#000
}
#accr h3 a:hover{
color:#fff
}
#accr .post{
background:#000;
color:#fff;
padding:10px;
margin:10px 0px;
display:none;
border-bottom:2px solid #222;
}
#accr :target h3 + .post {
display:block;height:250px;overflow:auto;
}
#accr :target h3 a{
color:#FAF103
}

Simpan Template..........

Selanjutnya masuk ke menu Rancangan, elemen laman, tambah Gadget, Html/Java script , lalu simpan kode berikut:

<div id="accr">
<div id="isi1">
<h3>
<a href="#isi1">Widget 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget embed dan lainnya </div>
</div>
<div id="isi2">
<h3>
<a href="#isi2">Widget 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget embed dan lainnya </div>
</div>
<div id="isi3">
<h3>
<a href="#isi3">Widget 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget embed dan lainnya</div>
</div>
</div>

Simpan.....

selesai.........

membuat menu daftar isi jtoctree

demonya bisa dilihat disini

Login blogger
Rancangan, edit html, cari kode ]]></b:skin>
Simpan kode berikut tepat diatas kode tadi :

/* jToCTree */
#judafistre {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHysasevN5akzzT63fA7_lKO1g3Lkf2DFR5IJ3BgQFPbXF2whR0fVVDPrr_OrCGw-_cTIPIQUEbM9CHaqqA4fRazup7vHM87hj4t8tGOkXniUE8Ox0GdtQD-CmzwpyJWjWjVGJvAdcAxQ/d/bg5.gif)
   repeat-y scroll left center #E7F7FB;
   padding:5px;
   border:1px solid #339DC6;
   }
.branda {
   background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d/blogger.png)
   0px 4px no-repeat !important;
   }
.judafis {
   padding:0 0 0 4px;
   font-weight:bold;
   }
.treeview, .treeview ul {
   padding: 0;
   margin: 0;
   list-style: none;
   }
.treeview ul {
   background-color:
   transparent;
   margin-top: 4px;
   }
.treeview .hitarea {
   background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d/treeview-default.gif) -64px -25px no-repeat;
   height: 16px;
   width: 16px;
   margin-left: -16px;
   float: left;
   cursor: pointer;
   }
* html .hitarea {
   display: inline;
   float:none;
   }
.treeview li {
   margin: 0;
   padding: 3px 0pt 3px 16px;
   }
.treeview a.selected {
   background-color: #eee;
   }
#treecontrol {
   margin: 2px 0;
   display: none;
      }
.treeview .hover {
   color: red; cursor: pointer;
   }
.treeview li {
   background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d/treeview-default-line.png)
   0 0 no-repeat;
   }
.treeview li.collapsable, .treeview li.expandable {
   background-position: 0 -176px;
   }
.treeview .expandable-hitarea {
   background-position: -80px -3px;
   }
.treeview li.last {
   background-position: 0 -1766px ;
   }
.treeview li.lastCollapsable {
   background-position: 0 -111px
   }
.treeview li.lastExpandable {
   background-position: -32px -67px
   }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
   background-position: 0;
   }
.treeview-black li {
   background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d/treeview-black-line.png);
   }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable {
   background-image: url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d/treeview-black.gif);
   }
.filetree li {
   padding: 3px 0 2px 16px;
   }
.filetree span.folder, .filetree span.file {
   padding: 1px 0 1px 18px; display: block;
   }
.filetree span.folder {
   background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-4/d/folder.gif)
   0 0 no-repeat;
   }
.filetree li.expandable span.folder {
   background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d/folder-closed.gif)
      0 0 no-repeat;
      }
.filetree span.file {
   background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d/file.gif)
   0 0 no-repeat;
   }
.filetree span.file a {
   text-decoration:none;
   }

selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas kode tadi :

Daftar Isi bisa diganti dengan nama yang kawan inginkan, Fast dapat diubah dengan kata Normal untuk kecepatan lebih lambat.

selanjutnya untuk cara pemanggilannya pada edit html Posting atau pada Gadget HTML/JAVA SCRIPT :

<div id="judafistre">
<div id="treecontrol">
<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder" href="#">Buka Tutup</a>
</div>
<script src="http://dadhang.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree">

</script>
</div>

yang berwarna biru ganti dengan alamat blog sobat yang dipakai

selesai.........

untuk referensi lebih lengkapnya dapat kawan-kawan baca disini

Vertikal scroll menu with jQuery

Demonya bisa kawan-kawan lihat disini

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
Vertikal scroll menu with jQuery
---------------------------------- */
#scroolvrtkl{
height:400px;
overflow:hidden;
position:relative;
background-color:#999;
}

#vrtikal {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}

#vrtikal li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}

#vrtikal li a {
background:url() repeat #1f1f1f;

color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}

#vrtikal li span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}

selanjunya cari kode </head> dan letakkan java script beikut tepat diatasnya :

simpan template.....

cara pemanggilannya, silahkan ssuaikan dengan keinginan kawan-kawan baik itu pada Edit html posting atau pada menu Rancangan, Tambah Gadget, Html/Java script :

<div id="debugging_mouse_axis"></div>
<div id="debugging_status"></div>
<div id="scroolvrtkl">
<ul id="vrtikal">
<li><a href="#">vrtikal 1 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 2 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 3 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 4 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 6 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 7 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 8 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 9 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 10 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 11 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 12 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 13 <span> / 2007</span></a></li>
<li><a href="#">SUPER LONG vrtikal vrtikal vrtikal vrtikal SIZE 14 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 15 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 16 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 17 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 18 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 19 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 20 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 21 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 22 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 23 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 24 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 25 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 26 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 27 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 28 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 29 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 30 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 31 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 32 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 33 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 35 <span> / 2007</span></a></li>
</ul>
</div>

simpan.. dan selesai..........

Keterangan : sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai

Bounce menu with jQuery

Demonya bisa kawan-kawan lihat disini

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* Bounce menu with jQuery
----------------------------------------------- */
#topad {
   width:465px;
   height:130px;
   padding-top:35px;
   padding-right:20px;
   float:right;
}
#vnav {
   width:300px;
   float:left;
}
#des {
   width:600px;
   float:right;
}
#des h1 {
   font-size:24px;
   text-shadow: 0 -1px 1px #CCC;
   color:#779ec2;
}
#bounce li {
   height:20px;
   width:200px;
   overflow:hidden;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    padding: 7px 10px 6px;
    margin-top:5px;
    background-color:#a447cf;
}
#bounce li p {
   margin-top:10px;
   font-size:12px;
   color:#6CF;

}

selanjutnya simpan java script berikut tepat diatas kode </head> :

simpan template......

cara pemanggilannya :

<div id="vnav">
<ul id="bounce">
<li><h1>
Home</h1>
<a href="#">Home page</a></li>
<li><h1>
About Us</h1>
<a href="#">Check our Portfolio</a>
</li>
<li><h1>
Portfolio</h1>
<a href="#">Check our Portfolio</a>
</li>
<li><h1>
Contact Us</h1>
<a href="#">Check our Portfolio</a>
</li>
</ul>
</div>

Keterangan : sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai

Lavalamp navigation menu

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
lavaLamp With Image
---------------------------------- */
.lavaLampWithImage {
            position: relative;
            height: 29px;
            width: 421px;
            background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/s1600/lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/s1600/lava.gif") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

4. Simpan java script berikut tepat diatas kode </head> :

5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :

6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :

<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

sebenarnya ini sesuai template kawan karena pasti ada kemungkinan perbedaan template...

Cara membuat breadcrumbs

Log in blogger
Masuk ke menu Rancangan, Edit Html,
Centang Menu Expand Template Widget
Simpan kode berikut Diatas kode ]]></b:skin> :

/* ---------------
breadcrumbs
---------------------------------- */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:double 3px
#e6e4e3;
}

Slanjutnya ikuti petunjuk berikut:

Cari kode:

<div class='post hentry'>
dan simpan kode ini dibawah kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'> »

</b:if>

» <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<data:navMessage/>

</div>

</b:if>

Simpan template dan lihat hasilnya... :)

sebagai catatan karena perbedaan dalam template, untuk pencarian (CTRL+F untuk mempermudah pencarian ) cari dengan kata kunci post hentry

menu ini bisa dilihat contohnya pada artikel blog saya, tepatnya dibawah tanggal posting artikel, breadcrumbs ini mempermudah kita melihat posisi artikel dan posisi page yang kita kunjingi pada suatu blog.....

Semoga bermanfaat dan berhasil dipakai....

Menu navigasi Garagedoor Effect with jQuery

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
Menu navigasi Garagedor with jQuery
---------------------------------- */
.garagedoor a:active, .under_header a:active, .header a:focus, .under_header a:focus {
   outline: none; -moz-outline-style: none;
}

.garagedoor img {
   border: 0px; display: block;
}

.item .mouse {
   height: 80px;
   width: 100px;

   margin:0;padding:0;border:0;display:block;left:0;position:absolute;cursor:pointer;top:0;
}

.item .mouse img {
   height: 80px;
   width: 100px;

   margin:0;padding:0;
}

.item {
   height: 80px;
   width: 100px;
   color: black;

   overflow:hidden;display:block;overflow:hidden;position:relative;margin:0;padding:0;float:left;background-repeat:no-repeat;text-decoration: none;
}

.item .underlay {
   padding: 10px;
   padding-top: 30px;
   color: #000;
   background: #fff;
        height: 80px;
   position:absolute;left:0px;top:0px;
}

.item .overlay {
   height: 80px;
   width: 100px;

   margin:0;padding:0;border:0;left:0;position:absolute;top:0;
}

Selanjutnya simpan script berikut diatas kode </head>:

dan simpan juga script ini diatas kode </body> :

Cara pemanggilannya pada Html :

<div class="garagedoor" id="garagedoor">
<div style="text-align: center;">

</div>
<div class="item" style="text-align: center;" title="#">
<div class="underlay">
Read my blog entries</div>
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAwAQS2iZ40I-JGtuI7gUhueYlzWnwI4jU5p2apDZJKkpKyz94-Foq2kLn0iIz_blszekoOBR3OT8LK1IcwyvDshHJxXVlzvpaGCGdwZp1VEAaIoi5CoKVvCBorP5hWAVHj8B5Exeg4k/s1600/garage5.jpg" />
<div class="mouse">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSLn4WbIbMgeoTD-cJfPAucxqhs9E0q5zmjgX4bSKmuNocOvuuGXddYQfyIuO4TxjQHOmLoPR6ofN1HHD4vXJDPtaUJ9lkrv2gf2OBzIVOXBfgItPwzSOyYaD-noIYevPIwve1fNNtPi8/s1600/nothing.gif" /></div>
</div>
<div class="item" style="text-align: center;" title="#">

<div class="underlay">
information about me</div>
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRb4PhBio9dQD-rtmU96meiRGcBA09D0WNVxiWdP7rHgKN4Ui13n_3LvVtUkanXDbYbQEeM-PqSf8vScPs_xcawIFLfcSWlEJ8bHWNvHbPLJjv68be5rCJvXdmeda7RDtfkMPHeF76JaQ/s1600/garage2.jpg" />
<div class="mouse">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSLn4WbIbMgeoTD-cJfPAucxqhs9E0q5zmjgX4bSKmuNocOvuuGXddYQfyIuO4TxjQHOmLoPR6ofN1HHD4vXJDPtaUJ9lkrv2gf2OBzIVOXBfgItPwzSOyYaD-noIYevPIwve1fNNtPi8/s1600/nothing.gif" /></div>
</div>
<div class="item" style="text-align: center;" title="#">
<div class="underlay">
People that rock</div>
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixf091ROoppQnKrmXGpe6jlQ8CHYk0VL0XQYfrXJljkvJA48c6nhgQSNDgXLZtHgToAntJSihzaryMUY7HgqiGrKBCbQrQgc_NX1hdl104cxBqNyrqz6ldo8VKsuX4lUGgljd5fMfMvas/s1600/garage3.jpg" />
<div class="mouse">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSLn4WbIbMgeoTD-cJfPAucxqhs9E0q5zmjgX4bSKmuNocOvuuGXddYQfyIuO4TxjQHOmLoPR6ofN1HHD4vXJDPtaUJ9lkrv2gf2OBzIVOXBfgItPwzSOyYaD-noIYevPIwve1fNNtPi8/s1600/nothing.gif" /></div>
</div>
<div class="item" title="#">
<div class="underlay" style="text-align: center;">
Send me a message.</div>
<div style="text-align: center;">
<img alt="" class="overlay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFcHLSYA3ypOKOQluS4sjTajgZTAiMjaiaKBb8RVroFrLnioUilb38uI2et5YYSRE03PrXvxxN9QaAM5lHWumFcR-uESZecgpxss7e8GsveywX4b3Nqa92r8SoflmI16t9fUhAKEPQ5w/s1600/garage4.jpg" /></div>
<div class="mouse" style="text-align: center;">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSLn4WbIbMgeoTD-cJfPAucxqhs9E0q5zmjgX4bSKmuNocOvuuGXddYQfyIuO4TxjQHOmLoPR6ofN1HHD4vXJDPtaUJ9lkrv2gf2OBzIVOXBfgItPwzSOyYaD-noIYevPIwve1fNNtPi8/s1600/nothing.gif" /></div>

</div>
</div>

Selesai.......

Rocking Rolling Rounded Menu with jQuery and CSS3

Demonya bisa dilihat disini

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* -------------------------
Rocking Rolling Rounded Menu with jQuery and CSS3
----------------------------------------------- */
.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZw35Zkh0yNnwRbrbkXfVVzF9ETwKvjTlPv4prBoSOu1s19nB03RMPaOtUNl48nPfaiGiPgFclQNO0KUua40uWOog3knh_PvK557MR9AIy-MnUfocNxVEuRULQoB-NEHUxPmN29njJeJg/s1600/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMc3GCbzbMsu2bCFDWTyKB7KLQx5a_kWQClFvby70vQw-kI6GUCFAhFAnYxjMDOm4GjGUskoaGv4AoAUKPW23Vc4WBx5uy46rZYT3rH4ZcCbQXcbR-ohOpaox5TgSzEZ3rZG9AB7Une0/s1600/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4a1iRYzvUGd2BbGuw3gYEkVCRdMRsJVGAEdTevwN18uKW41lYCaTd7RJsdHaXLOpKgJoSCMoSsBxoOw9aKKxMSnlz1sKRMz5MpvKxB65ylwgsSxMWaYGMEvae9DrKbcbaHGebcrcy4ac/s1600/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVc0T8jWFjTPFI3gWg80auncVBX_chMjX7eeYlBLixTjR1xfyq4o4tzPDuXKtvMuoT4vcjK4g8ywJHpAR49TMeSwOZrobxBEUqqJGof8pbJ96wisJtj8mcIjW1AuRlOSUcnk9QMsRnBo/s1600/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEysr1p5OJm8q6nSx1kvbGRAIEgnBH9IYOZXzGNVDIh2uJgg9Xi9EYsrKAkLGNctT23lrrbd-k_kPNGVhskWKULmgoAlidwk8NV_M4uZLjFyiLNjYAwock7AU0uGOoNAJCaQ0riAaxKxc/s1600/photos.png) no-repeat top left;
}
.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

selanjutnya simpan script berikut tepat diatas kode </body> :

terakhir cara pemanggilannya pada HTML (tata letaknya sesuaikan dengan template dan keinginan):

<div class="item">
                <a class="link icon_mail"></a>
                <div class="item_content">
                    <h2>Contact us</h2>
                    <p>
                        <a href="#">eMail</a>
                        <a href="#">Twitter</a>
                        <a href="#">Facebook</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <a class="link icon_help"></a>
                <div class="item_content">
                    <h2>Help</h2>
                    <p>
                        <a href="#">FAQ</a>
                        <a href="#">Live Support</a>
                        <a href="#">Tickets</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <a class="link icon_find"></a>
                <div class="item_content">
                    <h2>Search</h2>
                    <p>
                        <input type="text"></input>
                        <a href="">Go</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <a class="link icon_photos"></a>
                <div class="item_content">
                    <h2>Image Gallery</h2>
                    <p>
                        <a href="#">Categories</a>
                        <a href="#">Archives</a>
                        <a href="#">Featured</a>
                    </p>
                </div>

Sebagai tambahan java script yang diberi warna Biru, bisa diganti dengan alamat link Js berikut

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

maksudnya penggantian itu jika kawan-kawan ingin efek putarannya hanya pada awal Hover saja seperti demo di situs http://tympanus.net/Tutorials/RockingRollingMenu/

Fancy Apple-Style Icon Slide Out Navigation

Demonya bisa dilihat disini

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* -------------------------
Fancy Apple-Style Icon Slide Out Navigation
------------------------------------------ */
.navigationaple{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menuaple{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menuaple li{
    float:left;
}
ul.menuaple li a{
    text-decoration:none;
    background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHerN9MMy5mXPKLVsqmfl_BdfjNyytEwcTWQYgW7FYs73yIGgiZhIKKsQn4x3F-NPSkgNQl-aqJ8emytdhlUn5XtacJsK3FB-1eZU5A2maqrCnYpSBwNqs-3hpEp3dUDVcLhCEBpti4xg/s1600/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menuaple li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menuaple li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menuaple li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menuaple li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menuaple li span.Home{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7DNuKWZkpiQp9ZTIgfagOI_JCAIlsro2v4uUmbL0gJlygUlFPVZDY6mytxn6q_VYK_urQcVVbwquH8eh9Fe8kQu2P2NhVmYjZCFZW89CfPF4qE7t-b5Pfgd701uL_ThwS4jQdOfbVYKU/s1600/home.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menuaple li span.About{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYDLjGllEUuMVoCV_dDL3Za5qQPkAbu8d58eSVgrziqWX-lFE6kGUup-wqeKmQ_OdgbpSI36H1R9ZHgmjCH-BM5RSJDQrVmTl9cZlkX3aEtHlC7Qf0jEsEfMJeHVlWup3LZEhthCpY1k/s1600/about.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menuaple li span.Email{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83jDiYYcKlIctUNbWIndWv8AZcDTzepiztWIXczlURNEdqsau9QCgwOridTE8abdML-amMviZ1eMjazE0Uf1-37aU4BcOBltJFYj76Htr03T87qzsfDHI8RSU60OIwzsv1sfaqnq077o/s1600/email.png);
    left:293px;
}
ul.menuaple li span.Portofolio{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTpDrM_mHWLfTazSY73rizN-b22Awg2yhGbONs_yuU5JMo6GBjOchUJ2SUX24x2gd5LytGpTu-D2r1NH1FMiXcWIfFacwCDwMWJPGf0l3wcyfs0phENf1j-SskRk_KfyEzDL-s3VmmE0/s1600/portofolio.png);
    left:423px;
}

selanjutnya simpan script berikut diatas kode </body> :

yang terakhir pemanggilan pada Html :

<div class="navigationaple">
<ul class="menuaple" id="menuaple">
<li><span class="Home"></span><a class="first" href="#">Home</a></li>
<li><span class="About"></span><a href="#">About</a></li>
<li><span class="Email"></span><a href="#">Email</a></li>
<li><span class="Portofolio"></span><a class="last" href="#">Portofolio</a></li>
</ul>

</div>

dan selesai...

jQuery Background Right left effect

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
jQuery Background Right left effect
---------------------------------- */
#Rightleft {
   list-style:none;
   margin:0;
   padding:0;
   }
#Rightleft li {
   float:left;
   width:100px;
   margin:0;
   padding:0;
   text-align:center;
   }
#Rightleft li a {
   display:block;
   padding:5px 10px;
   height:100%;
   color:#FFF;
   text-decoration:none;
   border-right:1px solid #FFF;
   }
#Rightleft li a:hover, li a:focus, li a:active {
   background-position:-150px 0;
   }
#Rightleft a {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSOTgl9H-zXNs_M9uuAQwSvhzyFa0PQ3ASlAEKb3DBsWUWzO-a4Kr3JrydP6FyXzCzbBBFeyRRg0iIvAbCPGdjb9bQ6u_pTlvfBp9S4nxxrBhlfz25uAmyJx_t-4wvCZc3ppquMTxqqs/s1600/bg2.jpg) repeat 0 0;
   }

selanjutnya simpan script berikut diatas kode </head>:

terakhir cara pemanggilannya pada Html atau pada template kalau saya biasa diletakkan di bawah tag <div id='head-nav'> (sesuaikan dengan template kawan) :

<ul id="Rightleft">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Tutorial</a></li>
</ul>

selesai... jangan lupa simpan template...
Catatan : Untuk script jquery yang diberi warna Biru ; jika sudah ada, tidak perlu ditambahkan lagi

Semoga berhasil dengan tutor jquery ini, karena memang terkadang penerapan jquery selalu terjadi bentrok dsb... :)

Animated Drop Down Menu with jQuery

Demonya bisa dilihat disini

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
Animated Drop Down Menu with jQuery
---------------------------------- */
ul, li .menu_head{
   margin:0; padding:0;
   list-style:none;
   }

.menu_head{
   border:1px solid #998675;
   }

.menu_body {
   display:none;
   width:184px;border-right:1px solid #998675;
   border-bottom:1px solid #998675;
   border-left:1px solid #998675;
   }
.menu_body li{
   background:#493e3b;
   }
.menu_body li.alt{
   background:#362f2d;
   }
.menu_body li a{
   color:#FFFFFF;
   text-decoration:none; padding:10px;
   display:block;
   }
.menu_body li a:hover{
   padding:15px 10px; font-weight:bold;
   }

selanjutnya simpan script berikut diatas kode </head> :

terakhir cara pemanggilannya pada Html :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL4xI6Rv2FsekJwhDLMZBeqDHc59lpzBY2O-F6hOiHrJMyBHAxV0vvT8JkjEpvPeY_5g0shKY9saQcpGK8RElSc42hGT32aKwg3DVny4jvutnWsnmnCnPE-FdB3gkS-uvEmTK-HAPUjL0/s1600/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Magic line navigation menu

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/*----------------
Magic line navigation
--------------------------*/
.nav-wrapline{
   background:-moz-linear-gradient(top, #051547, #888, #051547);
-moz-box-shadow:0px 2px 2px #111;
   width: 500px;
   border: solid 1px #FFF;
   height: 30px;
   -moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.group:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both; height: 0;
      margin: 50px auto;
   background-color: rgba(0,0,0,0.6);
   border-top: 2px solid #FFF;
   border-bottom: 2px solid #FFF;
   width: 500px;
   }
*:first-child+html .group {
   zoom: 1;
   } /* IE7 */
#magic-line {
   position: absolute; bottom: -2px; left: 0;
   width: 100px; height: 2px;
   background: #fe4902;
   }

#magic {
   margin: 0 auto;
   list-style: none;
   position: relative;
   width: 500px;
   }
#magic li {
   display: inline;

   }
#magic li a {
   position: relative; z-index: 200;
   color: #bbb; font-size: 14px;
   display: block; float: left;
   padding: 6px 10px 4px 10px;
   text-decoration: none;
   text-transform: uppercase;
   }
#magic li a:hover {
   color: white;
   }
#magic #magic-line-two {
   position: absolute; top: 0;
   left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-left: solid 1px #fff;
   border-right: solid 1px #fff; }

.current_page_item a, .current_page_item_two a {
   color: white !important;
   }

dan simpan kode ini diatas </head> :

terakhir cara pemanggilannya pada HTML (tempatkan ssuai keinginan dan template kawan-kawan):

<div class="nav-wrapline">

        <ul class="group" id="magic">
            <li style=""><a rel="#fe4902" href="#">Home</a></li>
            <li style=""><a rel="rgba(50,69,12,0.9)" href="#">Mobile Download</a></li>
            <li style=""><a rel="rgba(113,116,0,0.9)" href="#">About</a></li>

            <li style="" class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Facebook</a></li>
            <li style=""><a rel="rgba(236,85,25,0.9)" href="#">Twitter</a></li>

</ul>
      </div>

selesai.....

™Galery™

Blogger templates

Blog Archive

Navigasi Efek Slide Out dengan jQuery

Membuat menu accordion

membuat menu daftar isi jtoctree

Vertikal scroll menu with jQuery

Bounce menu with jQuery

Lavalamp navigation menu

Cara membuat breadcrumbs

Menu navigasi Garagedoor Effect with jQuery

Rocking Rolling Rounded Menu with jQuery and CSS3

Fancy Apple-Style Icon Slide Out Navigation

jQuery Background Right left effect

Animated Drop Down Menu with jQuery

Magic line navigation menu

Banner

banner

Banner

banner

Postingan Populer

Postingan Populer

Postingan Populer

Banner

Banner