Cara Membuat Blackquote Hover Keren Di Blog

Cara Membuat Blackquote Hover Keren - Blockquote digunakan untuk membedakan  tulisan satu dengan yang lainnnya, biasanya tulisan yang sering dibedakan adalah suatu tulisan penting atau sebuah script. Penggunaan blockquote dapat menambah tampilan menjadi lebih menarik, blockquote yang akan saya share berikut ini mengggunakan evek hover jika cursor ditempatkan diatas blockquote maka backqround blockquote akan berubah secara otomatis.

Cara Pemasangan Blackquote
Untuk penerapannya berikut langkah-langkah yang perlu anda lakukan :

1. Login keakun Blokgger
2. Pilih Template » Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda terapkan kode di bawah ini sebelum kode ]]></b:skin>

1. Style I

.post blockquote{
max-height:100px;
overflow:auto;
background: #0e0e0e;
font-style:normal;
border:1px solid #006acc;
margin:10px;
padding-left:15px;
padding-bottom:8px;
padding-top:8px;color:#fff;
border-radius:4px; transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
}
.post blockquote:hover {
box-shadow:0 0 13px #000;
background: #033D86;
}
.post blockquote p{
margin:.75em 0;
padding-right:5px;
padding-left:15px;
background:rgba(153,153,153,0.07);
padding-bottom:8px;
padding-top:8px;
}

2. Style II

blockquote {
border: 3px groove #ffaad5;
font-size: 13px;
color: #333333;
background:#FCFCFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ok4O7whW-nQbPt1DSl25qvHoTrnCKj3y0GsaT3Emm-6bp_xNlP4vd5rVrerJdEaI0eMU7sCCRquwA6yJCdQJqAkIROA5BSHyjCWsd6vTjnwk96L9G6zKHF6e6squ6f00N7oCe67cUU8/s1600/image2.jpg) fixed;
-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;
}
blockquote {
border: 1px dashed #eeeeee;
border-left: 10px solid  #CE4D66;
border-right: 10px solid  #CE4D66;
font-size: 13px;
color: #000;
box-shadow: inset 0px 0 10px 0  #CE4D66;
padding: 2px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}
blockquote:hover {
border: 1px dashed #eeeeee;
border-left: 10px solid #FF95CA;
border-right: 10px solid #FF95CA;
font-size: 13px;
color: #000;
background:#FCFCFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEx8NiFEDaLAalIUYFO8i7Ru6xsvQMVavjud3VRxZ4bNqUYLNYXNzmoV2_ZVkEsP7YgMTJglqDxbR1FBIP1OLE32btuCzGxk_ybrb6K2P5QWogVTUQiaNx1dDkgAY1COqOkeKkTBBWgs/s1600/01016_SalmonPink-l.jpg) fixed;
box-shadow: inset 0px 0 800px 0 #FFD9EC;
padding: 2px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

3. Style III

blockquote {
background: #3A74C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYCXsKSbsV_X0w1meo1CtSPO3Bpv0_0FrMCXRHKK03caRZDO5Ao-4l6Aiw5zQw2Jk10nAJTWCklCcWL17U0dPns-z8vctZl4-Kdcmc-zFwfI6soM8Au-cwC150nbVEhyphenhyphenygKHDVm0oc3Yg/s1600/abstract-pixels-background3.jpg) repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#fff;
font: normal 1.0em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
blockquote:hover {
border-top: solid 1px #3A74C9;
border-bottom: solid 1px #3A74C9;
border-left: solid 1px #3A74C9;
border-right: solid 1px #3A74C9;
font: normal 1.0em Helvetica, verdana, serif, Georgia, "Times New Roman";
color: #fff;
background-color: #fff;
box-shadow:0 0 5px #999;
background: #3A74C9 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLkx2D2X82Miu4UnXyT2U6Kgnrfm5B9gbCWXqaqJXwaMbdLulvkPOL8RLiCQtZPB4Gsqm3NBsdIMd6i4IQLjXp5NWyAfCTYYSlerVemaj5MVCrk_WQ03muJZqKc6tBGWgy5QdWz0NBlM/s1600/gif20.gif") repeat;
}

Penggunakan blockquote secara otomatis anda klik dua tanda putik, berikut screen shootnya :

Jika anda ingin menggunakan secara manual, anda cukup menggunakan blockquote diawa dan diakhir  » masuk kelaman baru dan letakkan di »  Compose HTML , seperti berikut :

<blockquote>
........................
</blockquote>  

Demikian Cara Membuat Blackquote Hover Keren  Di Blog , semoga bermanfaat!

Share this post