COUNT THEM:4 EXAMPLES TO CUSTOMIZE YOUR BLOCKQUOTE STYLE IN BLOGGER POSTS

COUNT THEM:4 EXAMPLES TO CUSTOMIZE YOUR BLOCKQUOTE STYLE IN BLOGGER POSTS

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>

Comments

Post a Comment

இந்தப் பதிவு பற்றிய உங்கள் கருத்து எங்களுக்கு முக்கியம். எதுவானாலும் தயங்காம எழுதுங்க!

Popular posts from this blog

HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER

Image
HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER Adding this notification bar to blogger: Login to your  blogger dashboard  and  select your blog . Select  Layout  option and select  Add a gadget  option. Select  HTML/JavaScript  widget from the list. In the HTML/JavaScript widget paste  following code  and save it. Preview your blog to see the new changes. Note:  In the following code replace  red colored code  with your post titles and remove  #  symbols with links to these posts. CODE: <style> #wcnot-cont { top:0px; left:0px; z-index:9999999; position:fixed; width:100%; background:#222222; color:#ffffff; font:16px georgia; box-shadow:2px 2px 5px  #444444; -moz-box-shadow:2px 2px 5px  #444444; -web-kit-box-shadow:2px 2px 5px  #444444; -goog-ms-box-shadow:2px 2px 5px  #444444; } #wc-movtext { text-align:center; padding:8px; font-family:  Ve...
Keep reading

Hacking அறிந்தும் அறியாமலும் – பாகம் 2

Image
Hacking அறிந்தும் அறியாமலும் – பாகம் 2 ஹக்கிங் பற்றிய இந்த தொடரில், ஹக்கிங் என்றால் என்ன? என்பது பற்றியும் மற்றும் ஹக்கேர்ஸ் பற்றியும் கடந்த பதிவில் பார்த்தோம்.ஹக்கிங் அறிந்தும் அறியாமலும் – பாகம் 1 அதன் தொடர்ச்சியாக இன்று அனைவரும் கட்டாயம் அறிந்து வைத்திருக்க வேண்டிய சிலவற்றை பற்றி பார்க்கலாம். அதாவது தனிநபர் பாதுகாப்புக்கு அச்சுறுத்தல் விடும் ஹக்கிங் முறைகள், அவற்றிற்கான பாதுகாப்பு ஏற்பாடுகள் பற்றிய விடயங்களை தொடர்ந்து பார்க்கலாம். ஹக்கேர்ஸ்ஸைப் பொறுத்தவரையில் அவர்கள்  ஒரு தனிநபரின் இணையக்கணக்குகளின் மீதோ அல்லது அதையொத்த தனிநபர் தகவல்கள் மீதோ தாக்குதல் நடாத்துவதற்கு குறிப்பிட்டு சொல்லக்கூடிய ஒருசில வழிவகைகளை பயன்படுத்துகிறார்கள். அவை வருமாறு தனிநபர் கணக்குகள்/தகவல்கள் மீதான ஹக்கேர்ஸ்ஸின் தாக்குதல் வழிமுறைகள் 1. Phishing 2.Key Loggers 3.Social Engineering 4.Tap Napping இந்த மேற்குறிப்பிட்ட வழிமுறைகளையே தனிநபர் கணக்குகள்/தகவல்கள் மீதான தாக்குதல்களுக்கு இன்று அதிகம் ஹக்கேர்ஸ் பயன்படுத்துகின்றனர். இவற்றைப்பற்றியும் இதிலிருந்து எவ்வாறெம்மை பாதுகாத்துக...
Keep reading