cbox
Join This Site
Monster-Shared™Monster-Shared™Monster-Shared™Monster-Shared™Monster-Shared™Monster-Shared™Monster-Shared™Monster-Shared™
Posted by : Rifaldy Saputra Wednesday, March 27, 2013




Kali ini saya akan membahas tentang cara membuat blockqoute efek hover biat lebih keren...wkwkwk
sebagai contoh bisa lihat di gambar di bwah nih. wekxixixixi XD

blockquote efek hover
login dulu ke blogger, terus pergi ke EDIT HTML, terus cari kode blockquote jika tidak ditemukan berarti blog agan belum pernah di modif blockqoutenya....
klo gitu, selanjutnya cari kode ]]></b:skin> kemudian taruh kode berikut di atasnya :
blockquote{margin:20px; padding: 15px 15px 15px 15px; color:#666; border-left:6px solid #c0c0c0; border-top:1px solid #c0c0c0; border-right:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s;} blockquote:hover{transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-color:green; background:#E6FFB1; -moz-box-shadow:0px 1px 5px #000000; -webkit-box-shadow:0px 1px 5px #000000;}

keterangan:

  • blockquote:hover itu maksufnya adalah kodeisi blockquote ketika pinter berada di atasnya
  • margin:20px; jarak dari titik luar.. CMIIW
  • padding: 15px 15px 15px 15px; jarak teks yang ada di dalam blockquote tersebut, jrak atas bawah kiri kanan, sepanjang 15 px
  • border-left:16px solid #c0c0c0; ini adalah garis kiri, dengan ukuran 6px jenis solid warna #c0c0c
  • transition-duration:1s; ini adalah durasi berubahnya..
  • border-radius:6px; ini untuk membuat pojok border tidak lancip
  • border-color:green; ini warna bordernya
  • background:#E6FFB1; ini adalah warna backgroundnya
  • -moz-box-shadow:0px 1px 5px #000000; ini adalah effek bayangan..
  • -moz- dan -webkit- supaya browser mozilla dan browser lain seperti chrome bisa baca tuh kode


NB : kalo mau muncul blockquote'nya harus memasukan ke HTML postingan.
tulisan kamu ..

{ 18 comments... read them below or Comment }

  1. Nice info gan..
    btw berat gak di blog ?
    reply :)

    ReplyDelete
  2. artikel yang bermanfaat terimakasih sob
    #Salam Blogger

    ReplyDelete
  3. cara masukkinnya gimana min ??
    pkek html apaan ?

    ReplyDelete
  4. Nice post Mas Bro

    Salam go blog dari MAHASISWA GO BLOG
    ditunggu followbacknya mas bro

    ReplyDelete

Advertisement

Affiliates

Powered by Blogger.

Banner Exchange

About Me

My Photo
Saya Bukan Yang Terbaik,Tapi Saya Berusaha Menjadi Yang Terbaik

- Copyright © 2013 dark-ichigo -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -