Wednesday, 3 August 2016

4 Style Slide Out Status Box


Customize status box


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

Status box
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>

Status box
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>

Status box
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>

Status box
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.

13 comments: