Showing posts with label Blogging. Show all posts
How to Change the Mouse Pointer on a Website How to Change the Mouse Pointer on a Website Changing the mouse pointer on a webpage is really easy. Follow these instructions and you will know how to complete this task. Steps 1...
How to Change the Mouse Pointer on a Website

How to Change the Mouse Pointer on a Website

Changing the mouse pointer on a webpage is really easy. Follow these instructions and you will know how to complete this task.

Change the Mouse Pointer on a Website

Steps

1. First you need to make the cursor file. Go to http://www.cursor.cc and start drawing.

2. Don't forget to place the cursor's hotspot on the right place.

3. Download the cursor. cur file when you are finished.

4. Put the file into your webserver directory.

5. Add this to your CSS file: body{ cursor: url('cursor.cur'), auto;}
How to Fix Template-Skin Only Available For Templates Version 2 and Above on Blogger How to Fix Template-Skin Only Available For Templates Version 2 and Above on Blogger According to my knowledge you adding custom template-skin to your blogger layout or may you have removed some code or you might have remove ...
How to Fix Template-Skin Only Available For Templates Version 2 and Above on Blogger

How to Fix Template-Skin Only Available For Templates Version 2 and Above on Blogger

According to my knowledge you adding custom template-skin to your blogger layout or may you have removed some code or you might have remove this code to setup Facebook comments for blogger. When my friend have this issue ask me to help with this issue and I started too. Comparing other default template and this template but not found the error about hardly trying of 6 hours.

Fix version 2 blogger template skin

Almost compared all section of blogger but found nothing, which was more frustrating at that time. At last I found this issue in the starting point of the code, sometimes solution is in front of you but we does not look at it.

How to solve this error


Step 1: Go to Blogger Dashboard >> Template >> Edit HTML
On the first block of code you must find something like this:
<html expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
Step 2: Just replace above code with this
<html b:version='2' class='v2' 
expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
Now you are good to go Hurray!

So this was our guide on How to Fix template-skin only available for templates version 2 and above on Blogger , I hope the methods given above helped you.
How to Disable Default Mobile View on Blogger How to Disable Default Mobile View on Blogger This option is ON by default for each of your Blogger blogs. Here is a step-by-step guide to turn off the Mobile template on your Blogger b...
How to Disable Default Mobile View on Blogger

How to Disable Default Mobile View on Blogger

This option is ON by default for each of your Blogger blogs. Here is a step-by-step guide to turn off the Mobile template on your Blogger blog without coding skill.

Disable Default Mobile View on Blogger

Why to Turn Off Mobile View


  • You have already choose a well Responsive Templates which have a beautiful view on Mobile, but due to Blogger default mobile view it make mess of your wonderful theme look.
  • If you are developing a responsive it may create a bug in your Template code
  • To Enjoy more feature on your template which it may not showing on Blogger Default

Disable Default Mobile View on Blogger


Step-1: Login into your Blogger Account. Go to Template Section,You'll see the 'Mobile' preview of your blog in the template section. Click that gear icon below the Mobile preview.

Step-2: A dialog box popup showing a couple of options to turn on or off the Mobile template. Select 'No' and Save.

That's it. Your blog readers won't see the default blogger mobile template anymore when visiting from the mobile devices. You may also revert the changes later if you need to.
How To Fix Render Blocking CSS In Above The Fold Content How To Fix Render Blocking CSS In Above The Fold Content Referencing CSS files with link[rel=stylesheet] will cause most browsers to delay page rendering while the stylesheet loads. This is desira...
How To Fix Render Blocking CSS In Above The Fold Content

How To Fix Render Blocking CSS In Above The Fold Content

Referencing CSS files with link[rel=stylesheet] will cause most browsers to delay page rendering while the stylesheet loads. This is desirable in many cases, but when loading stylesheets that are not critical to the initial rendering of a page, loadCSS (and upcoming web standards mentioned below) allows you to load stylesheets, so they don’t block page rendering.

render blocking CSS in above the fold content

How to identify render-blocking render-blocking JavaScript and CSS


You need to know what your page is loading. There are several ways to do this. I suggest you look at what your page is loading with our pagespeed tool to get an overview of the issues your page or theme faces. To get the specific files that are currently blocking rendering you should use the Google pagespeed insights tool. This tool will tell you the exact files that are blocking a particular page.

Also Read :-

How To Fix Render Blocking CSS In Above The Fold Content


Just simply add your External stylesheets (read those included via link tags) are render-blocking into a noscript tag.

Example:-

If Your Link
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Just use below code

Method 1 :-

<noscript id="deferred-styles">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
</noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>

Method 2 :-

<link as='style' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' onload='this.rel=&#39;stylesheet&#39;' rel='preload'/>
<noscript><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/></noscript>

Method 3 :-

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>

So this was our guide on How To Fix Render Blocking CSS In Above The Fold Content, I hope the methods given above helped you.

Keywords:- load a CSS file asynchronously, Eliminate render-blocking CSS in above-the-fold content, Defer loading CSS.
How to Add Expires Browser Cache Control Header How to Add Expires Browser Cache Control Header Leverage Browser Caching helps to decrease Blog page load time. When you open or load any Blog or webpage from your local computer on any br...
How to Add Expires Browser Cache Control Header

How to Add Expires Browser Cache Control Header

Leverage Browser Caching helps to decrease Blog page load time. When you open or load any Blog or webpage from your local computer on any browser then that Blog or websites automatically sends request to the server, and it takes some time. And when you add Expires Browser Cache code in your Blogger template code then any body open or load your blog, Expires Browser Cache code save the server response file is user Browser Cache. I means no more request to your server and no more extra time to load your Blog page.

Leverage Browser Caching

Every blogs that includes many multimedia files such as images (jpg, gif, png and more), java script (.js), flash (.flv), stylesheets (.css) and more. When the blog's page loads on a computer these files also download as cache file to the local system via browser. It will be automatically re-fetch while you accessing the same page again. If the file is already stored with expire date, the file loaded via your local. Server request will not sent from blogger until it expires.

How To Add Expires Browser Cache Code in Blogger


1. Sign in to your Blogger Dashboard > Template > Edit HTML

2. Click anywhere in the code and press CTRL + F to open the search box then find the <head> tag.

3. Just after <head> tag paste the code given below:
<!-- Start leverage caching by HowlMeFlash -->
<include expiration='7d' path='**.css'/>
<include expiration='7d' path='**.js'/>
<include expiration='15d' path='**.html'/>
<include expiration='3d' path='**.gif'/>
<include expiration='3d' path='**.jpeg'/>
<include expiration='3d' path='**.jpg'/>
<include expiration='3d' path='**.png'/>
<!-- End leverage -->
4. Save your Template and you are Done!

How To Add Expires Browser Cache Code in WordPress

<!-- Start leverage caching by HowlMeFlash -->
<include expiration='7d' path='/assets/**.css'/>
<include expiration='7d' path='/assets/**.js'/>
<include expiration='15d' path='/assets/**.html'/>
<include expiration='3d' path='/assets/**.gif'/>
<include expiration='3d' path='/assets/**.jpeg'/>
<include expiration='3d' path='/assets/**.jpg'/>
<include expiration='3d' path='/assets/**.png'/>
<!-- End leverage -->

Note: Here "7d" shows the expiry date as 7 for the file. You can modify it whatever you want.

Don't set long expires date for blogger blog's file in leverage browser caching header. Since if you set long expire date then it will take some time for update the changes from your blog.
So this was our guide on How to Add Expires Browser Cache Control Header in Blogger Blog, I hope the methods given above helped you.

Keywords:- Add Expires Cache Control Header in Blogger Blog, enable leverage browser caching in blogger blog, Add Leverage Browser Cache to Your BlogSpot Blog, leverage browser caching of your website or blog.
Web Security: A Layer of Defense against Viruses Web Security: A Layer of Defense against Viruses "Wilder than the West!" is how someone once described the internet to me. There are so many web threats out there that can harm y...
Web Security: A Layer of Defense against Viruses

Web Security: A Layer of Defense against Viruses

"Wilder than the West!" is how someone once described the internet to me. There are so many web threats out there that can harm your network, be it viruses, trojans, or any other malicious software. Maintaining web security should therefore not be regarded as a kind of low priority optional extra, but should be a critical part of any business’s continuity plans.

The problem is, however, that maintaining adequate web security can be very complex. There are many different types of machines and users with different needs hooked up to the average network. That's not all; a vast array of security packages clamor for our attention as the best solution to our web security problems.

Web Security against viruses

One solution to this conundrum is to shift your protection against web security threats from local machines to web security systems at the gateway and at server level. Using such a system will give network administrators control of an impressive range of tools with which to protect their systems from a single console or machine. These tools will effectively monitor everything that enters and leaves the network (or rather, that attempts to enter and leave) and counter possible network security threats in real time before they reach the network.

There are a lot of tools that administrators can use. When choosing a web security strategy it pays to look for the following features or approaches:
  • The use of multiple antivirus scanners: This will make it harder for potential malware to ‘slip through’ since different scanners use different ‘search and destroy’ techniques and some may also be ahead of the curve in terms of response to specific threats. Using multiple AV scanners at the same time means that you can capitalize on all their strengths and greatly minimize the risk of some nasty zero-day virus slipping through.
  • Configurable scanning of specific file types and other threats: By exercising central control over what enters/leaves your network (e.g. disallowing .exe, scanning .zip files with multiple engines and selectively scanning files with little risk) you will be able to enjoy a much higher level of threat protection. Web filtering and monitoring systems will also scan inside seemingly innocuous files to ensure that they are safe.
  • The ability to set policies for individual machines, groups or IP addresses: Users obviously have different needs and ‘blanket blocking’ of specific files and/or activities are bound to hinder the work of users with legitimate needs. The ability to easily set up policies to ensure that security threats are minimized and no one is inconvenienced is a major benefit of this approach.
  • Limit attempts to bypass web security: Some viruses / malware might attempt to bypass standard security by channeling downloads through HTTPS connections – which typically mask the data being transmitted. A good web security solution will include analysis of HTTPS traffic as standard procedure and thus provide additional security.

The web may be ‘Wilder than the West’ but this is no reason for network administrators to lose unnecessary sleep. Having a good web security system in place will ensure that the web security threats remain firmly outside your system!
How to Add Defer and Async Attributes for External Scripts How to Add Defer and Async Attributes for External Scripts I'm sure all Webpage using external script whether it is jquery or navigation script in blogger blog/site. Have you noticed some perform...
How to Add Defer and Async Attributes for External Scripts

How to Add Defer and Async Attributes for External Scripts

I'm sure all Webpage using external script whether it is jquery or navigation script in blogger blog/site. Have you noticed some performance issue with that?

Add Defer and Async Attributes for External Scripts

Defer Attribute: The defer attribute ensures that the script is executed only after all contents of the page have finished loading.

Async Attribute: The async attribute on the other hand ensures that the script loads asynchronously along side the other contents of the page after which it is executed.

Both these attributes are well supported in all modern browsers including Firefox, Chrome and Internet explorer. Internet explorer has added support for these attribute since IE10.

Note: It is to be noted that these attributes will not be the best solution in case your scripts need to follow an execution order or make use of document.write.

An example of a script tag with the async and defer attributes is as follows:

Here is the Original Code:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Updated Code: (just add async='async')

