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 http://yourblog.blogspot.com/?m=1

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'/>
</b:section>
</div>

• 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 m.yoursite.com. 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 m.yourdomain.com to http://www.yourdomain.com/?m=1.

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.

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...

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. http://example.isqus.com/admin/settings/)

• Change your website's url from http://www.example.com to http://example.com

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

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.

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 .blogspot.com 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.

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.

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:

manifest.json:

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": "http://www.bwidgets.com",

  "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.

popup.html:

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>
<html>
  <head>
    <title>BWidgets</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

Add Your CSS Here

    </style>

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

Add Your HTML Here

  </body>
</html>

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.

popup.js:

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.

icon.png:

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.

logo.png:

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.

Blogger Label Specify Feeds

Past June, I shared a tutorial about showing recent posts from a label, which was a helpful post. Earlier today, I was thinking if we could subscribe to specific label from our blog to get what we really want, and I read that article again and found a way to do this.

We don't need any other service, code or script to do this. It's just to easy and common thing. Also, email subscriptions of these feeds is not possible. It's a great idea to five your reader's an option to subscribe to their favorite content.

Now time to begin this tutorial. So, first below is our magic code :p

http://yourblog.blogspot.com/feeds/posts/default/-/LABEL

• First, in above code replace yourblog with your blog's url.

• Now replace LABEL with the name of the label you want. If your label is made up of more than one word it can get confusing as the space between the words will be filled automatically as shown below :

http://yourblog.blogspot.com/feeds/posts/default/-/Blogger%20Widgets

That's easy! Now subscribe to it with your favorite reader. It's sad that Google Reader is shutting down.

Rest In Peace ~ Reid Flair (February 26, 1988 – March 29, 2013) ~ Son of the legendary Ric Flair ~ We lost a young talent.

How To Customize YouTube Embedded Player

Most of bloggers/webmasters choose to host their videos on YouTube instead of their own website, which is a great way to get some extra views. Because if you're hosting it on YouTube, your video will also be visible to more than 800 million unique users every month. Also, by adding a backlink to your website, you can get some visitors from YouTube as well.

If you are going to use YouTube to host videos for your site, at the least, you should know some ways in which you can customize YouTube's embedded player.

YouTube Player Parameters:

To customize our YouTube player, first we need to learn about YouTube player parameters. So, I made a list of YouTube player parameters, which is available at this link. All of the parameters are optional. Note that these parameters are only officially supported by the embedded player.

For example, we're going to use "Autohide Video Controls After A Video Begins Playing," "Video Details" and "Video Player Theme" parameters from the list.

Customizing Old YouTube Player:

If you're still using old YouTube player, which is not a much smart choice but still, you can customize it with parameters. Below is the sample code of a non-customized YouTube player:

<object width="600" height="338"><param name="movie" value="http://www.youtube.com/v/6UWDdxJ_gZQ?hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6UWDdxJ_gZQ?hl=en_US&version=3&autohide=0&showinfo=0&theme=light" type="application/x-shockwave-flash" width="600" height="338" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Now to customize this player, we will add autohide=0 (to hide video controls after video begins playing), showinfo=0 (to hide video info) and theme=light (to add light theme to player.). Here is the customized old YouTube player:

<object width="600" height="338"><param name="movie" value="http://www.youtube.com/v/6UWDdxJ_gZQ?hl=en_US&version=3&autohide=0&showinfo=0&theme=light"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6UWDdxJ_gZQ?hl=en_US&version=3&autohide=0&showinfo=0&theme=light" type="application/x-shockwave-flash" width="600" height="338" allowscriptaccess="always" allowfullscreen="true"></embed></object>

We'll add each parameter with "&" tag.

Customizing YouTube Player:

Now it's time for those who are up-to-date, and are using new YouTube player aka iFrame player. Customizing new player is same as old player. Below is the sample code for non-customized new YouTube player:

<iframe width="600" height="338" src="http://www.youtube.com/embed/6UWDdxJ_gZQ" frameborder="0" allowfullscreen></iframe>

