Create menubar with close and open button

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>

Simple Feedback Form Using jQuery And CSS For Blogger

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'>

    <!-- Five color spans, floated to the left of each other -->

    <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'>

        <!-- The arrow span is floated to the right -->
        <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 &lt;div id='main-wrapper'&gt; and place the below before &lt;div id='main-wrapper'&gt;

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'/>

Stickybar Tutorials

Step 1:Lets start with the HTML section which has the content to be display on your blog or website.

<div id='stickybar'>
        Trending: <a href='YOUR POST URL'>Your blog title goes here</a>
<input type='button' id='closebtn' >
</div>

WordPress user add it to the footer before </body> ,change the information appropriately and save it. Blogger users can also follow the same process.

Step 2: In order to give a visual appeal to the sticky bar, we are going to design the sticky bar using CSS.

#stickybar {
        border-bottom:1px solid #ECF1EF;
        background:#151715;
        font-size:16px;
        color:#FFF;
        padding:10px 20px;
        position:fixed;
        bottom:0;
        left:0;
        z-index:2000;
        width:100%;
        text-align:center;
}
#stickybar a {
       color:#FFF;
       text-decoration:none;
}
#closebtn {
       background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVkNbpDSg5d8sXXpC2bzY5zjFlmxjsrPLXmG0gdNsnpYDB-_-zzMVJQiRFMo-GJXvpy5O542KPj8USurSzlG982sDj9GRxn_BxTBYXlo2n-lYgSsua_BrCbeKdUKx7m-rn_5yx5C-aAaI/s1600/close.png') top no-repeat;
       border:none;
       margin-left:15px;
       position:absolute;
}


If you want to change the background color from default black to any color which you like, use our color code picker and change the color code values for the background.

Step 3: Now in order to achieve the opacity and close button action, we are using this jQuery code. Before adding this ensure that you already have jQuery initialized on your blog. If not add <script src="http://code.jquery.com/jquery-1.5.js"></script> before </head>

<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#stickybar').fadeTo(fadeSpeed,1); }, stbar = function() { $('#stickybar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#stickybar').bind('mouseenter',sibar);
$('#stickybar').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#closebtn').live('click', function(event) {
$('#stickybar').toggle('show');
});
})();
});
</script>

If you want to speed up the fading speed and the percentage of opacity, change the values under //settings in the code. WordPress and Blogger users ensures that the code is placed within </head>

Subscribe to: Posts (Atom)
 
Powered By Blogger ©2011 - White blending ads Template | Design by: Rea Alfa The Doctor Template| Sponsored by: Freia media