Menu


Menu Tab

Pages

Dark UI Elements

Memasang kode Dark UI Elements 
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber berikut  :  
Get Blank Template  edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
/*Dark Ui elements */

@import url("http://fonts.googleapis.com/css?family=Lobster");
@import url(http://fonts.googleapis.com/css?family=Lobster);
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot");
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {#);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  padding: 0;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBQiRS9V6581fHrVfGb-ApF9Lt6utiXjcaosk6_BpT7SdE-G46BYCDYiqiQhYRV8zHCjF9aXrkrVMq_EMtwSusCfmy8L0WzeTZy3dhJO8cpSnFgyTU8KaYtMW_ExGA0x3P_nmy_QLJvgR/s1600-r/bg-mys2010.jpg") repeat;
  padding: 10px;
}

a, input[type='radio'] + label {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

fieldset {
  border: 1px solid #2223;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin: 20px 0 0 0;
  min-height: 90px;
  line-height: 90px;
  position: relative;
  float: left;
  margin-right: 20px;
  padding: 20px;
}


input[type='radio'] {
  display: none;
}

/* -------------------
    Default State
-------------------- */
a.glowBtn, input[type='radio'] + label {
  z-index: 10;
  margin: 0 10px 10px 0;
  width: 115.5px;
  height: 37.29px;
  line-height: 36.3px;
  position: relative;
  font-size: 13.2px;
  letter-spacing: .1em;
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(#111111, #000000);
  background-image: -webkit-linear-gradient(#111111, #000000);
  background-image: linear-gradient(#111111, #000000);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
}

a.glowBtn:after, input[type='radio'] + label:after {
  z-index: -1;
  content: '';
  cursor: pointer;
  top: 1.98px;
  margin-left: 50%;
  left: -55px;
  width: 110px;
  height: 33px;
  display: block;
  position: absolute;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #444444), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#444444, #373738);
  background-image: -webkit-linear-gradient(#444444, #373738);
  background-image: linear-gradient(#444444, #373738);
  -moz-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

/* -------------------
    Hover States
-------------------- */
a.glowBtn:hover, a.hover, input[type='radio'] + label:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

a.glowBtn:hover:after, a.hover:after, input[type='radio'] + label:hover:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

/* -------------------
    Active States
-------------------- */
a.glowBtn:active, a.active, a.active:hover, input[type='radio']:checked + label {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  -moz-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
}

a.glowBtn:active, a.active, a.active:hover {
  text-shadow: 0 -1px 0 black, 0 0px 30px cyan, 0 0px 50px cyan;
}

a.glowBtn:active:after, a.active:after, a.active:hover:after, input[type='radio']:checked + label:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJkMmQyZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262627), color-stop(100%, #2d2d2e));
  background-image: -moz-linear-gradient(#262627, #2d2d2e);
  background-image: -webkit-linear-gradient(#262627, #2d2d2e);
  background-image: linear-gradient(#262627, #2d2d2e);
  -moz-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* -------------------
    Radio Specific Style
-------------------- */
input[type='radio'] + label {
  font-family: 'ModernPictogramsNormal', Arial, sans-serif;
  font-size: 36.66667px;
  line-height: 55px;
  letter-spacing: 0;
  width: 55px;
  height: 55px;
}

input[type='radio'] + label:after {
  top: 2.64px;
  left: -25px;
  width: 50px;
  height: 50px;
}

/* -------------------
    SuperBtn
-------------------- */
a.superBtn {
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  letter-spacing: .08em;
  width: 242px;
  height: 39.6px;
  line-height: 39.6px;
  position: relative;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzUzNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQyNDc0OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2e3537), color-stop(100%, #424748));
  background-image: -moz-linear-gradient(#2e3537, #424748);
  background-image: -webkit-linear-gradient(#2e3537, #424748);
  background-image: linear-gradient(#2e3537, #424748);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
}

a.superBtn:after {
  width: 253px;
  height: 49.5px;
  top: -4.95px;
  margin-left: 50%;
  left: -126.5px;
  content: '';
  display: block;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhZjFmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE3YjJlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2af1fc), color-stop(100%, #17b2e6));
  background-image: -moz-linear-gradient(#2af1fc, #17b2e6);
  background-image: -webkit-linear-gradient(#2af1fc, #17b2e6);
  background-image: linear-gradient(#2af1fc, #17b2e6);
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: -1;
}

/* -------------------
    SuperBtn Hover
-------------------- */
a.superBtn:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

a.superBtn:hover:after {
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
}

a.superBtn:active {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  background: #333;
  -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* HIDE */
body {#);color:red;height:100%;overflow:hidden;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #dad;
}


/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 11px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}
/* GRADIEND END */
<fieldset>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010"><span style="color: red; font-size: 10pt;">M-2010
</span></a><span style="color: red; font-size: 10pt;"><a class="glowBtn" href="http://Link Title/" target="_blank" title="M-Hover"><span style="color: red; font-size: 10pt;">M-HOVER</span></a>
<a class="glowBtn active" href="http://Link Demoshow " title="Dark UI Elements"><span style="color: magenta; font-size: 10pt;">SLIDE AUTO
</span></a><span style="color: magenta; font-size: 10pt;"><a class="glowBtn active" href="http://Link Download" title="Download Slide  "><span style="color: magenta; font-size: 10pt;">DOWNLOAD  </span></a>
<a class="glowBtn active" href="http://Link Demoshow" title="Slider UI Elements">SLIDE AUTO
</a><a class="glowBtn active" href="http://Link Download" title="Download Slide 2">DOWNLOAD</a>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010">GITHUB
</a><a class="glowBtn" href="http://Link Title" target="_blank" title="M-Hover">CODEPEN</a>
</span></span></fieldset>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://Link Title" target="_blank" title="Animated Cube">
Your Title </a>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: green; font-family: Agency FB; font-size: x-small;"> <a href="http://Link Title" target="_blank" title="Dark UI Elements">Your Title </a>
</span></div>
</div>
</header></div>
</div>
Penjelasan : Edit Code yang diberi warna
Edited by. Mys2010 on Codepen
Sources by. Pfalzgraf Gyula on Codepen
DEMOSHOW Cube Slider

DEMOSHOW Dark UI Elements
Labels:

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi