Make Your Own URL Shortening Service With Google Short Links

As soon as your website becomes big we all want to include some advanced features and we all wants to create short links with our own domain not with goo.gl or any other services and Google Short Links is perfect for us.

With Google Short Links you can create your own url shortening service in some easy steps. All you need is a custom domain with DNS management and a Google Apps account.If you don't have a Google Apps account then you can create it within minutes for free by clicking here.

Here is an example of what we're going to create. Just visit go.bwidgets.com.

Now after creating your Google Apps account add Google Short Links app on your account at this link. By default your redirection service will be available at links.example.com but you are free to choose any other sub-domain for this purpose. From the dashboard, open your Short Links settings and add a new URL (I picked go.bwidgets.com) and then deleted the default links sub-domain.

Next open your web domains cpanel (DNS manager) and create a new CNAME record for the same sub-domain that should point to ghs.google.com or ghs.googlehosted.com as shown on their instructions.

Wait for a couple of minutes for the DNS changes to propagate across the Internet and your TinyURL clone is ready to serve. Here’s the default web interface where you can create short URLs using your Google Apps account.

You can check a sample of our short links : http://go.bwidgets.com/twitter.

I hope this may help you.....

Get A Free .in Domain And Web Hosting From Google

Google and HostGator is giving free .in domain and hosting for one year so i really prefer you all to try this because it's good to try all thinks like this before buying your first domain and hosting and it's totally free and if you like it then after one year you can renew your plan to get your domain and hosting.


Here's what you'll get:

• Free easy-to-build professional website
• Free .in domain name and hosting for one year
• Free email addresses
• Free 365 days support

There's no thinking twice. Get started today. Just go to http://www.indiagetonline.in/ and apply for your free .in domain.

Downloading Paid Android Apps For Free

Choosing an Android phone or tab is a really smart choice because Android OS is owned by Google and it provides you best apps for your device. You can choose from millions of cool free and paid apps on Google Play but lot of us don't think paying for apps is a good idea so here we are with a nice trick to download all paid Android apps for free all you need is an internet connection and an Android phone.

First of all let me clear that i'am not responsible for any content you download for free because this is totally illegal so do this on your own risk.

OK so this is easy to download paid apps for free just follow these steps :

For this we need a file sharing website so i'am going to use 4shared for this so you can simply do this by visiting 4shared.com or you can download 4Shared App on your Android device by clicking here.

After downloading 4Shared app or visiting their website Sign Up for a free account on 4Shared and on search-bar search for your favorite Android app with the .apk format for example if you wanna download Temple Run then search for Temple Run.apk and download it and have fun for free.

Let me explain this to you 4Shared is a file sharing website and anyone can upload their file on 4Shared for free so the paid app you're downloading for free is probably uploaded by a person who paid for it.

If you're on an old device then you might need to download .apk installer on your Android to install these apps.You can find lots of .apk installers on Google Apps for free.

Social Subscription Scrolling Slider Widget For Blogger

After searching web finally i found a cool social subscribing widget for blogger. This widget contains like button, follow button and +1 button which will surely help you to build your social blogging network. Well there is nothing in the world like Social Blogging Network but i thought it was cool. Here we go:

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

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<style>
#mblsocialslide{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;}
</style>
<div style="display: none;" id="mblsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FPageUsername&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="https://twitter.com/TwitterUsername" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow Us</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class='clear'></div>

• Now replace TwitterUsername with your twitter username and PageUsername with your facebook page username and save it.....

Adding Read More Button On Blogger

Showing full post on homepage is not a good idea at all and it also makes your blog's loading a bit slow. So now i'am going to tell you how to add Read More button on your blog to make loading fast and giving a pro look to your blog. Here we go :

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

• Just above </head> paste following script:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

If you want to change image thumbnail size then find these numbers 100 and  120.

• Now click on Expand Widgets Template and search for <data:post.body/> and replace it with following code :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

Save It and we're done....now take a look at your blog...... 

Amazing Social Sharing Widget For Blogger

Social Sharing is best way to get more visitors but it only effects if your visitors shares your good content on their social network and a good social sharing widgets really helps you to attract more visitors and a really good button helps you to add it directly on your blog so as you can see in above image this widget is totally awesome so you can add this widget by clicking on the "Add To Blogger" button below :

Make sure to add this widget just below posts on your layout.

Google + Style Subscription Box Widget For Blogger

Here is another cool subscription box for Blogger. You can call it a Google + style or a Chrome style but believe me it really doesn't matters what you say because all it matters is what your visitors say. So here is this quick and easy tutorial :

• Go To Blogger > Layout > Add A Widget > HTML/JavaScript > Paste below code :

<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Subscribe Updates, Its FREE!</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedID', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="FeedID" name="uri">
<input type="hidden" value="en_US" name="loc">
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if (this.value == " ")="" ;}"="" onclick="value=''"name="email">
<input class="emailButton" type="submit" value="Signup Now!" title="">
</form>
</div>
</div>
</div>
<style>

.subscribe_outer {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdaS3WtJlcjEr-V4Wq2q1-FK94jRzpbjfs-9MR7hLsV2Lx9bCxkdborrvrsbWrGgQCS9XNwdK-0i_wTsoJ_ZqL9b2RMVX_xAB5fR3NUAuYLd33G5V1In3PC2XWq80g0vVGpcMpOmqahg/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
.subscribe_wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKs4GvaZVkWMWbiCekf2MOgpn69gozRNdjs5GdBwB-T4JAi5jCWH1bM7Psawm3JtoVbdHZ4CV2ZgvdO2e7IaI033613N-IQZDbU1DjAVNdvkAjKSLx0HpN_5B0WXlSgqCJAvSF9846hw/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 15px;
    font-weight:bold;
    line-height: 20px;
    padding: 10px 50px 18px 38px;
}
.emailButton {
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafC2cve3EYSSS6sb3dX6dtKYNylvH1X6ajtyOWBlEMdX43b2RJbsxd2VZJj-bbJ3Jx_KV3vGLv9i2r-MBNsPegZlS6taDwMTwzurqUIO0pYnZ3AbmVBpg1We8La7zf-Jc_FO_c1LZ9Ok/s1600/email.png") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    padding: 10px 40px;
    margin: 0 0 15px;
    outline: none;
    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family:'Lora',georgia,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style>

Now in above code change FeedID with your feed id.

For example if your feed url is feeds.feedburner.com/WidgetCraft then WidgetCraft is your FeedID

How To Edit Blogger Mobile Template

In this post we're going to learn about how to edit our blogger template for mobile phones so please starting this don't forget to enable mobile template on your blogger by visiting template section.

How To Customize The Structure Of Your Mobile Template :

Blogger Templates are made by using widgets. Blogger has added a new property (mobile) to the <b:widget/> tag. This property can take the following values: ‘default', ‘yes', ‘no', ‘only'. As you may have guessed, this property will determine how the widget will be rendered in the mobile view.

By default, the widgets that will be shown on mobile are:

• Header
• Blog
• Profile
• PageList
• AdSense
• Attribution

a) If you want to hide any of said widgets, you need to use the property mobile='no' in the widget tag. By doing so, that widget would no longer appear in the mobile view.

For instance, you can hide the Attribution Gadget in Mobile view if you use:

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

b) If you want  to display a non-default widget in the Mobile view of your Blogger blog, then just set its mobile property to 'yes'.

Here is an example:

This is the normal tag for the Blog Archive Widget:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

When you set the mobile property as

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

you should see the Archive Widget on your Mobile view.

c) If you want a widget to appear only in the mobile view, you can achieve this be setting the Mobile property to 'only':

<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>

If you use this tag, the attribution gadget will disappear from your desktop view, and will appear only on the mobile view.

How To Customize The Look And Feel Of Your Mobile Template :

You can fully customize the look of your mobile template. The body element of the mobile template will be styled by the mobile class:

<body class='loading mobile'>

Make sure that your template contains the following line of code:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If you have experience working with CSS, you can use this class name to style your mobile template.

.mobile .date-header {
text-decoration:underline;
}

Alternate Widget Content On Mobile View :

When you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want you can provide alternate content inside a widget.

For example:

<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="http://www.blogger.com">
Powered By Blogger
</a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if>
</div>

This code will show a Powered by Blogger Text link on the Mobile View and a Powered by Blogger image on the normal desktop view.

The condition

<b:if cond="data:blog.isMobile"/>

can be used to check if a visitor is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog.

That’s all!

Google Page Rank Checker

Check Page Rank of your Web site pages instantly:

Facebook Style Select List

So we're back with a new post and also a new domain so now WidCraft is BWidgets and today i'am sharing this amazing CSS FB style select list with you guys. So many of us creates Facebook layouts so i think this will help :

HTML :

