Social Items

    •
Tampilkan postingan dengan label bootstrap. Tampilkan semua postingan
Tampilkan postingan dengan label bootstrap. Tampilkan semua postingan
tampilan tooltip dengan CSS baru

 Tooltip Bootstrap merupakan kotak pop-up kecil yang muncul ketika pengguna menggerakkan penunjuk mouse ke suatu elemen contohnya : button yang berisikan data-toggle tooltip. Untuk mengubah tooltip yang secara default akan muncul dalam background hitam, kamu perlu mengubahnya dengan membuat style CSS untuk bagian tooltip yang ingin kamu ubah.

Berikut adalah CSS tooltip yang bisa kamu ubah sesuai keinginan.

<style>
  /* Tooltip */
  .test + .tooltip > .tooltip-inner {
      background-color: #73AD21; 
      color: #FFFFFF; 
      border: 1px solid green; 
      padding: 15px;
      font-size: 20px;
  }
  /* Tooltip on top */
  .test + .tooltip.top > .tooltip-arrow {
      border-top: 5px solid green;
  }
  /* Tooltip on bottom */
  .test + .tooltip.bottom > .tooltip-arrow {
      border-bottom: 5px solid blue;
  }
  /* Tooltip on left */
  .test + .tooltip.left > .tooltip-arrow {
      border-left: 5px solid red;
  }
  /* Tooltip on right */
  .test + .tooltip.right > .tooltip-arrow {
      border-right: 5px solid black;
  }
  </style>

 /* sumber : www.w3school.com */


Untuk demonya silahkan mengakses link demo di bawah ini.


Cara mengubah Tooltip Boostrap menggunakan CSS


 Imagezoom adalah plugin javascript yang bisa digunakan untuk melihat sebuah gambar dalam website dengan mode zoom. Saya akan membagikan source dari contoh website imagezoom. Mari baca dulu tutorialnya agar kamu dapat membuatnya dengan website yang sedang kamu kerjakan.

Bahan - bahannya :

Tutorialnya :

  1. Buat template sesuai keinginan anda. Pastikan terdapat gambar!
  2. Tempatkan link javascript di bagian header dan jquerynya. Contoh :
      3. <head>
          <script src="jquery.min.js"></script>
          <script src="imagezoom.js"></script>
        </head>
  3. Isikan pada bagian yang terdapat tag <img> nya code data-imagezoom="true" berikut :
    4. <img src="sampleimage/1.jpg" data-imagezoom="true">


Download source code:

Source code : Membuat image zoom Toko Online

 Pembuatan web membutuhkan struktur desain awal yang baik sehingga pengguna atau client bisa menggunakan web tersebut dengan baik dan nyaman. Oleh karena itu CSS adalah komponen penting untuk mempercantik web atau blog kita. Sekarang ini banyak CSS yang dirangkum dalam sebuah framework yang tentunya memudahkan developer web untuk mempercantik webnya dengan praktis. Bootstrap merupakan salah satu framework CSS yang banyak digunakan oleh pengiat pembuatan website seperti saya yang sering menggunakan Bootstrap dari www.twitter.com ini. Tentunya untuk menggunakannya saya harus membuat link eksternal untuk menghubungkan index website saya dengan link css Bootstrap yang ada melalui getbootstrap.com. Bagi yang tidak perlu ingin repot untuk membuat website dengan Bootstrap melalui aplikasi text editor yang harus juga menghubungkan kembali ke komponen Bootstrap secara manual. Bootstrap kini bisa kita gunakan dalam bentuk aplikasi dekstop yang sangat praktis untuk digunakan meski minim ilmu mengenai dunia web.


 Aplikasi ini bernama Bootstrap Studio yang memungkinkan kita menggunakan framework bootstrap dengan aplikasi desktop drap and drop saja. Kalau mau tahu penggunaannya silahkan langsung ke situs developernya bootstrapstudio.io. Dan kamu juga bisa menggunakan demo aplikasinya langsung dari website resmi tersebut. Berikut ini saya telah mencoba demonya :

Berupa screenshot :





Untuk mendapatkan aplikasinya kamu bisa langsung beli di website resminya bootstrapstudio.io. Kamu juga bisa mendapatkannya untuk versi 2 yang bisa kamu download di SINI.







- Terima Kasih -

Lebih cepat penggunaan Bootstrap dengan Aplikasi Bootstrap Studio 2

Langganan: Postingan (Atom)