Posted by Aak
Aak-share.com Updated at: 8:21:00 PM

Membuat Halaman Window Sederhana di Blog

No comments:

Membuat Halaman Windows Sederhana di Blog ~ Hallo sobat... tentunya sobat sering menggunakan aplikasi pengolah kata yaitu Microsoft Word. pada bagian halaman pojok atas terdapat icon close , minix dan maxi.


Halaman Windows Sederhana ini memiliki tampilan mirip dengan aplikasi pengolah kata, namun pada halaman windows ini tidak memiliki fitur seperti aplikasi tersebut karena ini merupakan tampilannya saja yang dibuat menyerupai. Berikut ini caranya :

Silahkan Sobat cari kode ]]></b:skin> dan salin kode dibawah ini terapkan diatasnya atau sebelumnya :

/* window BEGIN */
a {
  text-decoration: none;
}

span {
  line-height: 9px;
  vertical-align: 50%;
}

.window {
  background: #fff;
  width: 50vw;
  height: 75vh;
  margin: auto;
  margin-top: 12.5vh;
  border: 1px solid #acacac;
  border-radius: 6px;
  box-shadow: 0px 0px 20px #acacac;
}

.titlebar {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ebebeb, color-stop(1, #d5d5d5)));
  background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
  background: -moz-linear-gradient(top, #ebebeb, #d5d5d5);
  background: -ms-linear-gradient(top, #ebebeb, #d5d5d5);
  background: -o-linear-gradient(top, #ebebeb, #d5d5d5);
  background: linear-gradient(top, #ebebeb, #d5d5d5);
  color: #4d494d;
  font-size: 11pt;
  line-height: 20px;
  text-align: center;
  width: 100%;
  height: 20px;
  border-top: 1px solid #f3f1f3;
  border-bottom: 1px solid #b1aeb1;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  cursor: default;
}

.buttons {
  padding-left: 8px;
  padding-top: 3px;
  float: left;
  line-height: 0px;
}

.buttons:hover a {
  visibility: visible;
}

.close {
  background: #ff5c5c;
  font-size: 9pt;
  width: 11px;
  height: 11px;
  border: 1px solid #e33e41;
  border-radius: 50%;
  display: inline-block;
}

.close:active {
  background: #c14645;
  border: 1px solid #b03537;
}

.close:active .closebutton {
  color: #4e0002;
}

.closebutton {
  color: #820005;
  visibility: hidden;
  cursor: default;
}

.minimize {
  background: #ffbd4c;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 4px;
  width: 11px;
  height: 11px;
  border: 1px solid #e09e3e;
  border-radius: 50%;
  display: inline-block;
}

.minimize:active {
  background: #c08e38;
  border: 1px solid #af7c33;
}

.minimize:active .minimizebutton {
  color: #5a2607;
}

.minimizebutton {
  color: #9a5518;
  visibility: hidden;
  cursor: default;
}

.zoom {
  background: #00ca56;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 6px;
  width: 11px;
  height: 11px;
  border: 1px solid #14ae46;
  border-radius: 50%;
  display: inline-block;
}

.zoom:active {
  background: #029740;
  border: 1px solid #128435;
}

.zoom:active .zoombutton {
  color: #003107;
}

.zoombutton {
  color: #006519;
  visibility: hidden;
  cursor: default;
}

.content {
  padding: 10px;
}

/* window END */

Selanjutnya Anda buka entri baru, salin kode dibawah ini dan terapkan pada Mode HTML

<div class="window">
  <div class="titlebar">
    <div class="buttons">
      <div class="close">
        <a class="closebutton" href="#"><span><strong>x</strong></span></a>
        <!-- close button link -->
      </div>
      <div class="minimize">
        <a class="minimizebutton" href="#"><span><strong>–</strong></span></a>
        <!-- minimize button link -->
      </div>
      <div class="zoom">
        <a class="zoombutton" href="#"><span><strong>+</strong></span></a>
        <!-- zoom button link -->
      </div>
    </div>
    CSS ~ Simple Page Window /*title pada simple window page*/
    <!-- window title -->
  </div>
  <div class="content">
    <h3>Hey! What's up?</h3>
I'm a simple page style window. This page is created with CSS properties . In simple page this window, you can modify it to make it look attractive commensal . You can add other properties for simple page window is partially base . Thank You
    <!-- window content -->
  </div>
</div>

Semoga bermanfaat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments