Blog Cruisin

Showing posts with label Tutorials. Show all posts

Mobile Template (beta) Feature - How to show the mobile version of my template?

Labels: Blogspot, Tutorials | 0 comments

While checking out my blogs in my blogger dashboard, (my Blogger is in Draft mode by the way). I saw this ballon tip saying that I could use the new feature called Mobile Template which is in beta stage.

If you want to activate this feature here are the simple steps:

1. Log in to your dashboard
2. Choose your active blog (which you want to have the mobile version
3. Go to Setting > Email & Mobile
4. And see the option "Mobile Preview"
5. Select the radip button Yes, On mobile devices, show the mobile version of my template.
6. Then click the save button.

I am excited about this new feature because we all know that a lot of web users are using mobile devices to browse and search the internet. And having a feature like this would come in handy and create new possibilities in the blogging world.

How to Put the Facebook Like Button Above or Below every Post

Labels: Blogspot, Tutorials | 0 comments

1. Login to your Blogger Account and go to Layout > Edit HTML and click on the check box which says “Expand Widget Templates”

2. Copy this Facebook Like code.
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

3. Look for <data:post.body/> in your blog html.
If you want to see the Facebook Like Button above each post.
Paste the code immediately before <data:post.body/>

To place the Facebook Like Button below each post
Paste the code immediately after <data:post.body/>

Facebook Like Button Optional Settings

With the default code provided try to experiment with these options

layout=standard
layout=button_count

action=like
action=recommend

colorscheme=light
colorscheme=dark
colorscheme=evil

font=arial
font=lucida+grande
font=segoe+ui
font=tahoma
font=trebuchet+ms
font=verdana

show_faces=false
show_faces=true

How to show comment box below a post

Labels: Tutorials | 0 comments

1. Login into your blogger account.
2. Choose your blog and click “Layout”
3. Click “Edit Html” subtab on the “Template” tab
4. Mark expand Widget Template chechbox
5. Press Ctrl+F search

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if>
</p>

6. Replace code block with:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if>
</p>

7. Save Template
8. Go to Settings then Comments panel or your blog. Set Comment Form Placement to Embedded below post. The embedded comment form can not be used if you have Post Pages disabled.
9. Save settings.
10. Done.

Blogger Expandable Posts - Read more Trick

Labels: Tutorials | 0 comments

1. Login into your blogger account.
2. Choose your blog and click “Layout”
3. Click “Edit Html” subtab on the “Template” tab
4. Expand Widget Template as shown in image below
5. Press Ctrl+F search body/
6. Paste the code below before <p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

7. Paste the code below after <p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>
8. Click save Templates.
9. Go to Blogger Settings/Formatting/ copy paste the code below in Post Template
<span class="fullpost"> </span>
10. Hit Save.

Optimize Blog Title - Blogger SEO tip

Labels: Tutorials | 5 comments

Every time I create a new blog in Blogspot, this is the first modification I usually do for SEO purpose. I posted it so I can refer to it everytime I forget the code. :D

To optimize your blog title and attract more visitors.
1. Login to your blogger account
2. Click Layout
3. Search <title> <data:blog.pageTitle/> </ title>.
4. Replace the line with this code

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

5. Save and your done. :)

From here on every post that you will make you would notice that your browser caption will have your post title first followed by your blog title. These title positions would also be applied when it appears on the Google search page.

Different Meta Descriptions for each blogger post

Labels: Tutorials | 1 comments

On your dashboard switch to the Edit HTML tab of your template and find this line:

<b:include data='blog' name='all-head-content'/>

You can find this just below the <head> section of your template.

Then put this code just below the <b:include data='blog' name='all-head-content'/> tag

<b:if cond='data:blog.url == "http://YOUR-BLOG-URL.com/"'> <meta content='DESCRIPTION' name='description'/> </b:if>

This was done to add META Tags to the main page of the blog.

To change the META Tag for each blogger post,
copy and paste this code just below the code you just added

<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' name='Description'/> </b:if>

That's it, save your template and your done!

Easy steps to edit blogger template

Labels: Tutorials | 2 comments

1. Login to your Blogger Account. If you are managing different blog select the blog that you want to change then click Layout.
2. In Layout tab, you will be presented with Page Elements, Fonts and colors, Edit Html, Pick new Template. Click Edit Html.

3. Before editing or changing your template create a Backup first by selecting Download full template and save a copy on your hard rive. So if anything happens that you don't like you can just revert to your old template easily.

4. You can choose one of the default templates provided by Blogger by clicking on Pick New Template. Use Preview to see the new template then click the Save Template button.

5. Or, you can also download a customized template from a third party website and save the xml package to your hard drive. Apply your customized template by clicking on the Browse button look for the new XML file and click Upload.

Now preview your new template. If everything seems ok just click Save Template.