UrduBloggingHub | Informatvie Blog About SEO & Blogging: Count Them:4 Examples To Customize Your Blockquote Style In Blogger Posts

Blockquote is one of the mostly used widgets in design and development blogs. If you are a programmer or web designer then you must add an attractive blockquotes styles to your blog. In this post we will discuss four different and beautiful designs of blockquotes for blogger. These blockquotes are created by customizing HTML pre tag using CSS.

Design 1: Notebook Style Blockquote:

This looks like as;

Code:

.code{
font-family:  Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #333333;
sdoverflow:auto;
width: 500px;
padding: 15px 0px 15px;
padding-left:42px;
white-space: pre-wrap;              
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;            
white-space: -o-pre-wrap;          
word-wrap: break-word;            
}
.code, .code:before, .code:after
{
background: url("http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png") repeat-y scroll 0 0 transparent;
border-radius: 5px 5px 0 0;
border: 1px solid #dcdcdc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

Design 2:Simple Blockquote Style With Mousehover

Code :

.code {
        background-color: #f3f3f3;
        color: #333333;
        overflow: auto;
        width: 500px;
        padding: 15px 5px 15px;
        border-left:10px solid #333333;
         }

 Design 3: Elegant Blockquote Style:

It appears as;

Code :

.code {
        background-color: #f8f8f8;
        color: #3399FF;
        overflow: auto;
        width: 500px;
        padding: 15px 5px 15px;
        color:#666666;
        border:1px solid #dcdcdc;
        box-shadow:1px 1px 4px  #dcdcdc;
       -moz-box-box-shadow:1px 1px 4px  #dcdcdc;
       -web-kit-box-shadow:1px 1px 4px  #dcdcdc;
       -goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
       white-space: pre-wrap;              
       white-space: -moz-pre-wrap !important;
       white-space: -pre-wrap;              
       white-space: -o-pre-wrap;            
       word-wrap: break-word;            
         }

Design 4: Leaf Style Blockquote:

After adding this hack to your blog it look like as;

Code :

.code {
        background-color: #f8f8f8;
        overflow: auto;
        width: 450px;
        padding: 20px;
        color:green;
        border:2px solid green;
        border-top-right-radius:100px;
        -moz-border-radius-topright:100px;
        -webkit-border-top-right-radius:100px;
        border-bottom-left-radius:100px;
        -moz-border-radius-bottomleft:100px;
        -webkit-border-bottom-left-radius:100px;
           box-shadow:1px 1px 4px  green;
       -moz-box-box-shadow:1px 1px 4px  green
       -web-kit-box-shadow:1px 1px 4px  green;
       -goog-ms-box-shadow:1px 1px 4px  green;
       white-space: pre-wrap;              
       white-space: -moz-pre-wrap !important;
       white-space: -pre-wrap;              
       white-space: -o-pre-wrap;            
       word-wrap: break-word;            
         }

 Add these blockquotes style to blogger:

Step 1: Open your blogger dashboard select your blog.
Step 2: Select Template option and Click on Edit HTML option.
Step 3: In the template code find ]]></b:skin>
Step 4: Paste any one of the blockquotes style codes just above it.

How to use these blockquotes ?

Step 1: Create HTML Escape code from your source code.
Step 2: In the blogger post editor Select HTML version of your post.
Step 3: Now enclose the HTML escape code between pre tags like following syntax. and publish the post.

<pre class="code">Paste the HTML Escape code Here</pre>

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)