Membuat Blockquote CSS 3 Yang Unik dan Cantik Membuat Blockquote CSS 3 Yang Unik dan Cantik | Blog Online Ganden

Selasa, Mei 22, 2012

Membuat Blockquote CSS 3 Yang Unik dan Cantik

Pada kesempatan kali ini, iseng-iseng nemuin kode Blocquote CSS 3 yang unik dan cantik. Kode Blockquote CSS ini sangat berbeda dengan kode Blockquote Hover yang sudah pernah saya tulis disini.
Seperti yang sudah saya bilang diatas, bahwa Blocquote CSS 3 ini merupakan Blockquote yang cantik dan unik. Layaknya sebuah gadis cantik nan jelita yang mempunyai daya tarik special. Begitu juga dengan blog kamu. Jika kamu menggunakan kode Blockquote CSS 3 ini, saya yakin blog kamu akan merasa beda dan akan terlihat cantik.. Mau bukti, silahkan action...

Langkah pertama yang mesti kamu lakukan adalah sebagai berikut :
1. Log in ke Akun Blogger.
2. Pilih Rancangan, kemudian Edit HTML dan jangan lupa centang tuh kode Expand Template Widget
3. Kemudian cari kode berikut ]]></b:skin> . Jika sudah ketemu, silahkan kamu copy dan paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> .

KODE CSS

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99; /* original code: gubhugreyot.blogspot.com */
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Jika sudah, kamu bisa klik "Pratinjau" untuk memastikan bahwa cara menempatakan/membuat Blockquote CSS 3 ini kamu berjalan lancar. Jika tidak mengalami error, kamu bisa langsung "SAVE". demi keamanan, kamu juga bisa Backup terlebih dahulu template kamu.

Sekian dulu, semoga tips Membuat Blockquote CSS 3 Yang Unik dan Cantik ini bisa bermanfaat.

Title Post: Membuat Blockquote CSS 3 Yang Unik dan Cantik
Rating: 100% based on 92189 ratings. 5 user reviews.
Author: Ganden

Terima kasih sudah berkunjung di blog Ganden Online, Jika ada kritik dan saran silahkan tinggalkan komentar

5 komentar:

Mebel Jati on 23 Mei 2012 00.34 mengatakan...

Ini baru keren..

athiefnobita on 26 Mei 2012 11.51 mengatakan...

sek pak tak pelajarane :D
mbok menowo iso aku :D

Ganden Online on 27 Mei 2012 00.03 mengatakan...

@athiefnobita Iyo karo kancane dewe monggo2 wae..

AULIA KALIGRAFI ART on 29 Mei 2012 11.29 mengatakan...

ok...gan aku coba ya.....sob..!

Gopar on 26 Juni 2012 04.21 mengatakan...

izin pakek ya sob..mampir juga ya?

Loading....

Posting Komentar

Terima Kasih Kunjungan Anda.
Komentar Anda sangat Berarti Buat Saya. Jadi, silahkan anda berkomentar tentang artikel yang berkaitan postingan saya. "Jangan Nyepam atau numpang link untuk kepentingan sendiri tanpa seijin penghuni blog"

 

Blog Online Ganden Copyright © 2009 Modification Blog by Blogger Jepara

Mebel Jepara