First, we'll add "&" tag after video url. After "&" we'll add our first parameter, such as autohide=0. Then we'll add rest of parameters following "?" tag. Below is the code of customized new YouTube player:

<iframe width="600" height="338" src="http://www.youtube.com/embed/6UWDdxJ_gZQ?autohide=0&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>

That was easy! Hope it'll help you in future posting. Finally, below are both, non-customized (in left) and customized (in right) YouTube players:

List Of YouTube Embedded Player Parameters

Below is a list of YouTube Embedded Player Parameters (How To Use):

Autohide Video Controls After A Video Begins Playing

Type	Parameter	Supported Players
Default	autohide=2	AS3, AS2, HTML5
Enable	autohide=1	AS3, AS2, HTML5
Disable	autohide=0	AS3, AS2, HTML5
Only Progress Bar	autohide=2	AS3, AS2, HTML5

Autoplay Video

Type	Parameter	Supported Players
Default	autoplay=0	AS3, AS2, HTML5
Enable	autoplay=1	AS3, AS2, HTML5
Disable	autoplay=0	AS3, AS2, HTML5

Closed Captions

Type	Parameter	Supported Players
Default	Based on user preference	AS3, AS2
Enable	cc_load_policy=1	AS3, AS2
Disable	cc_load_policy=0	AS3, AS2

Color Of Highlighted Progress Bar

Type	Parameter	Supported Players
Default	color=red	AS3, HTML5
Red	color=red	AS3, HTML5
White	color=white	AS3, HTML5

Video Player Controls

Type	Parameter	Supported Players
Default	controls=1	AS3, HTML5
Enable	controls=1/controls=2	AS3, HTML5
Disable	controls=0	AS3, HTML5

Keyboard Controls

Type	Parameter	Supported Players
Default	disablekb=0	AS3, AS2
Enable	disablekb=0	AS3, AS2
Disable	disablekb=1	AS3, AS2

Javascript API

Type	Parameter	Supported Players
Default	enablejsapi=0	AS3, AS2, HTML5
Enable	enablejsapi=1	AS3, AS2, HTML5
Disable	enablejsapi=0	AS3, AS2, HTML5

Video Start And End Time

Type	Parameter	Supported Players
Start	start=(seconds from the start)	AS3, AS2, HTML5
End	end=(seconds from the start)	AS3

Fullscreen Button

Type	Parameter	Supported Players
Default	fs=1	AS3
Default	fs=0	AS2
Enable	fs=1	AS3, AS2
Disable	fs=0	AS3, AS2

Video Annotations

Type	Parameter	Supported Players
Default	iv_load_policy=1	AS3, AS2, HTML5
Enable	iv_load_policy=1	AS3, AS2, HTML5
Disable	iv_load_policy=3	AS3, AS2, HTML5

Displaying User, Search Or Playlist

Type	Parameter	Supported Players
Playlist	listType=playlist&list=(Playist ID)	AS3
User	listType=user_uploads&list=(Username)	AS3
Search	listType=search&list=(Search Term)	AS3

Auto Repeat/Loop

Type	Parameter	Supported Players
Default	loop=0	AS3, HTML5
Enable	loop=1	AS3, HTML5
Disable	loop=0	AS3, HTML5

YouTube Logo

Type	Parameter	Supported Players
Default	modestbranding=0	AS3, HTML5
Enable	modestbranding=0	AS3, HTML5
Disable	modestbranding=1	AS3, HTML5

Related Videos At End

Type	Parameter	Supported Players
Default	rel=1	AS3, AS2, HTML5
Enable	rel=1	AS3, AS2, HTML5
Disable	rel=0	AS3, AS2, HTML5

Video Details

Type	Parameter	Supported Players
Default	showinfo=1	AS3, AS2, HTML5
Enable	showinfo=1	AS3, AS2, HTML5
Disable	showinfo=0	AS3, AS2, HTML5

Video Player Theme

Type	Parameter	Supported Players
Default	theme=dark	AS3, AS2, HTML5
Dark	theme=dark	AS3, AS2, HTML5
Light	theme=light	AS3, AS2, HTML5