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.
How to add Featured Post Widget on Blogger

How to add Featured Post Widget on Blogger

Finally Blogger introduce a new tool called Featured Post Widget to display your highlight content on their own blogs. The Featured Post Widget is a fully customizable widget, that displays a single post from your blog. You can decide, whether or not to show the post thumbnail and post title. With Featured Post, you can choose a post from your blog and highlight them wherever you'd like.

Featured Post Widget

How to Add Featured Post Widget


Step 1: Log in to the Blogger dashboard. Go to "Layout" , Click on "Add a Gadget" where you want to insert featured posts and hit "Featured Post."

Step 2: You can also change "Show post title" and "Show image" by clicking on Check boxes on this widget.

Step 3: Save.

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

What Do You Think of this Widget?


Overall this was just a good update but not solid for me i.e. you can limited to select one post to show as featured post, but we're excited to see what happens next. But we want to hear from you! How do you like the new widget? Let us know in the comments below!
How to Host Blogger CSS and JavaScript Files in Google Drive

How to Host Blogger CSS and JavaScript Files in Google Drive

Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time someone visits your site, the server or host will access this location and bring up the relevant files that need to be displayed. Wherever you decide to store your files, this will have an impact on some important aspects like the speed that your site loads, your overall SEO ranking and your ability to make necessary adjustments to the site.

Things To Think About


When you are designing your online structure and where to store your important CSS and JavaScript files, here is a run down on how this decision might impact your site later on:

Site Loading Speed


By combining some of the style sheets and website files, the Blogger server only has to collect information from a single location. When you split up your files or decentralize the file system, it takes a longer time for all the data to come together to make your site possible.

Slow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the 'back' button because it's taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.

File Storage Affects SEO


In addition to increasing your bounce rate, storing your files in a central location and managing the name of your files can affect SEO site wide. Web crawlers enlisted by Google, or some of the other search engines, index both the code on your site, and the name and directory of your files. If file names are random or not placed in the proper categories, the web crawlers aren't going to know what to do with the information.

Clear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.

Storage Locations Affect Editing Abilities


Shuffling through files and folders or opening up FTP connections just to make some simple edits can be a hassle, and take up a lot of time that could have otherwise have been spent writing new content.

If you're a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.

Some of the larger sites that produce hundreds of unique articles each month can't afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it's still live.

Storing Javascript/CSS Files With Google Drive


Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.

Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.

Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.

host blogger css javascript files

This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.

Step 1. Prepare the CSS/JavaScript Files


  • First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the <style> and </style> tags, remove them). 
  • In the Notepad menu, select 'File' > 'Save as' and type the file name with the .css extension just like I did with mycssfile.css - see the screenshot below.
  • create a css file
  • In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8. 
  • If you want to host a JavaScript file, add the .js extension (instead of .css) at the end of your file name (remove the <script>...</script> tags if you see them). Click "Save" and navigate to the location where you want to save the file. 

Step 2. Upload Your File on Google Drive

  • Access https://drive.google.com and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.
  • create folder in Google drive
  • Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload.
  • upload files using google drive
  • Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.
  • After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share':
  • share google drive files
  • In the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.
google drive link sharing public on the web

Step 3. How to Add an External CSS/JavaScript file to Blogger


Before you can use the links, you must replace 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and remove '/edit?usp=sharing' in the link.

For example, the link to mycssfile.css that I copied looks like this:
https://drive.google.com/file/d/0B4n9GL3eVuV-TkphMkc3SFR2Slk/edit?usp=sharing
Notice the part in blue after the "/file/d/" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:
https://googledrive.com/host/
Add the file ID like this (remove the '/edit?usp=sharing' part):
https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk
Now log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

open blogger search box ctrl%2Bf

If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:
<head>
Just BELOW the <head> tag, add this line:
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk" />
And replace https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the link of your CSS file:

add external css style sheet file to blogger

If you want to add a Javascript file, search for the following tag:
</body>
And add this line just ABOVE it:
<script src='https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg' type='text/javascript'></script>
Replace the line in blue with your URL:

add javascript file to blogger template

Finally, press the 'Save template' button to save the changes. And you're done!

In Conclusion


Once you have successfully saved all your file folders and closed out of the drive. Open your site in a browser and make sure that all the changes have completed successfully.

Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.

As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.
How to limit the Number of Posts Shown in Blogger Label Pages

How to limit the Number of Posts Shown in Blogger Label Pages

In Blogger blog, if you click on any label, it will redirect to you that label page which contain all the post of that particular label. If you have lots of posts for a specific label, the label page slow your loading time and requires more scrolling by your users. So how we can get rid of that ? Yes the only solution is limiting your number of posts appearing on the labels page.

How to limit the Number of Posts Shown in Blogger Label Pages

It very easy but require manual work (before start edting template backup your blogger template) you can follow this below steps to do your job:

Step 1: Login to your Blogger account.
Go to Dashboard >> Design >> Edit HTML.

Step 2: Now find out ( press 'Ctrl' + F to open your browser's search box)
expr:href='data:label.url'
or look for this
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
Now you will find out less or more like this code as below:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
Step 3: Now replace the highlighted means
expr:href='data:label.url'
with
expr:href='data:label.url + &quot;?max-results=7&quot;'
or with (If upper thing not work)
expr:href='data:label.url + "?max-results=7"'

Changing the code for Custom Labels Menu Tabs

If you have use Label Link in your menu, it probably look like this:
http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL
to limit the number of posts shown, just add ?max-results=7 at end of the link like this:
http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL?max-results=7
Once you successfully altered the code, your label pages will limits the list to 7 posts. (You change the number with your own limit). To view the next set of 7 posts, just click the Older Posts link at the bottom of the page.

If face any error Contact Us or Comment here. Enjoy !!!
How to Add a Favicon to Your Blogger Blog

How to Add a Favicon to Your Blogger Blog

What is Favicon:- Favicon is also known as Site Icon is the small image file that display next to the page's title on the tab in the browser. By default without a favicon, your blog displays the symbol of your blog platform or an even more generic paper icon. In Blogger it shows a Orange colored favicon. Blogger owner's can have their own favicon which helps your users identify your website and increases your brand recognition. Blogger allows you to change your blog's favicon without any coding but if you want to use code you can read further to know more.

How to Add a Favicon to Your Blogger Blog

Why you should Add a Favicon to Blogger:- It represent a graphical identity of your website, it also improve user experience. This tiny favicon helps user identify your website and quickly switch to the tab if users have multiple tabs open in their browser window.

How to Create a Favicon:- Many website use logo as your favicon. But you can create or convert your own favicon using any image editing software such as Photoshop, Gimp, Paint.net or Windows Paint, change file format from jpg, gif,png to ico for which stand for icon and rename it favicon.ico. Just be sure your image is square (16 x 16 pixels, 32 x 32 pixels, 64 x 64 pixels, and so on).

Alternatively, you can also use online tool to generate or convert your own icon such as (google it for more)
http://www.favicon.cc/
http://antifavicon.com/
http://converticon.com/
http://www.favicongenerator.com/
http://www.htmlkit.com/services/favicon/
http://tools.dynamicdrive.com/favicon/

How to Add Favicon to Blogger


Basically you can add favicon by uploading .ico file or adding it manually to the blogger

Simply by uploading "favicon.ico" file


Step 1: Go to your Blogger's Dashboard >> Layout >> Click on the favicon Edit link(In the Top Left Corner).
Step 2: Now click "Choose File" button.
Step 3: Browse for favicon.ico file (should be less than 100 KB) and select it.
Step 4: Blogger will automatically re-size it,and finally click the "Save" button.
Step 5: Now just refresh your blog you will see your new favicon
Note: If you can't see favicon after uploading delete browsers cookies and caches then visit your blog. If it doesn't work or doesn't show the right favicon, just do the following:
  • On the address bar, type http://yourblog.blogspot.com/favicon.ico and press Enter.(Replace yourblog.blogspot.com with your website address)
  • Refresh the page and check your blog.

Adding Manually in Blogger HTML Editor


Step 1: Go to Blogger Template >> Edit Html
Step 2: There find the title tag which looks like
<title><data:blog.pageTitle/></title>
and immediately after that add the following code after proper editing
<link rel="icon" href="URL of your .png file" type="image/png" />
<link rel="shortcut icon" href="URL of your .ico file"/>
Step 3: Replace URL of your .png and .ico file with your file's URL. Refesh your site it should start appearing in some time.
Note: We have face some trouble with favicons because Blogger wouldn't show them at all or wouldn't update first time when we uloaded it. If you have same problem don't upload file again, make sure you clear all cookies, caches and history from web browser and further check for it.
So this was our guide on How to Add a Favicon to Your Blogger Blog, I hope the methods given above helped you in adding Favicon to Your Blogger Blog.
How to Remove Widget Bundle CSS File From Blogger

How to Remove Widget Bundle CSS File From Blogger

Some blogger want to get rid of blogger default Widget CSS bundle file for better Blogger Template Coding. There are two external CSS files that are added by default. This file contain the CSS reset, predefined Navbar style, Widget style, blogger share button, heading tags and much more.

Best way to Remove Widget Bundle CSS file from Blogger

The important thing is that you cannot permanently remove Widget CSS bundle file only you can commented out so that it just ignored by the browser and make webpage load faster.

Why to Remove Default Blogger Css Bundle ?

  • Developers want to make their templates more flexible in terms of custom assets, design responsiveness, etc.
  • Make your webpage load faster from previous one
  • Optimize your CSS Delivery to improve your blog Scores in Google PageSpeed Insights

How to Remove Default Blogger Css Bundle


First of all backup your template before doing this and make sure that you should know basic HTML and CSS code to fix messy code.
You can remove widget_css_2_bundle.css with this steps below :

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Click anywhere in between code editor and search for <head> tag and replace it with &lt;head&gt;

Step 3: Next search for </head> tag and replace it with &lt;/head&gt;&lt;!--<head/>--&gt;
Note : This is the best way because is not affect the variables or your template-skin if you use in your template.
Step 4: Save it.

OR

  • First off, backup your Blogger template. Now, edit your template's HTML and find <b:skin><![CDATA[ in the template.
  • Now, cut-paste and save all the CSS styles to a separate text file on your computer.
  • We are left with <b:skin><![CDATA[]]>. Replace this line with the below code block:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[
*/]]></b:skin>
  • Now comes the CSS part of our template that we have saved in form of a text file separately. Note, if you have Variable based CSS, you will have to copy each and every variable value to the relevant CSS block. For eg. $(body.text.color) in the CSS should be replaced with the value of <Variable name="body.text.color"... and so on.
  • Add your plain CSS code inside the style tags just below the CDATA modification we just did.
<style type="text/css">
..your CSS code goes here..
</style>
  • Finally, save the changes and reload your blog. You will observe that the Blogger CSS Bundle file is not affecting our CSS rules anymore - and that's what we were looking for! Hope it has helped someone.

How to Remove Default Blogger Css Bundle Using jquery library


Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Click anywhere in between code editor and search for </head> tag and add below script
<script async src='//code.jquery.com/jquery-1.11.0.min.js' type='text/javascript'/>
Don't add this above code if you are already using any jQuery.js file
<script>
$("[href$='css_bundle.css']").remove();
</script>
Step 3: Save it.

So this was our guide on How to Remove Widget Bundle CSS file from Blogger, I hope the methods given above helped you in removing Widget Bundle CSS file.
How to Disable Widgets and Plusone JavaScript Files from Blogger

How to Disable Widgets and Plusone JavaScript Files from Blogger

If you use Google’s Blogger platform for blogging then; do you feel that your blog(s) takes way to long to load in the browser. If you are visiting a Blogger/Blogspot blog with a slow internet connection then you will see that most Blogger blogs takes forever to load.

Removing the default widgets & Plusone JavaScript in Blogger

Removing the default widgets & Plusone JavaScript in Blogger is a way of decreasing the loading time, thus making it faster.

How to Remove Plusone.js and Widgets.js from Blogger


Now if you want to disable Plusone.js and Widgets.js to increase you page speed follow this steps below :
You must backup your Blogger template.
  • Go to the Blogger dashboard > Template.
  • Click “Edit HTML”
  • search for </body> tag and replace it with :
&lt;!--</body>--&gt; &lt;/body&gt;
  • That's all save your template and well done.

Now you can create your own blogger template from scratch like you want.

So this was our guide on How to Disable or Remove Widgets and Plusone JavaScript Files from Blogger, I hope the methods given above helped you in removing Default Widgets and Plusone JavaScript File.
How to Add a EU Cookie Law Notification Bar

How to Add a EU Cookie Law Notification Bar

European Union laws require you to give European Union visitors information about cookies used on your website or blog. In many cases, these laws also require you to obtain consent.

HTTP cookies (also known as web cookie, Internet cookie, browser cookie or simply cookie) a small often encrypted text files given to a Web browser by a Web server located in browser directories. The browser retrieves and sends this file then sent back to the website's server each time and every time user back to the same website.

Notification Bar

Normally, Computer Cookies are created same domain name that is shown in the web browser's address bar. This is called a first-party cookie. And which are not created just by the website the user is browsing but also by other websites that serves ads, widgets, or other elements on the page being loaded known as Third-party cookies. These cookies open up the user's browsing history and regulate how to serve relevant advertisements or how the widgets and other elements function on the page.

So today I want to show you how to add or make or create EU Cookie Law Notification Bar. So, let’s get started!

How to Add a EU Cookie Law Notification Bar


