Learn how to customize your blockquote to make it eye catching.You can also show codes in your blockquote without the need to add syntax highlighter.You can also change the blockquote background colour and hover colour as per as your needs.
➨Using Ctrl+F find >>]]></b:skin>
➨Paste the code given below just above ]]></b:skin>
Add Beautiful Blockquote With Hover Effect
➨Go To Blogger>>Dashboard>>Template>>Edit HTML➨Using Ctrl+F find >>]]></b:skin>
➨Paste the code given below just above ]]></b:skin>
/************************************************** Blockquote By All Digital Guide ***************************************************/ .post blockquote { font-size:15px; font-family:Verdana; font-weight:normal; font-style:italic; background-color:#F2F1F1; color:#000; margin:5px 10px; padding:20px 20px 20px 20px; border:2px dotted lightgrey; border-radius:10px; 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:hover { background-color:gray; color:#fff; } .post blockquote:active { background-color:lightgray; color:#000; }
CUSTOMIZATIONS
➨ To change the color of blockquote change the colour in line 25 and 29 .You can use any colour like lightgray,lightblue,black,pink,etc. OR you can use colour code.For colour codes Click here
NOTE:The code in blue is of "MOUSE HOVER COLOR" and the code in red is of "MOUSE CLICKED COLOUR"
Live Demo
Post a Comment