6 Tips To Get Visitors To Join Your Forum

Having a forum is easy but having an active forum is hard but today we're going to post several tips for you which should help you making your forum into a busy forum.First of all you can create a forum for your blogger by clicking here.

1.Be Active : If you want your visitors to be active on your forum then first you should be active on your own forum. Visit it everyday reply peoples solve their problem and do what a real owner should do.Try to make at least one appearance in every thread on a new forum as long as it remains feasible to do so. This will let your visitors know that you're interested in all forum activity.

2.Visit Other Forums : If you have a forum about music then be a part of other music forums around the net and promote your forum. Don't advertise your forum directly unless you are in an advertising section,but you can promo your forum as a source of your information.

If you're an active user in other forums and peoples likes your content then they'll surely want yo visit your forum.

3.Encourage Forum Members : If the members you already have are happy with your community and find it helpful, they will probably be more than willing to encourage other people to join.Talk your forum members to share your forum with others and try to make it more popular.

Give your forum community an HTML link with text to copy and paste to make sharing a link simple. Use buttons that allow them to share a forum link with various social networks as well. If a forum member mentions sharing your forum somewhere, be sure to thank them and promote them.

4.Daily Contests : Run a few contests and games in your forum to make it a more fun loving forum.Host a contest requesting meaningful posts about a specific topic, and use the voting options that come with most forums to have the community vote on the winner or start a forum sharing contest . For prizes, you can give out anything from physical items to custom forum titles.

5.Promotion Always Encourages : If your have some really cool and active members in your forum then it's your job to promote them. It'll be helpful for you to have a really good co-owner , manager or a moderator to delete all trash from your forum and make it clean.

6.Stay Spam Free : Everybody in this world hates spam and making your forum a spam free forum is a must. You see less spam = more happy users and it's your job to make your users happy. Make few moderators to clean all the trash because this will keep you both happy.

jQuery Nudging In Blogger

This simple jQuery effect will make your simple links to dancing links and it's too easy to add this effect on your blogger with only a little bit jquery script.

Installing :

• Go To Blogger > Template > Edit HTML

• Just above </head> post following jquery :

<script src='http://widcraft.googlecode.com/svn/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

And save the template.

Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class="nudge") to the HTML "a" tag, like this:

<a href="http://www.wwefansnation.com" class="nudge">Link-Text</a>

and to use images instead of text, use this code:

<a href="http://www.wwefansnation.com" class="nudge"><img src="YourImage"/></a> 

Add A Floating Sidebar On Blogger

You may saw this on many popular websites like Apple and Facebook and bunch of other websites and it's not that hard to get this on your blog.It's a jquery effect so make sure that your blog contain jquery script so if it does then you can skip our first and second step.

Installing :

• Go To Blogger > Template > Edit HTML > Search for </head> 

• Just above  </head>   paste following jquery script

<script type='text/javascript' src="http://widcraft.googlecode.com/svn/jquery.js'></script>

• Then search any one of below codes. In custom blogger templates

<div id='rsidebar-wrapper'>

• Or in default templates

<div class='column-right-outer'>

• Or whatever your sidebar is just comment and i'll help you to find it Just copy the below code and paste it above the above code.

<script type="text/javascript">
        $(function() {
            var offset = $("#rsidebar-wrapper").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#rsidebar-wrapper").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#rsidebar-wrapper").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

 Customizing :

• Replace the red colored text with the corresponding value. 
• If you want to animate any other widget, find its class used for CSS and replace it with green colored text. If you have any doubt, let me know.

Comment for any type of help.....

About The Author Widget For Blogger

Wordpress provides you About The Author widget to tell your visitors about you but on the other hand Blogger gives you nothing like that but still with some editing we can create our own About The Author widget.

Installing :

• Go To Blogger > Template > Edit HTML > Mark "Expand Widget Templates"

• Search For ]]></b:skin> and just above it paste following css :

#ath {
background:#f8f8f8;
margin:0 0 40px 0;
padding:10px;
border: 3px outset #e8e8e8; -moz-border-radius: 10px; border-radius: 10px;
overflow:hidden;
font-size: 14px;
}
.pro {
background:#FFF !important; float:left;
margin:0 10px 0 0;
padding:4px;
border: 2px inset #e8e8e8;
}

• Next Search for data:post.body  

• Just below it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;AUTHOR NAME&quot;'>
<div id="ath">
<div>
<img class="pro" height="120" src="Your Pic URL" width="120" /><i><strong style="font-size: 18px;">Your Heading:</strong></i>
Your Description Here.Your Description Here.Your Description Here.Your Description Here.Your Description Here.Not More Word.
Join Me On: <a href="http://www.facebook.com/##########">Facebook</a>, <a href="http://www.twitter.com/##########">Twitter</a>, <a href="http://plus.google.com/##########">Google Plus</a></div>
</div>
</b:if></b:if>

•  Save Template.

Customizing :

• Replace AUTHOR NAME with the account name of the guest author. This name should match exactly the name appearing on his posts.
• Replace all blue fields with your info.

15 Tips To Avoid Google Adsense Account Ban

Google Adsense is a perfect way to earn thousands of dollars with your website and blogs. Every big company is using this service to earn some large amounts from their website. Adsense pays you for loyal and fair clicks on their ads not for spams and cheats.

Many new bloggers get approved for Adsense but because they think it's a money machine they try to cheat it and soon they get banned from it. In this post, I'am sharing 15 tips with you to avoid your Adsense from a permanent ban so read them carefully :

1. Never use Pay-To-Click websites on your blog/site because Adsense doesn't allow you PTC click services.
2. Don't hide Adsense ads under your site's menu , slider or between images because it will approach visitors to click on ads accidentally and you'll be get ban.
3. Don't ask peoples to click on ads and don't even try to ask peoples on social networks like Facebook and Twitter because Adsense will detect it and it'll be not so good for you.
4. Your blog or website must  have at least 70% search or organic traffic. If your website traffic is mainly coming from social networks  like Facebook then there is a chance that Google will deactivate your account. You can use Google Analytics to know more about your site's traffic.
5. Publish unique content on your site because Adsense doesn't allow cheaters to copy and paste content from different sites.If you're doing then make sure to change article in your words.
6. Never ever put Google Adsense ads on your  empty pages,contact pages or related like About me, Privacy Policy , Contact us, Form filling etc. Because Google advertisers pays you for ads on your content not on your Policy and all.
7. All ways choose good quality key words for your blog/site and try to avoid keywords related to Hacking or Drugs.
8. Never try cloakling  or any other black hat Search Engine Optimization.Black Hat SEO works fast but Google will  mark your website as spam.
9. Never exchange links with other websites mainly which are  non related website.
10. Adult content is not allowed by Adsense so don't post pornography and don't ever iFrame pornography sites. 
11. Adsense is all you need so don't use any low-quality advert site with Adsense on your blog. Such as ClickSor and Bitvertiser..
12. Don't write text which approach your visitors to click on ads.
13. Never try to edit Adsense ads code or place it in fixed position.
14. Adsense hates spam and all site related to it so don't put site links related to spam and all.
15. Pop-Ups are annoying also Adsense hates them so don't put any pop-ups on your site to provide good quality content.

Dynamic jQuery Menu For Blogger

First of all Blogger is still under maintenance so if you bought a domain then you have to wait more time to change it.Well maybe Blogger is doing some major changes , whatever we'll talk about it later.

This menu so beautiful and you can also customize it. It's a jquery based menu and i don't think now i have to explain power of jquery because you can experience it in my last posts which was about a Lightbox created by me so it's get started with this menu...

Installing :

• Go To Blogger > Template > Edit HTML > Search for </head> 

• Just above </head> paste following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/DynamicMenu.js"></script>

• Now just above </body> add following script :

<script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
            });
        </script>

• Now search for ]]></b:skin> and just above it paste following css :