<script type="text/javascript">
 window.cookieconsent_options = { 
 "message": "Cookies help us to deliver our services. By using our services you agree to our use of cookies.", 
 "dismiss": "Okay", 
 "learnMore": "More info", 
 "link": "/info/cookies/", 
 "theme": "dark-bottom" };
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/cookieconsent.min.js"></script>
Just add this code on your website or blog before </head> tag.

* Replace /info/cookies/ to your Privacy Policy or Cookies Policy

Customize Blogger EU Cookies Notification Bar


The default Notice is a long lengthy text with dull colors, in order to make sure to display a custom Short message to your readers that may also match your Template color theme then follow the steps below:

  • Go To blogger > Template > Backup your template
  • Click Edit HTML
  • Paste the following code just below ]]></b:skin> tag
<script type="text/javascript"> 
  cookieOptions = { 
    msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "Got it!", 
    learn: "Learn More" }; 
</script>
<style>.cookie-choices-info {z-index:999999!important;
background-color:#333333!important;
border-bottom: 1px solid #6FC415; 
box-shadow: 1px 2px 2px #000!important; 
padding:3px 0px!important;}
.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#dddddd!important;}
.cookie-choices-info .cookie-choices-button{
background-color: #6FC415!important;
border-radius: 1px!important;
box-shadow: 2px 3px 2px #000!important; 
padding:6px!important;
text-transform: none!important;}
</style>
  • Replace the black bolded text with any message you may like.
  • If you want you can replace the yellow highlighted link with your Custom Privacy Statement page else you can leave it as it is because the default link points to Blogger's Privacy page for Cookies info.
  • To change Notice Bar background color edit #333333
  • To change the green border that appears at the bottom of the bar edit #6FC415
  • To change the font color edit #dddddd
  • To change the background color of Buttons edit #6FC415
  • Save your template and you are all done!

So this was our guide on How to Add a EU Cookie Law Notification Bar , I hope the methods given above helped you.
Multi or Random Banner Ad Rotator Script

Multi or Random Banner Ad Rotator Script

If you have limited space on your Website or Blog, but you want to display multiple banners, the easiest way to show your ads is to rotate the banners based on a random chance or a specific algorithm.

Banner Ad Rotator

This banner rotator is a little bit different from loading one banner to other banner. Don't needed to Refresh the page to see new Ad banners. This Multi or Random Banner Ad Rotator Script is automatically change your banner.

Live Demo



Multi or Random Banner Ad Rotator Script


You can just place this below code, where you want to display multiple banners.
<script type="text/javascript">
/**
* Name    : Banner Ad Rotator 
* Publisher: HowlMeFlash
* URL: http://www.howlmeflash.com/2018/02/multi-or-random-banner-ad-rotator-script.html
**/

function Banner(refreshTime, width, height, altText, start, random){
 this.objName = "bannerAd" + (Banner.count++);
 eval(this.objName + "=this");
 if (!refreshTime) this.refreshTime = 5000; else this.refreshTime = refreshTime*1000;
 if (!width) this.width = 460; else this.width = width;
 if (!height) this.height = 68; else this.height = height;
 if (random == null) this.random = 1; else this.random = random;
 this.altText = altText;
 this.ads = [];
 if (start) this.currentAd = start-1; else start = null;
 this.mySize = 0;

 this.Ad = function(src, href, target, mouseover) {
  var tempImage = new Image();
  tempImage.src = src;
  this.ads[this.mySize] = new Object();
  var ad = this.ads[this.mySize];
  ad.src = src;
  if (typeof(target) == "undefined" || target == null) ad.target = "_self"; else ad.target = target;
  ad.href = href;
  ad.mouseover = mouseover;
  this.mySize++;
 }

 this.link = function(){
  var ad = this.ads[this.currentAd];
  if (ad.target == "_self"){
   location.href = ad.href;
  }
  else if (ad.target == "_blank" || ad.target == "_new"){
   open(ad.href,this.objName + "Win");
  }
  else top.frames[ad.target].location.href = ad.href;
 }

 this.showStatus = function(){
  var ad = this.ads[this.currentAd];
  if (ad.mouseover) status = ad.mouseover;
  else status = ad.href;
 }

 this.randomAd = function(){
  var n;
  do { n = Math.floor(Math.random() * (this.mySize)); } 
  while(n == this.currentAd);
  this.currentAd = n;
 }

 this.output = function(){
  var tempCode = "";
  if (this.mySize > 1){
   if (this.currentAd == null) this.randomAd();
   if (this.currentAd >= this.mySize) this.currentAd = this.mySize - 1;
   tempCode = '<a href="javascript:'+this.objName+'.link();"';
   tempCode += ' onMouseOver="' + this.objName + '.showStatus(); return true"';
   tempCode += ' onMouseOut="status=\'\';return true">';
   tempCode += '<img src="' + this.ads[this.currentAd].src + '" width="' + this.width;
   tempCode += '" name="' + this.objName + 'Img" height="' + this.height + '" ';
   if (this.altText) tempCode += 'alt="'+this.altText + '" ';
   tempCode += 'border="0" /></a>';
   document.write(tempCode);
   this.nextAd();
  } else document.write("Error: two banners must be defined for the script to work.");
 }

 this.newAd = function(){
  if (!this.random){ 
   this.currentAd++;
   if (this.currentAd >= this.mySize)
      this.currentAd = 0;
  }
  else {
   this.randomAd();
  }
  this.nextAd();
 }

 this.nextAd = function(){
  document.images[this.objName+ 'Img'].src = this.ads[this.currentAd].src;
  setTimeout(this.objName+'.newAd()',this.refreshTime)
 }
}
Banner.count = 0;
</script>
<script type="text/javascript">
// Banner Ad Rotator
// Publisher: HowlMeFlash
// URL: http://www.howlmeflash.com/2018/02/multi-or-random-banner-ad-rotator-script.html
<!--
myAd = new Banner( 8, 468, 60, "Visit our sponsor", 1, 0 );
myAd.Ad( "https://hitleap.com/assets/banner-241ef1f2c690b6812aeeff6c0fb91f39ffc8a214c0b2c6c11d8a96f7c98b8fab.png", "https://hitleap.com/by/clonemaster", "_blank", "Increase Website Traffic" );
myAd.Ad( "http://revenuehits.com/publishers/media/img/v2/468x60_v2.gif", "http://www.revenuehits.com/lps/pubref/?ref=@RH@5WvjQBPtIFg", "_blank", "Best Adsense Alternative" );
myAd.Ad( "http://www.10khits.com/banners/468x60.png", "http://www.10khits.com/?ref=155244", "_blank", "Free website traffic to your site" );
myAd.Ad( "https://www.linkcollider.com/img/lcbanner_468x60.jpg", "https://www.linkcollider.com/page/register?r=136953&aff=1", "_blank", "Best SEO Booster" );
myAd.Ad( "https://cdn.adf.ly/images/banners/adfly.468x60.1.gif", "http://adf.ly/?id=2882178", "_blank", "AdFly" );
myAd.Ad( "http://i57.servimg.com/u/f57/17/34/91/86/usersf10.png", "https://usersfiles.com/free2000.html", "_blank", "UsersFiles" );
myAd.Ad( "http://rapidgator.net/images/pics/503_468x60.gif", "http://rapidgator.net/account/registration/ref/1196468", "_blank", "Rapidgator" );
myAd.Ad( "http://i57.servimg.com/u/f57/17/34/91/86/tusfil10.png", "http://www.tusfiles.net/free68334.html", "_blank", "TusFiles" );
myAd.output();
// -->
</script>

MAKE THE FOLLOWING CHANGES OF 2ND SCRIPT:-

* Number of Banner :- 8

* Replace 1st Link with the Image links of the Advertiser’s banners
* Replace 2nd Link with the website link of the advertiser
* _blank to open a new tab for your browse with the website link of the advertiser
* Replace Text with some information related to the Ad. The description appears on mouse hover.

Note : This script I example only 8 banner, you can add much more banner. Just modify 2nd script 1st line and add link same as show on 2nd line.

How to Add Multi or Random Ad Banner Widget to Your Blogger blogspot Blogs


Simply follow these steps
1. Go To Blogger > Design > Page Elements
2. Choose HTML/JavaScript Widget
3. And Paste the following code inside it
4. Save.
That's all, you successfully added Multi or Random Banner Ad Rotator Script
So this was our guide on How to add or use Multi or Random Banner Ad Rotator Script, I hope the methods given above helped you.
Hide or Show Widgets or Gadgets on Home Post Static Archive Pages in Blogger

Hide or Show Widgets or Gadgets on Home Post Static Archive Pages in Blogger

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages.

Hide or Show Blogger Widgets

Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide or show widgets or Gadgets in particular posts, static pages, homepage or archive pages on Blogger using conditional tags.

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next thing to do is to go to Template and click on Edit HTML.

Step 3. Click anywhere inside the code area and press the CTRL + F keys to open the search box.

Step 4. Find the HTML of your widget by typing the widget's name in the search box - hit Enter.

Let's say that the title for one of my widgets is "Recent Posts". After searching for the widget's name, I will find a similar code in my template:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- 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:includable>
</b:widget>

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the widget only in Homepage:

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

To show Blogger widget only in 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>

To hide Blogger widget in 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>

