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




Text Box Google Chrome image



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(http://2.bp.blogspot.com/-QOoaZBh8wgA/U4DrZuG_iTI/AAAAAAAAAZU/mxIEzF9gl44/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(http://4.bp.blogspot.com/-KoIYuaVE5nc/VJ2iQcIxcvI/AAAAAAAABGo/jabW7mxiAQ8/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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Box Tulisan Versi Google Chrome
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

45 komentar

  1. sama dgn aslinya gambarnya ya Vy..!, padahal ini dri padua kode2 sj ya..!

    kalau sy sepintr devy nih buat kode2an..
    sy rencana mau buat tampilan halamn depan google chrome
    ada area pencarian dan di bawahnya ad artikel grid terbaru

    kayak ituh Vy.. kalo buka tab baru untuk pencarian.. blom ada yg buat inih..

    BalasHapus
    Balasan
    1. bisa saja mas, tetapi kalau ingin membuat seperti itu jatuhnya sudah seperti template komplit,

      kalau ini hanya sebuah tampilan box saja untuk menyimpan tulisan singkat didalamnya. sedangkan halam pencarian, saya hanya mengaktifkan fungsinya saja tanpa js.
      jadi teks google chrome - http://sahabatblogger77.blogspot.com/ bisa diganti dengan teks yang mas al inginkan, hapus saja teks itu lalu ketikkan sesuatu disana, namun tidak mengarah pada sesuatu link apapun

      Hapus
    2. ooo.. semua dikaitkan satu sama lain ya Vy..
      pernah inspect halamn aal innih terliat gampang di mata hhehehe..

      jadi kapan nih dirilis template s77 nya..

      Hapus
    3. sudah terbengkalai mas Al, akhir-khir ini saja devy sudah diserang penyakit males ngapdate artikel. pulang kuliah sudah capek, belum lagi harus menyiapkan inilah itulah buat bahan kuliah esoknya, ditambah menata kode-kode mau membuat template. hmmm..bisa-bisa kepala devy bagaian tengah botak neh, hehe..

      insyaAllah kalau devy sudah nyantai mau fokus jual template saja. dan bisa jadi blog ini akan devy gadai-in.

      Hapus
    4. cup cup cup
      kenapa nangis coba?

      Hapus
    5. (h) jangan nangsis sini kakak (k)

      Hapus
  2. Saya dulu sempat jatuh cinta sama chrome, tapi entah kenapa sekarang malah selingkuh ke mozilla. :-d

    BalasHapus
    Balasan
    1. terus si chrome sudah menjadi mantan atau masih sayang mas sama dia. hehe..!!

      Hapus
    2. klo sy nih ya Mas Ridha masih sayang dgn si chrome..!

      Hapus
    3. sama mas, Devy juga masih sayang sama mas Al, ehhh...sorry..!! sama Chrome maksudnya, hehe..

      penggunaan element template js pada chrome lebih mudah membaca, ditambah lagi dengan mudah menghapus situs-situs yang sudah dikunjungi bila tersimpan pada chace browser. (ekstensi)

      Hapus
    4. mas ridha jahat , chrome diselingkuhin :-(

      Hapus
  3. bagus hasilnya mbak, dan menarik. pake onclick Event lebih menarik kayaknya ya mbak? ok saya ijin pelajari dulu ya. terima kasih tuorial box tulisan versi google chrome.

    BalasHapus
    Balasan
    1. tinggal menambahkan script ini saja kok mbah kalau ingin onclick pada tulisannya.

      <textarea rows="..." cols="..." onclick="javascript:this.focus();this.select();" readonly="readonly">
      ....
      Teks Tulisan
      ....
      </textarea>

      Hapus
  4. Keren banget neng, modifikasinya, salut saya, datang ya ke blog ada sertifikat buat mbak. ^.^

    BalasHapus
    Balasan
    1. Ntr sy dtangin mas ....hehehe

      Hapus
  5. Ini ide munculnya dri mana coba ... kok bisa apik2 smua ... hehehe

    BalasHapus
    Balasan
    1. hhehe .... bner2 cerdas deh devy:) ... upz ini bukan pujian semta buat devy loh ,,, :)

      Hapus
  6. kreatifnya mbak Dev ini, mau tanya mbak, klo text box na diisi gambar bisa ga mbak??

    BalasHapus
    Balasan
    1. <div class="window-inner">
      ......
      Tulis Sesuatu Disini...
      </div>


      ganti tulisan dengan URL-Gambar

      Hapus
    2. wokeh, bungkus bawa pulang. makasih mbak Dev, dicoba dulu

      Hapus
    3. main pulang aja.
      bayar dulu mas buret sama mbak devy :d

      Hapus
  7. Sangat kreatif mbak devy. untuk google chrome nya mbak jangan terlalu cinta juga, masih ada yang perlu di cintai mbak devy. kadang browser chrome juga sering crash mbak. hehe. Salam kenal mbak ini komentar pertama saya di blog mbak devy.

    BalasHapus
  8. wah bener2 mirif banget demo dengan chrome mbak,ternyata cuman permainan css toh
    penasaran juga mau mencoba

    BalasHapus
  9. ternyata harapanku pupus sudah karena cinta mbak devy hanya buat chrome (c)

    BalasHapus
    Balasan
    1. tetapi kan janur kuning belum melengkung mas, si chrome juga belum membalas ungkapan rasa cinta Devy kok, hehe..!!

      Hapus
  10. udah kelas master kayaknya nih..

    BalasHapus
    Balasan
    1. wadduh..emang bermain blog juga ada kelas-kelasnya ya mas, kelas master atau kelas bantam, kayak tinju saja, hehe..
      tetapi terimakasih ya sudah mampir ke blog SAHABAT BLOGGER 77 ini, yang selalu buat kang jum pusing katanya kalau menghafal kode-kodean, hehe..

      Hapus
    2. kogk namaku disebut-sebut sich mbak.... ;((

      Hapus
    3. ya udah jangan nangis, ntar devy hapus deh nama kang jum dari daftar pencarian, hehe..

      Hapus
    4. saya mau tuch jadi partner tinju mbak devy :d

      Hapus
    5. waduchhh...
      sadis amatd, amatd saja ga sadis :d

      Hapus
  11. teks boxnya benar2 keren :))

    BalasHapus
  12. mantabp lho sist.,,,tapi saya belum bisa meng optimalkal chrome,..tolong ajari saya sist

    BalasHapus
  13. udah cantik penter coding lagi... (h)

    BalasHapus
    Balasan
    1. siapa hayoo.
      yang bisa jawab ntar dapet hadiah.
      hadiahnya jalan-jalan sama kang saud :d

      Hapus
  14. Chorme memang saya akui mbak sebagai browser terbaik saat ini, banyak sistem flash yang mendukung serta plugin yang mempinyai versi tinggi, namun saat ini saya tidak menggunakannya karena Laptop saya cepat panas jika menggunakan Chorme :D

    BalasHapus
  15. Saya juga pake Google Chrome mbak, masalah kode meng kode saya nggak begitu paham..

    BalasHapus
  16. Beneran mirip google chrome mbak..
    Izin coba ya :)

    BalasHapus
  17. Ahhh jadi keren keren gimna gitu yaaa

    BalasHapus
  18. Boxnya kebesaran mbak... gmna donk cara merubah ukurannya...??

    BalasHapus
    Balasan
    1. kan tinggal dikecilkan mas, hehe..
      perhatikan kode ini:

      .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;}


      disana ada kode width:85%;. tinggal disesuaikan lebarnya sesuai keinginan,

      Hapus
    2. makasih mba' cantik :d

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK