This widget was created by Mybloggertricks and fully design and customize by Realcombiz. The widget will slide out smoothly when you click on the black long button showing the hiding comment box due to the simple jquery effect that was included. This tutorial was a bit techy which require all your attention for you to successfully add the widget to your blog. If you are ready, let's get started.
How To Implement The Effect To Your Blog
- Go to your blogger dashboard
- Clcik on "Design" > "Edit HTML" > back up your template
- Mark/Tick "Expand Widget Templates"
- Use ctrl F to find <head> and paste the following code after/below <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
- Search for the next code ]]></b:skin> and paste the following code above it
/*----- Comment Box Design By www.Realcombiz.com.com ----*/
h3.trigger {
background: url(http://i1175.photobucket.com/albums/r628/realonekazz/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
- If you wish to change the width of the button, simply edit width: 518px;
- Edit color:#A1A1A1; if you wish to change the color of your button, check here for 100's of hex color.
- Now search for the code below
<b:includable id='comment-form' var='post'>
- Now paste the following code below the code above
<h3 class='trigger'>Click Here To Add Comment</h3>
<div class='toggle_container'>
<div class='block'>
<div class='toggle_container'>
<div class='block'>
- Search for the following code, it would appear in the next few lines from the search above
</b:includable>
- Now paste the following code above the code above
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.realcombiz.com/2012/06/enpand-collapse-blogger-comment-box.html' style='color:#CAC8C8;'><i>Get This Widget</i></a></p>
</div>
</div>
</div>
</div>
After code placement, your final result should look very similar the image below.
Click "SAVE TEMPLATE" when you are done with your editing. Check your blog to see the great new changes you just apply to your blog.
Use the comment box if you find any difficulties in implementing this widget to your blog.
In my next post, i will be dropping a lot of tutorials on how you can customize/design your comment box, and for you not to miss any of this, simply subscribe to this blog now and receive all our latest post directly into your email, but you will have to confirm your request in your email before this can be enable. Remember to share this with friends/followers.
Enjoyed This Post? Subscribe For More Update!
Confused? Feel free to ask
Error Comes "Error parsing XML, line 600, column 3: The element type "b:includable" must be terminated by the matching end-tag ""."
ReplyDeleteTry to parse you html code here:Display Html Code In Your Blog-Html Parse Tool follow the instruction,,after finish copy your code and paste it back to your blog code..Thanks hope this will help you.
DeleteRegards:
BLOGGER HEROE
As Christmas is approaching, people are crazy about cheap swtor credits since lots of online credits suppliers are cutting price to celebrate this big holiday. But except for low price, you should take account safety into consideration. Then where should players go for swtor credits
ReplyDeleteCome on! There may be world ending in 2012 as mentioned in mayan prophecy. Hurry to seize the rest of the year and enjoy yourself in swtor playing. Need swtor credits, just buy swtor creditsonline.