Buat Blockquote Hover yuk... Buat Blockquote Hover yuk... | Blog Online Ganden

Minggu, Februari 06, 2011

Buat Blockquote Hover yuk...

Sebenarnya cara membuat Blockquote Hover dari dulu sudah saya cari-cari script yang pas di blog, untuk Blockuote Hover sendiri itu seperti apa? Kamu bisa langsung praktekan aja, kalau hanya teori...nanti kamu bakalan hanya memendam tanda tanya saja. Untuk Cara Membuat Blockuote Hover Silahkan ikuti panduan di bawah ini :

1. Login Blog kamu.
2. Kemudian Rancangan, Dan masuk di Edit HTML. Setelah itu kamu cari kode ]]></b:skin>
3. Simpan kode di bawah ini tepat di atas kode nomer 2.

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i739.photobucket.com/albums/xx32/kohkono/blogonlineganden.jpg);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99;
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);
}

Kemudian untuk memanggil Blogquote tersebut pada postingan kamu, kamu cukup menuliskan beberapa script sebelum memulai postingan dengan menggunakan blogquote hover.

<blockquote><span class="opening"></span>Masukkan teks disini<span class="closing"></span></blockquote>

Tulisan yang berwarna biru, silahkan kamu ganti dengan tulisan atau postingan yang hendak kamu posting...

Title Post: Buat Blockquote Hover yuk...
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

0 komentar:

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