[How To] Create And Enable Mobile Version Of A Blogger Blog

blogger logo

With the growing usage of iPhones, Android devices and other smartphone devices around the world, the number of people who access the internet from their mobile devices. Considering this, it is now very essential that you create a mobile version of your website or blog just to make sure that it fits perfectly on the screens of such devices. If you are a blogger and using WordPress, it’s pretty much easy to setup a mobile version of your blog with plenty of plugins serving the purpose. But what about Blogger? If you still don’t know, the answer is Yes! now you can. Blogger has recently announced the mobile templates for Blogger. But this now is available as an opt-in functionality on Blogger in Draft.

Here’s how you setup and active a mobile version for your blogspot blog without using any hacks:

1. Log in to Blogger in Draft.

Blogger in draft

2. Click on the “Settings” link for you blog

Blog settings link on Blogger dashboard

3. Go to the “Email & Mobile” tab under “Settings”.

Email & Mobile tab under blogger blog settings

4. Under the Mobile Template, choose the first option (Yes, On mobile devices, show the mobile version of my template).

Mobile Template in Blogger

5. You can click on the “Mobile Preview” button to see a preview of how your blog will look on a mobile device

Blogger mobile preview

6. Click the “Save Settings” button at the bottom once you are done.

save settings button in blogger

You have successfully enabled the mobile template for your blog now. Test it by visiting your blogspot blog from a mobile phone or use the QR code found in the mobile template settings to directly go your site on your mobile device.

techrena QR code

[How To] Stop or Disable Hotlinking and Bandhwidth Theft using .htaccess file

We found out that many of our copyrighted popular posts have been copied by many of the bloggers. But with so many traffic hungry bloggers around, it is impossible to track and warn each of the bloggers.

Now, our main concern is that many of our copyrighted images are not only copied to other blogs but also hotlinked. This is a serious issue with every popular blog where hotlinking results to bandwidth theft. Now if you are having similar problems of hotlinking or not, you should disable hot linking for sure.

What is Hotlinking or Inline linking?

Inline linking (also known as hotlinking, leeching, piggy-backing, direct linking, offsite image grabs) is the use of a linked object, often an image, from one site into a web page belonging to a second site. The second site is said to have an inline link to the site where the object is located.[wikipedia]

This is when you insert an image to your blog from an image URL of someone else’s site instead of uploading the image to your server. Many people with limited server storage size tend to do this.

How to stop Hotlinking and Bandwidth theft using .htaccess file?

In order to disable hotlinking follow the steps below:

1. Open your .htaccess file by saving it.

.htaccess file is present in the public_html folder of your blog. This can be accessed by using the ftp client like FileZilla. Hope all webmasters know this. Save the file and open it using notepad.

dot_htaccess

2. Add the code to disable hotlinking of your images

Add the following code to your .htaccess file and save it back to your public_html folder.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\\.)?yoursite\\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\\.(jpe?g|gif|bmp|png)$ http://imagehostsite/warning.jpeg [L]

Change the orange colored code according to your need as shown in the example below.

Example: [Click to Enlarge]

disable_hotlinking

The RewriteCond can be added according to your purpose. If you have any other blog where you want to use the images, then add another line with the site’s address as we have done in the example.

Important notes:

1. Backup your .htaccess file before doing the changes.

2. in the RewriteRule line, you cannot use a warning image uploaded to your site because the warning image itself will be blocked. So upload the image to some other servers like blogger or other image hosting sites

3. The RewriteCond can be added according to your purpose. If you have any other blog where you want to use the images, then add another line with the site’s address.

Now after performing the changes, you can check the other site where your images are hotlinked. An example is given below where our most popular post Reset Windows XP, Vista, 7 Password Using USB Drive or CD was copied.

hotlinking_blocked

Hope you have seen something like ours. Any feedback will be appreciated.

You can also see how to protect your wordpress internal files using .htaccess.

You can subscribe to our RSS feed via email for more tutorials under Blogger Tips.

Swapping Blogger blog title and post title -Blogger SEO tweak

In the previous post about Blogger title tweak, I’ve mentioned about the other way of optimizing blog title structure,swapping blog title name with post title name.

As said earlier,default blogger.com blogs title structure is “Blog Title followed by post title” for individual posts,now let’s see how to change this structure to “Post title followed by blog title”  (swapping).

1.Go to Dashboard>>Select your Blog>>go to Layout Section>>Click Edit HTML tab

edit html in blogger layout

Find the little HTML section code shown by the red arrow in the following image your template HTML code

tweaking blogger title Where you’ll find the following title tag.

<title><data:blog.pagetitle/></title> [Note:You may also use CTR+F function in your browser to search this little code.]

3.Replace the above code with this one:

 <b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

[note that this will still show your blog title at home page,only changes individual posts structre]

4.Save the Template and open any post from your blog and observe the title structure on the top of your browser it must now look like “blog post title | blog title

Like wise,Wordpress blogs titles also can be tweaked for better Search Engine Optimization,soon be posted here.

Please feel free to leave a comment here if you are having any troubles while doing this.

Blogger blog title tweak for better SEO

Blogger.com is most widely used free blogging platform on the internet.Easy to use interface,ability to  publish post at one click does make it a highly recommended platform for newbie bloggers.

Having said that,one must also say that Blogger  blogs are not so optimized for Search Engines.Take for instance the title structure of the individual posts which is “Blog title followed by Post title” by default in blogger.This may not be the one you want particularly if you are concentrating on SEO for your blog.

Let’s see one way to change this Blogger default title structure for individual posts to just “post title” (thus eliminating the undesired blog title at the beginning of the title structure].

1..Go to Dashboard>>Select your Blog>>go to Layout Section>>Click Edit HTML tab

edit html in blogger layout

2.In the template HTML code,look for(use CTR+F to find) the following little HTML  code:

title><data:blog.pagetitle/></title> [pointed by the red arrow in the image].

tweaking blogger title

3.Replace the above code with the following code:

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

4.Hit the Save Template button and load any of your blog posts in the browser and observe the change in the title structure,the new structure will only show Post title alone.

You may also want to refer to next post covering how to swap your blogger title with post title instead of completely removing the blog title from title structure.