Showing posts with label Blogger. Show all posts
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.
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.
StatCounter Web Analytics