To show the widget in a specific page:

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

To hide a widget only in a particular page:

<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: Replace URL of the page with the address of the page in which you want the widget to appear

To show widgets only in static pages:

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

To hide widgets in Static Pages:

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

To show widgets only in 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> 

Step 6. After you have added the conditional tags, Save Template and view your blog.

So this was our guide on How To hide or show widgets in particular posts, static pages, homepage or archive pages, I hope the methods given above helped you.
15 Killer Hacks for Blogger Images

15 Killer Hacks for Blogger Images

Most of the bloggers who use Blogger as their blogging platform using CSS (Cascade Style Sheet) to set height, width etc and have no idea that they can set their image height, width, border, burl, crop etc only changing blogger image permalink, nothing more nothing less. You don't believe me let's check out how we can do this.

Killer Hacks for Blogger Images

Default Image


First check URL Structure of Blogger Image. If you upload image to blogger it by default it automatically add s1600 to its permalink, it look like this:

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s1600/Killer-Hacks-for-Blogger-Images.png

Set Custom Size


You can replace s1600 from default image and try any size as you like example s600, s500 or s442 as your wish

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s442/Killer-Hacks-for-Blogger-Images.png

Set Max Resolution of Image


You can set in the URL is max resolution of image up to s2650 in blogger

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s2650/Killer-Hacks-for-Blogger-Images.png

Crop the image


Replace s1600 to s600-c in image url, you will get image as square means it height and width exactly 600px. You can also use s600-p to crop the image

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s600-c/Killer-Hacks-for-Blogger-Images.png

Add Border to the image


Replace s1600 to s1600-b10 in image url, you will get 10px black color border on the image. I have tried maximum to b50 but you can try more.

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s1600-b10/Killer-Hacks-for-Blogger-Images.png

Download the Image


Replace s1600 to s1600-d in image url, you will get provide a download link for image.

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s1600-d/Killer-Hacks-for-Blogger-Images.png

Original Image


Replace s1600 to s0 in image url, you will get original version image what you have upload

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s0/Killer-Hacks-for-Blogger-Images.png

XML Image Object


Replace s1600 to s1600-g in image url, you will get xml code of image

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s1600-g/Killer-Hacks-for-Blogger-Images.png

Set custom width


Replace s1600 to w180 in image and image width didn't go beyond 180px. Yes you can also try any other size

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/w180/Killer-Hacks-for-Blogger-Images.png

Set custom height


Replace s1600 to h180 in image and image height didn't go beyond 180px.

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/h180/Killer-Hacks-for-Blogger-Images.png

Set custom width and height


Replace s1600 to w300-h180 in image url it give perfect width of 300px and height of 180px

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/w300-h180/Killer-Hacks-for-Blogger-Images.png

Set Custom size and width


Replace s1600 to s500-w180 in image url it give maximum width of 180px

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s500-w180/Killer-Hacks-for-Blogger-Images.png

Set Custom size and height


Replace s1600 to s500-h180 in image url it give maximum height of 180px

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s500-h180/Killer-Hacks-for-Blogger-Images.png

Set Custom size, height and width


Replace s1600 to s600-w280-h180 in image url and just check it out

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s600-w280-h180/Killer-Hacks-for-Blogger-Images.png

No Thumbnail Appear


Replace s1600 to s1600-m1 in image url, you will get error image thumbnail

https://lh3.googleusercontent.com/-aRxiznPNUYs/VhaO-3-jcWI/AAAAAAAABIw/5CrIGUUHMXM/s1600-m1/Killer-Hacks-for-Blogger-Images.png

Enjoy this trick and comment below if you have other trick regarding blogger. You can use this trick in Google Plus, Picasa or any other google service
How to Display Most Commented Posts in Blogger

How to Display Most Commented Posts in Blogger

Users who came from search engine result, after reading your current post wouldn't otherwise know where to go, they might check out and hopefully participate in your blog's most commented posts which are commonly the most page views and are the most interesting. As we know Yahoo pipes code/plugin is no longer supported to display your most commented posts. Here is another ready made script to show Most Commented Posts with Thumbnail.

Display Most Commented Posts in Blogger

