Cara Membuat Blockquote Dengan Efek Sliding

Kali ini Saya akan membahas cara membuat blockquote dengan efek sliding dari blognya bang UTta
Tanpa berlama lama perhatikan cara membuatnya ↓

• Login ke blogger.com, jika sudah,
• Pilih Tata Letak → Edit HTML → Expand Template Widget
• Letakkan script di bawah ini, di atas kode ]]></b:skin>

/* Blockquote */ blockquote { margin:15px 20px; font:italic 14px "Consolas","Courier New",Courier,mono,serif; height:1px;color:#888; padding:0px 0px; background-color:#333; border:10px solid #111; border-left-color:#FFFFFF; -webkit-box-shadow:1px 2px 5px #000; -moz-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; overflow:auto; -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; transition:all 1s cubic-bezier(1,0,0,1) 0.5s; } blockquote:hover { padding:13px 18px; background-color:#000000; border:5px solid #323232; height:350px; -webkit-box-shadow:1px 2px 15px #000; -moz-box-shadow:1px 2px 15px #000; box-shadow:1px 2px 15px #000; } blockquote p { margin: 0; padding-top:10px; }

• Simpan dan lihat hasilnya

Perhatian :

• Agar bisa menjadi blockquote di postingan seperti di atas gunakan kode pemanggil di bawah ini ↓

<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-color: #ff0000; border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: #ff0000; border-left-style: solid; border-left-width: 20px; border-right-color: #ff0000; border-right-style: solid; border-right-width: 2px; border-top-color: #ff0000; border-top-style: solid; border-top-width: 2px; color: blue; line-height: 1.6em; margin-bottom: 10px; margin-left: 20px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 10px;"> Disini isi dengan script, kode, tulisan apapun terserah Anda !</blockquote>

Selamat Mencoba !