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

  • Compress Template Blogger
    Siapa blogger yang tidak ingin blog dan halaman blognya ringan ketika di muat, semua blogger menginginkan blognya memiliki waktu load sesingkat dan seringan mungkin karena itulah banyak cara di lakukan oleh semua pemilik blog untuk mengakalinya termasuk mengompres templatenya. berikut ini adalah salah satu cara mengakali blog yang terbilang be…
  • Cara membuat efek page fold dengan css
    Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah ini, yaitu hasil efek dari menggunakan pseudo-elemen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligu…
  • CSS untuk widget Popular Post blogger/blogspot
    Dalam posting ini saya sajikan tujuh gaya untuk posting populer widget di blogger. Pertama, Anda perlu menambahkan widget populer posting di blog. Untuk itu, Pergi ke Tata Letak> Tambah Gedget, lalu pilih populer Post widget. Kemudian hapus centang thumbnail/gambar dan tampilkan cuplikan. Jika Anda sudah memiliki posting widget populer hany…
  • Trik mendesain friendly template
    Blogger telah menyediakan tool yang baik untuk menyesuaikan template yang disebut Template Designer Blogger. Menggunakan Blogger Template Designer Anda dapat mengubah gaya font, warna, lebar template, dan latar belakang template. Blogger Template Designer menyediakan cara mudah mengubah template dengan Anda masuk ke dalam Blogger Template Desi…
  • 4 Style CSS widget Label Blogger
    Berikut ini beberapa modifikasi label default blogger. Anda hanya mendownload kode CSS yang diberikan berikut dan terapkan pada editing template Anda sebelum ]]></b:skin> atau </style> 1. Label Blog Style One .label-size { float:left; margin:0 0 7px 20px; position:relative; font-family:'Helvetica Neue',Helvetica,A…
  • CSS widget popular post Blogger
    Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik. Silakan masuk pada akun blogger Anda Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja. langkah di atas d…

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