Cara Membuat Blockquote Keren

Hallo Semua, Setelah saya lama tidak post kira-kira 1 tahun kali ini saya akan memberikan tutorial cara membuat blockquote keren v.1 dipostingan, yang pastinya lebih keren dan agar pengunjung menjadi betah diblog sobat, selain keren blockquote ini memiliki efek hover dan perubahan warna saat mouse menyentuh blockquotenya. cara membuatnya tidak susah dan gampang untuk ditiru.


Untuk melihat demonya nih saya ksih:

Contohnya Seperti ini:

LIVE  DEMO

Gimana?? Berminat dan tertarik?
Oke, langsung saja saya kasih tahu caranya:

• Login Blogger
• Template >> Edit Html
•  Lalu, Kita Masukkan Kode CSSnya Dahulu, Cari Kode ]]></b:skin> Agar Lebih mudah pencarian Sobat Bisa Tekan Ctrl+F
• Setelah itu Letakkan Kode ini Diatas ]]></b:skin>

 .post blockquote
    {
    font-size: 15px;font-family: georgia;font-weight: normal;
    background-color: #000000;
    color: #FFFFFF;
    margin: 5px 10px;
    padding: 20px 20px 20px 20px;
    border: 2px dotted lightgrey;
    border-radius: 10px;
    box-shadow: -1px -1px 12px 4px blue;
    transition: background-color .777s;
    -webkit-transition: background-color .777s;
    -moz-transition: background-color .777s;
    -o-transition: background-color .777s;
    -ms-transition: background-color .777s;
    }
    .post blockquote:active
    {
    background-color: white ;
    color: #000;
    }
    .post blockquote { background: black; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

 Keterangan:

• Jika Sobat ingin mengganti warnanya bisa diganti pada kode background-color: white ;

    color: #000; 

• Jika Sobat ingin menambahkan Efek Hovernya Silahkan Letakkan Kode dibawah ini diatas  .post blockquote:active

.post blockquote:hover

{

background-color: darkgreen ;

color: #fff;
}

 

• Terakhir, Simpan.

Silahkan Lihat Hasilnya Sendiri...
Demikian Artikel yang dapat saya sampaikan, jika ingin shared artikel ini silahkan Tulis Sumbernya XD

Jika ada yang ingin ditanyakan silahkan komentar.

--->[[Sumber]]<---