.webwidget_menu_glide{
    padding: 5px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;
    -khtml-border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;
    -khtml-border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;

    border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
    width: 100px;
    height: 20px;
    background-color: fuchsia;
    position: absolute;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;
    -khtml-border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;
    -khtml-border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;

    border-radius:10px;
}
.webwidget_menu_glide ul{
    padding: 0px;
    margin: 0px;
    font-family:Arial;
}
.webwidget_menu_glide ul li{
    float: left;
    list-style: none;
    position: relative;
    text-align: center;
    margin-right: 10px;
    width: 100px;
}
.webwidget_menu_glide ul li a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.webwidget_menu_glide ul li ul{
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-radius-bottomright: 7px;
    -khtml-border-radius-bottomleft: 7px;
    border-radius-bottomright: 7px;
    border-radius-bottomleft: 7px;
    border-radius:7px;
    padding-bottom: 5px;
    position: absolute;
    z-index: 999999;
    display: none;
}
.webwidget_menu_glide ul li ul li{
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -khtml-border-radius-topright: 0px;
    -khtml-border-radius-topleft: 0px;
    border-radius-topright: 0px;
    border-radius-topleft: 0px;
    border-radius:0px;
    margin: 0px;
    float: none;
    border:none;
    word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
    padding-left: 5px;
    padding-right: 5px;
    font-weight: normal;
}

• Save your template.

Well it was a bit long but this menu really worst it....now time to it on your layout :

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div id="webwidget_menu_glide" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href=" # ">News</a></li>
<li><a href=" # ">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href=" # ">More...</a></li>
</ul>
<div style="clear: both"></div>
</div>

Done.....


Customizing :

You can full customize this menu by editing the script we added above </body> tag.....Below are the fields you can customize marked in large text

<script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
            });
        </script>

PixelBox

Download Demo
I'am a huge lightbox fan and often peoples ask me which lightbox do I use so I created my own. It's call PixelBox lightbox created by me and it's 100% free to use.

It's version 1.0 of my pixelbox and I'll be doing some changes in it later so subscribe to my site to keep updated. It not looks so great in above image but please give it a try and please check the demo. I think you'll like it.

Supports :
All image formats.

Currently Working On :
Inline Content

BigRock Promo Codes

In this post we'll every month post latest BigRock Promo Codes so you can get a domain or hosting in less money.Enter these coupon codes in checkout page of your order.If any of following code is not working or you got one than please comment.

Offer	Promo Code
Up to 25% Off	wwefansnation.com
Save 10% off domains and 20% off all other products.	FBSAVE1056
Free website on purchase of COM/NET domain.	BRSUPER
5% off on domains and 10% off all other products.	BIGTWIT10

Maintenance In Progress - Domain Switching Disabled.

Yesterday i bought a domain for my WWE blog from BigRock and just after it when i visited blogger to setup my domain i found a message "Maintenance in progress - Domain switching disabled." and when i searched it on Google i found that there are hundreds of guys wondering what the hell is going on so let me clear it.

Right now Blogger is working on some sort of new feature or updating/fixing some error and because of it Blogger currently/temporary disabled this feature so if you bought a domain recently or going to buy so please wait ( Just like i'am doing ) for some hours and after that you'll able to customize your domain.We'll post updates on this post so please leave a comment......

Update : Problem is solved on 18/9/12 so now you can go and update your domains....thanks for all comments....if you're facing this problem then you can comment...

Related Posts Widget With Thumbnails For Blogger

Just realize that there are no related posts widget is on my blog. So I thought that I should add one for you guys. Here it is easy and beautiful. It's an eye catching widget which will give your visitor what they are looking for.

Installing :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

#related-posts {
float : left;
width : 480px;
margin : 20px 0 20px;
padding: 5px;
}
#related-posts h2{
font-weight : normal;
color : #111;
font-family : "Nobile", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-style : normal;
font-size:18px;
line-height: 24px;
padding:10px 10px;
margin:0;
}
#related-posts a {
border:1px solid #fff!important;
}
#related-posts a:hover {
background:#F2F2F5;
border:1px solid #CCC!important;
}

• Now put the below script just above </head> : 

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3UH4DFkEdnHZ1pnH4sc-n0sYyiKYS2Q5qWNuZfUnoM8mCOnyGs57pSs3tlX9RjZpFHJB0edAOBk7UGtvGFs-aVpTPXpKb4JtI-oRWZzfpNPgUjdsSlDq29b8yp_yrI52HvCux3ZLOYdo/s1600/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3UH4DFkEdnHZ1pnH4sc-n0sYyiKYS2Q5qWNuZfUnoM8mCOnyGs57pSs3tlX9RjZpFHJB0edAOBk7UGtvGFs-aVpTPXpKb4JtI-oRWZzfpNPgUjdsSlDq29b8yp_yrI52HvCux3ZLOYdo/s1600/noimage.png";}
}
if(relatedTitles[relatedTitlesNum].length>42) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+':</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:125px;height:125px;padding:2px;border:solid 1px #eaeaea;" src="'+thumburl[r]+'"/></a>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>

• Now click on 'Expand Widget Templates' and search for <div class='post-footer-line post-footer-line-2'> and put the following code after <div class='post-footer-line post-footer-line-2'> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'/></b:if>

Note : If you can't find <div class='post-footer-line post-footer-line-2'> code, you can also look for <data:post.body/> and put code on point 5 after <data:post.body/>

Free Google Adwords Voucher Giveaway

We're giving away this Adwords voucher worth 2500India Rupee so let's see who grabs it first....Comment if you grabbed so we can post your name......if no one redeemed it before 25Sept then i'll redeem it so be quick.

Conditions :

• Expires on 30th Sept. 2012.
• For new customers only

---

Voucher #1 :

---

Voucher #2 :

We may post more vouchers in future so subscribe to our feed to stay updated.

GoDaddy Promo Codes

In this post we'll every month post latest GoDaddy Promo Codes so you can get a domain or hosting in less money.Enter these coupon codes in checkout page of your order.If any of following code is not working or you got one than please comment.

Offer	Promo Code
$7.99 .com Registration	cjcFAT799
$10 off order over $50.00	cjcFAT50
49% off on .com	iapwd495c
49% off on .com	cjc495wd2
15% off order over $75.00	cjcFAT75
20% off Hosting plans of 12+ Month	cjcFAT20h
10% off Orders	cjcFAT10
$5 off order over $30.00	cjcFAT30
20% off Next Order of $40 or more	BBCNAA
15% off Cloud Hosting	LKSVDC03
25% off Purchase	Happy25s
20% off Renewals	GDBBA547
$7.67 .BIZ renewal	EMFB7
20% off Search Engine Visibility	LKSSEV20
30% off Purchase	FBF30TLD
20% off Order	gdbba1005
$5.99 .com Domains	LKS599V
.COM Domains $7.99	LKSRTL799
3 Months Economy hosting for $1.99 per month	cjcFat199
$5.99 .COM offer	cjc599v
$12.99 SSL Certificates	LKSRTLSSL

Top Commentators Cloud Widget For Blogger

It's great way to show you top commenters of your blogger and it's also easy to install. As you can see in above pic this widget just looks like label cloud widget , commenters are the most important part of blogging and it shows them in a cool cloud so i think you might give it a try. It's only available for blogger comment not disqus or any other comment system.

Installing :

•  Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following script :

