Box Tulisan Versi Google Chrome

Box Tulisan Versi Google Chrome - Saya membuat Box Tulisan Versi Google Chrome kali ini saya persembahkan karena kecintaan saya kepada browser GOOGLE CHROME, yang selalu setia menemani hari-hari saya bercanda ria bersama sahabat semua dalam berbagi pengetahuan seputar tutorial blog melalui media blog tercinta SAHABAT BLOGGER 77. Bukan bermaksud membeda-bedakan chrome dengan browser yang lain, tetapi karena sejak berdirinya blog ini, Devy selalu menggunakan browser ini untuk berbagi, bercerita dan berkenalan dengan sahabat blogger semua, dan sampai saat ini masih setia memakainya. Tetapi devy bukan promosi loh.!, karena semua browser itu semua sama bagusnya.

Seperti Cara Membuat Tabel Box Untuk Menyimpan Tulisan dibeberapa artikel sebelumnya, tampilan box kali ini, saya mendesain tampilannya semirip mungkin dengan versi theme Google Chrome seperti tombol minimize, maximize dan close yang berada disisi kanan browser google chrome, dan hasilnya:





DEMO SHOW

Mau Bermain Game - Game Test Kecerdasan Ala SAHABAT BLOGGER 77


Bagaimana, sudah menyiapkan tulisan apa yang akan Anda tampilkan dalam box tulisan versi google chrome seperti ini.?. Cukup COPY CSS berikut, lalu letakkan pada formulir kosong saat Anda akan membuat posting baru pada mode HTML dengan kode seperti ini:

<style>
.chrome-window {
  background:#6495ED;margin:0 auto 0 7.5%;
  width:85%;border:1px solid;
  border-color:#595959 #444 #444 #494949;
  border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font:normal normal 12px Verdana,Sans-Serif;
  color:#222;position:absolute;z-index:999;}

.chrome-window h1 {
  font:inherit;font-weight:bold;
  color:#111;margin:0 0;padding:7px 0 7px 12px;}

.window-header {
  margin:0 3px;padding:0;
  border-bottom:2px solid #080;background:#fff;
  position:relative;height:25px;}

.window-header:before {
  content:"";display:block;
  width:15px;height:15px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGIUt8RwiJNs2kvp9-F2TO9SSQmkc9NWM2SR3JhHA45enGaIpaonJLJnunGVLv_uhZ8ZR8FYJMuK2C32weraq-G_hf-s_T1xkI7SButoAf-EDnc1wcPaVjLUnupPNoqssNzdtvZ9-3w60/s20/chrome-logo.jpg) repeat center center;
  position:absolute;top:6px;left:10px;}

.window-header input {
  width:100%;height:25px;display:block;
  margin:0 auto;padding:4px 4px 5px 32px;
  font:inherit;color:inherit;outline:none;
  box-sizing:border-box;box-shadow:inset 0 2px 0 0 rgba(153,153,153,.1);}

.window-inner {
  border:1px solid #111;
  border-top:none;margin:0 2px 2px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv4eEAugoPyYk1hnuYxfnAcsAwz3DzJf3KSpbb0VV_iAoePxuHyNRydT0JwaKaWcaOJ-wOZdU8_0nzgZloANH4FO-DUkTOMBvmvFlXvpZQ9IYcW8t-mph3Jirn0S6KBAYpM-kBjvrY4o4/s1600/chrome-google.png) repeat center center;
  padding:8px;word-wrap:break-word;
  overflow:auto;height:310px;cursor:text;color:#FFF8DC;}

.right-buttons {
  position:absolute;top:-1px;right:4px;
  font:0/0 a;text-shadow:none;}

.right-buttons a {
  display:block;float:left;
  margin:0 0 0 -1px;width:26px;
  height:18px;border:1px solid #345181;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  position:relative;cursor:default;
  transition:all .2s ease-out;}

.right-buttons a:after {content:"";display:block;position:absolute;}
.right-buttons .minimize-btn {border-radius:0 0 0 3px;}
.right-buttons .minimize-btn:after {
  right:7px;bottom:4px;left:7px;height:3px;
  background-color:#BCCFEF;
  border:1px solid #233656;border-radius:2px;}

.right-buttons .maximize-btn:after {
  top:4px;right:8px;bottom:4px;left:8px;
  border:2px solid #BCCFEF;
  box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  border-radius:1px;}

.right-buttons .close-btn {border-radius:0 0 3px 0;}
.right-buttons .close-btn {width:42px;background:#e06666}
.right-buttons .close-btn:after {
  font:normal normal 15px/15px Verdana,Arial,Sans-Serif;
  text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;
  top:0;content:"x";color:#fff;
  right:0;bottom:0;left:0;text-align:center;}

.right-buttons a:hover {
  background-color:#8BAEE4;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);}

.right-buttons a.close-btn:hover {background-color:#DA4D4B;}
.right-buttons .minimize-btn:hover:after {background-color:white}
.right-buttons .maximize-btn:hover:after {border-color:white}
.right-buttons .close-btn:hover:after {color:white}
</style>

Perhatikan kode yang sudah saya beri warna MERAH, saya tidak mengaktifkan link pada masing-masing tombol, Anda bisa mengubahnya jika ingin menaruh link halaman blog Anda disana. Sedangkan untuk menempatkan teks tulisan, cukup ganti tulisan yang berwarna Orange pada HTML berikut:

<div class="chrome-window">
<h1>Window Title</h1>
     <div class="right-buttons">
         <a title="Minimize" class="minimize-btn" href="#minimize">Minimize</a>
         <a title="Maximize" class="maximize-btn" href="#maximize">Maximize</a>
         <a title="Close" class="close-btn" href="#close">Close</a>
     </div>
<div class="window-header">
<input type="text" onfocus="this.select();" spellcheck="false" value="google chrome - http://sahabatblogger77.blogspot.com/">
</div>
   <div class="window-inner">
          Tulis Sesuatu Disini...
   </div>
</div>

Karena cinta hujan tidak menjadi kendala, karena cinta materi tidak menjadi masalah, dan karena cinta pula saya membuat Box Tulisan Versi Google Chrome untuk menyimpan pesan informasi penting untuk ditampilkan di blog.