How to Hide or Show Blogger Navbar

The Blogger Navbar is a navigation and search bar on top of all blogspot blogs. It is available in several colors, and is configured in the Template tab in Blogger’s interface. You can get more information about Navbar from Blogger here

The reason whi I remove the Blogger navbar on EVERY Blogger template is its mismatch color. Even though Blogger provide several useful features and different colours, it always not blend well with my templates. It’s an eye sore and makes style="text-decoration: underline;">my blog theme look less professional.

Show/Hide blogger navbar:

Step 1. Log in to blogger account
Step 2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog’s HTML.
Step 3. Delete the code below to show the Navbar

#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

or Add that code to your css code to hide the Navbar. That is all.

Read more!

How to display the title of the post without the content (pages) posts

When performing a search or a content label (category) on our blog. it’s always display full content for example if we choose label “tutorial” it will be display all post on tutorial label with full content. How if the post in tutorial has 100 post? It will be difficult for us and for our reader to wait our blog loading to display it.

So we will make it short, from Full content display to short display with only display the title and posting date. Of course, loading page will be faster 50x than normal when opening page label.
Let’s move on, simply follow this Steps:

Go to Template -> Edit HTML -> Do not forget to do the backup template:) -> then check the 'Expand Widget Templates'

See the code below:

<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

Then look for the code blue above, if the change has been met over the blue color code with the code below:

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Save and See the results!

Read more!

How to comment form under post for Forte template

Setiap template memiliki perbedaan, tidak semuanya sama. Hal yang berbeda dari template ini adalah struktur Code Html yang terpasang didalamnya. Masalah yang sangat riskan adalah bahwa secara original, template Forte ini tidak memiliki Comment Box di bawah postingnya.

Saya sudah mencari dan menemukan tutorial tentang bagaimana memasang Comment Box untuk blogger. Tutorial dari Om Jack dan Amanda cukup bagus. Code yang ada ditutorial mereka sangat berbeda dengan struktur code dalam template Forte. Namun setelah saya explorer lebih jauh (try and error) akhirnya saya berhasil mengatasinya. Berikut caranya :

Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box. Then search for this section of code:

<h5 class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</h5>

Replace this entire section of code greend with the following instead:

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

Save and Good luck!

Read more!

Comment Form Under Post On Blogger, Finally Officially Embedded!

To enable inline comments for your Blogger powered blog, you need to log into your dashboard through Blogger. Then go to Settings>Comments and scroll down the page to see the new "Comment form placement" setting:

Check the radio setting for "Embedded below post" which will enable the display of the comment form below your blog posts. If you have customized your template, you will need to make a small change to your template code for this comment form to display. But don't worry, it's a very simple customization to make!

Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box. Then search for this section of code:
<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>

Replace this entire section of code with the following instead:
<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>

Save it. And done.

Read more!

Change the Title Tags for your Blog

Until recently, the title tags generated for each page of your Blogger blog would display the blog title first, then the name of your post. This wasn't so good for SEO (search engine optimization) as this made keywords from your post titles appear after your blog title.

Luckily, Blogger have come up with a simple fix for this problem for those who use Layouts templates: the tag!

This new tag is already installed for new blogs (or if you change your existing template to one of Blogger's default ones). However, if you have customized your template or uploaded a third party template, you will need to change the original <data:blog.pageTitle/> to the new <data:blog.pagename> tag for this change to take effect.

But don't worry: this is REALLY easy! Here's what you have to do:

1. Go to Layout>edit HTML in your Blogger dashboard.
2. Search for this tag: <data:blog.pagetitle>
3. Replace this tag with the following:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
4. Save your template! (See, this is an easy hack!)

Once you've changed this tag, you'll see that on post pages, the default [blog name] page title format for your post titles in the browser window will be replaced solely by your post title instead.

This will increase the chances of your posts being picked up in search engine results for keywords which appear in your post titles (and can ultimately help draw more targeted traffic to your blog.

I hope this little trick will be useful to you all! And for the Blogger team (if you're reading this):

Read more!