<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the “Get this commentators widget” link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
 max = ccCount;
}
if (ccCount < min)
{
 min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.widcraft.blogspot.com/
 &Exclusions=Anonymous,Admin
 &ShowHowMany=20
 &Order=alphabet
 &_callback=cCloud
 &_id=cfa196644e1d6159c9183548c4b5e2f5
 &_render=json"
type="text/javascript"></script>
</div>
<span style="font-size: 80%; float:right;;margin-top:5px;">Get this <a href="http://widcraft.blogspot.com/2012/09/top-commentators-cloud-widget-for-blogger.html" target="_blank">commentators</a> <a href="http://www.widcraft.blogspot.com/" target="_blank">widget</a></span>
<!-- Top Commentators Cloud End -->

Customizing :

• Replace http://www.widcraft.com/ with your blog's url. Make sure you omit the slash at the end of the URL (as in .com/). 
• Replace Anonymous,Admin with the commentator names you want to exclude from the cloud. Separate each name with a comma, and don’t put space between them. 
• Replace 20 with how many top commentators you want to appear in the cloud. 
• In alphabet Enter alphabet if you want to arrange the names alphabetically. Enter frequency if you want to arrange them by frequency (with the most frequent commentators on top). 
• cCloud Comment count (in bracket) is displayed by default. To remove it, just delete this line of code.

Adding Disqus Comment Box On Blogger

With a few quick steps, you can turn your old comment system into a new way to engage your visitors.

Why Choose Disqus ?

From small blogs to massive websites, Disqus is the easiest way to build active communities. It's free to use and works with virtually any type of website.

Disqus comment box is one of the most used comment box around the web which makes commenting really easy. It's totally free and if you have a large fan base or big number of visitors then you can also earn some revenue with it , we will discus that in another post.

Disqus gives your visitors to log in and comment via all major social networks including Facebook and Twitter which makes it easy to sign in. If you're a big publisher then you can also add your site's log in option to disqus.

With Disqus your visitors can also attache images with their comment and it's easy for site owner to moderate spam comment.

Disqus also gives you option to reply comments and stay connected with your commenters.

Installing : 

• Go To Disqus > Create a new account by clicking on 'Get this on your site'

• Fill the sign up form just like shown below :

Choosing a username is also an art so choose something creative.

• Now Click on 'Continue' > Choose your platform Blogger/Wordpress/Other... 

You can also use this comment box in other platform with this tutorial because installing in all platforms are totally same.

• Now in next page click on 'Add Your Site To Blogger' > Add this anywhere on your layout and it's done.

Well it was easy , make sure your blogger comment box isn't disabled otherwise it won't work. After installing you can customize settings of your comment box and disqus will notify you when a user comments your site/blog.

We will discus more features of Disqus in our next posts including making money with Disqus.

Pure CSS3 Cycle Slider For Blogger

Cycle slider is a css based beautiful content/image slide for you to show off some of the best content of your site in some cool animations. You can list up to 5 slides in this slider and it'a automatic slider with some cool animations so it's really going to look amazing on your blog.

As i noted before it's pure css which mean no images and jquery in script which makes it load really fast without any problems.You can also use this slider in your website or wordpress or at any other html document.

Installing :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste following css :

/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:680px;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
 -webkit-animation:cycle 25s linear infinite;        }
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite; }
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite; }
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite; }
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite; }
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
        font-family:Comic Sans MS;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } }
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } }

• Save your template.

• Now Go To Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="ImgURL" alt="PictureTitle"/>
</a>
<div class="tooltip">
<h1>PictureTitle</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="ImgURL" alt="PictureTitle"/>
</a>
<div class="tooltip">
<h1>PictureTitle</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="ImgURL" alt="PictureTitle"/>
</a>
<div class="tooltip">
<h1>PictureTitle</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="ImgURL" alt="PictureTitle"/>
</a>
<div class="tooltip">
<h1>PictureTitle</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="ImgURL" alt="PictureTitle"/>
</a>
<div class="tooltip">
<h1>PictureTitle</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>

Customization :

• Replace all # with your desirable address.
• Replace ImgURL with your image url.
• Replace  PictureTitle with your image title.

Sticky Bar Widget For Blogger

Sticky bar is used my almost all top blogs even we're using other version of this widget. It helps you to announce new posts or any thing you want your visitors to notice and it comes with a close button so your visitors can easily get rid of it.

