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 fromTutorialzine
, 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 Press Ctrl+Fsearch 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/AVvXsEjcy79G7ne31D3KACLRilmiK4HdXy8iXmWdTJXG7b-xQKLBDyKBcwDkK5nJ9w0rbJQvWnjDEps0w85ChgIVC8n9V5Z-lHa48lnA-DfgUifkQs3ZKhtvzGNxM991NFoa4QZVQfKLmmpIqrr0/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/AVvXsEiXgXzOvf8lacDBfUubXnDVD4ZX5obx7ODySaDKE857q_GG0pCbcUbbHseEVr-M4vXM6XvatKx9BoAz5lR9kjFC5mHQg5an_21EfScvQ-R3mXxw4r9oPsu-Ychw_WHyWfe4PSn1ARt0WZvA/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/AVvXsEijriFo7SWiFEc_XDnUkSnDTDCRHEDkyVoRpLDkTLPQtw9BpmLu8_LVwP0Li-I1jHjS-oQZb5A1DF-aTW08d3jjO6oPSs3spGXC28801Jqiv7fJBUjzsq7s3GkBBp1LpcG98YvET7I9wpIM/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;}
Step 3: Now Press Ctrl+F Search for <div id='main-wrapper'> and place the below before <div id='main-wrapper'>
rnhckr<div id='feedback'>
<!-- Five color spans, floated to the left of each other www.rnhckr.com -->
<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 www.rnhckr.com-->
<h6>
<span class='arrow up'/>Feedback</h6>
<p class='message'>
Drop in your suggestions about our blog. We appreciate your feedback.</p>
WUFOO FORM SCRIPT GOES HERE
</div>
</div>
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'/><br/><script src='http://sites.google.com/site/bloggermint/script.js'/>
Step 5: This is the very important step. In order to add a form to the feedback form, I am using Wufoo forms to be integrated in the feedback form. So visit Wufoo website, create a free account. After creating the account, you will be taken to the form creator dashboard, now select paragraph text to insert it in the form
No comments:
Post a Comment