In this article, we will go through a script to display most commented posts in blogger in a widget. Although there are lots of tutorial for this purpose but as we know Yahoo pipes code/plugin is no longer supported to display your most commented posts. In this tutorial, we will display the top 5 commented posts but you change it as per your requirement.
<script>
    //<![CDATA[
    var numPosts = 5;
    var width = 225;
    var height = 120;
    var url = "yourblog.blogspot.com";

    var postTitle = new Array();
    var postUrl = new Array();
    var postComment = new Array();
    var postThumb = new Array();
    var totalpost;
    document.write('<div id="top-commented"><ul>');

    function mostComment(j) {
        var a = j.feed.entry.length;
        totalpost = a;
        for (var f = 0; f < a; f++) {
            var h = j.feed.entry[f];
            var c = h.title.$t;
            var b;

            if (f == j.feed.entry.length) {
                break
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "alternate") {
                    g = h.link[d].href;
                    break
                }
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "replies" && h.link[d].type == "text/html") {
                    b = h.link[d].title.split(" ")[0];
                }
            };

            var gt;
            try {
                gt = h.media$thumbnail.url.replace("/s72-c/", "/w" + width + "-h" + height + "-c/");
            } catch (error) {
                ss = h.content.$t;
                aa = ss.indexOf("<img");
                bb = ss.indexOf("src=\"", a);
                cc = ss.indexOf("\"", b + 5);
                dd = ss.substr(bb + 5, cc - bb - 5);
                if ((aa != -1) && (bb != -1) && (cc != -1) && (dd != "")) {
                    gt = dd;
                } else gt = 'http://1.bp.blogspot.com/-0ZVmySTNp8w/VatptLQV04I/AAAAAAAAA4A/Kyr5yVdA30c/' + "w" + width + "-h" + height + "-c/" + 'No-image-available-technohalf.png';
            }
            postTitle.push(c);
            postThumb.push(gt);
            postUrl.push(g);
            postComment.push(b)
        }
        sortPosts();
        for (var f = 0; f < numPosts; f++) {
            var e = '<li><div class="last-posts-img"><a href="' + postUrl[f] + '" title="' + postTitle[f] + '" target="_blank"><img  width= "' + width + '" height= "' + height + '" src="' + postThumb[f] + '" alt="' + postTitle[f] + '"/><div class="post-snippet">' + postTitle[f] + '</div><span class="count-most">' + postComment[f] + '</span></a></div>';
            document.write(e)
        }
    }

    function sortPosts() {
        function c(d, f) {
            var e = postTitle[d];
            postTitle[d] = postTitle[f];
            postTitle[f] = e;
            var e = postUrl[d];
            postUrl[d] = postUrl[f];
            postUrl[f] = e;
            var e = postComment[d];
            postComment[d] = postComment[f];
            postComment[f] = e;
            var e = postThumb[d];
            postThumb[d] = postThumb[f];
            postThumb[f] = e;
        }
        for (var b = 0; b < postTitle.length - 1; b++) {
            for (var a = b + 1; a < postTitle.length; a++) {
                if (parseInt(postComment[b]) < parseInt(postComment[a])) {
                    c(b, a)
                }
            }
        }
    }
    document.write('<script src="http://' + url + '/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
    document.write('</li>')
    document.write('</ul>')
    document.write('</div>');
    //]]>
</script>

Option
  • Change your  blog url here var url = "yourblog.blogspot.com";
  • By default, this widget is set to display a maximum of 5 most commented posts. To change this number, replace the number 5 in var numPosts = 5; with the number of posts that you want to appear
  • You can also change height and width here var width = 225; and var height = 120; it is by default 225px width and 120px height

Elegant Most Commented Widget

  • Add this widget to blogger
  • Go to Blogger Dashboard >> Layout
  • Then select Add a Widget >> Select HTML/JavaScript
  • Fill Up widget title and in content add below CSS and above JavaScript i.e.
<style>

//Your javascript here

<style>


<script>
//<![CDATA[

//Your javascript here

//]]>
</script>
Note: Javascript and CSS code already added <script> and <style> tag
<style>
    div#top-commented {
        max-width: 300px;
        background: #fff;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    
    #top-commented ul,
    #top-commented li,
    #top-commented ul li {
        margin: 0 auto;
        list-style: none;
        color: #444;
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        padding: 0;
        text-align: center;
    }
    
    #top-commented ul li {
        position: relative;
        overflow: hidden;
        background: #fff;
        text-overflow: ellipsis;
        box-shadow: inset 0 0 #fc4f3f;
        border-bottom: 1px solid #e6e6e6;
        transition: all .6s;
        padding: 19px 0;
    }
    
    #top-commented ul li a {
        color: #444;
        font-weight: bold;
        text-decoration: none;
        transition: all .3s;
    }
    
    #top-commented .post-snippet {
        padding: 8px 33px;
    }
    
    .count-most {
        position: absolute;
        left: 9px;
        top: 7px;
        width: 40px;
        height: 40px;
        border-radius: 250px;
        text-align: center;
        background-color: #fc4f3f;
        color: #fff!important;
        text-align: center;
        transition: all .3s;
        vertical-align: middle;
        display: block;
        line-height: 2.8;
    }
