Po ...
Amazing Examples To Customize Blockquote Style In Blogger/Blogspot
12 comments
A blockquote is a quotation in a article or post, that stands out from the main text as a paragraph, or block of text. Using CSS, we can give a more professional look to our site or blog by adding a different style, background, color or font to our quotes.
This tutorial will show you how to customize blockquotes style in Blogger along with showing you 6 beautiful examples of customized blockquotes style.
How to add quotes to a Blogger post
How to Add Stylish Blockquotes In BloggerIn order to customize the blockquotes style in Blogger, you need to access the HTML of your template and add some code inside theheadsection. You would need to choose one of the styles suggested below and copy the code which is immediately after.
Step 1.From Blogger's Dashboard> go toTemplate>Edit HTML
Step 2.Click anywhere inside the code area and press the CTRL + F keys to search for this tag:
Step 3.Just above thetag, copy and paste the code of the style that you would like to use:
Style 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Style 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Style 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Style 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Style 5
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Style 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Step 4.Click on the Save template button to save the changes. And you're done!
I hope that you found this tutorial helpful in learning how to customize blockquotes style in Blogger. If you have any questions or suggestions, then please feel free to leave a comment below.
Like
1
Random Posts
How to put Adsense ads on Blogger/Blogspot16/03/2012 - 19 Comments
What is blogger and how you can create a blogger blog?06/03/2012 - 2 Comments
Add Css/Jquery fixed horizontal menu to blogger blog06/03/2012 - 10 Comments
Related Posts:
How to Add CSS code To Blogger usin...
How to add custom Variable definiti...
Understanding the Page Elements of ...
How to Add Numbered Page Navigation...
Add a Custom jQuery Lightbox To Blo...
12 comments:
TheNbaZone 6/04/2012
your tips and tricks are amazing. i like your site. :) Reply
Replies
Admin 6/04/2012
Thanks for the feedback! i'm glad you find it useful (:
Saurabh Kumar 6/28/2012
thanks for this Reply
CFC_007 6/29/2012
Man, you are toooo freaking awesome. I am creating a post to credit. Keep up the great work please. :D Reply
Replies
CFC_007 6/29/2012
Tried it first example http://naething.blogspot.i n/2012/06/credits.html Is it possible to fit the characters inside the 'blackboard' ?
Thanks for all the ideas and for this one in advance.
Krishna Kumar 1/14/2013
hi i would like to create a a blog template like yours. please help. Reply
Cynthia 3/07/2013
Great code! Thanks :) Reply
A. (Ruda Rudość) 5/14/2013
Wow, great! Can you make more examples? Reply
Ganesamoorthi M 5/15/2013
Awesome information....!!
IT is very useful...!!
http://techgblog.blog spot.in/ Reply
Ganesamoorthi M 5/15/2013
I need more exaamples....!! Try to add some more new without your page name....!!
THANKS>>>>>!! Reply
Shamith SP 8/24/2013
wow..nice tipss...
It is very usefull...!!
http://www.hdphotos only.blogspot.com Reply
Zain -ul-Abdin 1/26/2014
I liked ur tips but i applied some tips on my blog nothing happened ...Help me plz plz Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,786 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
She and Me
Thank you so much,It worked perfectly. You make it all so easy to...
Junkyo No Hikari
Thanks its work really well ^__^
Junkyo No Hikari
Hye... Thanks to your tuto its work ^__^ btw I'm delete the...
Eliza Lincy
How to increase the number of posts shown in Home page after...
Varad Parab
That was one awsome post...it really helped!!!
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
1
Like
No comments:
Post a Comment