<script async='async' src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Updated Code: (just add defer='defer')

<script defer='defer' src="//code.jquery.com/jquery-1.12.0.min.js"></script>


I hope this article helps you to load efficiently in your blog or Website. If you liked this article, then please subscribe to our blog.
How to Compress and Resize Image Without Loosing Quality How to Compress and Resize Image Without Loosing Quality People hate to visit websites which require more time for loading. So one should always seek to improve the webpage load time, so to do so y...
How to Compress and Resize Image Without Loosing Quality

How to Compress and Resize Image Without Loosing Quality

People hate to visit websites which require more time for loading. So one should always seek to improve the webpage load time, so to do so you have to look at many things like loading sources, page cache, media files etc. One among such media file is images, adding beauty to your page, but at the same time, it is regarded as the most bulky resources which takes much time to load on the page, thereby causing inconvenience to the visitors.

Compress and Resize Image Without Loosing Quality

But one can improve the page load time by cutting the size of an image to a significant amount. But even resizing the image without any proper knowledge may be troublesome as you may lose the quality it had. Though photoshop provides a nice feature to save the original quality of the pic, it is not preferred much as it's too expensive to purchase the photoshop application for desktop or web version. So here I'm going to provide you with free online tools to Resize Image without loosing Quality

Web Based Tools to Resize Image without loosing Quality


1. Kraken.io :-

JPEG, PNG, GIF, SIV are some of the image formats that can be compressed with this online application. This reduces the image to a quite considerable point without losing the image size.

2. Imageoptimizer.net :-

After uploading the image from your computer, give the size of the image and quality you wish to have after processing. This provides only some control of the output and compression ratio But Greatly Helps to Resize Image without loosing Quality.

3. Compressjpg.com & Compresspng.com :-

I would suggest you to have these application, for more control of the image quality. A slider appears as soon as you upload an image to auto control the quality of the last image. A preview panel is provided for showcasing the changes according to the quality slider change. So before downloading the image you can have the review of your final image. This application is available on different domains for JPG and PNG images.

4. Punypng.com :-

This application is available to compress the PNG files. Upload an image and you can get a compressed size of the image. Besides this, tinypng.com , a quick tool to compress the PNG images to the best level without affecting the image quality.

5. Compressor.io

6. Giftofspeed.com

7. Tinypng.com

8. Optimizilla.com

Desktop tool to Resize Image without loosing Quality


If you need a Desktop tool to do this task then i would suggest you to have PNG Gauntlet as your first choice, You will need .Microsoft Net Framework 4.0 to run this tool on your Windows.

You won't Face any difficulty in Using this tool as it is very User Friendly. While Optimizing the images PNG Gauntlet will show you older size and Optimized size of the image. this Program is not that Fastest at it work but Usefull.
Hide Specific Label Posts from Homepage in Blogger Hide Specific Label Posts from Homepage in Blogger Some blog user doesn't want to show some specific post appear in blogger Homepage/Index Page. I have tried many thing but at last found ...
Hide Specific Label Posts from Homepage in Blogger

Hide Specific Label Posts from Homepage in Blogger

Some blog user doesn't want to show some specific post appear in blogger Homepage/Index Page. I have tried many thing but at last found the hack to hide specific label/labels from Home page. In this post, I'll explain how you can filter posts of a specific label from being displayed on your blogger homepage.

Hide Specific Label Posts from Homepage in Blogger

Before following this tutorial , backup your blogger template. To back up your Blogger template, go to Dashboard >> Template >> Backup / Restore and click the "Download full template" link near the top of the page.

How to Hide Specific Label/Labels Posts from Homepage in Blogger/Blogspot


Step 1: Now Go to Template >> Edit HTML
Inside the blogger code editor find out this below tag
<b:include data='post' name='post'/>
Step 2: Now replace Step 1 tag with below code
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.name != &quot;LABEL&quot;'>
            <b:include data='post' name='post' />
        </b:if>
    </b:loop>
    <b:else/>
    <b:include data='post' name='post' />
</b:if>
Exclude Multiple Labels from Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.name != &quot;FIRST LABEL&quot;'>
            <b:include data='post' name='post' />
        </b:if>
        <b:if cond='data:label.name != &quot;SECOND LABEL&quot;'>
            <b:include data='post' name='post' />
        </b:if>
    </b:loop>
    <b:else/>
    <b:include data='post' name='post' />
</b:if>

Step 3: Save it.

So this was our guide on Hide Specific Label Posts from Homepage in Blogger , I hope the methods given above helped you.
Friendly Facebook Popup Like Box Widget for Blogger Friendly Facebook Popup Like Box Widget for Blogger Facebook that is also known as fb is best of one leading social media site having millions of daily active users on it from all over the wo...
Friendly Facebook Popup Like Box Widget for Blogger

Friendly Facebook Popup Like Box Widget for Blogger

Facebook that is also known as fb is best of one leading social media site having millions of daily active users on it from all over the world with Page Rank 9 on Google. If your blog has lots of FB Likes and shares then it is 100% true that your site will get surely get huge traffic and value on the internet world. Because the value of more fans will help you to improve presence of your site on search engines. So for increasing the fb fans of your website you should add a Facebook like widget to your blogger blog, but if that widget has rich with popup facility that popup first to your user whenever visitor visit your website then more chances to get more likes.

Facebook Popup Like Box

This is the best Facebook Popup Like Box for Blogger ever i have seen, because it has friendly looking structure that covers with smoothly light gray colored border with appropriate size. It is build using light weight coding that does not harm your site's performance and SEO ranking, because if you site loads slowly then Google will surely rank down your blog for this, So you need not worry about that. Okay come to the topic, now we will learn about inserting gadget code in your blogspot log.

How to add Facebook Popup Like Box to Blogger


