You must have seen , many blogger using a special container or CODE BOX for placing their HTML Code inside blogger post. There is no such tool in blogger by which you can create this box .For the last few days i was trying to create a special container or Special Code Box for my blog post. Since i am a new blogger i have no idea that it is called as "Block Quote" in Blogging language. So after a repeated trial and search in Google lastly i came to know that in blogging language HTML CODE BOX or CONTAINER is Called as "Block Quote". I have seen many blogger have written that you if you want to create such Box, you have to place an CSS code inside advance section of blogger, and then in each post you have to place your HTML code in a <div> section to create such Box. It is very irritating job to place <div> section in each post body every time.I was searching for any simple trick by using which i can create that box in less time.At last i have succeed in my job . Today i am going to share a trick by using which you can easily create a special container for your blog in a second. Main idea lying behind this trick is that , we have to change the default Block Quote style of blogger to a Special Style using some CSS code, so that when we will select any paragraph and click on Block quote, than it will automatically placed our selected text in that specially designed container. Read the trick carefully.
Block Quote Style, Code Box Style Or Code Snippet:
First of all i will show you some Code Box Style and i have placed the CSS code below to create that style. After that i will tell you how you can implement that code box in your blog post.I have collected all these style from MyBloggerTricks.com.1. Code Box With a Fancy Border and Owl Image:
Blockquote Code For 1:
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKVdjTr3KQO81GSvcOiUYK3J5fkbR980zbOxyjDatCcy1fiIY2TbOhPai3yi8AWBRVc3SGqYqOOtZHXQpKokEqpXpS8Mob9P6drY74ztMs0OAEkeajlkremf8ekE6OOuI4Bszyud0ffg/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547;} blockquote p { margin: 0; padding-top:10px; }
2. Code Box With a Purple Corner Label and Border At Bottom:
Blockquote Code For 2:
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgH4RDMT3zP0KXVsyzHrp-O6pUwGJFLgurmMpRPxT02zvAosvB1EKIljBQFJpj8fhQU3sr5vsOwfTwUkI-xOjXbsrEjgPBQY8Hqu7nbQ0Yg8mr7x03XCTAvvjFqw1ToX1llT5teQDYus/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; }.post blockquote p { margin: 0; padding-top:10px; }
3. Jigsaw Code Box With An Image At Right Corner:
Blockquote Code For 3:
.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBeurtrNJCHAI1usihB_dyH-8y38ozLCaOb7qXISoHn961hxsZddmZfa1AL9HH0Kt9JmPr1Z1-DWyqS2gDzD4XIe0y68DrG050FpDygBJKaFsC6tH9ab9YdneXZYKcHqbUWyhb67rzkA/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; }.post blockquote p { margin: 0; padding-top:10px; }
4. Blockquotes With Classic Left Borders:
Blockquote Code For 4:
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_1dfwFwvSU6QFWFMkgB74WvK5-UY7vRf_esS5rrHFIGSg55P56uGQv7QSM4tdeFLH1rgV2Xg5qkNo-Q2Qr2dKYZZqUXhH7I6SBTqUgiojuxCM3dNfDf-fSt89UeTmT5BfMRvyHdNKVg/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }
4.Code Box With Black back Ground:
Blockquote Code For 4:
blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCa14Qp7JtOI1qxO3YPpBTRk0JkL5xRoIbzVzITkAS_ryNlTRFGsu9ljpUSg3Jziffavt7LLOpAQu24foDI8HF4s0oIgLRoB20xgXabtvMrMdo49Vur_4cKcPRfr6NagPGF0OnrLlT74/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }
5. Code Box/ Blockquote With A Brown Corner Label:
Blockquote Code For 5:
.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUdStzsozwnFhZ664NLOkwnS_5j4msll_B5NpTUGakgTeadGmrbr42T__U7qhanYOzDBVs4l2zFKmiNSgFY22C_V4x-aePEnFVl_pqQRISgRBIvzCfyLQf3lrV52pZTtBcrxxXFbvJos/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; }.post blockquote p { margin: 0; padding-top:10px; }
6. Blockquote With Well Aligned Image At Top:
Blockquote Code For 6:
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1FG79rQU3WDOzNGwQZTQN4QrCfox7L9M7BELhTCw23cY-QQzGLbtdeyWsnK7crzI8MF1rCDT0U0qB-s74H8bcIz5Iye35JRkQxp-7nTeiCzihyaUb1jiG41qveg2GBrLaWv_oSCa60Zc/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; }.post blockquote p { margin: 0; padding-top:10px; }
7. Box Style Blockquote Surrounded By Borders:
Blockquote Code For 7:
.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhnoblGnSCM2L1vDIU1JR5NuHBuN3adLwCS9eFFpw93dHiGKRjjnvdXVhXpvm1_PheH52WcyOKnNVcl29Aoyn7bIa0FrIwZjtYkVPbl6KmMzfBPBDR1cmrxQE4vRfsm2qfEeE7FnmTwA/s400/block3331.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } .post blockquote p { margin: 0; padding-top:10px; }
How To Implement Code Box In Blogger:
Here i am going to describe the procedure to insert one of these code box in blogger
- Go to Blogger > Layout > Edit HTML
- Backup your template
- Search for .post blockquote and delete it along with all its occurrences.If you are not finding .post blockquote the search only .blockquote because in some template blockquote is written in this style. In most templates the codes look like this,
.post-body blockquote {} OR .post blockquote{ }or .blockquote {}
If you couldn't find such code then it is OK.
Now search for ]]></b:skin> and just above ]]></b:skin> , paste the blockquote code of the box which you want to implement in your blog.I am giving a sample code below
.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(Paste Image Link here) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border: 8px dotted #DAB547;} .post blockquote p { margin: 0; padding-top:10px; }
Customization of the blockquote/ codebox style :
Important areas to be customized are bolded. Where,
- padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left
- background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(Paste Image Link here)
- font :- It includes font style, size and type respectively. Match the colours with the code above for reference.
- color :- This refers to text colour. You can use a different font colour using our color chart
- border :- This refers to border width, style and colour respectively.
All other blockquotes can be customized in similar way.
After customizing finally save your template and preview it to see the interesting new change.
How To Insert The Code Box In Blog Post:
It is very simple. In your blog post, select the lines which you want to keep inside the Code Box, then Click on the "Blockquote" button on the top right corner of your blog post Editor. Now your the selected text will be automatically placed inside the box container When you will publish that article, you can see its effect.
Replace "Copyright Coding" and Scanned Code With Your Name:
I have created all images with text “Copyrighted Coding” or “Scanned Copy” etc. If you want to write something else than you have to create a image with your required name. Then upload that image to your any blog post, and copy the image url of that image. Now replace the image Url which is present in the above "blockquote Code" with your image Url. Now you can see the effect.
Thats all about Block Quote style. Hope this trick will be beneficial for you. If you will face any problem feel free to ask.
0 comments:
Post a Comment