Mybloggertricks(MBT) like blogger comment(Expand/collapse)

In my previous posts, i have given you the most of tutorials regarding both Jquery function and Blogger Comment form customizations. The only drawback that can be noticed in both of these concepts is that the blogger comment form is still in its old traditional appearance and may be the blogger team not felt it more important to bring some extra features in blogger comment form. So i myself thought of merging these two concepts and give some special effect to blogger comment form.

Finally i decided to implement some sort of Jquery toggle function and make the blogger comment form more inspiring one and in the same aspect I choosed the Jquery Toggle effect on mouse click event for this and the live demo of it can be clearly viewed in the comment form of this blog

Implementing Jquery Toggle Effect

1. Go to blogger dashboard --> Template --> Edit Html ( Tick the Expand widget Template option).

2. Find for <head> tag and place the following peace of code just below it.

<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_box&quot;).hide();
$(&quot;h3.expand&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
</script>

Hint:-

h3.expand is the class for your comment form headline that expands the contents[toggle_box] upon the mouse click on it.

Here toggle_box is the class of your comment form contents i.e., the content that should be displayed when expanded.

Style for toggle element and its content box

3. Now find(Ctrl+F) for ]]></b:skin> and place the following peace of style code just above it.

/*----- Toggle Comment Form by http://truebloggertricks.blogspot.com ----*/
h3.expand {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97JOUcfEGwYEsnf6OdC3jmfTJd3290PJxuQ1IUHBwsAJm73R0APbNtXiQSRmhXWtoOYpP854H_h-LLGSKpk4voBSW0J3uPdXsFoqfejZ_UFzcqOk-kY07kJCcs1P5BGFb_p1EIAW7ZQA/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 1.4em;
font-weight: bold;
text-align:left;
border-radius:4px;
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_box {
padding-left:10px;
overflow: hidden;
clear: both;
}

Hint:-

The Css style for the visible,active header and the content box is specified above. You can however easily modify it as you wish.

Adding Html Code

4. Now find for the following code.

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

5. Paste the following peace of code just below it.

<h3 class='expand'>Click Here To add Comment</h3>
<div class='toggle_box'>
<div class='block'>

6. Paste two div closing tags just before its closing includable tag as shown below.

<b:includable id='comment-form' var='post'>
<h3 class='expand'>Click Here To Add Comment</h3> 
<div class='toggle_box'> 
<div class='block'>
<div id='bt-form'>
<a name='comment-form'/><br/>
<h4 id='comment-post-message'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='580px'/>
<data:post.iframeColorizer/>
</div>
</div> 
</div>
</b:includable>

7. Finally Save your template and view your comment form.

Spice up your blog like blogger template(clone)

After giving you a MBT template,I liked cloning template.After some days my user asked me to clone spiceupyourblog template.Then I saw that site and collected information about it.Spiceupyourblog has users more than 4k and it was administrated by Paul crowe.That site was dealing with blogger tips and tricks and He also having a another blog which contains blogger template.Then I stared to convert the template.But it is harder than MBT because I Cannot find the source of that template.Then i used another trick to clone that template.I splited that template into many parts and replaced with mine then i got a beautiful spiceupyourblog template!.First see the demo.

Live Demo

Speacial features:

• Build with SEO
• Attractive Design
• Superb ads
• User attractive
• Subscription widget
• Left Sidebar
• Auto read more for webmasters
• Best for Adsense
• 93 out of 100 in google page rank
• Professional
• Custom fonts

Note:

       If you are a true and genuine blogger,Kindly please leave the footer link.This may help many bloggers like you.

Download Now
 

If you are satisfied with this template,Kindly Do this,

• Like us on Facebook.
• Follow Us on Twitter .
• Subscribe to our Updates by filling the form below the post where it says "Enter Your Email Here"and click on submit.
• Join this site with google connect            

After downloading this template kindly read this:

• Ads effect like spiceupyourblog
• Being viewed widget like spiceupyourblog
• Subscription widget like spiceupyourblog
• Comment system like spiceupyourblog in any blogger blog
• Spiceupyourblog like floating sharing widget for blogger

How to Remove "H" Watermark Logo from Hello Bar

Hello Bar as we already posted about that in earlier post is the best notification bar used for urgent notices you wanted to share with your readers, give them some amazing latest news and other stuff but one problem with Hello Bar is that if you go for the free version than you will that H Logo on the left hand side being loaded every time when your reader visits your blog. 

So that limitation can be removed if you go for the premium version but of you wanted to get it removed in this free version than we found an amazing trick to do that and it works simply awesome. So now results we will get below is the demo image I just tried on my website and it worked.

So now you can see that H is removed and it looks as you are a premium member for Hello Bar, so now if you want your H Logo to be removed than check below tutorial.

• We are assuming that you are already using Hello-Bar in your website, if not than you can create an acc and generate code at hellobar.com.
• Now to remove that little H logo from Hello Bar we just need to add a simple CSS code manipulating entire hello bar code.
• So login to Blogger > Template > Edit HTML and press Ctrl + F and make a search for </head> tag and paste the below code right above it.

  <style type='text/css'>
  a#hellobar-logo, a#hellobar-logo:link, a#hellobar-logo:visited {
  display:none}</style>

• Now just click on Save Template and than refresh your blog and see the effect.
• Hope this works for you, if you liked this tutorial than make sure to share this post with all your friends by liking it below :)

Professional facebook likebox

