4 Style Slide Out Status Box

DEMO HERE

Assalamualaikum and hi readers... Today, I would like to make a tutorial on 4 style slide out status box. Click on demo here to see the example. All the design was created and coded by myself. Please do not copy this tutorial without a proper credit. All the style are optimized for Chrome, Firefox and IE browser.

1. Firstly, Log into your blogger account.
2. Go to Dashboard > Layout > Add a Gadget > HTML/JavaScript
3. Copy any code below based on the style that you want and paste it on the content section of the HTML/Javascript widget.
4. If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

STYLE 1 : Simple.

<style>

.hover {

border-radius: 0px 15px 15px 0px;

width:10px; height:102px;

text-align:center;

padding:10px 15px;

font:17px Century gothic;

font-weight:bold;

margin-top:-8px;

margin-left:206px;

background-color: #F2B1A9; 

color:#FFFFFF; 

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

#stat {

position:fixed;

border:2px solid #F2B1A9;

width:200px;

left:-220px;

top:70px;  /*the position of slide box minimum 0*/

height:106px;

padding:6px;

background-color:#FFD9CF;

color:#333333;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

#stat:hover {

left:0px;

}

.text {

padding:4px;

height:72px;

margin-top:-110px;

text-align:left;

overflow-y:scroll;

overflow-x:hidden;

border:2px inset #F9D2CC;

font:12px Century Gothic;

color:#444444;

background-color:#FEF0ED;

}

.date{

float:center;

margin-top:2px;

border-radius:5px;

font:11px Century Gothic;

text-align:center;

padding:2px;

background-color:#FFF8F7;

width:50%;

}

</style>

<center><div id="stat"><div class="hover">

H<br />o<br />v<br />e<br />r</div>

<center>

<div class="text">YOUR STATUS HERE</div>

<div class="date">DATE<div>

</div></div></div>

</center>

STYLE 2 : Flower.

<style>

.hover {

text-align:center;

margin-top:60px;

margin-left:210px;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

#stat {

position:fixed;

width:200px;

left:-200px;

top:70px; /*the position of slide box minimum 0*/

height:105px;

border-radius:0px 50px 50px 0px;

border-right:20px solid #baf3b5;

padding:6px;

background-color:#eddaa8;

color:#333333;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

#stat:hover {

left:0px;

}

.text {

padding:4px;

height:90px;

width:90%;

margin-top:-58px;

text-align:left;

border:2px solid #F9D2CC;

border-radius:0px 30px 30px 0px;

font:12px Century Gothic;

color:#444444;

background-color:#FEF0ED;

}

#flower1 {

font:35px tahoma;

color:#cfa9e3;

position:absolute;

margin-top:-64px; margin-left:3px;

}

#flower2 {

font:45px tahoma;

color:#E9967A;

position:absolute;

margin-top:-44px; margin-left:8px;

}

#flower3 {

font:35px tahoma;

color:#cfa9e3;

position:absolute;

margin-top:-8px; margin-left:3px;

}

#flower4 {

font:25px tahoma;

color:#a1cae7;

position:absolute;

margin-top:19px; margin-left:-8px;

}

#flower5 {

font:25px tahoma;

color:#a1cae7;

position:absolute;

margin-top:-75px; margin-left:-8px;

}

</style>

<center><div id="stat"><div class="hover">

<div id="flower1">✿</div><div id="flower2">✿</div><div id="flower3">✿</div>

<div id="flower4">✿</div><div id="flower5">✿</div>

</div>

<div class="text">YOUR STATUS HERE</div>

</div></div>

</div>

</center>

STYLE 3 : Bear.

