A blog which is dedicated to help bloggers with their blog development , frequently needs a special box which helps them show their readers the code.They or rather all of us use blockqotes.They sure are a good way of showing your codes but is good enough ? We here at genie land have always believed in being the best.So here's a customized box that will help you show off your codes in a real elegant style.I have given a stitched look to the box.It also has a side ribbon which help you categorize your codes.The box is customizable.Although we have mentioned that we can use it to show our codes , it can be used to show other messages also.So all in all , it is a multipurpose box with many features.
You Might Also Like
Live Demo
Adding it to Blogger
- Go to blogger
- Navigate to Template > Edit Html > Proceed
- Search for the following code
]]></b:skin>
- Paste the following code above the code .
.wrapper {
overflow:hidden;
margin: 50px auto;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
padding: 5px 10px;
background: #333;
color: #fff;
font-size: 17px;
font-weight: normal;
line-height: 1.3em;
border: 2px dashed #fff;
border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
-moz-box-shadow: 0 0 0 4px #333, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #333, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #333, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #333;
font-weight: normal;
width:80%;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
- To use this box in your posts , use the following markup :
<div class="wrapper">
<pre>
PLACE YOUR CODE HERE</pre>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">
C O D E</div>
</div>
</div>
</div>
Customization
- You can edit the the text in blue to change the font size in-case you feel it's too big.
- The text in red has to be replaced by the code / message you want to show.
- The text in green has to replaced with the category of your code , for eg : CSS
Written by Aman
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
thank you
ReplyDelete