Installation :

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<!-- This Is A Copyrighted "Widget Craft Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->
<style>
#wcbar{
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Webkit Browsers */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */
width:100%;
text-align:center;
top:0px;
left:0px;
border-bottom: 1px solid #888888;
z-index: 999;
height: 28px;
position:fixed;
line-height: 2.2em;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#wcbar a{color:#eeff00;text-decoration:none;}
#wcbar a:hover{text-decoration:underline;}
</style>
<script type='text/javascript'>
//<![CDATA[
function closeTopAds() {document.getElementById("wcbar").style.display = "none";}
//]]>
</script>
<div id='wcbar'>
---Your Text Or Links---
<center style='padding:0px; float:right; cursor:pointer;' onclick='closeTopAds();return false;'>X&nbsp;&nbsp;</center>
</div>
<!-- This Is A Copyrighted "Widget Craft Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->

• Now change  ---Your Text Or Links---  with your desire text or links and then save the widget. 

Hope this will help you to gain more attention of your visitors.....

Facebook Like Box Pop Up Widget For Blogger - Version 4.0

Previous Versions : Version 1.0 | Version 2.0 | Version 3.0

Yesterday i found a pic of girl holding a check and i turned it into this widget.It'll surely help you to gain more likes for your facebook page. You can control this widget's appear time so it won't irritate your visitors in every page.

You can generate this widget using our widget generator :

Amazing jQuery Slide Out Navigation For Blogger

I personally love this slide out jquery menu and i think after adding this you'll love it too. It's a good way to display your site's menu if you're using a template which doesn't suit any other menus. It's simple , cool and smooth and i think you should give it a try :

Installation :

• Go To Blogger > Template > Edit HTML > Search for </head> :

• Just above  </head>  paste following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

• Now search for ]]></b:skin> and just above it paste following CSS : 

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;    
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjuiL5gWfxjmGmgEw9mYdmWyBa-7F7y2C4jcmdFH92JTgM65W2j3jVoOkoYP6IzlRKHwzJ9IUzOklawHqW6WDelygLGx-eoKjLBgXfx2SAsXvED3dxE5C_hbcMOKFZG0CANNKdUGVhnLw/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNalF2UT31LXKl4_Cm52rBru5bcYixDAsb2t38YrQpdZbA9axfBPU3MkBNmQpq44hA3VhCQqIkSwN6vT9cQwPbZBUdmNFs4EOThzptToUjz0ad4cF8Z92zM0yhSHlutRMsYhJDH6SLlk/s1600/id_card.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_1Nl-RA7wVGmFA4-PHZohMPYuOVA8Sg9Gm_M1mUcaDxAaHB9Gu55qrb57aghtGeBlBkV-dJOW6flmjbwbgQhyphenhyphenXsK-4LpKbfAcJNn34N7CzHnxWtT_vVSaMAuFgbyqOMBFc-eYDYUn9E/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivtP0-H9JFEtyHWmgxt5wYMNyeSjumO1u-Y52rbapHR6uEQYyH6TkhZCp8dwFZ-AljdzU5Q6QOY3TyUg_u6EvxicOul2LDHASlAwZsyO0c0E-ZlZ33PcWdmqt0oBGOKhmRA8aZZxTl7Eo/s1600/news.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDF97Mm7IYX5nYoqG1e8iZCoRw6FrsrKt7OFvx1Bk0rzDStdPtPD10Y5-HuDDzno2Yep4qNj5kOe72xI3QPzigFmofl7jz5G6DkFVzzNPO4Sjzh6YiL7z2RoifPyBUsJvnxnZM67Zxx_E/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoo2JwYGPLo2PvvgRk1f4sEdWzt8IDcUGSDsCaGYaZucMjPkkVwzn7df5298kArt2v2krthzenkRUC1HxgAeEodNaLbcSOQstMWWuuKq_GKjja0YY1pxc7oRSgLAR9xAqQLAYfBt4744s/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQKBNF3gSSQts67YHwcmiNkSnNamYNyX99KtC0NmPijTdcd-9y9LiP1R-ztKmtPSN6wl7NhVNg9b2qKG_3lizfvHzr68mAS5_ic63RrJeUykRqrK5b8v1YQ7g2zCR-qo5OeFJz6UFpgOw/s1600/mail.png);
}

• Save your template

