How To Customize Blogger Blockquote and Use it

By Ayman H Friday, September 7, 2012
Many of My blog readers asked Me which syntax highlighter am I using?, how Im highlighting the Html codes on my blog?, etc. So I thought of presenting a detailed post on it today. The highlighter which highlighting the html codes on my blog is nothing but the inbuilt Blogger blockquote. I hope most of you might know about the blockquote feature in blogger but however most of you might be struggling while the html codes inside blockquote might spreading out of the blockquote!!. So this tutorial is gonna help both the newbies to blogger blockquote and the one who is struggling to get his blockquoted codes stay inside the blockquote.


Firstly get a big size image of your own or you can even use some best texture background for blockquote. After preparing an image for it, kindly go throught the below tutorial.

How To Customize Blogger Blockquote and highlight codes with it

1. Go to blogger dashboard > Template > Edit Html.
2. Find for .post blockquote and you will notice some style codes like this.
.post blockquote{



}
.post blockquote p{


}
.post blockquote:hover {


-
}
3. Replace it entirely with the code specified below.
.post blockquote{
background:#ffffff url(http://3.bp.blogspot.com/-oJNflSBHEV0/T3XdRIksU7I/AAAAAAAAAVU/Mhcx5iVZHgU/s1600/bt+html+holder.jpg);
float:right;
padding:0;
border: solid 1px #EFEFEF;
margin-right:4px;
margin-left:4px;
margin-top:15px;
margin-bottom:30px;
width:570px;
max-height:650px;
overflow:auto;
padding:10px 0;
}
.post blockquote p{
padding-left:55px; margin:0;
}
.post blockquote:hover {
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
Above lies the style sheet for your blogger blockquote.

Blogger Blockquote Customization

  • Replace IMAGE LINK with the Url of your desired image.
  • Change width:570px; to your desired width.
  • Change max-height:650px; to the maximum height of you prefer and a scroller starts after this height.
  • Modify  padding-left:55px;  to get your text inside blockquote to stand away from left corner and fit inside blockquote.
4. Save the Template.

Using the Blockquote for highlighting codes.

5. Go to new post or edit older post.

6. In the post editor, write some bulk codes > select/highlight all those codes and click on the blockquote icon shown like this.

7. Just before publishing your blog post, switch to HTML mode of post editor and search for <blockquote> tags, make the changes specified below.
  • Include <p> tag to opening <blockquote> i.e., <blockquote><p>
  • Include </p> tag to closing </blockquote> i.e., </p></blockquote>
8. Finally publish your blog post and view it.

Conclusion

This is one of the very easy tutorial and this saves you from using slow loading syntax highlighters on your blog and also allows you to write the style of it on your own. Suppose if you get messed up while specifying the margins, paddings or anything., feel free to ask Me in the comment section below and I will help you further. Till that take care. Happy blogging pals. . .

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " How To Customize Blogger Blockquote and Use it "