Blockquote yang membuka otomatis di posting

Blockquote yang membuka otomatis di posting

CSS

Dengan memanfaatkan css transisi dan css pseudo classes kita coba untuk membuat blockuote yang akan terbuka dengan sendirinya ketika pointer di arahkan ke area elemen blockquote tersebut. trik ini sendiri sebenarna lebih cenderung seperti efek hover, dan tidak menggunakan javasript atau pun jQuery di dalam cara kerjanya. jika anda ingin tau coba lihat demo di bawah ini dan arahkan pointer mouse ke bloclquote tersebut:


Dengan trik blockquote ini anda tidak perlu kuatir dengan masalah tidak dapatnya kontent dalam elemen yang tidak dapat di Copy, karena semua kontent di dalam elemen blockquote ini tetap dapat di copy/disalin dengan mudah...


untuk membuatnya, silahkan login ke akun blogger anda, pilih template dan Edit HTML, lalu copy kode css berikut ini dan pastekan diatas tag kode ]]></b:skin> atau di antara </style>:

blockquote.auto-db {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#333;
  border:10px solid #ccc;
  border-left-color:#D7362E;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  transition:all 1s cubic-bezier(1,0,0,1) .5s;
}

blockquote.auto-db:hover {
  padding:10px 15px;
  background-color:#fff;
  border:1px solid #ccc;
  border-left:5px solid #800000;
  height:350px;
}

untuk menggunakannya di dalam posting, silahkah tambahkan class auto-db pada blockquote anda, seperti berikut ini:

<blockquote class="auto-db">
    Tulis isi konten anda di sini...
</blockquote>

Silahkan anda ubah cssnya dengan gaya yang anda inginkan, seperti border/garis, tinggi, lebar, warna latar belakang dan lainnya.

Semoga berguna....

Artikel Terkait

  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…
  • Menghitung ke-spesifik-an Selector
    CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang. Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0…
  • Edit CSS tanpa masuk ke dalam Edit HTML
    Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan ta…
  • Cara Penulisan Kode CSS
    Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri. Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih me…
  • Membuat efek gelembung dengan pure CSS
    Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada. Efek i…
  • Penggunaan Selector CSS
    Anggap saja  kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menja…

6 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...