Monday, 11 January 2016

#Howto #CustomizeBlockquote in #Blogger Blog

#Customize Blockquote in Blogger

Blockquote or a Block quotation is used to display certain text different from other. It is used for quotations or for showing a special message by the author. Blockquote is also used for displaying codes. You might have seen the customized part of my articles where i put my codes/scripts that i share with you. Every blog has its own blockquote style, but have you ever thought about customizing your blockquote style. If not, or you don't know about Customize Blockquote in Blogger? Don't worry, today in this tutorial we'll show you that How to Customize Blockquote in Blogger. This blockquote also shows a beautiful transition effect on hover and as we know, that the easiest way of customizing any element of a #blogger template is by using CSS, so we'll customize this blockquote using #CSS.
onhover blockquote  style by tips4tricx
onhover blockquote  style by tips4tricx

without hover blockquote  style by tips4tricx
without hover blockquote  style by tips4tricx

#How to Customize Blockquote in Blogger Blog

First and foremost log in to your Blogger Account >> Select your Blog >> Template >> click Edit HTML >> click inside the code area and use Ctrl+F to search and search for the following tag

Now copy the below code and paste it just above/before it (]]></b:skin> tag)

.post blockquote {background: #2aa4cf;
padding: 10px;
color: #ffffff;
border-top: 20px solid #444;transition:border-top-color 400ms;-webkit-transition:border-top-color 400ms;-moz-transition:border-top-color 400ms;}
.post blockquote:hover {background:#444; border-top-color:#2aa4cf;}

Hit the Save Template button.
Congratulations: You've successfully customized your blockquote in blogger.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks