Monday, 29 April 2013

Create A Mobile Version Of Your WordPress Blog

Recently, I migrated my WWE News blog from Blogger to WordPress, and because of that lots of WordPress tutorials are on their way.

Earlier today, I shared a tutorial about Create A Mobile Version Of Your Blogger Blog, and now it's time for WordPress users. Creating a mobile friendly site is a great idea to gain some extra views. Also, it'll be easy for your users to access a small mobile version of your site.

There are lots of ways to create a mobile version of your WordPress site, and I'll share two best of them. Both are totally free. Here we go:

By Using Jetpack:

This is a very basic thing, and you can't customize this. Jetpack is a WordPress plugin that supercharges your self-hosted WordPress site with the awesome cloud power of You can install Jetpack by clicking here.

Jetpack was pre-installed on my hosting. Follow these instruction to enable mobile site powered by Jetpack:

  • Install Jetpack from your WordPress or from this link.
  • After installing, activate this plugin and visit Jetpack tab:

  • On Jetpack tab, scroll down a bit and find Mobile Theme option.

  • Click on Activate, and that's it.

Seriously, Jetpack is a great plugin but Mobile Theme by Jetpack really sucks. So I recommend you to deactivate Jetpack's Mobile Theme and use second option. However, if you're using Jetpack then your visitors by mobile will see a simple mobile version of your site.

By Using MobilePress:

MobilePress is a plugin for WordPress that renders a mobile friendly version of your WordPress website or blog. It allows for custom themes and a few other mobile friendly settings. You can install MobilePress by clicking here. Preview of this tutorial is also a MobilePress site. Here is how to use MobilePress:

  • Install MobilePress from your WordPress or from this link.
  • Activate MobilePress plugin, and that's it.

You can easily view your mobile theme in a web browser by visiting

Remember, to view your normal blog theme again, simply visit

That's it for this time. In future, I'll discuss more about MobilePress and Jetpack.

Create A Mobile Version Of Your Blogger Blog

It's 2013, almost every teen is using a mobile phone to access internet. Even I surf tons of wap pages on my Android everyday. Creating a mobile friendly site is a great idea to gain some extra views. Also, it'll be easy for your users to access a small mobile version of your site.

In this tutorial, I'll show you how to create a mobile friendly version of your Blogger blog. You can check mobile version of BWidgets by clicking here. We're going to do this tutorial in three simple steps. First step is important, while second step is optional, and third step is only for custom domain blogs.

Creating A Mobile Version:

There are lots of sites, which offers you to create free mobile site, and for that they put ads on your site, which totally sucks. However, some premium sites give you full access, but as I said they are premium.

We don't need a stinking service to create a mobile version of our site. We're going to use Blogger's mobile template for our site, which is best option. Blogger provides lots of amazing mobile templates for us. Some people don't use Blogger mobile template because they are ugly but that's not true. Click here to check our mobile site, which looks totally flawless. So here is how to turn on mobile template:

  • Go To Blogger > Template > Click on Mobile option > Turn on mobile template and choose a theme for your blog:

After turning this option, you can access your mobile blog at

That's it for first step. Now, you can leave this tutorial here or you can check next step, if you want to remove Powered By Blogger option from your mobile template.

Removing Credits:

In February, we discovered a way to remove this attribution widget from both mobile and default template. ithout wasting any time, let's get started:

  • Go To Blogger > Template > Edit HTML > Proceed
  • Find and remove following code from your template:

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

  • Find </body> in your template and just above it paste following code:

<div style='display:none;'>
<b:section class='hiddenbar' id='hiddenbar' preferred='no'>
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

  • Save your template, it's done.

Let me explain this, instead of removing attribution widget, we hid this widget with css. If you only add mobile='no' property in your attribution, instead of this code, it'll only remove this widget from your mobile template.

If you're using free Blogger domain then this tutorial is over for you, but if you're using custom domain then don't forget to check next step.

Create A Mobile URL:

Time for a cool step. If you're using a custom domain, then why not give our mobile website a new address? I mean it'll be easy for your visitors to access your site from In this step, I'll only explain what to do.

Visit your domain registrar, then visit your domain control panel and choose domain/sub-domain forwarding/redirecting. Now redirect to

If you're using GoDaddy, then you can learn more about domain forwarding at this link. As of writing, mobile url of BWidgets is not available, since our domain registrar doesn't provide this service, but soon I'll transfer my domain to GoDaddy.

Hope this tutorial helped you. Don't forget to leave a comment.

Friday, 26 April 2013

Configure Windows Live Writer For Blogger

Windows Live Writer is a great WYSIWYG authoring software, and is currently compatible with Windows Live Spaces, SharePoint blogs, Blogger, LiveJournal, TypePad, WordPress, and all blogs that support RSD.