<style>
.hover {
text-align:center;
margin-top:60px;
margin-left:210px;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#stat {
position:fixed;
width:200px;
left:-215px;
top:70px; /*the position of slide box minimum 0*/
height:105px;
border-radius:0px 70px 70px 0px;
border-right:55px solid #F0DFAC;
padding:6px;
background-color:#F0DFAC;
color:#333333;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#stat:hover {
left:0px;
}
.text {
padding:4px;
height:88px;width:90%;
margin-top:-98px;
text-align:left;
overflow-y:scroll;
overflow-x:hidden;
border:2px solid #FAE9BA;
font:12px Century Gothic;
color:#444444;
background-color:#FFECE4;
}
#ear1 {
background-color:#F0DFAC;
height:40px; width:35px;
margin-top:-67px;margin-left:25px;
border-radius:50px 100px 100px 50px;
-webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg);transform: rotate(-35deg);
}
#ear2 {
background-color:#F0DFAC;
height:40px; width:35px;
margin-top:35px;margin-left:25px;
border-radius:50px 100px 100px 50px;
-webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg);transform: rotate(35deg);
}
#eye1 {
background-color:#777777;
height:10px; width:10px;
margin-top:-40px;margin-left:12px;
border-radius:100%;
}
#eye2 {
background-color:#777777;
height:10px; width:10px;
margin-top:-53px;margin-left:12px;
border-radius:100%;
}
#nose {
background-color:#C09E89;
height:15px; width:10px;
font:20px arial;
font-weight:bold;
border-radius:100%;
margin-top:10px; margin-left:2px;
}
#lobe1 {
background-color:#D6C0A3;
height:20px; width:15px;
margin-top:-58px;margin-left:38px;
border-radius:50px 100px 100px 50px;
-webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg);transform: rotate(-35deg);
}
#lobe2 {
background-color:#D6C0A3;
height:20px; width:15px;
margin-top:56px;margin-left:38px;
border-radius:50px 100px 100px 50px;
-webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg);transform: rotate(35deg);
}
</style>
<center><div id="stat"><div class="hover">
<div id="ear1"></div><div id="ear2"></div><div id="eye1"></div><div id="eye2"></div>
<div id="nose"></div><div id="lobe1"></div><div id="lobe2"></div>
</div>
<div class="text">YOUR STATUS HERE</div>
</div>
</center>

STYLE 4 : Girl.

<style>
.hover {
text-align:center;
margin-top:60px;
margin-left:210px;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#stat {
position:fixed;
width:200px;
left:-215px;
top:70px; /*the position of slide box minimum 0*/
height:105px;
border-radius:0px 70px 70px 0px;
border-right:75px solid #FFF3D4;
padding:6px;
background-color:#C9E3FF;
color:#333333;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#stat:hover {
left:0px;
}
.text {
padding:4px;
height:88px;width:90%;
margin-top:-110px;
text-align:left;
overflow-y:scroll;
overflow-x:hidden;
border:2px solid #FAE9BA;
font:12px Century Gothic;
color:#444444;
background-color:#FFECE4;
}
#curve1 {
background-color:#F0DFAC;
height:30px; width:55px;
margin-top:-78px;margin-left:0px;
border-radius:70px 100px 0px 30px;
}
#curve2 {
background-color:#F0DFAC;
height:30px; width:55px;
margin-top:80px;margin-left:0px;
border-radius:30px 0px 100px 70px;
}
#hair1 {
background-color:#F0DFAC;
height:70px; width:35px;
margin-top:-10px;margin-left:45px;
border-radius:0px 100px 100px 0px;
-webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg);transform: rotate(25deg);
}
#hair2 {
background-color:#F0DFAC;
height:70px; width:35px;
margin-top:-78px;margin-left:40px;
border-radius:0px 100px 100px 0px;
-webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);transform: rotate(-25deg);
}
#eye1 {
background-color:#777777;
height:10px; width:10px;
margin-top:-50px;margin-left:22px;
border-radius:100%;
}
#eye2 {
background-color:#777777;
height:10px; width:10px;
margin-top:-56px;margin-left:22px;
border-radius:100%;
}
#mouth {
background-color:#EBA991;
height:15px; width:10px;
font-weight:bold;
border-radius:100px 0px 0px 100px;
margin-top:10px; margin-left:2px;
}
#flower {
font:35px tahoma;
color:#E9967A;
position:absolute;
margin-top:-120px; margin-left:42px;
}
#dot {
width:10px; height:10px;
background:#f3e971;
border-radius:100%;
position:absolute;
margin-top:-99px; margin-left:53px;
}
</style>
<center><div id="stat"><div class="hover">
<div id="curve1"></div><div id="curve2"></div><div id="eye1"></div><div id="eye2"></div>
<div id="mouth"></div>
<div id="hair2"></div><div id="hair1"></div>
<div id="flower">✿</div><div id="dot"></div>
</div>
<div class="text">YOUR STATUS HERE</div>
</div>
</center>

The Notes :
Red Text : Background color
Blue Text : Border color
Orange Text : Position of slide box
Lime Text : Text color
Purple Text : Hover Text
Fuchsia Text : Your status
Green Text : Date
Yellow Highlighted : Flower color
Red Highlighted : Eye color
Blue Highlighted : Nose color
Orange Highlighted : Earlobe color
Grey Highlighted : Hair color
Fuchsia Highlighted : Mouth color
Green Highlighted : Center of flower color

.....PREVIEW AND SAVE.....

Okay, that's all for now.. Do comment if you think that this tutorial is useful.