Saturday 8 September 2012

Expand/collapse Your Comment Box In Blogger With jQuery

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

create an animated gif

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.
  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Click Expand Widget Templates
  6. 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(){ 
    
    $(&quot;.toggle_container&quot;).hide(); 
  
    $(&quot;h3.trigger&quot;).click(function(){ 
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    }); 
  
}); 
</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....
Continue reading →
Friday 7 September 2012

Make a Button Badge For Blogger To Promote ur Blog

1 comments
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.

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:
  1. Enter ur Button Badge name
  2. 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.
  3. Keep clicking the "Render logo " button to see live previews
  4. Now right a small abbreviation for you blog e.g: bloggers     (LEFT SIDE TEXT)
  5. And right your main keyword on the RIGHT SIDE TEXT e.g: crunch
  6. 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.
  7. Finally Upload the image on blogger.


    Check This Post To Promote Ur Blog
Continue reading →

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

1 comments
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.

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">
&lt;a href="Your Blog’s URL" title="Your Blog’s Title" style="text-decoration:none;border:0;"&gt;
&lt;img src=" Url of Ur  Site logo of your blog " alt="Your Blog’s Title" style="border:0" /&gt;
&lt;/a&gt;</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">
&lt;a href="Your Blog’s URL" title="Your Blog’s Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url of Ur  Site logo of your blog" alt="Your Blog’s Title" style="border:0" /&gt;
&lt;/a&gt;
</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 
Continue reading →

luanch (bloggers crunch)

1 comments
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  
Continue reading →