This is a <div class="dropdown" id="dropdown">
 
            <a class="dropdown_button dropdown_close" href="#">Buy/Listen <span class="arrow"></span></a>
        <a class="dropdown_button dropdown_open" href="#dropdown">Buy/Listen <span class="arrow"></span></a>
     
        <ul class="dropdown_content">
            <li><a href="#">Buy on iTunes</a></li>
            <li><a href="#">Buy on Amazon</a></li>
            <li><a href="#">Buy on CD Baby</a></li>                              
            <li><a href="#">Listen via Spotify</a></li>                                                              

            <li><a href="#">View on YouTube</a></li>                                                              
            <li><a href="#">View on Last.fm</a></li>                              
            <li><a href="#">View on PeterSchoffelen.nl</a></li>
        </ul>
     
    </div> button in the middle of a line of text.

CSS :

b,
a {
    color: #3b5998;
    text-decoration: none;
}
a:hover { text-decoration: underline }
h2 {
    color: #3B5998;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.dropdown {
    /* display: block; */
    display: inline-block;
    margin-right: 3px;
    margin-left: 3px;
    position: relative;
}
.dropdown .dropdown_button {
    cursor: pointer;
    width: auto;
    display: inline-block;
    padding: 4px 5px;
    border: 1px solid #AAA;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: bold;
    color: #717780;
    line-height: 16px;
    text-decoration: none !important;
    background: white;
}
.dropdown:target .dropdown_button {
    border: 1px solid #3B5998;
    color: white;
    background: #6D84B4;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
    border-radius: 2px 2px 0px 0px;
    border-bottom-color: #6D84B4;
}
.dropdown .dropdown_close { display: none }
.dropdown:target .dropdown_close { display: inline-block }
.dropdown:target .dropdown_open { display: none }
/* .dropdown .dropdown_button img {
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
    margin-right: 5px;
}
   ================================================== */
