TUTORIAL™

.first {
    margin-top: 60px;   
}
.slide-up{
 width: 100%;
 box-shadow: 
  0px 0px 0px 1px rgba(155,155,155,0.3), 
  0px 2px 2px rgba(0,0,0,0.1);
    position: fixed;
    top:0px;
}
.slide-up{
 width: 100%;
 box-shadow: 
  0px 0px 0px 1px rgba(155,155,155,0.3), 
  0px 2px 2px rgba(0,0,0,0.1);
    position: fixed;
    top:0px;
}
.slide-up label {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8i3CnzjtFb5EovAx-MGOArR0DbofN1wR7ym0K5v85fUWP1eMYuKOlY7Gtx6rsxUjr1_U681S9uMmiO6KRXpZuheiCj2AKwJKPx2pCBglKTdqw4rIDP34K3TWxpPOQim8aZ5VJWdZj8pu/s1600/Turun+mas.png');
    background-repeat: no-repeat;
 padding: 5px;
 position: relative;
 display: block;
 height: 30px;
 cursor: pointer;
    border: 1px solid #CCC;
}
.slide-up label:hover{
    background-position: 5% 50%;
    background-repeat: no-repeat;
}
.slide-up input + label {
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.slide-up input:checked + label,
.slide-up input:checked + label:hover{
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1jms7UNEeSGOx-czyKUOa5IRlRUzy9sBoQjgC62ENIUhMLk4U6d9ygRLI3jRky6pyLNiIfQqdnb_low9K64R8ES8K22P7msekOPU26M5OKjpZGnwF6F4HuUpQsUze8nHQqG_nuKkeXqU/s1600/Naik+Mas.png');
 background-color: #Transparans
    background-repeat: no-repeat;
 color: #3d7489;
 box-shadow: 
  0px 0px 0px 1px rgba(155,155,155,0.3), 
  0px 2px 2px rgba(0,0,0,0.1);
}
.slide-up input{
 display: none;
}

.slide-up .menu{
 border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #800000;background: -webkit-gradient(linear, left top, left bottom, from(#800000), to(#F00));background: -moz-linear-gradient(top, #800000, #F00);
-webkit-box-shadow: 1px 3px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 3px 4px rgba(0,0,0,0.4);
box-shadow: 1px 3px 4px rgba(0,0,0,0.4);
overflow: hidden;
 height: 0px;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.slide-up .menu p{
 font-style: italic;
 color: #777;
 line-height: 23px;
 font-size: 14px;
 padding: 5px;
}
.slide-up input:checked ~ .menu{
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 height: auto;
} 
  

<div class='slide-up'>
            <div>
                <input id='slide-up' name='slide-up' type='checkbox'/>
                <label for='slide-up'/>
                <div class='menu'>
                    <p> <script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Lumayan Ada Komentarnya",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://bloggertutoria.blogspot.com/",
    postsperpage   = 2,
    numchars       = 380,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjIgvb7VKXfWrw2rSzucVVLJNCoQwiujdOP4bH0hVQqy1cJVDuLByAGRESTASJk8eL5W_Cl3G6bWBQpidPeEiznQ7aGWszuZ2W7t981ND_AyO_hGQGMGaFah1IHXdg95IRKh_IcvBBK4/s320/DSC00010.JPG";
</script><script src="http://selladrt.googlecode.com/files/Jembut%20Daftar%20isi.js" type="text/javascript"></script></p>
                </div>
            </div>
        </div>