1. Go to your Blogger Dashboard >> Layout, click on Add a Gadget and the scroll down and select "HTML/JavaScript"
2. Now copy the below piece of code and paste it into HTML/JavaScript blank box

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
Don't add this if you are already using any jQuery.js file
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/howlmeflash&width=330&height=220&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 330px; height: 220px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://howlmeflash.blogspot.com" rel="nofollow">Solvelogger</a></div>
</div>
</div>

3. Save it.

Now its time to customize the gadget according to your desire

✼ Replace https://www.facebook.com/howlmeflash with your own Facebook page URL
✼ By default the gadget appears after the page finishes loading. But if you want to change the default delay then simply change the 5000 to any desire number. you can search find it by searching the below code.
Note: 5000 means 5 seconds, if you want this gadget to load in 3 seconds then simply change it to 3000.
.delay(5000)
✼ This fb like box only shows up the first time the user visits your web page. If you want the Facebook widget box to pop-up every time the page loads, then simply remove the below line of code:
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
✼ If you would like to display the gadget only whenever user visits your homepage, then follow the below instructions:
1. Go to Template >> Edit HTML, now search for </body>
2. Now paste the Facebook popup widget box right above the body tag and kindly make sure that you have included the conditional tags below:
&lt;b:if cond='data:page.type == "index"'&gt;Kindly Add The Facebook Widget Code Here &lt;/b:if&gt;
3. After completing the required task, just click on save button to save your settings
Now you have successfully added Facebook Popup Like Box Widget to Blogger
So this was our guide on Friendly Facebook Popup Like Box Widget for Blogger , I hope the methods given above helped you.
How to Add Twitter Large Summary Card to Blogger How to Add Twitter Large Summary Card to Blogger The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich p...
How to Add Twitter Large Summary Card to Blogger

How to Add Twitter Large Summary Card to Blogger

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

Twitter Large Summary Card

Twitter Summary Card with Large Image Markup

The basic Meta tags for Twitter are:
twitter:card = Should be set to a value of 'summary_large_image'
twitter:site = @username the card should be attributed to. Required
twitter:title = Title or alternate title of post
twitter:url = URL of post
twitter:description = Brief description in less than 200 characters
twitter:image:src = Card should be at least 280px in width, and at least 150px in height

How to Add Twitter Cards to Blogger Blog


Step 1: Before editing template remember to backup it first

Step 2: Then go to Blogger Dashboard >> Template >> Edit HTML >> Click anywhere in Code Editor and then search(CTRL + F) for the following
<b:includable id='post' var='post'>

Step 3: Paste the following code right underneath and change the text to your own information.
<!--TWITTER CARD CODE-->
 <meta content='@howlmeflash' name='twitter:site'/>
 <meta content='@howlmeflash' name='twitter:creator'/>
 <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
 <meta content='summary_large_image' name='twitter:card'/>
 <b:if cond='data:post.firstImageUrl'>
 <meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
 <b:else/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
 <b:else/>
 <meta content='https://lh3.googleusercontent.com/-9Fy3-ME-5VA/VfhZDh1oQOI/AAAAAAAABFc/SPkLmVpV1aY/s1600/no-thumbanil-available.png' name='twitter:image:src'/>
 </b:if>
 </b:if>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
 <b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
 <b:else/>
 <meta expr:content='data:post.snippet' name='twitter:description'/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <meta expr:content='data:blog.title' name='twitter:title'/>
 </b:if>
 </b:if>
 <!--TWITTER CARD CODE END-->

Replace @howlmeflash with your blog twitter username. If you and blog twitter username is different replace @howlmeflash with your use name if not then add you username in it.

How to Apply for Twitter

  • Make sure that you have successfully installed Twitter Cards code on your blog.
  • Run your URL against the validator tool to test.
  • After testing in the validator see the Card appear below your tweet in the details view.
  • Use Twitter Card analytics to measure your results.

Problem We Face

In first time implementing Twitter Summary Card with Large Image , image in twitter cards simply failed to load. Seemed that the image being pulled from data:blog.postImageThumbnailUrl in the Validator was coming up very small (72x72px) thus probably why the summary_large_image card wouldn't render it since the minimum required is over 280px wide.
So we solve by replacing data:blog.postImageThumbnailUrl to data:post.firstImageUrl which simply worked like a charm.

If you have any other suggestion or issue regarding this post comment below
How to Add Twitter Summary Cards on Blogger Blog How to Add Twitter Summary Cards on Blogger Blog According to Twitter: With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your websi...
How to Add Twitter Summary Cards on Blogger Blog

How to Add Twitter Summary Cards on Blogger Blog

According to Twitter: With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a Card added to the Tweet that's visible to all of their followers.

Twitter Summary Cards

Twitter limit 140 character for status update, it does not shows the blog post preview like Facebook & Google Plus shows. In order remove this restriction twitter introduced Twitter Card for blog, which show your the link preview with post title, summary, and thumbnail of your post content. Twitter Card Markup boost social exposure, increase social media traffic and improve click-through rates. There are 7 types of Twitter Cards but Summary Cards mostly used.

Well here we are going to see how you can integrate the Twitter Cards to your Blogger blog. This is really simple task just follow these easy steps :

Twitter Card Markup


The basic Meta tags for Twitter are:
twitter:card = Card type (full list of card types here)
twitter:title = Title or alternate title of post
twitter:url = URL of post
twitter:description = Brief description in less than 200 characters
twitter:image:src = URL to unique image of at least 120 pixels(Not Required for blogger)

How to Add Twitter Cards on Blogger Blog


Blogger blog does not support plugins like WordPress, since it would not easy to add Twitter Cards in blogger, you have to add simple code in your blogger template manually.

Before editing template remember to backup it first, then click on edit html and add below code just after <head> opening tag.
<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@howlmeflash' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<!-- end twitter card details -->