Facebook is a big social site.There are millions of users of Facebook .So every blog must have a facebook like box to get popularity and traffic.There are many ways to add facebook likebox in your blog.But today I am giving a facebook likebox which looks soo cool and every one likes them.

Live Demo:

Add  Professional Facebook Like Box Widget In your Blog

Adding this widget is very easy, just follow the steps below.

• Go to your Blogger Dashboard and select the blog in which you want to add this widget.

• Go to Design > Page Element.

• Add a new HTML/Javascript gadget and paste the below code in that gadget.

<style>.truebloggertricksFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.truebloggertricksFB, .truebloggertricksFB:before, .truebloggertricksFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.truebloggertricksFB:before, .truebloggertricksFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.truebloggertricksFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>

<div class="truebloggertricksFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="http://www.facebook.com/TrueBloggerTricks" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2FTrueBloggerTricks&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

• Now replace the Facebook page URL with yours. URL is given in the code as https://www.facebook.com/TrueBloggerTricks. Paste your URL in place of Techsenser which is given two times in the code.

• Now save your gadget and view your blog.

How to list recent post titles by label

Do you want to list all or your most recent posts according to categories/labels? Well then, you’ve come to the right tutorial.
I’ve seen people use a LinkList gadget to accomplish this. However this method requires them to MANUALLY add each post link to the gadget every time they publish a post with the specified label. Not good.

We’re not going to do that, because we have a better, more elegant solution. Once added, the list will update itself automatically. The widget takes your blog’s label-specific feed, in JSON format and turn it into a list using Javascript. It other words it does the listing for you.
No more slow and tedious manual updating and rearranging. Sounds good? Here we go:

1. Installing the first list

1. Go to Layout Design>>Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Enter a label as the title of your widget.
5. Copy the code below and paste it inside the content box.
6. Click Save.

<!-- Recent Posts by Label Start --> <!-- code by http://truebloggertricks.blogspot.com/ --> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="YOUR_BLOG_URL/feeds/posts/summary/-/YOUR_LABEL?max-results=SHOW_HOW_MANY&alt=json-in-script&callback=recentpostslist"></script> <span style="font-size: 80%; float:right;">Get this? <a href="http://truebloggertricks.blogspot.com/2012/09/how-to-list-recent-post-titles-by-label.html">widget</a></span> <!-- Recent Posts by Label End -->

• Replace YOUR_BLOG_URL in code line 21 with your own blog URL. For example if you were to list posts from truebloggertricks.blogspot.com/, you would have to replace it with http://truebloggertricks.blogspot.com/ (without the trailing slash).
  
• Replace YOUR_LABEL (line 21) with the label. Labels are case sensitive, make sure you get it right.
  
• Replace the value of SHOW_HOW_MANY (line 21) with the number of posts you want to display. To show all posts, use 500 (I believe 500 is the maximum. If you have more than 500 posts under a certain label, do leave a comment, we’ll work something out).
  
• The titles are bulleted due the use of ordered list <ul>. If you want them numbered instead, just replace ul (in line 5 and 18) with ol.

2. Adding subsequent lists

You need to add a HTML/Javascript gadget for each label. Repeat the same steps above for each label, with a slight difference:

• You don’t have to copy the whole code. Just copy the codes in lines 21 and 22 into each gadget.
  
• Make sure your first list (which contains the full code) is positioned on top of all other lists.

Enjoy!

Mybloggertricks(MBT) like blogger template(clone)

Every one like mybloggertricks blog which is well known for blogger tips and tricks.That blog has more than 13k facebook users and more than 13k RSS users.Mohammad Mustafa Ahmedzai the owner of MyBloggerTricks, he is a very loyal and good author he always presents us with beautiful templates and widgets for bloggers and other blogger resources and SEO tips and tools. But he never shared his good looking template with anyone.In begining of this blog I refered that site to build my blog.It was a beautiful tech blog with super SEO template.Every one has a feeling to get that template.I also had that feeling to that template for my blog.I started to search for that template in all search engine but I cannot the real one.But I got a big teasure in find this.That teasure is MBT's churuch template,which look alike a mbt's blog.I downloaded that template and started to modify into real mbt's template.It took one full week to make template.Finally I did this!

Live Demo

Benefits of this template:

• Fully SEO optimised
• Auto read more for webmasters
• Related post widget
• Mouse over effect blockquote
• Best template for ads
• 3 Column Footer 
• 3 Columns
•  Professional
• Full image for header 
• 90 score out of 100 in page speed

Note:

       If you are a true and genuine blogger,Kindly please leave the footer link.This may help many bloggers like you.

Download Now

If you are satisfied with this template,Kindly Do this,

• Like us on Facebook.
• Follow Us on Twitter .
• Subscribe to our Updates by filling the form below the post where it says "Enter Your Email Here"and click on submit.
• Join this site with google connect

After downloading read this:

• MBT like blogger comment

Christmas Snow Falling Effect For Blogger

In this post we have a very cool effect you can use to Spice Up Your Blog over the Christmas.With just a small piece of code you have Snow Flakes gently falling down your blog.The Snow Fall effect we use is simple and wont disrupt the readers.Before you add the Snow to your blog you can check out the demo.


Update - This effect will work on all custom or older templates but unfortunately not with templates from the Blogger Template Designer.

Add Snow Fall Effect To Your Blog

Adding the effect is easy and can be done in a few quick steps:

Step 1. Sign in to your blogger.just click the below link.

(You don't need to give the gadget a title just leave title area blank)

Step 3. Save  and check out your cool snow Effect.