✔ 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
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>
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;
}
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="#"> </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 kesannya menyerupai 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>
Belum ada Komentar untuk "✔ Cara Menciptakan Toolbar Windows Mac Diblogger"
Posting Komentar