Showing posts with label Blogging. Show all posts
Popup Window for Blogger

Popup Window for Blogger

You might notice in some websites that a popup window opens suddenly without the knowledge of you which leads to other websites and they do it for some promotional purpose.

Popup window code

It’s easy to add popup window for blogger and adding popup window helps in increasing page views of your blog and you can help visitors to know useful links within your site and other external sites.

How to create a popup window for Blogger
  1. Login to your blogger account
  2. Go to Dashboard >> layout and click “add a gadget” from sidebar or footer
  3. Open HTML/JavaScript gadget
  4. Add the following script in HTML/JavaScript content area and click save

<script type="text/javascript">
document.body.onclick= function(){
window.open('http://yourdomain.com', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=950, height=650, left = 300, top = 50');
}</script>

Note:
  1. Make sure to change the http://yourdomain.com URL
  2. Customize the width and height of the popup window like you wish
Now a popup window opens pointing to that page when users click somewhere on your blog.
Stop Blogger from Redirecting Blogspot to Country Specific URLs

Stop Blogger from Redirecting Blogspot to Country Specific URLs

Google now redirects Blogger blogs to country-specific domains. For instance, if you open example.blogspot.com in your web browser, you will be redirected to example.blogspot.in if you are located in India or to example.blogspot.co.uk if you are accessing the blog from UK.

Google does country-specific redirection for selective censorship – that means they can easily censor or block a blog post, or other entire blog site, in one country but still serve that page in other geographic regions. Blog redirection only occurs if you are on a blogspot domain and not if your Blogger blog is on a custom domain.

Why Did Google Do This?

Google has always supported the expression of views, and they stated as much on their official blog. In the post Free expression and controversial content on the web, which was published in 2007, it said "Our world would be a very boring place if we all agreed all the time. So, while people may strongly disagree with what someone says, or think that a particular newspaper is total nonsense, we recognize that each of us have the right to an opinion."

The post continued, "We also know that letting people express their views freely has real practical benefits. Allowing individuals to voice unpopular, inconvenient or controversial opinions is important. Not only might they be right (think Galileo) but debating difficult issues in the open often helps people come to better decisions".

Stop Redirecting Blogspot

While the company is clearly on the side of people freely expressing their opinions, they also believe that a line has to be drawn somewhere. Then again, for a company providing services in over 100 countries around the world and each with their own national laws and cultural norms, it's surely difficult for a company like Google to decide where to draw boundaries.

However, there are cases like child pornography which is illegal in just about any country where decisions are clear cut.

For a company whose products are "specifically designed to help people create and communicate, to find and share information and opinions across the world", how does Google deal with this challenge?

One of the most challenging areas where Google deals with issues regarding free expression is in Blogger, their content generation platform. Since Google can't check what you've written before you publish, they rely on active vocal users who are diligent in alerting the proper if a post borders on offensive. Then again, that in itself is a tricky issue as well because what one person may view as offensive, another might not.

In other words, it's always a work in progress with Google.

Fast forward to January 9, 2012 when Google announced it was making changes to the Blogger platform with regards to censorship. That said change would make use of a country specific domain to the Blogger platform. Doing this would allow Google to censor and remove content specific to a certain country.

In their announcement, Google said: "Migrating to localized domains will allow us to continue promoting free expression and responsible publishing while providing greater flexibility in complying with valid removal requests pursuant to local law. By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers."

The move by Google come after pressure from countries like India that are working on hunting down content on social media sites which are considered inappropriate. Also, the move followed closely on the heels of Twitter's new censorship policies.

Since Google aims to "help people create and communicate, to find and share information and opinions across the world", it would be strange to take down a post that was just banned in a certain area. In essence, with country specific redirection, a piece of content can still be accessible by the world save for the country where it was blocked.

How Would Country Specific Redirection Affect Your Site?

Of course, not all site owners greeted the country specific URL change with open arms. A few of the issues brought up in regard to the change include:

1. A reduction in social stats. These are your Facebook Likes, Google +1s and so on from your blog posts. They might be reduced because the URLs from one blog post will be different depending on where your readers are from.

2. A problem with external commenting platforms. If you use Disqus - for example - for your comments section, then you might run into trouble because blog URLs will be different even if essentially the page being accessed is just the same.

3. A slight problem with AdSense earnings. Some users have complained about seeing a dip in their earnings when their pages are served through country specific domains.

4. An issue with link juice. You want external sites to link to you and not your country specific URL. But the issue here is that you can't control how others link to your page. They might use the top level domain or they might use the country code top-level domain.

Stop Blogger from Redirecting to Country-Specific Domains

If country specific redirection affects important factors such as traffic and link juice, and you need those in order to rank well, what can you possibly do? Well, thankfully, Google has provided a way to get around this. All you have to do is add an ncr/ to the end of the URL - ncr here stands for No Country Redirect. So basically, it goes example.blogspot.com/ncr/.

That solution is great but do you want your users to always have to do that every time they visit your blog? To eliminate that hassle, and for the good of your site statistics, a simple redirection script will do the trick. Here's how:

1. Log in to your Blogger account.

2. Click on Template → Edit HTML.

3. Find the <head> tag in the HTML editor by opening the search box using Ctrl + F.

search box blogger template html editor

4. Copy the redirection code seen below after the <head> tag.
<script type="text/javascript">
  // Written by Solvelogger
  /* Get the full URL of the current blogger page */
  var blog = document.location.href.toLowerCase();
  /* Do not redirect if the domain is .com already */
  if (!blog.match(/\.blogspot\.com/)) {
    /* Replace the country TLD with .com and ncr switch */
    blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");
    /* Redirect to the new .com URL in the current tab */
    window.location.replace(blog);
  }
  // Source: http://www.howlmeflash.com/2018/02/stop-blogger-from-redirecting-blogspot-country-specific.html
</script>
5. Click on "Save Template".

And that's it! Whenever someone accesses your Blogger, they'll be taken to the top level domain rather than the country specific one.

How to Remove Powered by Blogger in Blogger Templates

How to Remove Powered by Blogger in Blogger Templates

If you are looking for making a Blog, Blogger is the most famous blogging place. All you have know that it uses XML template. If you want to give a professional look to your and feel to make a Blogger blog, I will recommend you to remove the Powered by Blogger Attribution. It is not mandatory but it will leave a positive impact on your visitors which are quite important for any blogger.

Remove Powered by Blogger

This is the tutorial to remove Powered by blogger. Usually it appears as "Powered by Blogger" in most of Templates. Every blogger want to remove this .So here we get it

Step-1: Go to www.blogger.com or www.blogspot.com and Login to your Blogger Profile.

Step-2: Click On Template option.

Step-3: After than Click on Edit HTML button.

Step-4: Than Click on Jump to Widget option, drop down the list and choose Attribution 1.

Step-5: You should be concentrate on this code:
"<b:widget id='Attribution1' locked='true' title='' type='Attribution'>"

Step-6: Now make the true option with false. Now Save the template.

Step-7: You would be able to see the layout of your template. Now, find the Attribution widget and click on Edit link.

Step-8: Another screen will popup appear before you. Simply click on Remove button.

Step-9: Click the Save arrangement.
That's it. You are done. Now go to your Blog and enjoy
So this was our guide on How to Remove Powered by Blogger in Blogger Templates , I hope the methods given above helped you in removing Powered by Blogger.
How to Add Sitelinks Search Box on Search Results

How to Add Sitelinks Search Box on Search Results

To make content searches easier for your users, add just one markup declaration on your home page, telling the Google crawlers that users can search your site directly from Search results. Once we scan your home page and after users perform relevant navigational queries for your property, the search box appears in results. If you also have an app that corresponds to your website, add another line of markup so that your app users can search their apps directly from a mobile device following a navigational query.

Sitelinks Search Box

The following illustration shows a navigational query for pinterest from the desktop, which then displays a Sitelinks search box above the sitelinks for Pinterest. The user can search "pizza" directly in Search results to open content in the Pinterest site.

How do you set it up?

The Sitelinks search box setup involves the following general steps:

1. Install a working search engine on your web site.
Sitelinks search queries send the user to the search results page for your site, so you need a functioning search engine to power this feature.

2. Put the schema.org markup on your homepage.
Your home page is the only page that requires markup to specify a Sitelinks search box. The JSON-LD examples below show all the elements you need for a site-only search box.

3. Wait for Google Search algorithms to identify your site or app as a candidate for the new Sitelinks search box.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://query.example.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

4. Copy and paste the following code into a plain text document:
5. Add your website to the “url” section of the script.
6. Add your website search links to the ”target” section of the script.
7. Copy and paste your edited script into the head or body of your webpages.
8. Troubleshoot your script with Google’s Structured Data Testing Tool.
How to Increase Image size in Feature Gadgets

How to Increase Image size in Feature Gadgets

Blogger Team introduce new tools called Featured Widget to show their valuable content. But there is problem with this widget, it take first image from the post,

Increase Image size in Feature Gadgets

so there is four possible choice you can Edit Image in post Editor
  • Small- 200 x 133 pixels
  • Medium- 320 x 213 pixels
  • Large- 400 x 267 pixels
  • X-Large- 640 x 427 pixels
  • Original Size- Default Size
If you install Feature Widget in Sidebar it not create the problem but if you install it in the Main and want to be show wide image it may create problem, In this tutorial we solve increasing image size using JavaScript, so it didn't depend upon image setting in post editor.

Step 1: Go to Blogger Dashboard >> Layout >> Add a Gadgets. Choose "Featured Post" (If you already Installed skip to next step)

Step 2: Now Click on Template >> Edit HTML, in the code find for "FeaturedPost1" and you will get code like this
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    <b:includable id='main'>
        <!-- Only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
        <b:include name='content' />

        <b:include name='quickedit' />
    </b:includable>
    <b:includable id='content'>
        <div class='post-summary'>
            <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
                <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
            </b:if>
            <p>
                <data:postSummary/>
            </p>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                <img class='image' expr:src='data:postFirstImage' />
            </b:if>
        </div>

        <style type='text/css'>
            .image {
                width: 100%;
            }

        </style>
    </b:includable>
</b:widget>
Step 3: Just replace above code from <b:widget...</b:widget> to below code
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    <b:includable id='main'>
        <!-- Only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
        <b:include name='content' />

        <b:include name='quickedit' />
    </b:includable>
    <b:includable id='content'>
        <div class='post-summary'>
            <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
                <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
            </b:if>
            <p>
                <data:postSummary/>
            </p>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                <img class='image' expr:src='data:postFirstImage' />
                <script>
                    // path: The image url
                    // replacement: The replacement string
                    function replaceSize(path, replacement) {
                        var parts = path.split('/'); // break the string to an array
                        parts[7] = replacement; // this is the path segment to replace
                        return parts.join('/'); // glue the array back into a string
                    }
                    document.getElementById("FeaturedPost1").getElementsByTagName("img")[0].src = replaceSize('<data:postFirstImage/>', 's1600');
                </script>
            </b:if>
        </div>

        <style type='text/css'>
            .image {
                width: 100%;
            }

        </style>
    </b:includable>
</b:widget>

If want to add this Featured Gadget in Main(Above of Blog Post), Go to Template >> Edit HTML, find for id='main' and you will get snippet like this below
<b:section class='main' id='main' name='Main' showaddelement='no'>
In this snippet you can see showaddelement set to no change to showaddelement='yes' like below and hit "Save Template"
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Fix Structured Data Errors including image url, mainEntityOfPage etc in Blogger

Fix Structured Data Errors including image url, mainEntityOfPage etc in Blogger

Some one reported me about new error showing in their website while testing in Structured Data Testing Tool. First I ignored but when I test my blog in it I found that there is so many errors exist in my website but now all are fixed. To fix this I tested Google Sites to check the error exist or not and you don't believe me they have also same error exist. But I solved all the issue after so many trail and error, and make a list of all Errors and the Basic Requirement for the Structured Data Testing Tool.

Fix Structured Data Errors

First go and check your website errors in the tool from Google called, "Structured Data Testing Tool" and and if you find any error just follow the tutorial for your website errors. If your error is not available here just comment it out I will try to cover it in my tutorial
  • The property image_url is not recognized by Google for an object of type BlogPosting.
  • The property blogId is not recognized by Google for an object of type BlogPosting.
  • The property postId is not recognized by Google for an object of type BlogPosting.
  • A value for the headline field is required.
  • A value for the image field is required.
  • A value for the publisher field is required.
  • The dateModified field is recommended. Please provide a value if available.
  • The mainEntityOfPage field is recommended. Please provide a value if available.

Basic Requirement

<div itemscope itemtype="http://schema.org/BlogPosting">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

So I read all the documentation to solve all the errors. You can read below the tutorial how I solve all these problem one by one.
Note:
  • Before Doing this Backup your Template
  • Go to Blogger Dashboard >>Template >> Edit HTML
  • For all this tutorial you have to stay in the code editor in blogger.
  • Don't try to search all at once search one code i.e. in first case search(Ctrl + F) for data:post.thumbnailUrl you will get all the code.

The property image_url is not recognized by Google for an object of type BlogPosting.

Find this in your code editor and remove this entirely(It may appear 2 time in your template)
<b:if cond='data:post.thumbnailUrl'>
   <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>

The property blogId is not recognized by Google for an object of type BlogPosting.

Find this in your code editor and remove this entirely(It may appear two time in your template)
<meta expr:content='data:blog.blogId' itemprop='blogId'/>

The property postId is not recognized by Google for an object of type BlogPosting.

Find this in your code editor and remove this entirely(It may appear two time in your template)
<meta expr:content='data:post.id' itemprop='postId'/>

A value for the headline field is required.

Find this code in your code editor (It may appear two time in your template)
<h3 class='post-title entry-title' itemprop='name'>
replace with this tag
<h3 class='post-title entry-title' itemprop='headline'>

A value for the image field is required.

Find this tag(Don't remove it)
<data:post.body/>
paste these below code after the <data:post.body/> tag(This tag may appear two or three time)
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
   <b:if cond='data:post.firstImageUrl'>
    <img style='display:none;' expr:src='data:post.firstImageUrl'/>
     <meta itemprop='url' expr:content='data:post.firstImageUrl'/>
  </b:if>
    <meta itemprop='width' content='800'/>
    <meta itemprop='height' content='800'/>
</div>
You can set image height and width, only change 800 to any other number.

A value for the publisher field is required.

Find this tag(Don't remove it)
<data:post.body/>
paste these below code after the <data:post.body/> tag(This tag may appear two or three time)
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <img style='display:none;' src='http://4.bp.blogspot.com/-3qEtsw1yqO0/VnZ0534tHjI/AAAAAAAADGQ/AYOyXnnLibY/s1600/Solvelogger-logo.png'/>
      <meta itemprop='url' content='http://4.bp.blogspot.com/-3qEtsw1yqO0/VnZ0534tHjI/AAAAAAAADGQ/AYOyXnnLibY/s1600/Solvelogger-logo.png'/>
      <meta itemprop='width' content='600'/>
      <meta itemprop='height' content='60'/>
    </div>
    <meta itemprop='name' expr:content='data:blog.title'/>
</div>
  • Change the red colored highlighted image link with your logo image link
  • Change height and weight with any number

The dateModified field is recommended. Please provide a value if available.

Find this tag
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
and paste these code after above tag
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>

The mainEntityOfPage field is recommended. Please provide a value if available.

Find this tag
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
and replace the code with this
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta itemscope='itemscope' itemprop='mainEntityOfPage'  itemType='https://schema.org/WebPage' expr:itemid='data:post.link ? data:post.link : data:post.url'/>
If error url missing add this after above code.
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>

If you liked this article, then please subscribe to our blog for more blogger tutorials.