Replace @howlmeflash with your twitter username

How to Apply for Twitter


  • Make sure that you have successfully installed Twitter Cards code on your blog.
  • Run your URL against the validator tool to test.
  • After testing in the validator see the Card appear below your tweet in the details view.
  • Use Twitter Card analytics to measure your results.

So this was our guide on How to Add Twitter Summary Cards to Blogger Blog, I hope the methods given above helped you in adding Twitter Summary Cards.
How to Display Recent Tweets in Blogger with Twitter Widgets How to Display Recent Tweets in Blogger with Twitter Widgets Twitter is one of the most engaging social media on this planet. It’s a great way to keep monitor with recent trend, interact with your read...
How to Display Recent Tweets in Blogger with Twitter Widgets

How to Display Recent Tweets in Blogger with Twitter Widgets

Twitter is one of the most engaging social media on this planet. It’s a great way to keep monitor with recent trend, interact with your reader, and help other users. But most important it gives visitors a even during periods when you’re not publishing new blog posts. Think about that if you add recent tweets in your blog to create a interactive environment where it makes sense about your website, readers can follow the author, reply to the tweet directly from your website. So what you are waiting for , let's get started.

Display Recent Tweets Twitter Widgets

In this article, we will show you how to display recent tweets in Blogger/Blogspot using official recent tweets twitter widget. It is going to so simple that you might do it in one hand just follow these below steps

Step 1 :- First thing go to Create a new embedded user timeline page. Then login with your Twitter account, if you are already logged in just go to Step-2

Step 2 :- Now By default, the width of the widget is automatically adjusted so you don’t need to worry about that. There are a few options to set height, select either a light or dark theme, Auto-expand photos, Exclude replies etc. Once ready with the widget appearance, then click on “create widget” button.

create a search widget on Twitter

Step 3 :- Copy the code which appear after you clicked on “create widget” button and paste these code in HTML/JavaScript widget in blogger blog.

twitter widget configure

Step 4 :- To add this go to Blogger Dashboard >> Layout, then click on Add a Gadget from the sidebar. Select HTML/JavaScript widget and paste the code inside content box, hit Save button.

So this was our guide on How to Display Recent Tweets in Blogger with Twitter Widgets , I Hope this article helps you easily add recent tweets widget in your blogger blog.
Auto Read More With Small Thumbnail Without Javascript For Blogger Posts Auto Read More With Small Thumbnail Without Javascript For Blogger Posts Read More in Blogger simply know as "jump break" in blogger. I have seen 80% blogger using JavaScript to visible some part of the ...
Auto Read More With Small Thumbnail Without Javascript For Blogger Posts

Auto Read More With Small Thumbnail Without Javascript For Blogger Posts

Read More in Blogger simply know as "jump break" in blogger. I have seen 80% blogger using JavaScript to visible some part of the post but the content is still downloading in browser. If you want to check go to any blogger theme, disable the JavaScript and refresh the page, you can see all the content in the browser.

Auto Read More With Small Thumbnail

But there is a method to use Read More tags using blogger Layout tags. Using this techniques Page will load very fast.Before we get started your first thing need to make sure that you have backup your blogger template

Step 1: Login to your blog >> Go to Template Section >> Click "Edit HTML" Button

Step 2: Click on Template Box to Find <data:post.body/> and replace by one of these below provided code

1st-Auto read more with thumbnail:-
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2nd-Auto read more with thumbnail and display default images if there is no images in that posts
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-image' alt='no image' src='http://1.bp.blogspot.com/-RqKvZTT_gGY/VVjvSQxK85I/AAAAAAAAAuM/iTdZ8KYSgiU/s1600/images9.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Step 3: Now its time to Customize post image.

Display image on left add this before ]]></b:skin>
.post-image {float: left; margin-right: 12px}

Display the image on right add this before ]]></b:skin>
.post-image {float: right; margin-left: 12px}

If you want any help I am Happy to help you Just comment it out.....
Top Best Auto Surf Auto Hits Traffic Exchange Site List Top Best Auto Surf Auto Hits Traffic Exchange Site List Anyone can participate in the free Traffic Exchange system. When you participate, you will be shown the websites of other members. In return...
Top Best Auto Surf Auto Hits Traffic Exchange Site List

Top Best Auto Surf Auto Hits Traffic Exchange Site List

Anyone can participate in the free Traffic Exchange system. When you participate, you will be shown the websites of other members. In return, your website will be viewed by thousands of other active members. Alternatively, you can simply buy a traffic package and start receiving website hits within minutes!

Top Best Auto Surf Auto Hits Traffic Exchange Site

Whether you have a new website or an old one, its relevance depends on many factors like traffic generation, backlinks, search engine ranking, social media, and many others. If you're looking for information on how to increase website traffic - This article can help and connect you to our tools that will help you improve search engine ranking for your site.

Also Read :- Top Best Social Media Exchange & Marketing Site List

Top & Best Auto Surf Auto Hits Traffic Exchange Site List :-


1. HitLeap
2. 10KHits
3. Traffboost
4. Hit4hit
5. Traffup
6. Upmyrank
7. Alexasurfing
8. Rankboostup
9. LinkCollider
10. 247autohits
11. Alexamaster
12. Easyhits4u
13. Autowebsurf
14. Trafficexchangehub
15. Bighits4u
16. Addmefast
17. Like4like

So this was our guide on Top Best Auto Surf Auto Hits Traffic Exchange Site List , I hope the article given above helped you in Traffic Exchange.

STag :- Auto Surf Site List, Auto Hits Site List, Traffic Exchange Site List, Top, Best, Free, Alexa Rank Booster.
Top Best Social Media Exchange and Marketing Site List Top Best Social Media Exchange and Marketing Site List Whether you have a new website or an old one, its relevance depends on many factors like traffic generation, backlinks, search engine rankin...
Top Best Social Media Exchange and Marketing Site List