.arrow {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 5px solid #6B7FA7;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}
.dropdown:target .arrow {
    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}
.dropdown .dropdown_content {
    display: none;
    position: absolute;
    border: 1px solid #777;
    padding: 0px;
    background: white;
    margin: 0;
}
.dropdown:target .dropdown_content { display: block }
.dropdown .dropdown_content li {
    list-style: none;
    margin-left: 0px;
    line-height: 16px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
}
.dropdown .dropdown_content li:hover {
    border-top-color: #3B5998;
    border-bottom-color: #3B5998;
    background: #6D84B4;
}
.dropdown .dropdown_content li a {
    display: block;
    padding: 2px 7px;
    padding-right: 15px;
    color: black;
    text-decoration: none !important;
    white-space: nowrap;
}
.dropdown .dropdown_content li:hover a {
    color: white;
    text-decoration: none !important;
}
.dropdown .dropdown_content li img {
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
    margin-right: 5px;
    border: none;
}

I know it's damn professional so just go and try this on your documents and blogs.....

Article Source : http://cssdeck.com/labs/facebook-style-dropdown-menu

BigRock Promo Codes : .COM Domain @ Rs 249

BigRock is back with another superb discount on .COM domains. Now you can get a .COM domain @ Rs. 249 only!!! So don't waste your time and score a .COM. You can get a .COM For Rs 249 by clicking here.

Why Choose BigRock? :

BigRock is an ICANN-Accredited Domain Name Registrar that sells Domain names at the most competitive rates in the industry. BigRock's platform powers over 6 million domains. At BigRock they have a seamless domain search process and our cheap domain registration prices are upto 80% lesser than other Registrars. Bigrock is India #1 domain registration and web hosting provider. On BigRock you can register domain names in many different name spaces including .com, .net, .org, .biz, .info, .mobi, .in, .co.in, .co.uk, .asia and many other spaces. Additionally they offer 24X7 support for all your domain registration and web hosting services. So if you are looking for Domain Registration in India look no further. BigRock is the destination for you!.

So go and get a .COM for Rs 249 only by clicking here.

Note : This is a limited time offer only but if this offers expires then you can always get 10% discount on domains by clicking here.

3 Best Websites For Creating A Free Newsletter

Newsletter is the best way to stay connected with you visitors and email them some new and hot content of your site. For my website i was finding some newsletter sites and with all research i found three useful and amazing sites to send your visitor a free and professional style newsletter.

1.Tinyletter : Tinyletter is the easiest and most stylish free newsletter service ever. It's easy to create newsletters on Tinyletter with the help of their rich text and html editor and it's 100% free to use and easy to create. It takes only 1 minute to setup your Tinyletter account and start sending newsletter to your subscribers.You can also embed your newsletter subscription form on your blog.

2.MailChimp : MailChimp allows you to send free newsletter to your subscribers with some really professional templates and with a really powerful newsletter system. It's a both free and premium service , you can send 1200 mails per-month to 2000 subscribers for free after crossing mails/subscribers limit you have to pay a little amount to access more mails and subscribers.

3.Letterpop : Letterpop allows you to create some really vintage and awesome newsletter with his easy to use drag and drop newsletter editor. Put your images , text , flickr images and all in your newsletter and send it by email , feeds , social networks and more.

Well i hope that after reading this you found a new newsletter service for your newsletter.

White Bread Blogger Template

Download Demo
White Bread Blogger Template is first template created by me and it looks really good with a sleek look and some advance features like Bread Crumb and Page Navigation. Please leave your feedback.....

It Contains :
Display Post Author, Date, Labels And Comments Widget.
Custom AddThis Sharing Widget.
Numbered Page Navigation.
Add 3 Column Footer.
Animated CSS3 Navigation Menu.
Breadcrumb Navigation.

How To Install A Blogger Template

Blogger offers to so much free template but they don't look professional at all so when it comes to use a custom blogger template first question comes into a new blogger's mind is how to do that so here we're going to explain you :

• First go to your favorite blogger template resource and download your favorite template or you can also create your own template.

• Your download will contain a .xml file so we have to install this .xml file in our blog.

• Go To Blogger > Template > Click on 'Backup/Restore' :

Now take a deep breath and eat some cookies because we're moving to next step which was easy as hell so just read carefully :

• After clicking on Backup/Restore button a pop-up will appear. Now choose your .xml template file and click on upload just like this :

Now after clicking on Upload it'll take several seconds to upload your template (Depends on your net connection and template size) and after completing loading your new template is ready to use.....Enjoy

Display Post Author, Date, Labels And Comments With Icons Below Post Titles

Today i'am sharing a great post by Helper Blogger. Here is a great widget to show author name , time , label and a comment bar with icons just below your blogger post titles. When there are no comments posted,the comment link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. Here we go :

Installing :

• Go To Blogger > Template > Edit HTML > Tick expand widget templates check box.

• Now search for <div class='post-header-line-1'> and just above it paste following code :

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavzoRG9bfyrjlRqJ-YEyq_E9VrXArh02J5-_Kb8Ks3jSRVE-e9Eg_gwUG0PjAP54kLQ9z8mJqF1zwkHX4gaMCp5yEChjTt1G5nCyNnyH-ry-san5I1-AeeqmH_YfL7S_aSBVoNG39D-U/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuBIJuJnKzy9R9IkTwPmSS4X0_5txI0Xsy9Ixk-Cwq6A5dQjXeylNir6xumH1L62aEpYl-cazDM0naaRoLofzdm1XygHP0OOg8jFYTieaUx5XbWBiZ9LH98h-ozsqTPoGg8ZVuJR2j4U/s1600/clock-icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhdzvktxmxLTbsOUvVsExq9HzYnFON7p8OzGwvD4WaUqmdNhdyItxsiG5zEgiijnWRCpbnqZY7Vturb4Xl96iA9N3QqwzAuazWu9JBHdBALwx90YFXrbwb-VoPgk1XNHzrXTVokmZ_hU/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SZ6VJVZxY0nuGkWd1ezF5fF9s38C9wobjd8TBJMezWUjJ74Hr1WdOhhSzQRjYKJADrevDms8u42BUWEoo0ZB8DJ1XnJko5x69CYXdkpX3l85vo57wCEzjw2dCuxq7nO5vx7nYNvUQdo/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

Customizing :

•  You can change all icons of this widget and also text to display then there is one or zero comments.

Custom AddThis Sharing Widget For Blogger

Here is a sharing widget created by me with the help of AddThis script and first of all i just wanna clear that this is a sharing widget not a link to your social media profiles and it's awesome so trust me and add this.

Just click on Add To Blogger button below and add it on your blog :

Numbered Page Navigation For Blogger

You may saw this navigation on wordpress and other amazing sites by now because of Abu Farhan you can also use this amazing navigation in blogger.So here we go with this quick tutorial :

Installation :

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

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

.showpageArea {
padding:10px;
}
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 5px;
padding:5px;
background:#fff;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#f0f0f0;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:5px;
background:#fff;
}
.showpage a:hover {
text-decoration:none;
background:#f0f0f0;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

• Now search for </body> and just above it paste following script :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
</b:if>
<!--Page Navigation Ends -->

The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed on navigation widgets.

• Save it and enjoy :)

