How To Remove Error and Locked Blogger Widgets

Unremovable widget is a very common problem of Blogger users. You may encounter this problem when you change your template and some widgets of this new template is unremovable. Some unremovable do not affect your template at all, it will not appear in your blog page, but they are still annoying  when you manage your widgets.

Locked Widget and Normal Widget

There is two kinds of unremovable widgets. The first is "error widget", which is not show any option when you edit it. The second is "locked widget", which can not move to anywhere and do not have Remove button when you edit it (such as Navigation and Attribution widget). This post will show you how to remove these kinds of widgets in very easy step.

STEP 1: 

You need to know what is widgetID of this unremovable widget. Go to Layout, click Edit corresponding to this widget. At popup window, look for widgetID at the end of URL bar, select and copy it.

Select and copy widgetID

More

How To Expand Widget Templates in New HTML Editor?

After new Blogger Template HTML Editor was out, I received a lot of questions about the old "Expand Widget Templates". In this post, we will make it clear about Expand Widget Templates in new HTML Editor.

What Is Expand Widget Template

For who don't know, Expand Widget Template is a option of old HTML Editor. By default, the old editor only show core template code and hide others code like widget. It makes you easier to edit or customize Blogger Template. All widget code will only show if you check Expand Widget Templates option.

Expand Widget Templates Option

Where Is Expand Widget Templates

Well, in current HTML Editor, there will be no option Expand Widget Templates anymore. Why? Because all codes have been shown in new editor, that's mean you don't need to expand it anymore.
By default, all widget code have been folded. A concealed widget code section is identified by a fold marker, it's is an arrow symbol ▶, next to the line number. You click into it, and the concealed widget code section is revealed.

Click Right Arrow Icon To Expand Widget Code

How To Expand Widget In New HTML Editor

At the time, almost Blogger tips or tutorials are still within the old editor, so how to follow their instruction about "Expand Widget Templates"?

Search For Specific Section

If the tutorial requires you to find for a section of code, use Find function (Ctrl F) and find for it. If this section of code is in folded widget section, the concealed widget code will automatically expand.

Go To A Widget Code

If the tutorial requires you to find a widget code, use Jump to widget feature to quickly locate it. After that, click ▶ to expand this widget code before editing.

Jump to widget feature

More

New Blogger Template HTML Editor With Many Improvements!

As you know, editing and customizing Blogger Template with HTML editor is like a nightmare with anyone who is not familiar with coding. Just because the old HTML editor is just like a Notepad program without anything to help the users. No syntax highlighter, no line counter, no everything, just a white page with thousand lines of code.

New Blogger Template HTML Editor is OUT!

But it's not like that anymore! The new Blogger Template HTML Editor has come out with many many improvements as a press release from Blogger Buzz. This is the best Blogger update I've ever heard and I have waited for this for several years! Okay, enough with introduction, let's find out.

What's New In New Blogger Template HTML Editor?

What's New In New Blogger Template HTML Editor

1. Syntax Highlighter

The first thing I can notice from the new editor is syntax highlighter. What is that? Syntax Highligting is a feature of code editor that display code in different colors (and fonts) according to the category of terms. It will help you easier to spot a part of code. It's also support auto-indentation to match code's structure.

2. Line Counter

Like before, everytime you make a error in code, it was very hard to find where is the error line. With source code line counter, it's will much easier.

3. No More Widget Expand, Replace With Code Folding

There is no Expand Widget Template anymore, it is Code Folding instead. When editing template, you will see some ▶ character at the counter column, click on it and all code of this section will be expanded. After expanding code, the ▶ will disappear, but if you click at where the symbol disappear you can fold the code again.

There will be each ▶ for every widget code, you need to click every ▶ to expand all widgets code.
For more information, read How To Expand Widget Templates in new HTML Editor.

4. Jump To Widget

With this function, you can easily locate any widget html code in template without using search. 

5. Find, Find and Replace, Replace All

Now, everytime you press Ctrl + F, there is a build-in find function of HTML Editor. If you still wanna use Browser Find function, press Ctrl F again or press F3. But I recommend using the build-in one, because it will hight light all matched word, not only one. And to Find Next, press Ctrl G.
For Replace function, press Ctrl Shift F, input what's need to replace then Enter, input what's you wanna replace with and Enter again.
Replace All helps you replace all word at once, press Ctrl Shift R and use like Replace.

6. Error Highlighter

Not just error notification like old editor, the new editor also highlights the line of code with error. If there is more than one error, the first error will be notified and highlighted.

7. Preview Template

Preview your website without Saving the template

8. Format Template

Format Template button will automatically cleans up the indentation of the template. That's will make your code friendlier.

Before Using Format Template

After Using Format Template

9. Revert Changes

No need to refresh all page anymore, just click Revert Changes.

10. Revert Widget Template

Revert Widget value to default. Reverting a widget to its default value will remove any customizations you have made inside the <b:widget> tag.

How Can You Use That?

This improvements have been applied to every Blogger, not ony Blogger in Drafts. With someone who new with Blogger or coding, maybe this change is a little bit confused. The only way is try to get used to it.

How About Howeblog

This is really a big change and affect to all older tips. Don't worry, every tips still work fine with this new editor but few step may a bit different since old editor has been replaced. And I think there is no way to roll back to the old editor.
I will try to edit old post to suitable with this new editor. After that, I will write some tips about using it, please stay tune. Peace!

More

Add Dynamic Meta Tag To Blogger For Best SEO

Meta Tag in Blogger

Meta tags, especially description tag and keyword tag, are the most important tag for SEO in Blogger. Meta tags allow search engine spider crawl and index your website more accurately. In other words, meta tags tell the search engine what your website about and how they display your page in search result pages.
Beside description and keywords meta tag, you can use some other tags help for SEO like robots tag, author tags, open graph tag:

• Description and Keywords: provide information of your page.
• Author: tell everybody author of this post.
• Robots: tell the search engine spider how to treat your page. You can't prevent the spider from crawling and indexing your page and many other thing.
• Open Graph: mark by property attribute with og value like og:title, og:type, og:site_name etc. This tag is used by Facebook to display your blog exactly.

Meta Tag Robots, Author and Open Graph

Using Meta Tag Description and Keywords in Blogger

There are 2 ways to adding meta tag description and keywords to Blogger, by Settings and by HTML Editor. Please read Blogger How 4 - SEO Techniques for Blogger for complete information about using meta tag.

About Dynamic Meta Tag

What is Dynamic Meta Tag

If you ever used Wordpress, you would notice that some wordpress SEO plugins always have a dynamic meta tag function. It will generate a different tag for each post, not just the same keywords or description like default Blogger Meta tag.
Where do the different tags come from? The plugins will get description and keywords from post title, labels (tags, categories) and some words from post content. Some Wordpress plugins support this function are SEO Ultimate, All-in-one SEO Pack, Wordpress SEO by Yoast.

Why Dynamic?

Well, with the default meta tag, every page of your blog will have the same tag. That's mean the search engine can not clearly know about your page content, and will treat all page the same way. That's called "duplicate meta tag"and definitely not good for SEO.

Dynamic Meta Tag Generator 1.2 for Blogger/Blogspot

Dynamic Meta Tag Generator by HoweBlog helps you generate dynamic tag for Blogger/Blogspot with your desire keywords. There are some advantages:

• Getting keywords and description from your post title.
• Use your owd keywords along with auto keywords.
• Support dynamic meta tag for every page of Blogger.
• Support open graph meta tag use for social media network such as Facebook.
• Easy to use.

How To Use

1. Go to Howeblog > Tools > Dynamic Meta Generator
2. Fill in all fields to make the tool work properly. Author and Robots is optional. You can use the same description and keywords at Homepage and Post page.

   

   Using Dynamic Meta Tag Generator

3. Click Generate Meta Tag to get the code, then select all and copy this.
4. Backup your template, then go to your blog Dashboard > Template > Edit HTML.
5. Find 
   <b:include data='blog' name='all-head-content'/>
6. Paste the code copied in step 3. If there is already have old meta tag, then replace them with the new one. You should replace old meta description, meta keywords, meta og, meta robots and meta author. If you still keep old meta tag, the lower position tag will be used.
   

   

   Replace old meta tag with the new one

7. Save your template and you're done.

After these step, please go to your blog and check meta tag at some pages to make sure everything work fine. For error report, please comment at this post, I will reply in 24h.

More

Customize Default Blogger Title for Better SEO

Blogger is a very SEO-friendly platform, everything from url, script are optimized for search engine, except the title.

The default Blogger title

The default blogger title is so not friendly with users as well as search engine. Why? Because default blogger title likes to display main title first, and post title after. Since the SERP (search engine result page) only display a certain amount of words of title, displaying main title first may cut off some important keywords from your post title. And with readers, they can not completely understand your post if the title do not display entirely.

Customize Default Blogger Title

For a real-life example, my main title is Howeblog - Tutorials and Tips, and this is how Blogger displays my title:

Homepage: Howeblog - Tutorials and Tips
Post Page: Howeblog - Tutorials and Tips: My Post Title
Static Page: Howeblog - Tutorials and Tips: My Page Title
Search Page and Archive Page: by default, search engine spiders do not index these kinds of page, so we can skip it.

So, if you wanna improve your blog ranking, you must change default title into a better form, and then customize it for your taste.

Blogger Title Tag

There is 3 kind of blogger title tags you need to know.

1. Data:blog.title: the title of the blog. E.g.: HoweBlog - Tutorials and Tips.
2. Data:blog.pageTitle: the title of current page, this is default tag using in blogger. At homepage, it's the blog title; at post pages, static pages, it contains post title and page title below blog title. You can see from the example above.
3. Data:blog.pageName: the title of each page, best title tag so far. It's the post title, page title, label name (if at label page). Note: at homepage, it shows nothing.

Customize Blogger Title

At first, remember back up your template, then you need to find where the default title tag located. Go to your blog Dashboard > Template > Edit HTML (don't tick Expand Widget Templates), then find this tag:

<title><data:blog.pageTitle/></title>

Some custom templates have changed the default title already, so obviously you can't find this tag and don't need to change it again. But if you still want to see how it looks, try search for:

<title><data:

Okay, to change your blog title, you need to replace entire of these tags (<title></title> with default Blogger template or <b:if></b:if> with custom template), you can choose one of the following title types below:

1. Only Post Title

Replace title tag with:

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

With these tags, Blogger will show blog title at homepage, and only post title at post page, also apply for static page, archive page and label page.

2. Post Title and Page Title (Recommended):

Replace title tag with:

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

At post page it will show title first and then blog title, also apply for static page, archive page and label page. E.g. "Customize Blogger Title | Howeblog - Tutorials and Tips".
Tips: you can replace | character with another one like ~, -, /, \.
This structure of title is widely used by Google, Yahoo, Youtube and others websites.

3. Customize Title with Custom Keyword

Not just post title, you can customize it with adding some keywords in title. It will show in SERP as a part of post title automatically every post. You can add your keyword before or after data:blog tag, but inside title tag. For example:

With Type 1:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> - Homepage keywords</title>
<b:else/>
<title>Case Study: <data:blog.pageName/> - Post keywords</title>
</b:if>

Blogger Title Customized

With type 2:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title>Best Tips: <data:blog.pageName/> from <data:blog.title/></title>
</b:if>

More