How can i access blogger variable in JavaScript?

Sometime we need to access blogger variable through javascript. You can easily get the the value in JavaScript by two methods

1) Direct access from JavaScript.

<script>
var blogURL = '<data:blog.url/>';
</script>

2) Set the value in an html element. Then access from JavaScript.

<div id="blogURL" data-blog-url="<data:blog.url/>"></div>
<script>
var blogURL = document.getElementById("blogURL").getAttribute("data-blog-url");
</script>

or

<input id="blogURL" type="hidden" value="<data:blog.url/>"/>
<script>
var blogURL = document.getElementById("blogURL").value;
</script>

Remove google ads from blogger post preview page

Today i got a warning from Google Adsense "There are unauthorized sites that have displayed ads using your AdSense publisher ID within the last week. Please click here..." etc.

I have added all my websites in my adsense authorization page & currently site authorization is active.

In the adsense pageview page, finally i got the url like
https://4492560067822442951_160e48051667999.blogspot.com

'4492560067822442951_160e48051667999' is equalant of my blogger subdomain.i.e
https://4492560067822442951_160e48051667999.blogspot.com = example.blogspot.com

I have a blogger blog with a custom domain. Before publish the post i click on the preview button, it open new tab & show the post preview.

The preview url is like this "https://4492560067822442951_160e48051667999.blogspot.com/b/post-preview?token=3f6aj1fsdfwBAAA.OWl1PrgJZ9iqxEsdfstTU1BW_o8AyE74KVOyWmRglY4gv4FQY_1NyNWdqorJqaSEDaIKvsw7BhLgz2JpAJc7f23_Tw.T3lperu4WH_zIQFxVgfEpA&postId=60302242414450751984379&type=POST"

I think this is the reason for adsense warning.

I had tried to add this domain 4492560067822442951_160e1667999.blogspot.com in adsense authorization page. But invalid url error occured.

How can i solve this problem?
Please take your blogger backup before doing this step.

Solution:

Check if your url contain 'post-preview', the just remove all the google adsense code by using JavaScript or JQuery

Add a div as a wrapper for Google ad code
Eg:

<div class='GoogleAdsWrapper'>
<!-- Add your adsense code here -->
</div>

1) By using JQuery
Add JQuery API. If already added in your blogger ignore it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Find '$( document ).ready(function() '. If it is found, then add the below lines into it

var CurrentURL = window.location.href;
if(CurrentURL.search(/.blogspot./i) >= 0 && CurrentURL.search(/post-preview/i) >= 0)
{
    $(".adsbygoogle").closest(".GoogleAdsWrapper").remove();
}

If it is not found add the below lines just before '</head>' tag.

$( document ).ready(function()
{
    var CurrentURL = window.location.href;
    if(CurrentURL.search(/.blogspot./i) >= 0 && CurrentURL.search(/post-preview/i) >= 0)
    {
        $(".adsbygoogle").closest(".GoogleAdsWrapper").remove();
    }
});

2) By using JavaScript
Add the below lines just before '</head>' tag.

var child = document.getElementsByClassName("adsbygoogle");
var Parent = child.parentNode;
while (Parent.hasChildNodes())
{
    Parent.removeChild(Parent.firstChild);
}

Done! 

How to solve structured data errors in blogger?

Structured Data Testing Tool

 The Structured Data Testing Tool (SDTT) provides a variety of ways to develop, test, and modify your structured markup.

You can load markup into the tool either directly or by supplying a URL. The editing environment for the tool provides these utilities to simplify markup testing:

Automatic highlighting

once you load your content in the editor, you can click on a validated field on the right of the editor to see which line in your markup produced that field. This is handy for isolating syntax errors.

Search & replace keyboard shortcuts

supports plain text and JavaScript regular expressions. The search and replace status line appears at the top of the Editor Panel.

Keyword completion of schema.org and JSON-LD keywords.

Structured data errors

1. The property blogId is not recognized by Google for an object of type BlogPosting.
2. The property postId is not recognized by Google for an object of type BlogPosting.
3. The dateModified field is recommended. Please provide a value if available.
4. A value for the headline field is required.
5. A value for the image field is required.
6. The property image_url is not recognized by Google for an object of type BlogPosting.
7. The mainEntityOfPage field is recommended. Please provide a value if available.
8. A value for the publisher field is required.

Log into your Blogger Dashboard.

2. Click Theme.

3. Click  Edit HTML.

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

Search the word itemprop='blogId'.  And you will see the line

<meta expr:content='data:blog.blogId' itemprop='blogId'/>

Replace by the below code

<meta expr:content='data:blog.blogId'/>

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

Search the word itemprop='postId'.  And you will see the line

<meta expr:content='data:post.id' itemprop='postId'/>

Replace by the below code

<meta expr:content='data:post.id'/>

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

Search the word itemprop='datePublished'.  And you will see the line contains itemprop='datePublished'.

Paste the below line after the above line

<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>

4) A value for the headline field is required.

Search the word entry-title.  And you will see the line

<h3 class='post-title entry-title' itemprop='name'>

Replace by the below code

<h3 class='post-title entry-title' itemprop='headline'>

5) A value for the image field is required.

Search the word data:post.firstImageUrl.  And you will see the line

<b:if cond='data:post.firstImageUrl'>
     <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>

Replace by the below code

<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' alt='Textual description of firstImageUrl'/>
        <meta itemprop='image' expr:content='data:post.firstImageUrl'/>
      </b:if>
      <meta itemprop='width' content='800'/> <!--Images should be at least 696 pixels wide.-->
      <meta itemprop='height' content='800'/>
</div>

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

Search the word itemprop='image_url'.  And you will see the line

<b:if cond='data:post.thumbnailUrl'>
     <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>

Replace by the below code

<b:if cond='data:post.thumbnailUrl'>
     <meta expr:content='data:post.thumbnailUrl' itemprop='url'/>
</b:if>

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

Find the below code

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Changed to

<b:includable id='post' var='post'>
    <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' content= 'data:post.link : data:post.url'/>

Find another one

<b:includable id='mobile-post' var='post'>
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Changed to

<b:includable id='mobile-post' var='post'>
   <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
     <meta expr:itemid='data:post.link' content= 'data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>

8) A value for the publisher field is required.

<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
      <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
        <!-- Schema Mods: THE FOLLOWING URL WILL FAIL - CHANGE IT -->
        <meta itemprop='url' content='http://www.myOrganization.com/OrgImage.png'/>
        <meta itemprop='width' content='600'/> <!-- Logos should be no wider than 600px. -->
        <meta itemprop='height' content='60'/> <!-- and no taller than 60px.-->
      </div>
      <meta itemprop='name' expr:content='data:blog.title'/>
</div>

Insert the code within the schema.org/BlogPosting and schema.org/WebPage code blocks

After the save and upload, then test again with the Structured Data Testing Tool

How to add gadget section in blogger layout

Gadgets are simple HTML and JavaScript applications that can be embedded in web pages and other apps, including Blogger.

You can simply add a single line of code in blogger source code for Gadget section.

<b:section id='MyBloggerGadget'/>

The 'id' attribute is mandatory and a give a simple name like 'Header-Section'. 

Customize Blogger Contact Form

Customize blogger contact form, ie. change the default form to fully responsive contact form by using bootstrap. This tutorial helps you to customize all the elements in the contact form, such as input box, textarea, buttons, error and success messages.

Most of the tutorials doesn't touch the error and success message styling. But we will explain how to change the default style of  the error and success messages.

Our contact form was created by using this method. Take a look at the following link

Demo

1: Include the bootstrap CDN

Go to Theme -> Edit Html -> paste the following code just before the </head> tag.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2: Add the default contact form through the Gadget.

3: Hide the default contact form

Go to Theme -> Edit Html -> paste the following code just before the ]]></b:skin> tag.

div#ContactForm1
{
     display:none;
}

4: Create a new page

Go to Pages -> New Page

Type the title like "Contact"

copy paste the follwing code to the new page

<div class="ContactForm"><br><div style='text-align: center; width: 100%' class="ContactFormMessages"><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div><form name='contact-form' class="form-horizontal"><div class="form-group"><label class="control-label col-sm-3">Name:</label><div class="col-sm-7"><input type="text" class="form-control" id='ContactForm1_contact-form-name' placeholder="Enter name..." name="name"></div></div><div class="form-group"><label class="control-label col-sm-3" for="email">Email Address:</label><div class="col-sm-7"><input type="email" class="form-control" id='ContactForm1_contact-form-email' placeholder="Enter email address..." name="email"></div></div><div class="form-group"><label class="control-label col-sm-3" for="email">Message:</label><div class="col-sm-7"><textarea class="form-control" id='ContactForm1_contact-form-email-message' rows="5" name='email-message' placeholder="Enter message..."></textarea></div></div><div class="form-group"><div class="col-sm-offset-3 col-sm-7"><button type="button" class="contact-form-button contact-form-button-submit" id='ContactForm1_contact-form-submit'>Send</button><button type='reset' class="contact-form-button contact-form-button-submit">Clear</button></div></div></form></div>

5: Add styling to the contact form

Go to Theme -> Edit Html -> paste the following code just before the ]]></b:skin> tag.

.ContactForm .contact-form-button.contact-form-button-submit { margin:0px; padding: 3px 15px 3px 15px; height:auto; } .ContactForm .ContactFormMessages p { font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; box-shadow:none; } .ContactForm .ContactFormMessages p.contact-form-success-message-with-border { color:#005200; border:1px solid #81e181; background-color: #e2f4c6; padding:10px; } .ContactForm .ContactFormMessages p.contact-form-error-message-with-border { color: #dd0000; border:1px solid #e8b7b7; background-color: #fff1f1; padding:10px; } div#ContactForm1 { display:none; } .FollowByEmail .follow-by-email-inner .follow-by-email-address { height:30px; }

Done!