Top Best Social Media Exchange and Marketing Site List

Whether you have a new website or an old one, its relevance depends on many factors like traffic generation, backlinks, search engine ranking, social media, and many others. If you're looking for information on how to increase website traffic - This article can help and connect you to our tools that will help you improve search engine ranking for your site.

Social Media Exchange & Marketing Site

Social media plays a role in your site’s popularity, and this article can also help you get get free Facebook likes, Google Plus followers, Pinterest pins, Twitter tweets & followers, Facebook shares, YouTube subscribers, Pinterest followers, Tumblr reposts, WordPress posts, Blogger/Blogspot posts, Stumbleupon posts, Instagram Followers, Likes & Comments!, SoundCloud Followers, Likes & Plays!, MySpace Connections!, vKontakte Followers & Joins!

** Get Free Website Pageviews! AND MUCH MORE

Also Read :- Top Best Auto Surf Auto Hits Traffic Exchange Site List

Top & Best Free Social Media Exchange & Marketing Site List :-


1. Addmefast

2. Link Collider

3. Like4like

So this was our guide on Top & Best Free Social Media Exchange & Marketing Site List , I hope the sites given above helped you for Social Media Exchange & Marketing.

STag :- Social Media Exchange, Social Media Marketing, Top, Best, free, Site, List.
All In One SEO Pack For Blogger All In One SEO Pack For Blogger All in One SEO Pack for Blogger the best SEO plugin in your blogspot blog. You can add to improve the ranking of your website on all Major ...
All In One SEO Pack For Blogger

All In One SEO Pack For Blogger

All in One SEO Pack for Blogger the best SEO plugin in your blogspot blog. You can add to improve the ranking of your website on all Major Search Engines such as Google, Bing, Yahoo, Yandex etc. I have make some improvements in this version for best results. If you are exciting to see changes in it then kindly read the whole post.

All In One SEO Pack For Blogger

All in One SEO Pack for Blogger allows bot crawlers to crawl your site daily without any conclusion, in the result of this action your website will get more organic (Natural) traffic and high ranking on SERPs. This is 100% safe and sound, so do not worry about it. Just follow my instructions for adding it on your website. But before proceeding it you should see its stunning features...

Features :-


  1. Add Meta Tags in Your Blogger Blog.
  2. Show Post Title First In Search Results
  3. SEO Optimize Blogger Comments
  4. Search Engine Optimized Blogger Labels
  5. Search Engine Optimized Blogger Archives
  6. Optimize Post Title Using H2 Tag
  7. Verify Google, Bing, Yandex, Pinterest and Alexa by verification code
  8. Add an SEO Friendly Robots.txt File
  9. Convert Title Tags into Dynamic Title Tags
  10. Facebook and Twitter Profile Compatible
  11. Facebook Analytics for you blog
  12. Allow Bots to crawl your site on daily basis
  13. Google + Author Profile Picture Compatible
  14. Helps you in Getting High Traffic
  15. And add much more good features

Recommended & Also Read :-
  1. How to add Facebook & Twitter meta tags on Blogger
  2. HTML Format to Improve Search Engine Visibility
  3. Auto ‘Alt’ ‘Title’ Tag Generator for Images
  4. Add Custom Robots.txt File in Blogger
  5. How to use Robots meta tag
  6. Basic On Page SEO Tips For Blogspot Blogs

How to Add All in One SEO Pack Plugin in Blogger


1. Login to your Blogger Dashboard.
2. Click on Template, here you will see Edit HTML button so click on it.
3. Now in template coding structure search for <head>.
4. After searching  <head>, paste the below whole piece of code just below <head>.

<!-- All In One SEO Pack for Blogger Blogspot By HowlMeFlash Start -->
<meta charset='utf-8'/>
<!----------------------------------
All In One SEO Pack for Blogger
Create by : ARIJIT DE
Author Profile : https://www.facebook.com/tuklude
Shared By: HowlMeFlash
Source : http://howlmeflash.blogspot.com/2017/12/all-in-one-seo-pack-for-blogger.html
---------------------------------->
<!-- Title SEO Pack for Blogger Blogspot -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
<b:else/>
<title>Page Not Found</title>
</b:if>
</b:if>
<!-- Description SEO Pack for Blogger Blogspot -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>
</b:if>
<!-- Keyword SEO Pack for Blogger Blogspot -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='keyword' name='keywords'/>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<!----------------------------------
Robots SEO Pack for Blogger Blogspot
---------------------------------->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex, nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex, nofollow' name='robots'/>
</b:if>
<!-- Others SEO Pack for Blogger Blogspot -->
<meta content='general' name='rating'/>
<meta content='all' name='audience'/>
<meta content='global' name='distribution'/>
<meta content='en-us' name='language'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='India' name='geo.country'/>
<meta content='Sylhet, Bangladesh' name='geo.placename'/>
<!----------------------------------
Social Media meta tag for Blogger Blogspot
---------------------------------->
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='website' property='og:type'/>
<meta content='summary' name='twitter:card'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='data:blog.blogspotFaviconUrl' property='og:image'/>
<meta content='data:blog.blogspotFaviconUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
    <!-- customer customization -->
    <meta content='Facebook App ID here' property='fb:app_id'/>
    <meta content='Facebook Admin ID here' property='fb:admins'/>
    <meta content='@username' name='twitter:site'/>
    <meta content='@username' name='twitter:creator'/>
 <meta content='https://www.facebook.com/profileusername' property='article:author'/>
 <meta content='https://www.facebook.com/pageusername' property='article:publisher'/>
 <link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>
 <link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>
 <meta content='xxxxxxx' name='author'/>
 <meta content='xxxxxx@xxxxx.xxx' name='email'/>
