Adding a Royal CSS Box For BLogger

Many bloggers prefer giving an elegant look to their blog.The elements that make up an elegant blog are colors , ribbions , stitched boxes etc.I have been providing you all along.There are some important issues which you must take into consideration while designing your blog.You should select good colors , choose the  right style and much more.Todays post includes a pure css box which will help your blog look professional and at the same time appealing.There are no images used , this makes the box flexible.

LIVE DEMO

Adding It in Blogger 

• Go to Blogger
• Template > Edit Html 
• Search for  ]]></b:skin> (Ctrl+f)
• Now place the code above it 

/*CSS CODE BY xolohub.blogspot.com*/
.infobox-container {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
}
.infobox:hover { 
 box-shadow: 0 0 15px 12px rgba(0,0,0,.45);
}
.infobox {
    width: 250px;
    padding: 10px 5px 5px 5px;
    margin:10px;
    position: relative;
    z-index: 90;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #424242;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
    color: #fff;
    font-size: 90%;
}
.infobox h3 {
    position: relative;
    width: 270px;
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    left: -15px;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #3198dd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
    font-size: 160%;
    text-align: center;
    text-shadow: #2187c8 0 -1px 1px;
    font-weight: bold;
}
 
.infobox-container .triangle-l {
    border-color: transparent #2083c2 transparent transparent;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: -12px;
    top: 45px;
    z-index: 0; /* displayed under infobox */
}
.infobox-container .triangle-r {
    border-color: transparent transparent transparent #2083c2;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: 266px;
    top: 45px;
    z-index: 0; /* displayed under infobox */
}
.infobox a {
    color: #35b0ff;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
 box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
    text-decoration: none;
    border-bottom: 1px dotted #35b0ff;
}

Using It In Your Blog

The box can be used anywhere , due to its css coding.Any amount of data can be fitted into it. 

Pure CSS BOX 
This is the content of the infobox. It is made with pure CSS - no images. Of course, you can change the colour of the background and header to match your site's theme.
Pretty cool, huh?

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.