With WLW (Windows Live Writer), you can easily write and publish your posts to your blogs. WLW's post editor is very smooth, easy, and flexible to use. In this post, I'll teach you how to setup your Blogger hosted blog with WLW. It's easy, just follow these simple steps:

  • First visit this link and install Windows Live Writer on your device. It's fast and easy!
  • After installing, open Windows Live Writer, which may look something like this:

  • To configure your Blogger blog, click on "Other blog service" option on your Live Writer (As Image above), and click on Next.

  • On next window, put your blog's web address, your Blogger username, and password. You can also put your free Blogger blog address there. Click on Next.
  • After clicking on next, it'll take a bit time to configure your Blogger (Based on your connection). After loading, you'll see following confirmation screen:

  • Enter your blog's nickname, which is nothing more than your blog's name. Finally, click on Finish button and it's done!

Now, you'll see Windows Live Editor's post editor, and you can start posting now! Don't forget to leave your responses in the comment section below...

Thursday, 18 April 2013

Using Disqus Comment Box On Multiple Subdomains

Sorry guys, I'm not getting much time because of my exams and bunch of other issues. However, I'm still active in comments to help users. Right now, I'm only replying to users that needs my help. Let's get back to topic.

Disqus comment system is one of the most advances and user-friend service for bloggers and webmasters. With a few quick steps, you can turn your old comment system into a new way to engage your visitors.You can check our full Disqus archive by clicking here, which contains four useful Disqus widgets, and more.

If you're creating a single community for discussions for all your site’s subdomains, you may want to add a single Disqus system on all your domains. It'll make moderating a bit easier, and also less mess around your Disqus dashboard. It also works if you have a different site as your website's mobile version. Here we go:

  • Visit your Disqus comment's General Settings page(for ex.
  • Change your website's url from to

That's it! If your sub-domains don’t have related content, then Creating a new Disqus profile for each is better option.

Saturday, 13 April 2013

Easy Way To Create CSS Sprites

Idea of a sprite, a sprite is basically multiple graphics compiled into one image. It makes your website really fast. For example, CSS sprites compile an icon set into a single image, which saves a lot of space.

For newbies, it's really hard to create CSS sprite, so here is a service which makes it easy. Even professionals use this service to save their time, since photoshop takes much time to create sprites.

SpritePad is your free and easy-to-use web app for creating CSS spritemaps. With SpritePad you can create your CSS sprites within minutes seconds. Simply drag and drop your images and have them immediately available as one PNG sprite + CSS code.

You can visit SpritePad by clicking here.

Tuesday, 9 April 2013

5 Reasons To Choose Blogger As Your Blogging Platform

On August 23, 1999, Blogger was launched by Pyra Labs. As one of the earliest dedicated blog-publishing tools, it is credited for helping popularize the format. In February 2003, Pyra Labs was acquired by Google under undisclosed terms.

Before starting a blog, it's a hard decision to choose your blogging platform. I'm hosting all of my blogs on Blogger, and soon I'll shift WWE Fans Nation to WordPress. Don't worry because this blog is not going anywhere.

Every blogging platform is good, but it depends on your blogging style, topic, and limits. For example, Blogger is not a really good choice for a php developer. Here are top 5 reasons to pick Blogger as your blogging platform:

It's Free:

Blogger is 100% free to use. You don't need any type of hosting, image hosting, video hosting, server, or any other service to use Blogger. You can use with your blog for free. They don't charge any type of fee for this. Also, you can use AdSense and all other services to make some money with your free blog. When I started blogging, One of the reasons why I chose Blogger was this. You can create up-to 100 blogs from your account.

Easy To Use:

Blogger is way too much easy for, even for newbies bloggers. It's very easy to run a blog on Blogger without anyone's help. It takes less than one minut to setup your Blogger account and blogs, while it takes a lot of time for newbies to setup a WordPress account. Previously, a knowledge of such technologies as HTML and FTP had been required to publish content on the Web.

Safe And Secure:

I never heard of a Google account getting hacked. That's right, it's impossible to hack a Blogger/Google account, unless a user knows your password. If you are a blogger, then you will know about Labnol and Amit Agarwal, the first professional blogger from India. Amit's blog is hosted on WordPress. On June 30 2012, Amit's blog got hacked. Here is what Amit had to say about the hacking -

I have been mostly offline for the last two weeks, trying to spend as much time with him as possible, and then another unfortunate event happened. Someone managed to hack into my websites during this time. I did try cleaning up but, because of reasons now known to you, it was impossible for me to focus on the website.

On July 1st, the hacker stepped on the gas and deleted every single file /website that was hosted on my web server. I do not know how this happened and I may have lost some of my previous work but there’s a good side to the story – this fellow was kind enough to spare my databases and hence the main site is at least up and running now.

This is a difficult period but am hopeful that things will be normal soon. Thank you for all the support and I will see you online in the coming weeks.

Easy To Customize:

Without any doubts, Blogger is the easiest blogger platform when it comes to customization. Although it has some limits, but it's too easy to customize. Anyone with a HTML and CSS knowledge can customize their blog and template. Unlike Blogger, WordPress is based on php, which is really hard to customize.

A Google Product:

As I noted above that in 2003, Blogger was acquired by Google. Google provides best service and support to their users. You'll also get unlimited image hosting from Picasa. Google provides all latest SEO and advance blog services to their customers. Even I chose Blogger because of this reason.

