Wednesday, April 16, 2014

Amazing Examples To Customize Blockquote Style In Blogger/Blogspot alphause

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