<!-- Webmaster meta tag for Blogger Blogspot -->
   <!-- customer customization -->
<meta content='GOOGLE VERIFICATION CODE' name='google-site-verification'/>
<meta content='BING VERIFICATION CODE' name='msvalidate.01'/>
<meta content='ALEXA VERIFICATION CODE' name='alexaVerifyID'/>
<meta content='YANDEX VERIFICATION CODE' name='yandex-verification'/>
<meta content='PINTEREST VERIFICATION CODE' name='p:domain_verify'/>
<!-- All In One SEO Pack for Blogger Blogspot By HowlMeFlash End -->

How to Customize This Code


  1. keyword :- Type your main keywords
  2. en-us :- Your content language
  3. India :- Your country name
  4. Sylhet, Bangladesh :- Your state and country name [Your Location]
  5. Facebook App ID here :- Facebook app id [make here]
  6. Facebook Admin ID here :- Your Facebook ID [find here]
  7. username :- Your Twitter username (replace 2 times)
  8. profileusername :- Facebook user name
  9. pageusername :- Facebook page user name
  10. https://plus.google.com/GOOGLE+ID/posts :- Your website's Google Plus Page Link
  11. https://plus.google.com/GOOGLE+ID/about :- Your Google Plus Profile Link
  12. xxxxxxx :- Blog's Admin name
  13. xxxxxx@xxxxx.xxx :- Your contact email id
  14. GOOGLE VERIFICATION CODE :- Google webmaster tools verification code
  15. BING VERIFICATION CODE :- Bing webmaster tools verification code
  16. ALEXA VERIFICATION CODE :- Alexa Verify code
  17. YANDEX VERIFICATION CODE :- Yandex webmaster tools verification code
  18. PINTEREST VERIFICATION CODE :- Pinterest domain verification code

5. Now click on Save button to save your settings.

You have successfully added AIO Plugin in your Blogspot Blog.
Note: It will take up to 72 hours to update your whole blog.
Final Words!
This AIO SEO Pack plugins for blogger blog will surely help you to increase your traffic organically, You will also get a chance to rank your website into the first page of search engines. Remember that if your blog don't have quality contents this Search Engine Optimization Pack will become useless.

So this was our guide on All in One SEO Pack for Blogger.

STag :- All in One SEO Pack for Blogger, Blogspot SEO Plugin, High Quality SEO Pack for Blogger, all in one seo pack plugin for blogger, all in one seo pack for blogspot, all in one seo pack for blogger blogspot, blogger all in one seo pack, blogger seo pack plugin.
How to Add Facebook and Twitter Meta Tags on Blogger How to Add Facebook and Twitter Meta Tags on Blogger How To Add Twitter Cards, Social Meta Tags for Twitter, Google+, Facebook and More, How To Add Facebook Open Graph. How to used it. Simp...
How to Add Facebook and Twitter Meta Tags on Blogger

How to Add Facebook and Twitter Meta Tags on Blogger

How To Add Twitter Cards, Social Meta Tags for Twitter, Google+, Facebook and More, How To Add Facebook Open Graph.

Facebook and Twitter Meta Tags

How to used it. Simple copy & paste this code on your Template after <head>.

<!-- [ Start Social Media meta tag HowlMeFlash ] -->
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='website' property='og:type'/>
<meta content='summary' name='twitter:card'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='data:blog.blogspotFaviconUrl' property='og:image'/>
<meta content='data:blog.blogspotFaviconUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Social Media meta tag need customer customization HowlMeFlash -->
    <meta content='Facebook App ID here' property='fb:app_id'/>
    <meta content='Facebook Admin ID here' property='fb:admins'/>
    <meta content='@username' name='twitter:site'/>
    <meta content='@username' name='twitter:creator'/>
<!-- [ End Social Media meta tag HowlMeFlash ] -->

Note: Simply change & replace Facebook App ID here, Facebook Admin ID here, username & username.

If you liked this article, then please subscribe to our blog for more blogger tutorials.
Auto Alt Title Tag Generator For Images Auto Alt Title Tag Generator For Images In this article I am going to introduce a Script called Auto Alt Title Tag Generator For Images. There are few other scripts available on In...
Auto Alt Title Tag Generator For Images

Auto Alt Title Tag Generator For Images

In this article I am going to introduce a Script called Auto Alt Title Tag Generator For Images. There are few other scripts available on Internet but I found most of them are not working after Blogger has upgraded its features.

Auto Alt Title Tag Generator For Images

The script which I am going to share is working perfectly with new and old blogger interface.

Steps To Add Auto Alt Title Tag Generator To Your Blog:

1.Backup your Template First.
2.Copy the below script and place before in your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Don't add this if you are already using any jQuery.js file
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

3.Save the template.To check whether the script working or not,just open your blog and hover mouse over the image.It should show you the name of the image.

How this Script works?


  • This script will automatically take the name of the image and adds a Alt and Title Tag for all the images in your blog.
  • This script not only adds Alt and Title tags but also gives a ‘+’ if there is space in the name of uploaded image.
For example if your upload a image with name Alt Title Tag Generator then it will change to Alt+Title+Tag+Generator making it SEO friendly.

How To Use This Script?


The only thing you have to do is to name your images properly before uploading to blogger.If you don’t name images properly then you may not see proper alt title tags for images.

So this was our guide on Auto ‘Alt’ ‘Title’ Tag Generator for Images , I hope the methods given above helped you
How to Add Custom Robots.txt File in Blogger How to Add Custom Robots.txt File in Blogger Are you one of modern day bloggers without much knowledge of technical details, looking to enhance your blog's ratings and audience but ...
How to Add Custom Robots.txt File in Blogger

