Step 1: Open your Blogger Dashboard and navigate to Edit HTML and check on Expand Widget Templates
Step 2: Now Press Ctrl +F 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/AVvXsEghyHqcSco_zbTftJmxH0EhACTrvsUbeoHEowqx-sPgOmACkdx7yMklXIIjWXL-FkZ0JBmtzoGQEkDveQ63l2IxAt2eDsABF6qmcm1_G-rFUL7t1Yo9eBwwhY04MGjsWZjgqkJ95dc2aTEl/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/AVvXsEgj2TNdQVY1PlqvgDPdHWw5SR9o5HlxkZgfKOK7fKQb2zbrGxVoB1bsEYvRlo_Izysy3hqZzeVtCPRJBOQ4DsFFPXR9UgLGT2ZjbthrYpsSAyl9UacnKnN0GcTq8U-6sk62cXFc5-zTxd7Y/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/AVvXsEgf30IU2MiKGBMsw490PxKSBCplkbRAKFQJ-k5AXP1FlZozk7CdgXui7Q9JqL4vK5nl3f0I8fqeIhlkWfGD2xEi82wtHd82Ccs3pdLfCekJnJ15KepE1wWRhtGmtIrtG-ZKZIN05OrKK-Ou/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
<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
Your article cleared the doubts I had before in this field..... Make Money , Blogging Tips
ReplyDelete(k) :d
cheap jimmy choo trainers, combining elegant style and cutting-edge technology, a variety of styles of cheap women jimmy choo trainers, the pointer walks between your exclusive taste style.
ReplyDelete