✔ Cara Menciptakan Toolbar Windows Mac Diblogger

Cara Membuat Toolbar Windows MAC Diblogger Button sajian pada toolbar dengan tema windows MAC pure dari CSS3. Patut dicoba diblogger kesayangan kita alasannya tema toolbar MAC ini cukup indah 

itu berdasarkan Kalau anda ingin mencobanya silahkan Lihat Script nya dibawah ini

1. Masuk ke account blogger
2. Untuk menciptakan caranya gampang tinggal pilih Rancangan >> Edit HTML
3. Lalu cari instruksi ]]></b:skin> dan copy pastekan instruksi 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 problem lagi Tinggal Simpan Tempelats
5. Buka Tata Letak kemudian 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 kesannya menyerupai dibawah gambar dibawah ini selamat Berkreasi dan mencobanya sekian.

Bagikan Artikel ini