Hope this will help you. Also, don't forget to write your review in the comment section below.

Friday, 5 April 2013

Picasa Storage Limits

All Google +, Picasa, and Blogger users uses Picasa as their primary image storage. Now we can upload virtually all photos to our accounts without going over the storage limits. Same stands for videos 15 minutes or under. Please keep in mind the following account limits:

  • Maximum photo size: Each image can be no larger than 20 megabytes and are restricted to 50 megapixels or less.
  • Maximum video size: Each video uploaded can be no larger than 1GB in size and 12 minutes in length.
  • Maximum number of web albums: 20,000
  • Maximum number of photos and videos per web album: 1,000
  • Total storage space: Picasa Web provides 1 GB for photos and videos. Files under certain sizes don't count towards this limit. If you're a Google+ user, photos up to 2048 x 2048 pixels won't eat up your storage space. For non-Google+ users, the photo size limit is smaller: 800 x 800 pixels.

Hope this information will help you in future.

Tuesday, 2 April 2013

How To Create A Google Chrome Extension

Google chrome extensions looks so hard to create but they're not. If you've ever built a web page, you should feel right at home with extensions pretty quickly. You can create a extension with basic HTML/CSS/JavaScript knowledge. You don't need be an expert for this tutorial.

In this tutorial, I'll discus about create a full chrome extension, from it's beginning to end. I'll also explain every single file of our extension.

Files We Need:

In this whole process, we need five files, which are following:

  • manifest.json: JSON-formatted table of contents, containing properties like your extension's name and description, its version number, and so on.
  • popup.html: This will be stuff inside the popup window.
  • popup.js: This one is optional. In this file we'll store all of our JavaScript, if you're using.
  • icon.png: This will be displayed next to the Omnibox, waiting for user interaction.
  • logo.png: This will be displayed in your chrome's extension tab as extension logo.

Create a new folder on your desktop. We'll use this folder to save our files. Time to explain each file:


This will be containing properties like your extension's name and description, its version number, and all. This file will declare to Chrome what our extension is going to do. Here is our manifest.json file (You can create this on notepad just like html files):

  "manifest_version": 2,

  "name": "BWidgets",
  "description": "Making Blogging Better.",
  "version": "1.0",
  "icons": { "128": "logo.png" },
  "homepage_url": "",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"

The first line of above code declares that we're using version 2 of the manifest file format. Version 1 is old and not that awesome, according to Google.

The next block defines the extension's name, description, version, icon, and homepage url. This will be used in both Chrome browser and Chrome webstore.

Final block is pointing to two files, which are our extension's icon and popup window. icon.png will be displayed next to the Omnibox. It's just a 19px-square PNG file. popup.html will be stuff inside our extension, which is basically some HTML and CSS.


This will be stuff inside the popup window. We're going to put all of our CSS and HTML into this file. Below is basic mark-up of this file:

<!doctype html>
      body {
        min-width: 357px;
        overflow-x: hidden;

Add Your CSS Here


    <script src="popup.js"></script>

Add Your HTML Here


As shown above, in our HTML file, we are going to put all of our CSS styling between <style> ... </style> tags.

JavaScript and HTML must be in separate files. So, instead of adding JavaScript directly, we'll point to our .js file. This step is option, only if you're using JavaScript.

Last but not the least, we'll add all of our crappy HTML code between <body> ... </body> tags. Now just save this file with your manifest.json file.


As note above, JavaScript and HTML must be in separate files. So we pointed this file on our popup.html file. You can add your JavaScript in this file, if you're using. If you're not using JavaScript in this file, then we don't need this.


This will be displayed next to the Omnibox, waiting for user interaction. It's just a 19px-square PNG file. You can easily create this with Photoshop or Gimp.


This will be displayed in your chrome's extension tab as extension logo. This will be a 128x128 PNG file, because we added this size on your manifest.json file.

Put all of these five files in a folder. Let's just name is "Hardeep Asrani is great." Now it's time for us to see this this extension in action.

Load The Extension:

Chrome Web Store extensions are packaged up as .crx files, which is great for distribution, but not so great for development. Chrome gives us a quick action to load our extension for testing.

  • Click on Google Chrome Menu > Setting > Extension
  • Ensure that the Developer Mode checkbox in the top right-hand corner is checked.
  • Click Load unpacked extension… to pop up a file-selection dialog.
  • Navigate to the directory in which your extension files live, and select it.

If the extension is valid, it'll be loaded up and active right away! If it's invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

Pack The Extension:

You can also pack your extension as .crx file, by using following simple steps:

  • Click on Google Chrome Menu > Setting > Extension
  • Ensure that the Developer Mode checkbox in the top right-hand corner is checked.
  • Click Load pack extension… to pop up a file-selection dialog.
  • Navigate to the directory in which your extension files live, and select it.

You'll get a .crx file of your extension.

What's Next?

Hope this tutorial helped you. Now, you can publish your extension to Chrome Web Store by clicking here. Publishing your extension is free, but you have to pay a one time $5 developer fee. Don't forget to leave your comments.

Popular Posts

Powered by Blogger.