How to activate your blog on mobile

That’s right, Blogger is now mobile-friendly. Once activated, Blogger will automatically redirect to a mobile template (with a specially formatted layout suited for small screen sizes), whenever a visitor access your blog from a mobile device. To enjoy this new feature, all you have to do is activate the mobile template in Blogger In Draft.

I.  How to enable mobile template

1. Log in to Blogger in Draft (opens in a new window).
2. Go to Dashboard > Settings > Email & Mobile.

3. Before you do anything else, you might want check out how the mobile version of your blog would’ve looked like. Do this by clicking the MOBILE PREVIEW button.

4. To opt for showing the mobile version on mobile devices, just click the first radio button: “Yes, On mobile devices, show the mobile version of my template”.

5. Don’t forget to scroll down the page and click SAVE SETTINGS.

II. Feature Highlights
Below are some feature highlights as described in Blogger In Draft blog.

Automatic redirection 
Blogger checks if your blog is accessed from a mobile device, and if it does, redirects it to the mobile template. For now Blogger only supports WebKit-based mobile browsers.

Template support
Blogger is initially supports Template Designer’s Simple and Awesome templates (6 variants each). If you have used one of these templates, your mobile view will be rendered in the same style as your desktop view. Some gadgets such as Header, Blog, Profile, AdSense, Attribution are also supported. Other template variants will be rendered as Simple.

Adsense ads
If you have AdSense gadget ads or inline ads installed, they will be displayed at the top of the post pages and at the bottom of the index page.

Comments and videos
You can  make comments and watch videos as usual.

Enjoy!

Read the rest of this entry »

Posted in Blogger , Mobile , Widgets

How to start a blog

The term "blog" comes from two words - web and log (web log). It is a journal where your thoughts and opinions are recorded, just like the paper-based journal, but with three distinct differences (that I could think of);

• It is published on the internet rather than on paper.
• It is open for public to read (this is optional).
• It is interactive –readers can leave comments and you can answer them.

To start a blog is easy, and it can be done for free.

Steps in starting a blog:

1. Find a blogging provider. There are many blog providers available, most of them complete with template. Two of the more popular ones are Blogger and Wordpress. lf uses Blogger (recognized by the .blogspot extension).
2. Sign up with the one you like. For Blogger the step by step sign-up process is explained here.
3. You may not like the default templates, but go ahead with the sign-up. The template can be changed later if you wish. There are lots of sites offering free templates..
4. The first thing to do after sign-up is to write and publish your first post. The purpose is for you to learn the mechanics of editing, previewing, publishing etc. So don’t think too much about this first post, just write something and publish. You can always delete later if you don’t like it.
5. Decide if you want to keep your blog private or open it to public. You can set this in Dashboard>Settings.
6. After a few postings and fine tuning your blog, you want to spread the word –tell your colleagues and friends about it, give them the URL (e.g. www.iluvroy.blogspot.com). Ask them to leave comments or suggestions.
7. Keep on posting on regular basis, at the same time visit other blogs, learn from them. Write a comment before you leave and don’t forget to put your blog URL too.

Still don’t understand what to do? Try this video.

Happy blogging...

Read the rest of this entry »

Posted in Blog , Blogger , SEO , URL , Website

What are backlinks and how do I use them?

  The Quick Answer

• Backlinks display other webpages that link to your posts.
• To enable backlinks on your blog go to your Settings|Comments tab and select Show

Backlinks enable you to keep track of other pages on the web that link to your posts. For instance, suppose Alice writes a blog entry that Bob finds interesting. Bob then goes to his own blog and writes a post of his own about it, linking back to Alice's original post. Now Alice's post will automatically show that Bob has linked to it, and it will provide a short snippet of his text and a link to his post. What it all works out to is a way of expanding the comment feature such that related discussions on other sites can be included along with the regular comments on a post.
The backlinks setting can be found under the Settings | Comments tab, and consists of a single, simple option to turn it on or off:
Our default templates are already set up with the necessary code for backlinks. However, if you have a custom template, or one of our templates from before this feature was launched, you will need to add the code yourself. Instructions for that are here.
Once everything is set up, you'll see a new link marked "Links to this post" next to the comment link for each post:
If you click that link you'll be taken to the post page, where the backlinks are all listed beneath the comments. Clicking the triangles next to each link will display a snippet of text from the page linking to you, as well as some author and date information.
If you want to turn off backlinks for individual posts, you can do so. The process is the same as that for turning off comments. Just edit the post in question and change the options that appear below the posting form:
Notes:

