Code Box For Blogger With Customizations

code box

Generally code box is required to provide some code to our users because sometimes long codes can affect your website/blog's looks and make it look weird. This code box is mainly designed for the bloggers who provides some tips or widgets to other bloggers but you can also use it for various other purposes such as for providing some text or articles that you don't want to so on your post etc.

This code box can make your blog look attractive as well as you can customize it as per your needs and requirements and hence it merges with your blog template without affecting your blog's looks. This code box is easy to install and customize, you can change its colors, text, size etc in few seconds. One more thing you just have to install it once and then you can use it anywhere in your post without pasting the entire code, means you just have to use simple short code to use it like our "Live Demo or Download Button's code". You can see the live demo of this code box below:

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiux6g2upgG8y3x5aL2I70tmgBj8W36BLdBgeD2O0ljnetq_clhcaDFuP9CqLormAiuWdhADfJNWDLzq0xgWnuEMUAyPdxIuaRL67Fg2YdogKgGgR5uobSQBiy9oW45i-FvaNOZ4xK2U4lO/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}

.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BWZGXjlLB5aYRz7y1KbJ3ukfB3dIpP9Q9rse1PP6vIWN3mAxAn3S-a05ZzuUPFZJj07Z8-o0Nh2WRVQfKB6dATiqKLK6IFEUybfQb64yXO5qEbgOv1_OWvyBGrRawaR0RhPRuS-s42gZ/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

.barconteblogger{margin:0px 0 0 43px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeCDY3HPf5GuKdOk-PS5Em7LxBec-YsCOcm_hVE_zM4IQkCTzyEbrx3RaQOWX4mVhOd9eoh5qDp4nvUZHaVfM-mBQpUJSE0Jn641-f0c30kLLklNUtsl1_q1Je5G8MpPdi9jOU2k561Na/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuRtjEaAQQooBHcYv4oBp7Rl5bRGHSbgMWhP-LkUa3i7GFnMONs_YB56OJEYFyUh8ROdXUfPjMlcO08In-UC7XY1KefcQwEsxXBLdwBaBnQPqLK2da7qixBQ4COl8uGhIt-X8Z5aE0xFE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

.barcontetwitter{margin:0px 0 0 43px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmnepAEIIGoft8pg-_l_KlgqwiTIG8XMPL1kqdyJLGFZ0s5Mr_vZHMnjzizvd9uP6EN2Bd5r99rn7AuOxR4sCt_49vvN5-7IDX3AZDkW9UXtHkuLQWS2h74x0ukk9iVwU6L-RvPQSkout/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uMIlYr8-xhjdzHuuxS48DUJH3yHuQTERcv32JFwCFfyY0-EIX2XYo3_DMfSJBYM8RjGNQE__30pbtWRFgTOAdpxQIbKk2dgICe3yxzwTBcNWw_2tyrrNhoitLBFIc-VyNh45v43tUtYE/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

.barcontefacebook{margin:0px 0 0 43px}

.barquestionmark{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbpGItb8u74-ONEbGbBBSagylsC97tXGwk3RVWNdDrOknf0dOx_fgquKFFGY7ntSyQsRrtraX-kT0dpaww_bchnWoqFbjedHoL2vUgn7SDRuUS7-xfUH0lyjNUgkqlvWxrzLvhtYqLuY/s1600/rss3.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

</style><br />

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger"><a href="https://www.facebook.com/thebravesandsmarts" target="_blank"><img alt="Like The us on Facebook" title="Like us on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVm6rCETiRpIlkRwx80dLl8Ihd_hOtogV2kgeBeXSvwco5uABXG7s2xGCj9tTOS6egKlRYmtj7Xec4A45JhVhKMOU9hvgZfNqk9H5MCxq_-x00-i_FSG_TvR4VX8feVNYR59QprM4vdZR4/s1600/FB-open-new.png"/></a><br />
</div></div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><a href="https://twitter.com/TheBrvsAndSmrts" target="_blank"><img alt="Follow us on Twitter" title="Follow us on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCcQ7IdnrnYNBnFkMISJ2qJbrEVahfVnexYF5sgC74vJjNrztYFyHG6vNSn67-RUgCgtLHgnbEQPpz4ccxKQdqQ6Z5aQpeHAi2Sue9LCb2FslckRPSZRn-WomEj7IqcLR5yjG9CZ1Bgkl/s1600/TW-open-new.png"/></a><br />
</div></div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><a href="https://plus.google.com/103268075528632314965/posts" target="_blank"><img alt="Recommend The Braves And Smarts on Google Plus" title="Recommend The Braves And Smarts on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOFEfNmhcE7Ev0xqDKjdPb6za-ZVGnaLLW51Ni58V6TpJKC1uqCmDx8JPx0bCymxRP44qb4_D8qO_B7Yehe63EA-Rcnn1jbd1_GlL0uoecln1rgPc1Gb2jDU56YUPO34Lvqk-n8JrUhM1/s1600/G+-open-new.png"/></a><br />
</div></div>

<div class="barquestionmark"><a href="http://feeds.feedburner.com/thebravesandsmarts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyza4XNaw7VHMDtlrirDhYRWmTJkh1c_tGAxUM44iMY3dUlNZ7XOMpSCfzfxZW35nzUGS3ywvRV9AQRcHvB_iB4Hiqhyphenhyphen7LN4nsScuq-Y6p2a8MqgqrTd_pCp2nY1zntyDj7IVSe55RNXdx/s1600/blank.png" alt="Subscribe in reader" title="Subscribe in reader"/></a><br />
</div>

DEMO
Also read: Sitemap or table of content generator widget for Blogger.

Now, i think i have described you everything about this code box except how to add this code box to your blog?. So to add this code box to your blog just follow the simple steps below:

• Log in to your Blogger Account.
• Go to Template >> Customize >> Add CSS.
• Then in Add CSS box just copy and paste the below code in it and click on "Apply To Blog" tab.

.bloggenes { background:#F9F9F9; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 1px; color: #000000; font: 13px 'courier new', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 150px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; }

• Now whenever you need this box in your blog post.
• Just open your post and go to  HTML section and paste the below code in it.

<div class="bloggenes">
Paste your code here
</div>

Screenshot 1

screenshot 2

• Now go to compose section of your post and replace "Paste your code here" with your code and you are done.

screenshot 3

Customizations:

• To change the background color of code box replace the HTML color code in red with your HTML color code or with color names like red, green, blue etc.
• To change the border color simply replace the HTML color code in green with your own color code.
• To change the border width just replace the pixel values in blue.
• To change the font color replace the HTML color code in pink with your HTML color code or with default color names.
• To change the font size simply replace the pixel value in purple with your desired pixel value.
• To change the font style just replace font style in orange with your required font style for example: Lucida fax, Arial etc.
• To change the height of the box just change the pixels value in grey.
• To change the width of the code box just replace the percentage value in yellow with your desired value.

Also read:

• Make money with Yllix Media.
• How to add Facebook like button to Blogger.