How to Add Custom Robots.txt File in Blogger

Are you one of modern day bloggers without much knowledge of technical details, looking to enhance your blog's ratings and audience but don't know how to and your blogger friend told you that you can get a hike into your site visitors via editing your Robots.txt file? Or maybe you don't want search engines spiders to crawl through your pages? Or you do have a technical background but don't want to risk making changes without expert's words on topic? Well in either case, this is the right place for you to be. In this tutorial, you will see how to add Custom Robots.txt file in Blogger in a few easy steps.

custom robots.txt

But before we open and start working on Robots.txt, let's have a brief overview of its significance:
Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

What is Robots.txt?

With every blog that you create/post on your site, a related Robots.txt file is auto-generated by Blogger. The purpose of this file is to inform incoming robots (spiders, crawlers etc. sent by search engines like Google, Yahoo) about your blog, its structure and to tell whether or not to crawl pages on your blog. You as a blogger would like certain pages of your site to be indexed and crawled by search engines, while others you might prefer not to be indexed, like a label page, demo page or any other irrelevant page.

How do they see Robots.txt?

Well, Robots.txt is the first thing these spiders view as soon as they reach your site. Your Robots.txt is like a hour flight attendant, that directs you to your seat and keep checking that you don't enter private areas. Therefore, all the incoming spiders would only index files that Robots.txt would tell to, keeping others saved from indexing.

Where is Robots.txt located?

You can easily view your Robots.txt file either on your browser by adding /robots.txt to your blog address like http://myblog.blogspot.com/robots.txt or by simply signing into your blog and choosing Settings > Search engine Preference > Crawlers and indexing and selecting Edit next to Custom robots.txt.

blogger custom robots

How Robots.txt does looks like?

If you haven't touched your robots.txt file yet, it should look something like this:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://myblog.blogspot.com/sitemap.xml
Don't worry if it isn't colored or there isn't any line breaks in code, I colored it and placed line breaks so that you may understand what these words mean.

User-agent:Mediapartners-Google:
Mediapartners-Google is Google's AdSense robot that would often crawl your site looking for relevant ads to serve on your blog or site. If you disallow this option, they won't be able to see any ads on your specified posts or pages. Similarly, if you are not using Google AdSense ads on your site, simply remove both these lines.

User-agent: *
Those of you with little programming experience must have guessed the symbolic nature of character '*' (wildcard). For others, it specifies that this portion (and the lines beneath) is for all of you incoming spiders, robots, and crawlers.

Disallow: /search
Keyword Disallow, specifies the 'not to' do things for your blog. Add /search next to it, and that means you are guiding robots not to crawl the search pages /search results of your site. Therefore, a page result like http://myblog.blogspot.com/search/label/mylabel will never be crawled and indexed.

Allow: /
Keyword Allow specifies 'to do' things for your blog. Adding '/' means that the robot may crawl your homepage.

Sitemap:
Keyword Sitemap refers to our blogs sitemap; the given code here tells robots to index every new post. By specifying it with a link, we are optimizing it for efficient crawling for incoming guests, through which incoming robots will find path to our entire blog posts links, ensuring none of our posted blog posts will be left out from the SEO perspective.

However by default, the robot will index only 3000 posts, so if you want to increase the number of index files, then replace the sitemap link with this one:
Sitemap: http://myblog.blogspot.com/sitemap.xml
And if you have more than 3000 published posts, then you can use these sitemaps like below:
Sitemap: http://myblog.blogspot.com/sitemap.xml
Sitemap: http://myblog.blogspot.com/sitemap.xml?page=21
Sitemap: http://myblog.blogspot.com/sitemap.xml?page=22
Sitemap: http://myblog.blogspot.com/sitemap.xml?page=23
Sitemap: http://myblog.blogspot.com/sitemap.xml?page=24
Sitemap: http://myblog.blogspot.com/sitemap.xml?page=25
Note: Sitemap Index type published 20 pages, sitemap page type published 150 posts

How to prevent posts/pages from being indexed and crawled?

In case you haven't yet discovered yourself, here is how to stop spiders from crawling and indexing particular pages or posts:

Disallow Particular Post
Disallow: /yyyy/mm/post-url.html
The /yyy/mm part specifies your blog posts publishing year and month and /post-url.html is the page you want them not to crawl. To prevent a post from being indexed/crawled simply copy the URL of your post that you want to exclude from indexing and remove the blog address from the beginning.

Disallow Particular Page

To disallow a particular page, you can use the same method as above. Just copy the page URL and remove your blog address from it, so that it will look something like this:
Disallow: /p/page-url.html

Adding Custom Robots.Txt to Blogger

Now let's see how exactly you can add Custom Robots.txt file in Blogger:

1. Sign in to you blogger account and click on your blog.
2. Go to Settings > Search Preferences  > Crawlers and indexing.
3. Select 'Edit' next to Custom robots.txt and check the 'Yes' check box.
4. Paste your code or make changes as per your needs.
5. Once you are done, press Save Changes button.
6. And congratulations, you are done!

How to see if changes are being made to Robots.txt?

As explained above, simply type your blog address in the url bar of your browser and add /robots.txt at the end of your url as you can see in this example below:
http://howlmeflash.blogspot.com/robots.txt
Once you visit the robots.txt file, you will see the code which you are using in your custom robots.txt file.

Final Words:

Are we through then bloggers? Are you done adding the Custom Robots.txt in Blogger? It was easy, once you knew what those code words meant. If you couldn't get it for the first time, just go again through the tutorial and before long, you will be customizing your friends' robots.txt files.

In any case, from SEO and site ratings it's important to make that tiny bit of changes to your robots.txt file, so don't be a sloth. Learning is fun, as long as its free, isn't it?
StatCounter Web Analytics