• For the curious, this feature is based on the link: operator of Blog Search. So sites linking to your blog will need to be indexed by Blog Search and there may be a slight delay before the backlinks appear on your blog.
• The comment notification email setting does not apply to backlinks, so you will not be notified of new links when they appear. This is because these links are looked up on-the-fly each time you view an individual post.
• In lieu of comment notification, you can use Blog Search with a query such as link:your-blog-here.blogspot.com, and then subscribe to the results. That will have a similar effect.

Read the rest of this entry »

Posted in Adsense Tips , Backlinks , Blogger , SEO

How to add signature to every post

In this blog post I’m going to write a quick guide on how to add your signature to every blog post in Blogger. To do that you just need to add a piece of code in your Blogger template in order to make the signature appear in the footer of your blog posts. So first you need to have an image of your signature. If you don’t have it then you can write it in a piece of paper and scan it or you can design it with Photoshop or other photo editing software.

To make your signature appear in your blog post in Blogger follow these steps:

1. Login to your Blogger account and go to Design.

2. Click at the Edit HTML tab which will lead you to the Edit Template page.

3. At the Edit Template page check the Expand Widget Templates option. Now you have to be careful here. First find <data:post.body/> and right after it paste the following code:

<img src=’URL OF YOUR SIGNATURE IMAGE‘ style=’border:0px; background: transparent;’/>

Upload your signature image, copy the url and paste it instead of URL OF YOUR SIGNATURE IMAGE and click SAVE TEMPLATE.

Now go back to your blog and see the changes. Happy blogging!

Read the rest of this entry »

Posted in Blogger , Post , Signature , Widgets

How to Add Facebook Like Button Below Post Titles

If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:

Adding Facebook Like Button To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand Widgets Templates" Box
4. Search for this,

<data:post.body/>

5.    Just above it paste the code below,

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

6.   Save your template and you are done!

Visit your blog to see it working just fine just below post titles. Feel free to ask any questions you may have.

Read the rest of this entry »

Posted in Blogger , Facebook , floating buttons , Social Media Buttons

How to add Facebook and Blogger Comments Box

The Facebook comments box is a convenient way to expand comment accessibility. Facebook has the largest base of users in the world and their reach continues to grow. Chances are readers have either a Facebook account or one Blogger accepts. In this article, I'll show you how to add Facebook comments along side Bloggers built in system.

Adding the Tabs
Let's begin by adding the Tabs HTML. Open your template in Design->Edit HTML and check Expand Widget Templates. At this time click on Download Full Template and save a copy of your template. This modification is significant and in case of an error installing, you may need this backup to restore your template. After backing up, search with Ctrl+F for class='comments'. Below this found line place the following code:


<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>

<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>

<fb:comments-count expr:href='data:post.url'/> Comments

</div>

<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>

<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments

</div><div class='clear'/>

</div>


Creating Tab Pages

Now that your tabs are in place, the comments must be segmented into 'pages' to be shown or hidden as a user chooses. Just after the Tab code I had you paste, insert this code:
   
<div class='comments-page' id='fb-comments-page'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='fb-root'/>
   <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
   </b:if>
   </div>
   <div class='comments comments-page' id='blogger-comments-page'>

This includes a 400px wide Facebook comments box and designates a page for blogger comments. You may change the 400 to whatever width suits your blog.

Tab Scripting and Styles
Two more additions remain to get things working properly. Once again open search with Ctrl+F and look for <head>. Below this line paste the following script:


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
  $(".comments-tab").addClass("inactive-select-tab");
  $(selectTab).removeClass("inactive-select-tab");
  $(".comments-page").hide();
  $(selectTab + "-page").show();
}
</script>

These scripts are required to make the tabs function. If you already have another Facebook plug in or JQuery script included elsewhere, you may omit the first two lines. In order to gain moderation privledges to the comments, you must change the thrid line YOUR_FB_ID to your Facebook account ID. All that's left now are the Styles to make things look nice. Again search with Ctrl+F this time for #comments. Paste the following styles on the line above:


