Cara Membuat Toolbar Windows MAC Diblogger Button menu pada toolbar dengan tema windows MAC pure dari CSS3. Patut dicoba diblogger kesayangan kita karena tema toolbar MAC ini cukup indah
1. Masuk ke account blogger
2. Untuk membuat caranya mudah tinggal pilih Rancangan >> Edit HTML
3. Lalu cari kode ]]></b:skin> dan copy pastekan kode CSS dibawah ini diataskode ]]></b:skin>
2. Untuk membuat caranya mudah tinggal pilih Rancangan >> Edit HTML
3. Lalu cari kode ]]></b:skin> dan copy pastekan kode CSS dibawah ini diataskode ]]></b:skin>
.toolbar {
overflow:hidden;
background:#CFCFCF;
background-color:#cfcfcf;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#cfcfcf),to(#a8a8a8));
background-image:-webkit-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-moz-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-ms-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-o-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:linear-gradient(top,#cfcfcf,#a8a8a8);
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
position:relative;
overflow:hidden;
font:14px/26px 'lucinda grande',Helvetica,Arial;
text-align:center;
padding:1px 0 0 68px;
height:26px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.toolbar,
.toolbar* {
color:#111;
text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.nav {
position:absolute;
top:6px;
left:12px;
}
.nav a {
position:relative;
overflow:hidden;
display:block;
float:left;
width:14px;
margin-right:7px;
font:bold 14px/14px 'Helvetica','Arial';
text-align:center;
color:#FFF;
-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
.nav a.close {
background-color:#f12519;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#f12519),to(#ff8684));
background-image:-webkit-linear-gradient(top,#f12519,#ff8684);
background-image:-moz-linear-gradient(top,#f12519,#ff8684);
background-image:-ms-linear-gradient(top,#f12519,#ff8684);
background-image:-o-linear-gradient(top,#f12519,#ff8684);
background-image:linear-gradient(top,#f12519,#ff8684);
color:#630f0a;
}
.nav a.minimize {
background-color:#e59130;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e59130),to(#ffdf4b));
background-image:-webkit-linear-gradient(top,#e59130,#ffdf4b);
background-image:-moz-linear-gradient(top,#e59130,#ffdf4b);
background-image:-ms-linear-gradient(top,#e59130,#ffdf4b);
background-image:-o-linear-gradient(top,#e59130,#ffdf4b);
background-image:linear-gradient(top,#e59130,#ffdf4b);
color:#742a08;
}
.nav a.expand {
background-color:#a1e268;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#a1e268),to(#a1e268));
background-image:-webkit-linear-gradient(top,#a1e268,#a1e268);
background-image:-moz-linear-gradient(top,#a1e268,#a1e268);
background-image:-ms-linear-gradient(top,#a1e268,#a1e268);
background-image:-o-linear-gradient(top,#a1e268,#a1e268);
background-image:linear-gradient(top,#a1e268,#a1e268);
color:#093b00;
}
.nav a:before {
content:'';
width:6px;
height:3px;
background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
position:absolute;
left:50%;
top:1px;
margin-left:-3px;
}
.nav a:after {
content:'';
line-height:2px;
width:12px;
height:12px;
position:absolute;
left:50%;
margin-left:-6px;
bottom:-4px;
opacity:0.55;
background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
}
.nav a.close:after {
font:bold 11px/0 Verdana;
}
.nav:hover a.close:after {
content:'x';
}
.nav:hover a.minimize:after {
content:'-';
}
.nav:hover a.expand:after {
content:'+';
}
a.close:active {
background:#c84840;
}
a.minimize:active {
background:#bb7e39;
}
a.expand:active {
background:#5b9d2a;
}
overflow:hidden;
background:#CFCFCF;
background-color:#cfcfcf;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#cfcfcf),to(#a8a8a8));
background-image:-webkit-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-moz-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-ms-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-o-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:linear-gradient(top,#cfcfcf,#a8a8a8);
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
position:relative;
overflow:hidden;
font:14px/26px 'lucinda grande',Helvetica,Arial;
text-align:center;
padding:1px 0 0 68px;
height:26px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.toolbar,
.toolbar* {
color:#111;
text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.nav {
position:absolute;
top:6px;
left:12px;
}
.nav a {
position:relative;
overflow:hidden;
display:block;
float:left;
width:14px;
margin-right:7px;
font:bold 14px/14px 'Helvetica','Arial';
text-align:center;
color:#FFF;
-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
.nav a.close {
background-color:#f12519;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#f12519),to(#ff8684));
background-image:-webkit-linear-gradient(top,#f12519,#ff8684);
background-image:-moz-linear-gradient(top,#f12519,#ff8684);
background-image:-ms-linear-gradient(top,#f12519,#ff8684);
background-image:-o-linear-gradient(top,#f12519,#ff8684);
background-image:linear-gradient(top,#f12519,#ff8684);
color:#630f0a;
}
.nav a.minimize {
background-color:#e59130;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e59130),to(#ffdf4b));
background-image:-webkit-linear-gradient(top,#e59130,#ffdf4b);
background-image:-moz-linear-gradient(top,#e59130,#ffdf4b);
background-image:-ms-linear-gradient(top,#e59130,#ffdf4b);
background-image:-o-linear-gradient(top,#e59130,#ffdf4b);
background-image:linear-gradient(top,#e59130,#ffdf4b);
color:#742a08;
}
.nav a.expand {
background-color:#a1e268;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#a1e268),to(#a1e268));
background-image:-webkit-linear-gradient(top,#a1e268,#a1e268);
background-image:-moz-linear-gradient(top,#a1e268,#a1e268);
background-image:-ms-linear-gradient(top,#a1e268,#a1e268);
background-image:-o-linear-gradient(top,#a1e268,#a1e268);
background-image:linear-gradient(top,#a1e268,#a1e268);
color:#093b00;
}
.nav a:before {
content:'';
width:6px;
height:3px;
background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
position:absolute;
left:50%;
top:1px;
margin-left:-3px;
}
.nav a:after {
content:'';
line-height:2px;
width:12px;
height:12px;
position:absolute;
left:50%;
margin-left:-6px;
bottom:-4px;
opacity:0.55;
background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
}
.nav a.close:after {
font:bold 11px/0 Verdana;
}
.nav:hover a.close:after {
content:'x';
}
.nav:hover a.minimize:after {
content:'-';
}
.nav:hover a.expand:after {
content:'+';
}
a.close:active {
background:#c84840;
}
a.minimize:active {
background:#bb7e39;
}
a.expand:active {
background:#5b9d2a;
}
4. Lalu Klik Pratinjau Kalau sudah tidak ada masalah lagi Tinggal Simpan Tempelats
5. Buka Tata Letak lalu Tambah Gadget Pilih HTML JAVAScript dan masukan Scrip dibawah ini
<div class="toolbar">
<div class="nav">
<a class="close" href="#"> </a>
<a class="minimize" href="#"> </a>
<a class="expand" href="#"> </a>
</div>
Mac Toolbar in Pure CSS
</div>
6. Lalu Simpan HTML Java Script nya . Kurang lebihnya hasilnya seperti dibawah gambar dibawah ini selamat Berkreasi dan mencobanya sekian.<div class="nav">
<a class="close" href="#"> </a>
<a class="minimize" href="#"> </a>
<a class="expand" href="#"> </a>
</div>
Mac Toolbar in Pure CSS
</div>
Komentar
Posting Komentar