Cara Memodifikasi Block Quote Dengan Efek Bayangan

Block Quote adalah salah satu Menu yang terdapat diatas posting yang berguna untuk menandai tulisan yang ditonjolkan. Block Quote ini digunakan oleh pengguna blogger terutama oleh blogger yang menuliskan tutorial blogger yang banyak menaruh Kode pada posting, dibandingkan hanya mewarnai tulisan yang ditonjolkan. Dengan kata lain sangat dipergunakan oleh pemembuat blog tutorial. Block Quote ini sudah ada terpasang di blogger, Tetapi masih original dan masih berbentuk tanda kutip, Memang ada juga yang terpasang sudah diubah oleh si pembuat template. Dengan cara memodifikasi Block Quote agar lebih stylish dan menarik. Bagaimana Cara Untuk memodifikasinya?, Anda Perlu Mengedit HTML Teplate anda. Apa Kelebihan Jika Saya Menggantinya Dengan Block Quote ini?, Block Quote ini lebih stylish, Dilengkapi dengan efek bayangan, Warna yang berubah-ubah jika kursor diarahkan dan anda juga bisa mengatur warna  nya. Untuk Memasangnya ikuti cara berikut ini:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, Terlebih dahulu anda Backup Template Anda, Lalu Klik Tombol Edit HTML.
• Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini diatas kode ]]></b:skin> :

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNfRCMvoTUlPGBW6fbedWpqYVBLiBkSbsYsEJPy4sd-9f1z1IJg3e8ms-d9lrTy5jzjKZoqH9Db9hBzpeSw7JTcNRwc1dh8cDrY4aGGhydMzB4b4u29kpCioWAZieneE2qfZizqJhy-Jl/s1600/Code+YBB.jpg);
background-position:left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 14px Serif, Times, Helvetica;
font-style: italic;
border: 2px dotted lightgrey;
box-shadow: -1px -1px 12px 2px gainsboro;
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 p {
margin: 0;
padding-top: 10px;
}
blockquote:hover { background-color: white ;
color: #000000;
font-size:16px;}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}

Keterangan:

Kode Yang Berwarna Merah adalah URL Gambar yang terdapat disamping, ganti dengan gambar anda yang berbentuk vertical.

Kode Yang Berwarna Kuning adalah Warna Dari Tulisan Pertama.

Kode Yang Berwarna Hijau adalah Ukuran dan Jenis Tulisan Pertama.

Kode Yang Berwarna Biru Muda adalah warna dari background Kedua.

Kode Yang Berwarna Biru adalah Warna Dari Tulisan Kedua.

Kode Yang Berwarna Orange adalah Ukuran dari Tulisan Kedua.

• Setelah itu, Klik Tombol Simpan Template.

Catatan*

Jika Tidak Bisa Diubah, Terlebih dahulu anda menghapus block quote sebelumnya, dengan mencari kata kunci Block Quote.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG