Essential Conditional Tags For Blogger

There are a few tricks to hide elements from the blogger blog, You can hide elements in the homepage, posts, and static pages  by adding conditional tags.

here are some essential conditional tags for you to hide your elements

Showing widget only on the home page:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

View the widget only on post pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Displays widgets only on specific pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Change your URL in the address you want. 

Hiding widgets only on specific pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != " URL of the page "'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Displaying widgets on the static page:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Hide the widget on a static page:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

widget displays only on archive pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

After you add the conditional tags above, save the template and view the results. This conditional tags not limited to the widgets, with the help of conditional tags you can wrap the other elements such as Script, CSS, and HTML. 

That's it! I hope you like this article! Stay tuned for more cool articles!

How To Install SEO Smart Links in Blogger

How to Install SEO Smart Links in Blogger - This time, Smartpik will share SEO Smart Links plugin for Blogger, Actually, this is a WordPress plugin that changes any given word in an article into a link.

This plugin will read every word specified in the article. For example, if you add word smartphone or computer, then automatically every time the word will turn into a link and only then if in your blog article contained that word.

How to Install SEO Smart Links

As usual Go to Blogger dashboard and select the Template section and click Edit HTML. Then add the following code before </body> tag

<script type='text/javascript'>
function smartLink(){
    this.keywdHref = new Object();
    this.add = function(keyword, href){
        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
        this.keywdHref[keyword] =  href;
    }
    this.createAnchor = function(){
        var objs = document.getElementsByTagName(&quot;div&quot;);
        for(var i=0; i&lt;objs.length; i++){
            var obj = objs[i];
            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
                var content = obj.innerHTML;
                for(var keyword in this.keywdHref){
                    var href = this.keywdHref[keyword];
                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }
    this.startScript = function(){
        var onLoad = window.onload;
        window.onload = function(){
            if(onLoad){onLoad();}
            setTimeout(&quot;f.createAnchor()&quot;, 100);
        }
    }
}
</script>
<script type='text/javascript'>
var f = new smartLink();
f.add(&quot;smartphone&quot;, &quot;http://www.smartpik.in/search/label/smartphone&quot;);
f.startScript();
</script>

If you want this plugin only appears on post pages or any specific pages, please add conditional tags. Reference post: Essential Conditional Tags For Blogger

On the highlighted code, replace smartphone with your own keyword and replace the highlighted URL http://www.smartpik.in/search/label/smartphone with your blog URL.

In the above you can add other keywords like below, for example

f.add(&quot;SEO&quot;, &quot;http://www.smartpik.in/search/label/SEO&quot;);f.add(&quot;Template&quot;, &quot;http://www.smartpik.in/search/label/Template&quot;);f.add(&quot;Blogger&quot;, &quot;http://www.smartpik.in/search/label/Blogger&quot;);

You can also add words into bold, for example

f.add(&quot;&lt;b&gt;Blogger&lt;/b&gt;&quot;, &quot;http://www.smartpik.in/search/label/Blogger&quot;);

Click on the Result button to watch live demo, Note the word smartphone on the demo article:

Result

That's it! I hope you like this article! Stay tuned for more cool articles!

How To Solve OpenID Related Errors In Blogger

How To Solve OpenID Related Errors In Blogger - Actually, maybe for some bloggers commented with OpenID or anonymous for now rarely used. 

Well, here I was curious and tried to re-activate the comment with OpenID. After I turn on and test the comments turned out to find an error message " Whoops, that's an error OpenID ". After my googling  and found the solution, now with OpenID comments may reappear without an error message as before, want to know how? 

Please follow the below steps:

First, you register an OpenID in Stackexchange by entering your data. Once the registration is complete, you will get a confirmation via email. 

The next step, open Blogger > Template > Edit HTML > Copy the code below and apply it immediately after the <head> tag

<Link rel = "openid2.provider" href = "https://openid.stackexchange.com/openid/provider" /><Link rel = "openid2.local_id" href = "https://openid.stackexchange.com/user/YOUR-ID" />

Then replace the highlighted ID with YOUR-ID that has been registered in StackExchange. 

Save the template and you're done. By applying the tips above, now you can comment with OpenID on your blog or other blogs.

That's it! I hope you like this article! Stay tuned for more cool articles!

Automatic Image Optimization in Blogger For SEO

How to Optimize Images in Blogger Automatically For SEO - This is done so that the images on your blog pages indexed automatically by the search engines like google so you are not bothered by adding it manually (add a description in the <img alt = "description of the image" height = "125" scr = "/ image.png" width = "125" /> when posting pictures).

The way it can be said to be a hassle. With this automatic way, each image has the same description with the title picture. Therefore, you have to give them appropriate names for each picture to be posted. 

Why Automatic Image Optimization For SEO? Because the image on the blog page is one medium that can be used for traffic on the search engines because the majority of internet users are very likely to seek or just browsing to see the pictures. 

Here's how to install automated image optimization in your blog template, As usual, go to your blogger dashboard > then go to the template section and click edit HTML then copy and paste the below code just before the </body> tag

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Then save the template. Now any image that you are installed on your blog that has an automatically generated SEO friendly code. 

Thanks for reading! Stay tuned for more blogger tricks!

How to Redirect old Blog URLs to New URLs

Today I'm going to how to Redirect Blog Old URL to New Blog. This method is useful for those who have just moved domain or create a new blog and you want to redirect visitors from old blog that already have a source of traffic from organic search results. 

So how? Ok, here I give 3 different ways to redirect blog URL to other blogs. The first way is by applying the javascript code to your blog template, login to Blogger > Template > Open and click edit HTML > apply the below code just after the <head> tag.

<script type='text/javascript'>
  var d='<data:blog.url/>';
  d=d.replace(/.*\/\/[^\/]*/, '');
  location.href = 'http://smartpik.blogspot.com';
</script>

In the above javascript code is written link destination is http://smartpik.blogspot.com, please replace the destination link with your blog. 

The second method is also using the javascript code and the application does not differ from the codes of the way first. apply the below code just after the <head> tag.

<script>

if(window.location.href == 'http://yourblog.blogspot.com')

{

window.location="http://smartpik.blogspot.com";

}

</script>

Replace the first highlighted URL with your any URL(includes home, posts, and pages) And the second URL is the destination.

And for the third way to use the application of meta refresh tag in the blog template. apply the below code just after the <head> tag.

<meta content='5;url=http://smartpik.blogspot.com' http-equiv='refresh'/>

Content = 5 above the lag time required when a blog URL diverted to other blogs. Replace the time with your taste.

Thanks for reading! Stay tuned for more blogger tricks!

How to Block Spam Comments in Blogger

There are several reasons for you wants to block a commenter in a blog who frequently posts comments that are considered unethical, abusive, and defamatory.

These comments which contain an invitation in the form of links, hoping for visited links entered into the comments. to avoid these things, you need to enter a specific code into your blog template. Here's how the application works:

The first way with jQuery

Go to Blogger> Template> Edit HTML> Add the following code before the </ body>

<script type='text/javascript'>//<![CDATA[ var spamlist=[ 'http://www.blogger.com/profile/xxxxx', /* url of the commenter */ 'http://nama_blog.blogspot.com/xxxxx', 'http://www.blogger.com/profile/xxxxx' /* last url does not need a comma */];for(var v=0; v<spamlist.length; v=v+1){ $("a[href='"+spamlist[v]+"']").each(function(){ $(this).closest(".comment-block").find(".comment-content") .replaceWith("<div class='comment-content' style='color:red'>You have been banned! Please leave this blog!</div>"),     $(this).replaceWith("<span style='color:red'>BANNED USER!</span>");

For those who use templates to hack commenting system, could use this code

<script type='text/javascript'>//<![CDATA[ var spamlist=[ 'http://www.blogger.com/profile/xxxxx', /* url of the commenter */ 'http://www.blogger.com/profile/xxxxx', 'http://www.blogger.com/profile/xxxxx' /* last url does not need a comma */];for(var v=0; v<spamlist.length; v=v+1){ $("a[href='"+spamlist[v]+"']").each(function(){ $(this).closest(".comment_inner").find(".comment_body") .replaceWith("<div class='.comment_body' style='color:red'>You have been banned! Please leave this blog!</div>"),     $(this).replaceWith("<span style='color:red'>BANNED USER!</span>"); })}//]]></script>

Replace highlighted URLs and texts with your taste. And save the template.

How to do with Conditional tags

Go to Blogger> Template> Edit HTML> Find the code below

<b:loop values='data:post.comments' var='comment'>

Then add this code below the above code

<!--blacklist--><b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/xxxxx&quot;'><!--blacklist-->

Change http://www.blogger.com/profile/xxxxx with URL will be banned. After you get this code </b:loop> , and add this below code before it:

<!--blacklist-->  </b:if><!--blacklist-->

That's it! Save the template. Thanks for reading!

All In One SEO Pack Plugin For Blogger

Add new updated and modified all in one SEO (Search engine optimization) pack plugin in your blog -  As you already know guys the actual importance of SEO, because if you want to become a professional blogger, then it's very important for you to learn everything about SEO. Without doing a proper Search Engine Optimization no one can get ranked on Search Engines, it is useless to start a blog without doing any SEO.

On Google - "the process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine".

So this tutorial is for every newbie who is unaware from this SEO plugin, now you can add this updated all in one SEO pack plugin in your Blogspot blog to improve the ranking of your website on all Major Search Engines such as Google, Bing, Yahoo etc.

This all in one SEO pack plugin is specially designed for Blogspot platform and you can trust on this plugin blindly because this plugin is 100% safe and it will help you to get more organic traffic from search engine. So if you are ready and want to install this plugin in your own blog then simply follow the below steps. 

Features Of All In One Plugin

• Add Meta Tags in Your Blogger Blog.
• Verify Google, Bing, and Alexa by verification code
• Add an SEO Friendly Robots.txt File
• Google + Author Profile Picture Compatible
• Facebook and Twitter Profile Compatible
• SEO Optimize Blogger Comments
• Optimize Post Title Using H2 Tag

How To Setup All In One SEO Pack Plugin?

First go to your blogger dashboard, Now go to "Template" section and then click on the "Edit Html" button.

Now in the template editor find the below code by pressing "Ctrl + F" key together from your stylish keyboard. 

<head>

After that copy the below code and paste it just after <head>

<meta charset='utf-8'/><meta content='width=device-width, initial-scale=1' name='viewport'/><meta content='blogger' name='generator'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/><link href='http://www.blogger.com/openid-server.g' rel='openid.server'/><link expr:href='data:blog.homepageUrl' rel='openid.delegate'/><link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:blog.pageType == "index"'><title><data:blog.pageTitle/></title><b:else/><b:if cond='data:blog.pageType != "error_page"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if></b:if><b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found - <data:blog.title/></title></b:if><b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if><b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if><b:if cond='data:blog.pageType != "error_page"'><meta expr:content='data:blog.metaDescription' name='description'/><b:if cond='data:blog.homepageUrl != data:blog.url'><meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/></b:if></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='Blogging Tools, Blogger Tutorial, jQuery, CSS, HTML, JavaScript, Widget, Web Tools, Widgets Tips and Trick' name='keywords'/></b:if><link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/><link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/><link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/><b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.postImageThumbnailUrl'><link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if><link href='/favicon.ico' rel='icon' type='image/x-icon'/><link href='https://plus.google.com/+smartpikin/about' rel='author'/><link href='https://plus.google.com/+smartpikin/posts' rel='publisher'/><link href='https://plus.google.com/xxxxx' rel='me'/><meta content='GOOGLE VERIFICATION CODE' name='google-site-verification'/><meta content='BING VERIFICATION CODE' name='msvalidate.01'/><meta content='ALEXA VERIFICATION CODE' name='alexaVerifyID'/><meta content='global' name='distribution'/><meta content='1 days' name='revisit'/><meta content='1 days' name='revisit-after'/><meta content='document' name='resource-type'/><meta content='all' name='audience'/><meta content='general' name='rating'/><meta content='all' name='robots'/><meta content='en-us' name='language'/><meta content='USA' name='country'/><meta content='@Facebook Id' property='fb:admins'/><meta content='@Twitter Id' name='twitter:site'/>

Now replace the highlighted text with your own Id or code after that click on the orange save template button to apply these changes.

That's it! I hope you like this all in one SEO plugin! Stay tuned for more cool updates!