Now day's every blogger started to using it on their blog to make blog article stand out and grab the reader’s attention.
Usually all blogging platform has a default styling for Blockquotes, but we should modify a default styling with something in relevance with your theme/template. So, this tutorial will show you how to customize blockquote style in Blogger and WordPress. along with it I'll present 2 stylish examples of customized blockquotes styles for your blog using CSS.
Many bloggers have a curiosity to know Is there an advantage or impact for SEO of blockquotes?
No! I don't think so, there are many probloggers uses blockquote on their blog and I haven't seen any example that tells me it can heart SEO. but it actually help you to rank well on Google. What do you say about it?
How To Customize Blockquote Style In Blogger/Blogspot:
To add customized blockquote style in blogger just navigate to Blogger Dashboard >>; Template >>; Edit HTML and Search for "< / head>" tag
Now choose one of the styles suggested below and copy the CSS code and paste it before the "< / head >" tag
Now whenever you want to add blockquote style in your blog post just copy that text which you want to appear as a blockquote and hit icon as shown in below screenshot:
How To Customize Blockquote Style In WordPress Themes:
It's quite simple to add blockquote style in WordPress themes, you need to add the following codes to style.css or custom.css file of your theme. You can do this with another way just go to Appearance » Editor in your WordPress admin or edit.
Now, pick out on of the styles suggested below and design your blog/website for a better user interface.
#BlockQuote Style 1: Simple
In this example I have used Unicode for left double quote. you can increase the size of quotation mark just edit font-size:4em; with you size.
BlockQuote Style 1 For Blogger:
Download here
BlockQuote Style 1 For WordPress:
Download here
#BlockQuote Style 2: Using Dashed Border And Background Quote Image
In this example I have added dashed border around blockquote, Image for double quote and I have used Muli font from Google web fonts library.
BlockQuote Style 2 For Blogger:
Download here
BlockQuote Style 2 For WordPress:
Download here
Final Words!
So, this was the complete tutorial on how to
customize blockquotes style in Blogger and WordPress. and I hope that
you found it helpful and I’m sure it will benefit you a lot.
If you have any query's, or if I missed anything in this article please let me know, I would love to hear from you :)
Now tell me which is your favorite blockquote style?
0 comments:
Post a Comment