Cara Membuat Toolbar Windows MAC Diblogger

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 

itu menurut SIMPANGblogger Kalau anda ingin mencobanya silahkan Lihat Script nya dibawah ini

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>

.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;
}

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="#">&nbsp;</a>
<a class="minimize" href="#">&nbsp;</a>
<a class="expand" href="#">&nbsp;</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.