Tutorial: Cool CSS Boxing Style

hi there..

here i post a tutorial for a new cool CSS boxing style.. the example below will show you the stylish look for this tutorial..

if i got an info to tell you, i will use this cool CSS style..

if i got an available downloading file, i will use this cool CSS style..

if i got a note to be posted, then i will use this cool CSS style..

if i got to alert something, then i will use this cool CSS style..

if i got a warning to tell, then i will use this cool CSS style..

interested? if do, come read and follow this simple step-by-step tutorial.. i will instruct you to how to install or apply this CSS boxing style into your blog.. don't worry about your template.. it is user friendly in which either you are using Modern Template or Classic Template, you are able to put inside your HTML code without any worries.. but indeed recommended you to using the Modern Template instead..

Click here to read more..

step #1:
copy the CSS code below,

#rec { margin:20px;padding:20px;}
.info {
border: 1px solid #4AB7FF;
font-size: 10px;
color: #191919;
background: #BFE5FF url(http://img24.imageshack.us/img24/1113/infozc.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 90%;
}
.warning {
border: 1px solid #FF8888;
font-size: 10px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #FFBFBF url(http://img4.imageshack.us/img4/5411/warningq.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 90%;
}
.download {
border: 1px solid #C2E069;
font-size: 10px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #E5F2BF url(http://img707.imageshack.us/img707/2931/downloadg.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 90%;
}
.alert {
border: 1px solid #FFC875;
font-size: 10px;
color: #191919;
line-height: 125%;
background: #FFE5BF url(http://img830.imageshack.us/img830/6757/alert.gif)
no-repeat 5px 5px;
font-family: Verdana, sans-serif, "Courier New";
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 90%;
}
.note {
border: 1px solid #FFE375;
font-size: 10px;
color: #191919;
font-family: Verdana, "Times New Roman", Times, Georgia, serif;
line-height: 125%;
background: #FFF2BF url(http://img807.imageshack.us/img807/650/noted.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 90%;
}

do not worry about the images link.. it will automatically linked to my image database locally.. thus if you wanna change the link, you are free to upload it by yourself..

step #2:
go to your HTML blogger editor.. click Dashboard -> Layout -> Edit HTML.. then try to find the keyword ]]></b:skin> and make sure to paste it above.. if you are using Classic Template, paste anywhere inside your CSS tag class style.. it usually start with code; <style type="text/css"> and paste inside its area.. then save your template by pressing the Save Template button..

step #3:

how to posting it? it's very simple.. there are five (5) styles of cool CSS boxing, right? #1- info, #2- warning, #3- download, #4- alert, and #5- note.. so save it in anywhere on your computer storage, in case you forget the keyword.. here are the codes that you should apply in every time you wanna post for a new entry;

<div class="info">if i got an info to tell you, i will use this cool CSS style..</div>

<div class="download">if i got an available downloading file, i will use this cool CSS style..</div>

<div class="note">if i got a note to be posted, then i will use this cool CSS style..</div>

<div class="alert">if i got to alert something, then i will use this cool CSS style..</div>

<div class="warning">if i got a warning to tell, then i will use this cool CSS style..</div>


so how is it? simple right? still confused? if so, do not hesitate to ask me either in malay or english, i will reply your queries as soon as possible.. good luck!

credit: a very big thanks to fyzue for this coolest tutorial!

PERHATIAN! Aktiviti PLAGIAT (copy & paste) sesuatu artikel tanpa pengetahuan dan kebenaran penulis adalah satu aktiviti/perbuatan yang TIDAK BERMORAL!

Ads: (Please Click!)