</style>

We hope this tutorial helped you display most commented posts in your blog. If you are looking for more tips on blogger then subscribe us.
How to Remove Subscribe to Posts Atom from Blogger

How to Remove Subscribe to Posts Atom from Blogger

In many Blogger templates there is a "subscribe to: Posts (Atom)" link, so that the blog visitors can subscribe to the Atom feeds. Considering the fact that many readers use RSS for their blog feeds, many of you could find this link pretty useless.

Remove Subscribe to Posts Atom from Blogger

Moreover it occupies space at the bottom of the template and it doesn't look nice at all. In this case you might want to remove it.

How to remove subscribe to: Posts (Atom) link?


Step 1. Go to your Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code area, then press the CTRL + F keys to open Blogger' search box

Step 3. Find (CTRL + F) this line:
<b:include data='feedLinks' name='feedLinksBody'/> 

Step 4. Remove it and click on the Save Template button to save the changes. That's it!

This should remove subscribe to: posts (atom) link.
How to Add Label Based Recent Post Sliders in Blogger

How to Add Label Based Recent Post Sliders in Blogger

Fetching some recent post and showing up in a list is not enough only but today sliders are much more in use. jQuery plugins for sliders comes to the rescue here. All we have to do is to fetch the recent post (perhaps label based) and then trigger the plugin.

label based recent post sliders for Blogger

Go to Template > Edit HTML. First step to add recent post is to add jQuery, if jQuery already exist in your template then skip this step else follow this step.

1. Add the following line of code after <head> :
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
Don't add this if you are already using any jQuery.js file

2. Find <head> and add the following code above it.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "http://yourblog.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://1.bp.blogspot.com/-WcK_MwbGkl4/V75lPlr5tAI/AAAAAAAAFQ8/p4Db__YpRIUwAJib_2rfetQ03bPjVRZvQCLcB/s1600/No%2Bimage.jpg"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

Replace the highlighted text with your site or blog. image link this is a backup for slides with no image.

3. Next step is to find ]]></b:skin> and paste the following code above it.

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:300px;
overflow: hidden;
text-align:Center;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
height:300px !important;
}
.top-l-slider .nivoSlider {
position:relative;
width:100%;
height:400px;
overflow: hidden;
text-align:Center;
}
.top-l-slider .nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
height:400px !important;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
bottom:10px;
left:5%;
display:block;
width:90%;
text-align:center;
font:400 26px 'segoe ui',sans-serif;
z-index:8;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
color:#fff;
}
.nivo-caption p {
text-align: Center;
font: 400 13px 'segoe ui',sans-serif;
margin: 10px 20px;
padding: 10px;
display: inline-block;
border-radius: 4px;
background: #222;
line-height: 21px;
}
.nivo-caption a{
color:#ecf0f1;
}
.nivo-caption h3{
text-align: center;
padding: 5px;
display: inline-block;
border-radius: 5px;
margin: 0;
line-height: 37px !important;
background: #e74c3c;
font: 400 30px 'segoe ui',sans-serif;
}
.nivo-caption .sliderdata{
margin:10px;
text-align:Center;
color:#fff;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 50%;
margin-top: -15px;
z-index: 9;
font-size: 0;
display: block;
width: 30px;
height: 30px;
border-radius: 5px;
line-height: 30px !important;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
/* border: 3px solid #fff; */
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.nivo-prevNav {
left:10px;
}
.nivo-prevNav:before{
content:'\2190';
position:Absolute;
left:0;
top:0;
display:block;
z-index:100;
font:400 20px sans-serif;
color:#fff;
height:30px;
width:30px;
line-height:30px !important;
text-align:center;
}
.nivo-nextNav:before{
content:'\2192';
position:Absolute;
left:0;
top:0;
display:block;
z-index:100;
font:400 20px sans-serif;
color:#fff;
height:30px;
width:30px;
line-height:30px !important;
text-align:center;
}
.nivo-nextNav {
right:10px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
z-index:100;
position:absolute;
top:10px;
right:10px;
font-size:0;
}
.nivo-controlNav a {
cursor:pointer;
display:block;
width:20px;
height:20px;
background:#222;
float:left;
  border-radius:10px;
margin-right:5px;
}
.nivo-controlNav a.active {
background:#e74c3c;
}

4. Now Save the template and go to Blogger > Layout > Add Widget > HTML/Javascript. Then add the following code in it.
<div class='recent-slider' data-label='LabelName'></div>

Just change the LabelName with your desired label and make sure you do not remove quotation ( '' ) mark.

That's All.