Copyrighted Blockquote with Gradient Yellow Image at the Left Side and Small Solid Borders

.post blockquote {
font: 18px normal verdana, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjO19o3LyFw6R60zU5moZvnywxMhDHTrT_gr_LWKpBVIcipVr4VaawSKHpwck5bTYpuCCHr2VEXuZ-mFyLZqUEjkw6ERDFFetgFxj2qMhYoZ83ALlL9tfxIkmyJeb3pxUah8eWst3QDmOn/s1600/blocquote+yellow.png);
background-position:;
background-repeat:repeat-y;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jty0GttenU1IpJYp6iXuhwGtwbhT9-cu9r5KA6YV33i22oEAZrtJc3oiWKBHiDQeAtJ16rpvmTY4xCN6lnNapKZj8GFYhcP3DqJJ06lOUbKd-sP8sYhvHBjcth2TcLrKykcxKviMHIh4/s1600/blockquote+4.png) no-repeat bottom center;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Black Scanned Blockquote For your Blog

.post blockquote {
margin : 0 20px;
padding: 20px 20px 50px 20px;
background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdumnaWGLr7ITGd4BtGSQLnEpkoe0uLrcEcVKbsKXnBymaR39744bjem457AXvbaf9OlK5qOeEoHQXkOXXfR2OkvAoHu9i8FqjP_jQhtThcuIxRd9l1lk8qgD71XTFeRn4Th9lLxWkEpGz/s1600/Scanned+black+blockquote.png) no-repeat center bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border-top: 2px solid #ddd;
border-left: 2px solid #ddd;
border-right:2px solid #ddd;
border-bottom: 2px solid #ddd;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With Ridge Border Styles

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vebaYsGmnMAOCP-FJncGnJ_aBHZP3kwf3DoUvRDwi0JmEhSAair9bSXs_4m9JqPBeQD0oddkjU94VHjBpYs8c6pRwkRKToh-0XRbrOtwLzvuR10Sy1ltGoWgxjt0V0S7ki4uiQQd7cEA/s1600/blockquote.png) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1em Vivaldi, serif;
border-right : 3px ridge #FF8000;
border-bottom : 3px ridge #FF8000;
border-top : 3px ridge #FF8000;
border-left : 3px ridge #FF8000;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Putting Different Mouse Hover Effects on Images

---

Zoom

---

---

Left Side

---

---

Vertical

---

---

Tilt

---

---

Morph

---

---

Focus

---

---

Blur

---

---

Brightness

---

---

Opacity

---

---

Invert

---

---

Sepia

---

---

Contrast

---

Stylistic Copyrighted Codes In Blogger

.post blockquote {
margin : 0 20px;
padding: 20px 20px 50px 20px;
background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHspVLDuAaxvEQuNR80-AIvw8UjTnlPkeZKhwQlf9YJhyphenhyphen4OTD-8HpHHYaPbiha29WOtMHyGezb_yviJrezLUqBt9RTc6Pkactw-ZBVyhAZOpfXTZ2R1aBACSiDQXmoUMZ9vcbdiFtSbkA2/s1600/Copyrighted+blue+blockquote.png) no-repeat center bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border-top: 2px solid #158aee;
border-left: 2px solid #158aee;
border-right:2px solid #158aee;
border-bottom: 2px solid #158aee;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Angular Professional Post Blockquote

blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQckNtMuQjIWsYl8RTf8QiiH_m9Wh5blwRAjzpWX2bRBZQ19oWT4aqrFF9hyphenhyphen2FePoMpSEBbUfaFEG0S6QQOv9wocK16SHLtSbG8fXrqFeO0_oHCLokrsT7yfkZd7VyxQwqGhPCDVQZsQ52/s120/blockqute+3.png) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000;
border: 3px dotted #DDD;
} blockquote p {
margin: 0;
padding-top:1px;
}

Copyrighted Blockquotes

blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2tU_kiWremAmUE2mdYZXzN4WriExiIy7Z7q9B76K6jHmcUe_ggXiWrp7JMQ4xNtcehJmnD33XZwfYhJT7fsjlLVx9acZOPFvRp93rwixFW5MoQA1XRieE6zRt8hhBUUNWXc1Iwo6ZsFX/s1600/blockqutte+4.png) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Creating A Drop Down Menu To Blogger/Blogspot

• Home
• About
• Contact
• Templates
  • Hacks
  • Downloads
  • Advertise

Back to original tutorial here.

Sliding Recent Post Widget

Back to the original tutorial here.

Auto Scrolling Recent Post Widget In Blogger

Go back to the original tutorial here.