• Now Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div class="header"></div>
<ul id="navigation">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About</span></a></li>
<li class="search"><a href="#"><span>Search</span></a></li>
<li class="photos"><a href="#"><span>Photos</span></a></li>
<li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li>
<li class="podcasts"><a href="#"><span>Newsletter</span></a></li>
<li class="contact"><a href="#"><span>Contact</span></a></li>
</ul>

Customization :

• Replace all # with your links and see it in action.

Stylish CSS3 Menu For Blogger

Another post to show you power of CSS3 . It's a really vintage style menu for blogger and it'll look good in all dark and white blogs specially in header. Just wanna remind you guys again that you can also use this menu in other HTML supported services like Wordpress and all. Here we go :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste following CSS :

nav ul
{
        padding: 0;
        margin: 0;
        list-style: none;
}
nav li
{
        float: left;
}
nav a
{
    float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid #831608;
    font: bold 14px Arial, Helvetica;
    background-color: #831608;
    background-image: -moz-linear-gradient(#bb413b, #831608);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
    background-image: -webkit-linear-gradient(#bb413b, #831608);
    background-image: -o-linear-gradient(#bb413b, #831608);
    background-image: -ms-linear-gradient(#bb413b, #831608);
    background-image: linear-gradient(#bb413b, #831608);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
nav a:hover
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}
nav a:active
{
    background: #bb413b;
    position: relative;
    top: 2px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span
{
    border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#d4463c, #aa2618);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
    background-image: -webkit-linear-gradient(#d4463c, #aa2618);
    background-image: -o-linear-gradient(#d4463c, #aa2618);
    background-image: -ms-linear-gradient(#d4463c, #aa2618);
    background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#aa2618, #d4463c);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
    background-image: -webkit-linear-gradient(#aa2618, #d4463c);
    background-image: -o-linear-gradient(#aa2618, #d4463c);
    background-image: -ms-linear-gradient(#aa2618, #d4463c);
    background-image: linear-gradient(#aa2618, #d4463c);
}

• Now Go To Layout > Add A Gadget > HTML/JavaScript > Paste following code : 

<nav>
        <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Categories</span></a></li>
                <li><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Forum</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
        </ul>
</nav>

Customization :

• Now you have to change # with your page links and Home/Categories/About....and all with your custom page title.

Converting Your Blogger Template Into Blank Template

Blogger templates are codded using the *XHTML 1.0 Strict Document Type*. It was developed by world wide web consortium on 26 January 2000. Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight mistake in code results in terrifying error messages that you often see while editing your blog template.

So here we're going to show you how to convert your blogger template into a blank template for all your HTML related work or any project you're going to do. All credits of this post goes to MBT.

Installing Template :

• Go To Blogger > Template > Edit HTML > Replace full template code with following code :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[/*
-----------------------------------------------
////////////////////////STATIC HTML THEME////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------- */
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)  margin: 0;
    padding: 0;
}
]]></b:skin>
 
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:400px; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://www.widcraft.blogspot.com'>Widget Craft </a>&#169; 2012.</p></center>
</div>
  </body>
</html>

• Click On Save.

• Click save and when prompted about the following error:

Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1

• Simply click on Delete widgets and you are all done!

Editing This Template :

• While creating widgets, you will add the JavaScript just below <head> or above </head>
• You will add the CSS code inside the two yellow highlighted sections
• And you will add the widget data or HTML code inside the two green body tags

Adding A Widget :

Now to give you an idea of how easily a blogger template could be designed from scratch simply add the following code just above </body> to make the Post widget function on your Static HTML Theme.

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Save your template and then visit the layout page again. You will be able to see the Post widget and you can now easily edit its formatting options. Go and create a new post and visit your blog to see it working just fine. Congratulations! you have created one of your first blogger widgets. Play this way with some exciting new widgets and find out how creative you could go.

Amazing Slideout Bookmarking Widget For Blogger

Sharing is one of the best ways to promote your content and specially twitter and facebook so all we need is a great sharing tool/widget and here is one which is amazing and really stylish which will surely help you to gain more shares than any other , now just add this widget in your blog by just clicking on Add To Blogger button just below this paragraph :