White blending ads Template: CSS

Instructions for Blogger
1. Search for ]]></b:skin> and paste the following CSS code immediately before it.

#menubar {
    border-bottom:3px solid #ECF1EF;
    background:url('bg1.png') repeat-x;
    font-size:14px;
    font-family: Arial, Helvetica, Sans-serif;
    color:#FFF;
    padding:10px 0px;
    position:relative;
    top:0;
    left:0;
    z-index:2000;
    width:100%;
    text-align:center;
    height:20px;
}
#menubar a {
    color:#FFF;
    text-decoration:none;
}
#closebtn {
    background:url('close.png') top no-repeat;
    border:none;
    margin-left:15px;
    position:absolute;
    cursor:pointer;
}
#menu {
    cursor:pointer;
    position: relative;
    z-index: 1000;
}

/* Optional for subscribe box */

.menubar {
    margin: 0pt auto;
    width: 600px;
}
.menubar form {
    float: left;
    margin: 1px 10px 0;
    width:275px;
}
.menubar .sbox {
    border: 1px solid #555555;
    border-radius: 5px 5px 5px 5px;
    color: #888888;
    float: left;
    margin: -2px 0 0;
    padding: 3px;
    width: 155px;
}
.menubar     .go {
    float: left;
    margin: -2px 0 0 10px;
    height: 24px;
}
.menubar #closebtn {
   margin-left: -20px;
}

2. Add the following jQuery scripts before closing </head> tag.

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    function anim(duration){
        $('#menu').animate(
            {height: 'toggle'},
            {duration: duration, specialEasing: {height: 'easeOutBounce'}}
        );
    }

    $('#closebtn').click(function() {
        $('#menubar').slideUp();
        anim(800);
    });

    $('#menu').click(function() {
        anim(500);
        $('#menubar').slideDown('slow','easeOutBounce');
    });
});
</script>

3. Add the HTML code immediately after opening <body> tag.

<div id="menubar">
        <div class="menubar">
            <span style="float: left; margin: 3px 0pt 0pt; font-weight: bold;">Get the latest updates from us for free</span>
            <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?thedoctortemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
            <input type="email" name="email" class="sbox" placeholder="Your email address here!"/>
            <input type="hidden" name="uri" value="thedoctortemplate"/>
            <input type="hidden" value="en_US" name="loc"/>
            <input type="submit" value="Subscribe" class='go'/>
            </form>
            <input type='button' id='closebtn' />
        </div>
</div>
<div id="mint" style="display:none;position:absolute;top:0;right:10px;">
    <img src="ribbon1.png" />
    <input type='hidden' id='mint' />
</div>

Its been a long time I written a tutorial for Blogger. All these days you can see me into Blogger templates and WordPress themes, but I love creating tuts more than making themes or templates whatever. Ok, so today I will take to you to a simple feedback form tutorial for Blogger users using the jQuery and CSS. The original source of this tutorial was from Tutorialzine, we made some modification, changed the form method and made it work smoothly for blogger. So lets get started.

Step 1: Open your Blogger Dashboard and navigate to Edit HTML and check on Expand Widget Templates

Step 2: Now search for ]]></b:skin> and paste the below code before ]]></b:skin>

#feedback{
    background-color:#9db09f;
    width:310px;
    height:330px;
    position:fixed;
    bottom:0;
    right:120px;
    margin-bottom:-270px;
    z-index:10000;
}

#feedback .section{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhIzJKecJ69wmz2OHcbSeA5xmuUwtJSOhl1o47QOQzOKoROAj0IWAoB5XMZRyezHz-RbLOJ6S3pXrpyvc5xt05QH7RzpekMsLXFNgDB1AM1Lr7mfaIbf_gcCFoj4y8vsAXoDDfi6h6qlx/s1600/bg.png') repeat-x top left;
    border:1px solid #808f81;
    border-bottom:none;
    padding:10px 25px 25px;
}

#feedback .color{
    float:left;
    height:4px;
    width:20%;
    overflow:hidden;
}

#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}

#feedback h6{
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXINYfZpPrpCXYJpfCQA1JJgjbjmYU1N9qKu_IOomJ4Cw1ufhFZLm6x7mJKi8dD2d4M_-rOdbRwK6pCPqeLVNrcZCC4fB6BFiKg3nfSEXE_jmNYJ25IrrWJym81AyXLUtroJgisterUgOi/s1600/feedback.png") no-repeat;
    height:38px;
    margin:5px 0 12px;
    text-indent:-99999px;
    cursor:pointer;
}

#feedback .message{
    font-family:Corbel,Arial,sans-serif;
    color:#5a665b;
    text-shadow:1px 1px 0 #b3c2b5;
    margin-bottom:20px;
}

#feedback .arrow{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIL57IU_-dEfWPMMc1vEUSVznFXF9Wi4VEQg2pWS7ypkl1rpFBrquqrnoENBFRsHCZkdxl85LAD5GigdZcNCPB2O-frmvf38uRmoy0L09Qqwn8QBvz1tBMRumMa2lAO2FQcZLutslLS-sd/s1600/arrows.png') no-repeat;
    float:right;
    width:23px;
    height:18px;
    position:relative;
    top:10px;
}

#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}

<div id='feedback'>

    

    <span class='color color-1'/>
    <span class='color color-2'/>
    <span class='color color-3'/>
    <span class='color color-4'/>
    <span class='color color-5'/>

    <div class='section'>

        
        <h6><span class='arrow up'/>Feedback</h6>
<p class='message'>Drop in your suggestions about our blog. We appreciate your feedback.</p>
FORM SCRIPT GOES HERE
    </div>
</div>

Step 3: Search for <div id='main-wrapper'> and place the below before <div id='main-wrapper'>

Step 4: In order to ensure the smoothness when its clicked, we are adding a little script. If jQuery is initialized previously initialized in your blog template, add only the second script after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='http://sites.google.com/site/bloggermint/script.js'/>

White blending ads Template

Top Case

Blog Archive

Create menubar with close and open button

Simple Feedback Form Using jQuery And CSS For Blogger

Labels

Blogroll