.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

You may choose to alter these styles to suit your blog, but all 6 should be included in some form. Save your changes and visit an individual post page. Posts should now have Facebook and Blogger Comments at the bottom with tabs to select your favored option. These will not appear on the main page, only individual post pages.

Conclusion
The Facebook Comments Box is an excellent way to give visitors choice in conversing with you while limiting anonymous spam. There's the added bonus of social exposure through visitors friends seeing the comments. Although, you cede some control over the comment storage to Facebook and future portability may be an issue. Still, I believe the potential for exposure and social interaction while maintaining the Blogger default option makes this an excellent choice.

I realize these install instructions are fairly extensive, it's the price we pay for tabbed comments unfortunately. You may reach me for assistance through any of the three comment options provided below. Thanks for reading and good luck with your blogging.

Enjoy!

Read the rest of this entry »

Posted in Blogger , Comments , Facebook , Multi-Tabbed , Widgets

How to hide labels from blogger post footer

Hide labels from blogger post footer ! just very easy as you want :)

Many people want or prefer to hide labels or tags from the post footer ,therefore we are going to the following steps !

Read the rest of this entry »

Posted in Blogger , Footer , Labels , Widgets

How To Add Flash Animated Label Tags Cloud Widget

If it is said that “Pictures speak a thousand words“, then it would not be wrong to say that “Flash speak a million words“.

And because we all want our blogs look great for our visitors, we need to give our labels widget good style.

And here we are:

• Go to Layout -> Edit HTML
• Click on Expand Widget Templates
• Find the next code (use Ctrl+f)

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

• Past the next code just after the above one

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogger eHow by <a href='http://www.bloggerehow.blogspot.com/'>Roy Paran</a> and <a href='http://www.abdul-hakeem.com'>Field of Dreams</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

• Customize you widget by changing the red words as: (Labels):title (250):width, (200):height, (#ffffff):background color and (000000):links color.
• Click Save Template
• Go to Layout and change its location as you like

Enjoy!

Read the rest of this entry »

Posted in Animation , Tags Cloud , Widgets

How to make multi-tabbed widget for blogger

Tabbed content box or tab view is a great way to maximize the usage of precious screen real estate on your blog.

There are quite a few tutorials out there that show how to create tabs with CSS and jQuery. However, most of them require you to modify your blog template codes. On top of that you also have to manually add the content of each tab.
Fortunately, with this tutorial you don’t have to go to all that troubles. All you have to do is add our tabber code into a HTML/Javascript widget. Once added, it will transform your Blogger blog’s existing widgets into tabs, automatically!

See the demo here.

1. Below are some of the features of the tab content box:
2. Accommodates unlimited number of widgets.
3. Keeps the tabbed widgets’ original appearance.
4. Fully widgetized for ease of installation and removal. If you don’t like what it does, simply remove the HTML/Javascript gadget.

Installation

1. Go to Design > Page Elements and click Add A Gadget.
2. Select HTML/Javascript widget.
3. Leave the title box blank.
4. Copy the code below and paste it inside the content box.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://bloggerehow.blogspot.com/2011/06/how-to-make-multi-tabbed-widget-for.html" target="_blank">Widget </a></p></div>

• Red color line is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has a slider, cycler or something with fading effect running, chances are it is powered by jQuery.
• Specify the number of widgets that you want to turn into tabs in Green color line.
• The default box background color is white (#fff). You can change it in Blue color line. Apply the same color for the active tab’s background and bottom border.

5. Position the HTML/Javascript gadget above the gadgets that you want to tabify.

6. Click Save and view your blog.

Post-installation

• Make sure you title each widget that you want to tabify. Tabber won’t work properly without widget titles.
• Reduce tab widths so that all tabs fit into a single row. This can be achieved by using short widget titles.
• You may need to reduce the widths of the tabified widgets to fit them into the box.
• Don’t forget to test in Internet Explorer. This widget may cause “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you :(

Enjoy!

Read the rest of this entry »

Posted in Blogger , Multi-Tabbed , Widgets