Blockquote: How to add Teacher Blockquote in Blog of Blogger

The standard Blockquote on Blogger is very boring, just a slightly shaded background in most cases.Also many bloggers don't use blockquotes which is a shame as they can be an eye catching feature in your posts.Blockquotes can be stylish and informative when used correctly and styled as you might see in newspapers and magazines.

So when recently Share blockquote. They used a lot of quotes in posts and wanted these quotes to stand out.Using just some simple CSS I styled a blockquote that readers would love and I will share it with you in this post.

OK so this style places the quote within a box with the text large and colored, we use quotation marks at the top and bottom and finally you can add the quote authors name if required.You can see a screenshot of the blockquote or check out a Live Demo.

BlogofBlogger.com
-SEO
-Online Tools
-Widgets
-Template
-Online Money
-Blogging Tips & Tricks
-Social trick
-Tutorials
-Ebook
-template customize
-more.....

Implementaion:-

Now To add One of these amazing and unique blockquotes to your blogs, do the following,
Step 1. Go to Blogger > Layout > Edit HTML
Step 2. Backup your template (Read How to Backup Template)
Step 3. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code for one of your favourite blockquotes. I am giving a sample code below

.bobcode{overflow:auto;width:250px;height:260px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#fff;margin:15px 35px 15px 15px;padding:15px 5px 10px 165px;clear:both;list-style-type:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0Qv883GocebuHxsPQUrcxkjQHqX0ByYXzGkutovujx5kXNrnlWAt21pcAWM_lVtUt_g6Wbl6Yu-v_VzA2isHnKxfbYwMSR6eEOQwwDVYARfVTPjj3vzsMK3riRumleuvQkrb2Uw3iEY/s1600/Blogofblogger+teacher.png) repeat-y top left;border:1px solid #fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:0px;-moz-border--moz-border-radius:0px 0px 00px 20px;border-radius:0px 0px 0px}.bobcode:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6eP48h6PERrqf-fKnaTB4B-ueD4VUkbdY9Dy7ySfM0iOzmY1zNsa3ieQGb4qweVIvjj-s8Sr5ZDkHhn9uj3aUNVIr90Jjb4wjLnKt6qWHBx__aDFcLmSly_kB9XK980N8Rk7k5XW7LcA/s1600/Blogofblogger+teacher+2.png) repeat-y top left;color:#f1f1f1;border:1px solid #fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 0px rgba(0,0,0,.3)}

Step 4. Now Save the Template.

Now every time you create a new post, switch to Edit HTML tab, and choose the style you like and add the red code to the beginning and end of the text you want to display in quote

Code:

<div class="bobcode">Your Text Here...</div>

Enjoy....

You Also Like:

15 Amazing Examples To Customize Blockquote