Sponsor 1
custom
codes

How to Change Style Blockquote blogspot with CSS


Labels: ,

custom-codes - I never made ​​a previous post about making 'Box for Code in Blogger Posts' in my opinion a bit too difficult having to write or add this code in every post that is the programming code 

<div class = "code">
place code PHP, HTML, Javascript, jQuery, CSS, and others here
</ div> 

now I try a little modification of the automatic blockquote blogspot, so can be used to put the code or script in PHP, HTML, Javascript, jQuery, CSS, etc.

the following way:

1. first click on "Templates" and click "Edit HTML"

2 then look for the word "blockquote" (how quickly can simply press ctrl + f)

3 after the meet said "blockqoute" please replace the old code with the code below


blockquote {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}
blockquote blockquote {
background: #FAFAFA;
background-repeat:no-repeat;
        margin:5px 10px;
        padding:0 7px 10px 7px;
        font-size:12px;
        color:#336699;
        border-left:4px solid #40a9c9;
}

4 if it is saved template, and then refresh your page to see the results.

now you can add a text box area for the placement of the codes simply by clicking on the "Quote" on page "New Entry"

Demo, look this post :)

0 comments:

Post a Comment