How To Add 3 Column Footer To Blogger

In past i posted a post about 3 column footer widget which was cool but this time this footer is a simple and a basic one but still it looks real good. So without wasting any time just move on to tutorial :

Installing :

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

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

/* ----- End 3 Column Footer Widget Code by http://www.widcraft.blogspot.com  ----- */
#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5);  background:#fff; margin:10px auto 0;  padding:5px 0px 0px 0px;  width:1000px;  border:1px solid #dbe1e6;}
#lowerbar-wrapper{ color:#333;  float:left;  margin:0px auto auto;   padding-bottom:20px;  width:332px;  text-align:justify;  font-size:100%;  line-height:1.6em;  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
.lowerbar{margin:0; padding:0;}
.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px;}
.lowerbar .widget-content{padding:5px 5px 5px 15px;}
.lowerbar h2{background: none repeat scroll 0 0 rgb(79, 165, 241);color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase;}
.main .Blog{border-bottom-width:0;}
.lowerbar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;list-style-type:none;}
.lowerbar li{margin:0px 0px 2px 0px;padding:0px 0px 1px 20px;border-bottom:1px dashed #dbe1e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMO8j_wKkuvv9kD_ZsLIWYjHi5hXQ4IXGw9P39OF7Gh2_ZZ-cjC6NY3kzj0_QFchk2-j72vqcdWP0Q45VtE3ysOio5GyssWD21FyGi96vem1gw-twgT1HU2a0_1Lm52B235A3D9_MdB6xF/s1600/bullet-point-image-1.png) no-repeat left;}
.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none;}
.lowerbar a:hover{color:#A61111; text-decoration:none;}
.lowerbar a:visited{color:green; text-decoration:none;}
/* ----- End 3 Column Footer Widget Code by http://www.widcraft.blogspot.com  ----- */

• Now search for </body> and just above it paste following code :

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Save it and we're done...leave your responses in the comment section below...

5 Must Have Google Chrome Extensions

Google Chrome is worlds #1 browser and it really makes browsing easy and fast but the fact is that it's not #1 just because of fast browsing and sleek looks , it's also popular because of some extensions and stuff which makes it really amazing. So here are top five extensions on my list :

1.RSS Feed Reader : A simple and pretty way of keeping track of your latest RSS and Atom feeds. The best RSS Feed Reader extension for Chrome. Inspired by Firefox's Live Bookmarks.Subscribe to your favorite feeds , organize them and get latest stuff on the go.You can get this extension by clicking here.

2.Silver Bird : Silver Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.Silver Bird is an awesome Twitter client extension for Google Chrome with lots of features. This extension was previously known as Chromed Bird, but has since been renamed Silver Bird.You can get this extension by clicking here.

3.Facebook Notifications : Keep up with your friends, even when you're not on Facebook. This extension connects to your Facebook account to show you what's happening with your friends including:

• Likes and comments on your posts
• Invitations to events
• Posts in your groups
• Friend requests
• New messages
• Other notifications you normally see when you're on Facebook

You can get this extension by clicking here.

4.My Chrome Theme : Create and share Google Chrome themes of your own design.
Add a personal touch to your browser. Create and share custom Chrome themes using your own images and designs.In three simple steps.You can get this extension by clicking here.

5.Screen Capture : It's easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image. You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported. You can get this extension by clicking here.

Have fun with them....you can explore millions of cool extensions on your Google Chrome.....

Solution Of Blogger Naked Domain Redirection Problem

You bought a new domain and still wondering why blogger is not redirecting naked domain to your blog and you're so sick of it ? No more because after suffering same problem i found a solution of it and it's easy. First of all make sure you followed all these steps from this tutorial.

So as we know that Blogger team is working to fix it but last time they took 7 days to fix the custom domain problem now let’s see, we can just wait until the problem is solved. But Seriously there is another way to redirect your non-www domain to www e.g extremetechblog.com to www.extremetechblog.com and we really need to do it because it is not good as in SEO (Search Engine Optimization) term.

How to Solve the Blogger Naked Domain Redirection Problem :

It is not as hard as you are thinking right now, so here is the solution all you need is to create on account Google Apps don’t worry you can create it for free and the sign up is so simple as creating an account on Facebook and remember you put the same URL of your website that you are using with your Blogger blog. After creating the account you will be redirected to the admin panel automatically so you will see a bar on top go to Domain settings > Domain names > Redirect your naked domain now I think it’s time for screen shot it will help you more to understand it quickly.

Now after that you will get a box just type there www and click on Continue >> button then here is the tricky part actually after clicking that button you will see page with full of information that you have to add 4 A-records to the domain DNS settings but seriously I know mostly users have done it already because mapping a custom domain with Blogger domain (blogspot.com) requires us to add those A-records so it’s simple just read the page if you didn’t add those records in DNS of the domain then just go ahead do it now the question is how to do it actually everything is written and described on the page or if you had already added those records like me then simply click on I’ve completed these steps button and that’s it now your Blogger custom domain will redirect from non-www to www go to Blogger Publishing settings to confirm that it’s working properly and also open your website link without www to 100% confirmation.

As you can clearly see in the screen shot above that the check box is checked but remember don’t change the settings otherwise you have to do the same to make the redirection working properly so if you still need some help then I am here just comment below I’ll reply you as soon as I can.

Blogger Naked Domain Redirection

The following action links your naked domain (example.com) to your actual site (www.example.com). If you skip this step, visitors who leave off the "www" will see an error page.

Enter your domain name in the format example.com, and list the I.P. addresses shown below in the "A" section. You'll need to create four separate A-records which point to four different Google IPs.

• Sign in to your domain hosting service.

• Navigate to your DNS Management page. i.e. Domain Management, Advanced Settings.

• Locate the A record settings and create a new A record.

• Enter a value for the host name. Leave this field blank and for some domain hosts, the value '@' corresponds to the naked domain.

• Enter the following IP addresses as the destination value:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

• Save changes with your domain host.

Before you move onto this step, wait about an hour for your DNS settings to activate. If you attempt to change the publishing settings before the DNS changes activate, then we'll let you know with a warning message.

Now it’s time to make sure Blogger knows about your custom domain so that Google can direct readers to your blog. Just head back to Blogger and update the information on your Settings | Basic tab. Find the area for "Publishing," and click the edit link.

Check the Redirect yourdomain.com to www.yourdomain.com

Click on save and we're done.... still facing problems then click here.

Animated CSS3 Navigation Menu For Blogger

First of all i just wanna tell you that i'am working on my first blogger template and i hope to publish it soon on our blog for you all to download.....OK so it's time to give you one for acually two more amazing css3 menu , both are way to much awesome and yea i'am using it on my blogger template and as i wrote that i'll publish it later.

Installing :

• Go To Blogger > Layout > HTML/JavaScript > Post following HTML :

<ul id="menu">              
<li><a href="#">Home</a></li>              
<li><a href="#">Products</a></li>              
<li><a href="#">Services</a></li>              
<li><a href="#">About</a></li>              
<li><a href="#">Contact</a></li>          
</ul>

• Just below above html code post any of these CSS code , both are different :

Code 1 :

<style>
#menu li {              
display: inline;              
list-style: none;              
padding: 0;          
}                        
#menu li a {                                
border: 1px solid #3d8bf2;              
padding: 15px 20px 15px 20px;              
text-decoration: none;              
font-family: arial;              
color:#fff;              
margin-left: -5px;              
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2vTKrQi2f_IlCzzPQ2f2OIAg6Au7Kcuy7z8joh-Gd8VXj-wXZBZnB2S2sn8o7SGyiA_aWJKAkMSb2S70l5oxfPGniQTnoiJWhxhSrGOy5zlITRa8m0NwgIinKA7LSjPJ7huRpY5bwMI/s1600/menubg.PNG');              
background-position: left;              
-webkit-transition: all 0.7s ease-in-out;            
-moz-transition: all 0.7s ease-in-out;              
-o-transition: all 0.7s ease-in-out;          
}                        
#menu li a:hover {              
background-position:right;          
}
</style>

Code 2 :

<style>
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2vTKrQi2f_IlCzzPQ2f2OIAg6Au7Kcuy7z8joh-Gd8VXj-wXZBZnB2S2sn8o7SGyiA_aWJKAkMSb2S70l5oxfPGniQTnoiJWhxhSrGOy5zlITRa8m0NwgIinKA7LSjPJ7huRpY5bwMI/s1600/menubg.PNG');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}
</style>

That’s it! I hope you enjoyed these navigation menu.

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 :