Hosting HTML And CSS Files On Google Code

Last month i posted an article on my blog about hosting js files on Google Code which was simple but it's hard to host html and css files on Google Code , not that hard because today we'll learn that.In below tutorial please click on images to zoom.

Create Project:

• If you have Gmail ID log in to this link with Gmail.
• Fill out Project name, Project summary, Description with your project information.
• Choose a Version control system. Choose Subversion.
• Choose any Source code license
• Now Label your Project.
• Click Create Project.

Hosting HTML And CSS Files:

• Now go to Source tab. You can see a link. Something like this - https://for-example.googlecode.com/svn/trunk/. Copy and paste it to notepad.

• Now click googlecode.com password.Copy the username and password given and paste to notepad.

• Now download Tortoise SVN and Install it. Click Here
• After install Right-click to your desktop. Select Tortoise SVN > Settings.

• A new window will come out. Click Edit.

• Now a text file will open on notepad. This document holds all the records for the mime-type of the files to be uploaded. You have to add some new mime-type extension.

[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp = svn:mime-type=image/bmp
*.gif = svn:mime-type=image/gif
*.ico = svn:mime-type=image/ico
*.jpeg = svn:mime-type=image/jpeg
*.jpg = svn:mime-type=image/jpeg
*.png = svn:mime-type=image/png
*.tif = svn:mime-type=image/tiff
*.tiff = svn:mime-type=image/tiff

# Data formats
*.pdf = svn:mime-type=application/pdf
*.avi = svn:mime-type=video/avi
*.doc = svn:mime-type=application/msword
*.eps = svn:mime-type=application/postscript
*.gz = svn:mime-type=application/gzip
*.mov = svn:mime-type=video/quicktime
*.mp3 = svn:mime-type=audio/mpeg
*.ppt = svn:mime-type=application/vnd.ms-powerpoint
*.ps = svn:mime-type=application/postscript
*.psd = svn:mime-type=application/photoshop
*.rtf = svn:mime-type=text/rtf
*.swf = svn:mime-type=application/x-shockwave-flash
*.tgz = svn:mime-type=application/gzip
*.wav = svn:mime-type=audio/wav
*.xls = svn:mime-type=application/vnd.ms-excel
*.zip = svn:mime-type=application/zip

# Text formats
.htaccess = svn:mime-type=text/plain
*.css = svn:mime-type=text/css
*.dtd = svn:mime-type=text/xml
*.html = svn:mime-type=text/html
*.ini = svn:mime-type=text/plain
*.sql = svn:mime-type=text/x-sql
*.txt = svn:mime-type=text/plain
*.xhtml = svn:mime-type=text/xhtml+xml
*.xml = svn:mime-type=text/xml
*.xsd = svn:mime-type=text/xml
*.xsl = svn:mime-type=text/xml
*.xslt = svn:mime-type=text/xml
*.xul = svn:mime-type=text/xul
*.yml = svn:mime-type=text/plain
CHANGES = svn:mime-type=text/plain
COPYING = svn:mime-type=text/plain
INSTALL = svn:mime-type=text/plain
Makefile* = svn:mime-type=text/plain
README = svn:mime-type=text/plain
TODO = svn:mime-type=text/plain

# Code formats
*.c = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

• Copy all codes and paste at the end of the text document.
• Save notpad and Press ok button on SVN
• Now we upload. Right-Click Desktop or anywhere, go to TortoiseSVN > Repo Browser.

• A small window will come out. Enter the URL that we copied above.

• Repository Browser will open. You can have 2 different way to upload, Drag and Drop or Add file by Right-Click.

• Now a dialogue box prompt, Enter google code Username and Password from above step. See The Image.

• Thats it. Now upload any file via Tortoise SVN. You can also download, delete or rename files and create new folders.

Example : http://hardeepasrani.googlecode.com/svn/PixelBox/PixelBox.html

Background Color , Font Color And Size Switcher Widget For Blogger

This widget is originally created by Blogger Belog and all credits goes to them because we're just sharing it with you.This widget is a really good way for you to give some customization in your visitors hand and they can change background color , font size and color as they want.

Note : This widget is a jquery widget and every installation contain a jquery script in it if your blogger already contain jquery this please delete it from our script and if you're using more than one widgets from below then only keep it in one.

---

Background Color Switcher :

---

Font Size And Color Switcher :

---

Font And Size Switcher :

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