Categories

css bunder system menu

membuat menu dengan css adalah hal yang sangat menyenangkan , apalagi kalo keren WOW pasti kamu akan suka . na ini sekarang ada hubunganna dengan itu semua .
ya jangan heran apa bila css ini saya copy dari jauh , hhaaahaha lupa nama blognya .
langsung aja de nih tuorialnya ..  UUUHHH Tuto Dehh ........

letakan kode berikut di bagian atas kode ]]></b:skin>


/* Iframe Dialog */
#kotak-dialog {
position:absolute;
top: 8%;
left: 40%;
margin:0px 0px 0px -200px;
width:700px;
height:auto;
background-color:#fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
z-index:1000;
display:none;
}
#kotak-dialog *:focus {
outline:none;
}
#kotak-dialog h3.title {
background-color:#3B5998;
padding:10px 15px;
color:#fff;
font:normal 16px Arial,Sans-Serif;
margin:0px 0px 0px 0px;
position:relative;
}
#kotak-dialog h3.title a {
position:absolute;
top:10px;
right:15px;
color:#00f;
text-decoration:none;
cursor:pointer;
text-indent: -99999px;
background: url(http://static.4shared.com/images/icons/16x16/close.gif)no-repeat;
width: 16px;
}
#kotak-dialog .isi-dialog {
margin:15px;
font:normal 12px Arial,Sans-Serif;
}
#dialog-overlay {
position:fixed !important;
position:absolute;
z-index:999;
top:0px;
right:0px;
bottom:0px;
left:0px;
background-color:#000;
display:none;
}
/* Iframe */
#iframeContainer iframe {
width:100%;
height:300px;
border:none;
background-color:#ccc;
overflow:auto;
}
/* link tanggal post */
a.updated, a.updated:visited {
color: #03F;
}
#tooltip {
position: absolute;
border: 2px solid #CC0303;
background: #333;
padding: 2px 5px;
color: #BED4D8;
display: none;
width: 200px;
text-align: justify;
font: normal 13px/20px Arial, sans-serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 5px 1px #f00;
-webkit-box-shadow: 0 0 5px 1px #f00;
box-shadow: 0 0 5px 1px #f00
}
@-webkit-keyframes sin {
from {
top: -300px;
opacity: 0
}
to {
top: 0px;
opacity: 1
}
}
@-moz-keyframes sin {
from {
top: -300px;
opacity: 0
}
to {
top: 0px;
opacity: 1
}
}
@-ms-keyframes sin {
from {
top: -300px;
opacity: 0
}
to {
top: 0px;
opacity: 1
}
}
@-o-keyframes sin {
from {
top: -300px;
opacity: 0
}
to {
top: 0px;
opacity: 1
}
}
@keyframes sin {
from {
top: -300px;
opacity: 0
}
to {
top: 0px;
opacity: 1
}
}
ul.bunder {
padding: 0;
margin: 0;
background: #e2e2e2;
background: rgba(51, 51, 51, 0.05);
border-bottom: 1px solid #B8B8B8;
position: relative;
-webkit-animation: sin 3s ease-in-out;
-moz-animation: sin 3s ease-in-out
-o-animation: sin 3s ease-in-out
-ms-animation: sin 3s ease-in-out
}
ul.bunder div {
width: 73%;
margin: 0 auto;
overflow: hidden;
padding: 5px;
}
ul.bunder li {
float: left;
position: relative;
margin: 0 3px;
padding: 5px;
list-style-type: none;
-moz-transition: all 800ms;
-o-transition: all 800ms;
-webkit-transition: all 800ms;
transition: all 800ms;
width: 80px;
z-index: 2
}
ul.bunder li::before {
position: absolute;
content: "";
padding: 2px;
background: #E9E9E9;
background: -moz-linear-gradient(left, #1f64ef 0%, #1f64ef 23%, #9dc425 23%, #9dc425 51%, #4b8db5 51%, #4b8db5 77%, #7c48b5 77%, #7c48b5 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1f64ef), color-stop(23%,#1f64ef), color-stop(23%,#9dc425), color-stop(51%,#9dc425), color-stop(51%,#4b8db5), color-stop(77%,#4b8db5), color-stop(77%,#7c48b5), color-stop(100%,#7c48b5));
background: -webkit-linear-gradient(left, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
background: -o-linear-gradient(left, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
background: -ms-linear-gradient(left, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
background: linear-gradient(left, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f64ef', endColorstr='#7c48b5',GradientType=1 );
top: 30%;
width: 70px;
z-index: -1
}
ul.bunder li::after {
position: absolute;
content: "";
padding: 2px;
background: #E9E9E9;
background: -moz-linear-gradient(top, #1f64ef 0%, #1f64ef 23%, #9dc425 23%, #9dc425 51%, #4b8db5 51%, #4b8db5 77%, #7c48b5 77%, #7c48b5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f64ef), color-stop(23%,#1f64ef), color-stop(23%,#9dc425), color-stop(51%,#9dc425), color-stop(51%,#4b8db5), color-stop(77%,#4b8db5), color-stop(77%,#7c48b5), color-stop(100%,#7c48b5));
background: -webkit-linear-gradient(top, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
background: -o-linear-gradient(top, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
background: -ms-linear-gradient(top, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
background: linear-gradient(top, #1f64ef 0%,#1f64ef 23%,#9dc425 23%,#9dc425 51%,#4b8db5 51%,#4b8db5 77%,#7c48b5 77%,#7c48b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f64ef', endColorstr='#7c48b5',GradientType=0 );
top: 30%;
height: 57px;
z-index: -1
}
ul.bunder li:first-child {
margin: 0 3px 0 0
}
ul.bunder li a {
background: #FDFFFF;
padding: 10px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
display: block;
width: 15px;
height: 15px;
color: #0085FF;
text-align: center;
text-decoration: none;
border: 3px #1D7CDB;
border-style: solid dashed;
margin: 0 auto;
-moz-transition: all 400ms;
-o-transition: all 400ms;
-webkit-transition: all 400ms;
transition: all 400ms;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
font: bold 20px/15px Arial, sans-serif
}
ul.bunder li a:hover {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
background: #0D93DF;
color: #DDF;
-moz-box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.56), 0 0 15px 4px #068BF3;
-webkit-box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.56), 0 0 15px 4px #068BF3;
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.56), 0 0 15px 4px #068BF3
}
ul.bunder li span {
display: block;
font: normal 10px/20px Arial, sans-serif;
text-align: center;
text-transform: uppercase;
padding: 3px;
margin: 3px auto 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}
div.info {
font: normal 12px/20px Arial, sans-serif;
background: #EEE;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 5px solid #FFAA67;
width: 150px;
text-align: justify;
position: absolute;
margin: 0;
right: 0%;
z-index: 99999;
top: -10%
}
div.info span.inside {
position: absolute;
border: 15px solid;
border-color: #FFAA67 transparent transparent transparent;
bottom: -35px;
left: 40%
}  

kedua letakan kode dibawah ini diabawah kode <body>

<ul class='bunder'>
<div>
<li><a href='/'>S</a><span>BERANDA</span></li>
<li><a class='open-dialog' href='http://system-svn.googlecode.com/svn/trunk/RGBA%20dan%20HSLA%20Converter.html'>Y</a><span>KODE WARNA</span></li>
<li><a class='open-dialog' href='http://system-svn.googlecode.com/svn/trunk/Parse-html.html'>S</a><span>Parse Html</span></li>
<li><a href='/p/jail.html'>T</a><span>Daftar isi</span></li>
<li><a href='http://www.facebook.com/zhintosayang.eni'>E</a><span>Kontak</span></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=1240201892460257523'>M</a><span>Follow</span></li>
<li><a href='http://rawazine.blogspot.com/'>B</a><span>M-zine</span></li>
<li><a href='/p/nulis-disini.html'>L</a><span>Curhat</span></li>
<li><a id='z'>G</a><span>Langganan</span></li>
</div>
</ul>

ketiga simpan template anda .

Css3 Circle System Menu

 
Bentuk menu Circle System

Yeah Abis berkreasi lagi kali ini aku buat Css3 Circle System Menu, bentuknya ya persis seperti pada gambar screenshot itu dan disini saya menggunakan css3 :not jadi kalau browser anda support css3 maka menu ini akan terlihat sempurna, untuk belajar Css selector :not Silahkan ke W3school. Jadi Gini Saat tidak anda hover / sentuh bagian menunya, Tepatnya area ul maka menunya akan mengecil dan saat anda hover / sentuh menunya akan membesar dan tulisannya akan muncul ke bawah, dari pada penasaran langsung cek tkp.

DEMO

Hemmm Css3 sungguh Ampuh, segala bentuk model bisa di ikuti dengan css dan sudah banyak banget orang yang ciptain karya - karya keren dengan css Huft kapan yah aku bisa membuat yang keren - keren :D, nah kalau udah liat demonya sekarang anda tinggal baca penggunaannya....

1. Mukan kode css di atas ]]></b:skin>

/* Name : Css3 Circle System Menu 
   Author : SYSTEM OF BLOG
   URL : http://sin1aja.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; }
* html .hapus { height: 1%; }
.hapus { display: block; }
ul.system-menu {
    margin: 0 auto 10px;
    padding: 0;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 390px
    }
ul.system-menu li {
    list-style-type: none;
    margin: 0 5px 0 0;
    padding: 0;
    float: left;
    position: relative;
    width: 70px;
    height: 80px;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }
ul.system-menu li a {
    position: absolute;
    margin: -30px 0 0 -43%;
    text-decoration: none;
    font: bold 13px/40px Arial, sans-serif;
    padding: 0;
    background: #21D319;
    color: transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    top: 45%;
    left: 50%;
    outline: none;
    border: 5px inset #F8FBFC;
    -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear
    }
ul.system-menu li a:hover {
    line-height: 130px;
    color: #000;
    border-color: #C5B386;
    background: #FAC800;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
    }
ul.system-menu li span.pembuka {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -29%;
    top: 11px;
    width: 25px;
    height: 30px;
    background: #949596;
    -moz-box-shadow: 3px -3px 0 0 #ECECEC;
    -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
    box-shadow: 3px -3px 0 0 #ECECEC
    }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
    position: absolute;
    background: #F0F0F0;
    padding: 2px;
    width: 15px;
    left: 3px
    }
ul.system-menu li span.satu {
    top: 5px
    }
ul.system-menu li span.dua {
    top: 13px
    }
ul.system-menu li span.tiga {
    top: 22px
    }
.empat, .lima, .enam {
    position: absolute
    }
.empat {
    border: 15px solid;
    border-color: transparent transparent #EEE transparent;
    top: -7px;
    left: 10px
    }
.lima {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 14px
    }
.enam {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 28px
    }
.abot, .abit {
    position: absolute;
    left: 15px
    }
.abot {
    width: 20px;
    height: 20px;
    background: #EEE;
    top: 20%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }
.abit {
    border: 10px solid;
    border-color: transparent transparent #EEE transparent;
    top: 33%
    }
.a, .b, .c, .d {
    position: absolute;
    padding: 5px;
    background: #FFF7F7;
    top: 26%
    }
.a {
    left: 25px;
    background: #39FF13
    }
.b {
    top: 27px;
    left: 13px;
    background: #0070FF
    }
.c {
    left: 25px;
    top: 27px;
    background: #FFE000
    }
.d {
    left: 13px
    }
.e, .f {
    position: absolute
    }
.e {
    width: 15px;
    height: 17px;
    background: rgb(171, 185, 163);
    top: 35%;
    left: 32%;
    border: 2px solid rgb(255, 255, 255)
    }
.f {
    border: 10px solid;
    border-color: transparent transparent rgb(255, 255, 255) transparent;
    top: -2px;
    left: 30%
    }
ul.system-menu:hover li:not(:hover) {
    -moz-transform: rotate(360deg) scale(0.7);
    -ms-transform: rotate(360deg) scale(0.7);
    -o-transform: rotate(360deg) scale(0.7);
    -webkit-transform: rotate(360deg) scale(0.7);
    transform: rotate(360deg) scale(0.7)
    }

2. Masukan kode HTML nya ke Gadget HTML/Javascript

<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#">
<span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>

Jadi didalam menu itu bukan gambar itu icon cuman aku buat pake' css cuman iseng pengen belajar juga sih jadi ya gitu jadinya ckckkc kalau mau lebih keren bikin sendiri aja icon - iconnya :D soalnya aku gak terlalu pintar untuk membuat icon - icon :D tapi aku pengen bisa :) semoga aku bisa ya :), sekian posting kali ini moga bermanfaat.

Css3 Circle System Menu

 
Bentuk menu Circle System

Yeah Abis berkreasi lagi kali ini aku buat Css3 Circle System Menu, bentuknya ya persis seperti pada gambar screenshot itu dan disini saya menggunakan css3 :not jadi kalau browser anda support css3 maka menu ini akan terlihat sempurna, untuk belajar Css selector :not Silahkan ke W3school. Jadi Gini Saat tidak anda hover / sentuh bagian menunya, Tepatnya area ul maka menunya akan mengecil dan saat anda hover / sentuh menunya akan membesar dan tulisannya akan muncul ke bawah, dari pada penasaran langsung cek tkp.

DEMO

Hemmm Css3 sungguh Ampuh, segala bentuk model bisa di ikuti dengan css dan sudah banyak banget orang yang ciptain karya - karya keren dengan css Huft kapan yah aku bisa membuat yang keren - keren :D, nah kalau udah liat demonya sekarang anda tinggal baca penggunaannya....

1. Mukan kode css di atas ]]></b:skin>

/* Name : Css3 Circle System Menu 
   Author : SYSTEM OF BLOG
   URL : http://sin1aja.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; }
* html .hapus { height: 1%; }
.hapus { display: block; }
ul.system-menu {
    margin: 0 auto 10px;
    padding: 0;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 390px
    }
ul.system-menu li {
    list-style-type: none;
    margin: 0 5px 0 0;
    padding: 0;
    float: left;
    position: relative;
    width: 70px;
    height: 80px;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }
ul.system-menu li a {
    position: absolute;
    margin: -30px 0 0 -43%;
    text-decoration: none;
    font: bold 13px/40px Arial, sans-serif;
    padding: 0;
    background: #21D319;
    color: transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    top: 45%;
    left: 50%;
    outline: none;
    border: 5px inset #F8FBFC;
    -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear
    }
ul.system-menu li a:hover {
    line-height: 130px;
    color: #000;
    border-color: #C5B386;
    background: #FAC800;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
    }
ul.system-menu li span.pembuka {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -29%;
    top: 11px;
    width: 25px;
    height: 30px;
    background: #949596;
    -moz-box-shadow: 3px -3px 0 0 #ECECEC;
    -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
    box-shadow: 3px -3px 0 0 #ECECEC
    }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
    position: absolute;
    background: #F0F0F0;
    padding: 2px;
    width: 15px;
    left: 3px
    }
ul.system-menu li span.satu {
    top: 5px
    }
ul.system-menu li span.dua {
    top: 13px
    }
ul.system-menu li span.tiga {
    top: 22px
    }
.empat, .lima, .enam {
    position: absolute
    }
.empat {
    border: 15px solid;
    border-color: transparent transparent #EEE transparent;
    top: -7px;
    left: 10px
    }
.lima {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 14px
    }
.enam {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 28px
    }
.abot, .abit {
    position: absolute;
    left: 15px
    }
.abot {
    width: 20px;
    height: 20px;
    background: #EEE;
    top: 20%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }
.abit {
    border: 10px solid;
    border-color: transparent transparent #EEE transparent;
    top: 33%
    }
.a, .b, .c, .d {
    position: absolute;
    padding: 5px;
    background: #FFF7F7;
    top: 26%
    }
.a {
    left: 25px;
    background: #39FF13
    }
.b {
    top: 27px;
    left: 13px;
    background: #0070FF
    }
.c {
    left: 25px;
    top: 27px;
    background: #FFE000
    }
.d {
    left: 13px
    }
.e, .f {
    position: absolute
    }
.e {
    width: 15px;
    height: 17px;
    background: rgb(171, 185, 163);
    top: 35%;
    left: 32%;
    border: 2px solid rgb(255, 255, 255)
    }
.f {
    border: 10px solid;
    border-color: transparent transparent rgb(255, 255, 255) transparent;
    top: -2px;
    left: 30%
    }
ul.system-menu:hover li:not(:hover) {
    -moz-transform: rotate(360deg) scale(0.7);
    -ms-transform: rotate(360deg) scale(0.7);
    -o-transform: rotate(360deg) scale(0.7);
    -webkit-transform: rotate(360deg) scale(0.7);
    transform: rotate(360deg) scale(0.7)
    }

2. Masukan kode HTML nya ke Gadget HTML/Javascript

<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#">
<span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>

Jadi didalam menu itu bukan gambar itu icon cuman aku buat pake' css cuman iseng pengen belajar juga sih jadi ya gitu jadinya ckckkc kalau mau lebih keren bikin sendiri aja icon - iconnya :D soalnya aku gak terlalu pintar untuk membuat icon - icon :D tapi aku pengen bisa :) semoga aku bisa ya :), sekian posting kali ini moga bermanfaat.

Blur Menu with CSS3 Transitions

Assalamualaikum Wr. Wb
Dikesempatan ini saya akan membahas tentang tips blog lagi yahhh karna udah lama nih gak berbagi tips tentang blog.  Ketika anda membuat blog menu pada blospot biasanya berupa link list vertikal kebawah dan horizontal. Namun anda tidak perlu berkecil  Pada posting ini kita akan belajar cara membuat menu di blogspot. Dengan Blur Menu with CSS3 Transitions Apa itu Blur Menu with CSS3 Transitions adalah menu  pada  saat  kursor menyentuh  makan otomatis  menu yang lainya akan ikut hover sepertihalnya transparant  pada saat mouse menyentuh Menu.

Untuk Cara Membuatnya silahkan Perhatikan Dibawah ini .?
Sebaiknya anda backup terlebih dahulu template anda, supaya jika terjadi error anda bisa melakukan restore kembali template blogspot untuk mengganti template blogspot anda.  ok...
CSS HTML
.bmenu{ padding:0px; margin:0 0 10px 0; position:relative}.bmenu li{ font-size:50px; display:block}.bmenu li a{ display:block; text-transform:uppercase; text-shadow:1px 1px 2px rgba(89,22,20,0.3); color:#581514; padding:5px 20px; margin:2px; background:rgba(255,255,255,0.2); letter-spacing:1px; -webkit-transform:skew(-12deg); -moz-transform:skew(-12deg); -o-transform:skew(-12deg); -ms-transform:skew(-12deg); transform:skew(-12deg); -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out}.bmenu:hover li a{ color:transparent; text-shadow:0px 0px 10px #fff; background:rgba(88,22,22,0.2); -webkit-transform:skew(0deg); -moz-transform:skew(0deg); -o-transform:skew(0deg); -ms-transform:skew(0deg); transform:skew(0deg)}.bmenu li a:hover{ background:transparent; text-shadow:1px 1px 10px rgba(89,22,20,0.6); color:#581514} 
<div class="content">
<ul class="bmenu">
 <li><a href="#">About</a></li>
<li><ahref="#">Illustrations</a></li>
<li><a href="#">Photography</a></li>
 <li><a href="#">Web Design</a></li>
 <li><a href="#">Personal Projects</a></li>
 <li><a href="#">Contact</a></li>
  </ul> </div>

Membuat menu dengan sound system

Membuat menu dengan jquery + suara ini pasti akan membuat beda web / blog kita karena menunya ketika di sorot akan berbunyi, wah pokoknya unik banget lah, saat berselancar di dunia Online dan masuk di blog onwebdev ketemulah artikel JQuery: Flash Menu With Sound


Menu With Sound Effect

Nah sekarang aku bahas dalam bahasa indonesia, hummmmm menu ini sangat - sangat mantap loh gan + unik penasaran gak . . .? kalau penasaran silahkan langsung lihat demonya, jangan lupa sorot atau sentuh menunya ya dan rasakan bedanya dari menu itu.


Ehmmm gimana gan, ada suaranya gak usahakan pake Laptop / PC yang pake Sound biar kedengeran bunyinya hehehe, menu ini juga termasuk Menu Lavalamp karena ada border yang mengikuti di atasnya.

Ok untuk cara menggunakannya cukup mudah sekali

1. Masuk di blog anda
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode </head>
5. Simpan kode di bawah ini di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
(function($) {
$.fn.lavaFlash = function(options) {
var that = this;
var settings = {
container: 'ul',
cursor: '#lava-cursor',
current: '.current',
speed: 800,
sound: $('#sound', that)[0],
volume: 5
};
options = $.extend(settings, options);
return that.each(function() {
options.sound.volume = parseFloat(options.volume / 10);
$(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
$('li', $(options.container)).each(function() {
var $li = $(this);
$li.mouseover(function() {
$(options.cursor).animate({
left: $li.position().left
}, options.speed, function() {
options.sound.play();
});
});
});
});
};
})(jQuery);
$(function() {
$('#navigation').lavaFlash({speed: 500});
});
</script>

6. Lalu scroll sedikit ke atas cari kode ]]></b:skin>
7. Simpan kode di bawah ini di atas kode ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#navigation {
height: 3em;
background: #f0f0f0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
}
#navigation ul {
margin: 0.4em 0 0 0;
padding: 0;
list-style: none;
height: 2.6em;
font: 90% 'Open Sans', sans-serif;
}
#navigation li {
float: left;
width: 6em;
height: 100%;
display: block;
margin-right: 1em;
}
#navigation a {
float: left;
width: 100%;
height: 100%;
color: #333;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {
color: #d34545;
}
#lava {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#lava-cursor {
width: 5.4em;
height: 100%;
background: #d34545;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}

8. Lalu pergi ke Tata letak atau Elemen Laman
9. Klik Tambah Gadget
10. Pilih HTML/Javascript
11. Simpan kode di bawah ini di kolom bagian bawah

<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="">Archives</a></li>
<li><a href="">Contact</a></li>
</ul>
<audio id="sound">
<source src="http://dev.css-zibaldone.com/onwebdev/jquery/jquery-flash-menu-sound/sound.mp3"></source>
<source src="http://dev.css-zibaldone.com/onwebdev/jquery/jquery-flash-menu-sound/sound.ogg"></source>
</audio>
</div>

12. Tempat nya sesuaikan ya ( Agak Lebar ) karena jika di sidebar terlalu kecil usahakan yang besar,
13. Jika ingin menggunakan di bawah header jangan beralih dulu dari Template Cari kode seperti ini Header1 kode lengkapnya seperti ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Nah lihat kode </div> Silahkan Simpan kode HTML nya di bawah kode </div> Nanti Jadinya seperti ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>
<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="">Archives</a></li>
<li><a href="">Contact</a></li>
</ul>
<audio id="sound">
<source src="http://system-svn.googlecode.com/svn/mp3/sound.mp3"></source>
<source src="http://system-svn.googlecode.com/svn/mp3/sound.ogg"></source>
</audio>
</div>

Nah Seperti itulah penempatan kodenya, selamat mencoba, ets hampir lupa untuk mp3 nya ganti sendiri ya. soalx jika orangX menghapus File mp3 nya maka tidak ada deh suaranya.

COFFEZINE template




Apa kabarnya temen2 semoga kabar anda baik semua oh ya sebeleum membahas blog saya mengucapkan selama hari batik seindonesia, nah dikesempatan ini saya akan berbagi sedikit sama template yang sederhana ini,termpate ini saya berinama Coffeezine yang mempunyai beberapa fitur seperti costume Post Reply Post maupun Floating Comentar buat temen-temen yang lagi nyari template silahkan bisa di coba template sederhana ini...?


Coffee Zine

Followers

Diberdayakan oleh Blogger.