Bloggers Crunch

Expand/collapse Your Comment Box In Blogger With jQuery

noreply@blogger.com (Danish Fareed) — Sat, 08 Sep 2012 18:26:00 +0000

Hello Readers Iam Back With New jQuery Effect In My Previous Post I Disqussed About How To Make Buttun Badge

What Is Expand/collapse

Blogger comment form is the only section in blogspot blogs that still irritates users a lot. After a successful customization We Make This Expand/collapse For Blogger Comments Like Ours

With This jQuery Effect U Can Easily Hide Your Comment Box

U Can See Below How Its Working Its Very Cool

How To Install on blogger

The installation guide is extremely simple. We have kept the steps as clear as possible. You just need to copy and paste the codes as guided. Lets get to work now.

Go To Blogger > Template
Backup your template
Click Edit HTML
Click Proceed
Click Expand Widget Templates
Just below <head> paste the following code:

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

7. Now search for ]]></b:skin> and just above it paste the following CSS code

/*----- Expand/collapse Comment Box by www.bloggerscrunch.blogspot.com ----*/

h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/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;
}

To change the width of the button just edit: 518px
To change the color, font size, font type of the text "Click here to add Comment" edit the highlighted part of the code.

8. Next search this:

<b:includable id='comment-form' var='post'>

9. Just below it paste the following code:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>

<div class='block'>

10. Now Search For This </b:includable> And Just Above paste this code:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://bloggerscrunch.blogspot.com/search/label/Blogger%20Widgets' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>
</div>

11. Save your template and all done!

For More Blogger Tricks Like This One Vist Our Blog Frequently And Stay Conneted With Us

I Hope You Like This.. If You Have Any Questions Regarding This (Expand/collapse Comment Box Effect) Comment Below ..

Dont Forget To Share Your Reviews Below....

Make a Button Badge For Blogger To Promote ur Blog

noreply@blogger.com (Danish Fareed) — Fri, 07 Sep 2012 22:12:00 +0000

In My Previous Post I Disqus About Support Us Widget
Now the topis is make Button badge for blogger

You have seen many blogs and directories using a small button for their promotion. You can see one for Bloggers crunch too. This micro button comes in 80X15 pixels in size. I would create such buttons using Photoshop but amazingly thanks to cootext you can now create a button online easily. The button maker tool provides you with multiple options of making a good looking button or badge for your blogger blogs or wordpress blogs. You can choose border style, background colors, font type and text. This tool is extremely easy to use and no expert tech skills are required to design a button. However I will be sharing some tips which could be helpful for most of you.

Make a Button Now!

How to Design a good looking Button?

The tool lets you create "XHTML valid" micro buttons (80x15). We also use the larger sized 88x31 button instead. Follow these tips:

Enter ur Button Badge name
To change a color, simply click on a particular box(where color code is mentioned) and then drag your mouse over the Color Picker tool to choose your preferred color.
Keep clicking the "Render logo " button to see live previews
Now right a small abbreviation for you blog e.g: bloggers (LEFT SIDE TEXT)
And right your main keyword on the RIGHT SIDE TEXT e.g: crunch
Click on AUTO WIDTH also ucan set manual

When you are satisfied click the Render Logo Button button and then right click the image to save it.
Finally Upload the image on blogger.

Check This Post To Promote Ur Blog

How to use this button to promote your blog?

Support us/Link To me widget Badge (1 Click Add Button)

noreply@blogger.com (Danish Fareed) — Fri, 07 Sep 2012 20:55:00 +0000

This Is My First Widget post in this blog

Support us widget /Link to me widget lets your visitors easily add your blog’s link to their blog on site just by clicking a button.

Only you have to do is add your links to this widget and then it will become easy users who want to link to you.

The cool thing is that its just a Click the button thing to do.

For this you will require a small logo of your site which could fit in your sidebar. 125X125 sized logo will work. Upload the logo to the web and get its URL.

Here Is My Post On How To Make Button Badge For Blogger

Copy the below code to your Text editor.

<p>If you like this blog,then link back to me.<br/>
This is what you will see.</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="Your Blog URL" title="Your Blog’s Title">
<img alt="Your Blog’s Title" style="border: 0px;" src=" Url of Ur Site logo of your blog "/></a>
</div>
<textarea rows="3" cols="30">
<a href="Your Blog’s URL" title="Your Blog’s Title" style="text-decoration:none;border:0;">
<img src=" Url of Ur Site logo of your blog " alt="Your Blog’s Title" style="border:0" />
</a></textarea><br/><br/>

Optionally use this Widget installer to add this link to your blogger blog.

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input style="display: none;" value="My Favourite Site" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
<a href="Your Blog’s URL" title="Your Blog’s Title" style="text-decoration:none;border:0;">
<img src="Url of Ur Site logo of your blog" alt="Your Blog’s Title" style="border:0" />
</a>
</textarea><br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

Replace all the bold lines with the specified information.Now your code is Ready.Copy the code

Now go to Blogger >> Layout>> Add a gadget >> HTML/JavaScript and paste the code and save it.

Dont forget To Comment

luanch (bloggers crunch)

noreply@blogger.com (Danish Fareed) — Fri, 07 Sep 2012 07:03:00 +0000

Hello World This is My a new blog about Tech/blogging tips and Much more.....

Here U can Find. Blogger Widgets&Plugins,Seo Tips,Blogging tips,Tech News,Facebook Tips& Tricks,ect...

Iam Not new to Blogging I have 1 Blog About Hacking ProHackersDen
Now Iam Thinking To Help People Who Have Blogs. To Make There Blog More Stylish and Beautifull.
And Seo Optimized .......

Who Iam ?

My Name Is Danish Fareed Iam From India
I Love Blogging&Hacking
Iam 17yrs Old
Follow Me On Facebook