How to Install Google AdSense Native In-Feed Ads(Ultimate Guide)

It has been a while since I last wrote about advertising program. Well today I will be going through the Newly product from Google In-Feed Ads ' How to install Adsense In-Feed Ads'. Follow my step by step guide installation of this tool. This ad unit is very interesting because it will be installed between the list of your articles while following the customized post layout.

In-feed ads are a new format that you place inside your feed to help monetize your site and provide a better user experience to your visitors.

For instance, a feed can be an editorial feed like a list of articles or news or even a listings like a list of products, services and so on. In-feed ads are native therefore you can easily customize them to match the look and appearance of your blog content.

In-Feed Ads are place in between the content of your feed, or where your feed begins or ends. As visitors scroll down your content they encounter In-feed ads. Because In-feed ads fit seamlessly inside your feed, they're not intrusive and they don't break the user's flow.

How to install In-Feed Ads

Step 1:

First log into you google adsense account and visit your Dashboard then click the My Ads>>Content>>Ad units. The click on New Ad Unit button.

Proceed and then select the In-Feed option.

Let's go further a head and see the next step whereby you will be required to select one type of display according to your blog layout.

You will then need to customize the type of display you chose as shown below.

After you finish the customization click on the SAVE ON THE SAVE AND GET button, paste the code in your notepad for next procedure and installation,

Step 2:
Now on this step you will need to log into your blogger account the go to Dashboard>>Theme and click on HTML button then click anywhere inside the HTML section and use CTRL+F to find the code below.

<b:loop values='data:posts' var='post'>

Add index='x' in it to look like the code given below

<b:loop values='data:posts' var='post' index='x'>

NOTE: add index='x' only to the code <b:loop values='data:posts' var='post'> in this code

<b:includable id='main' var='top'>...</b:includable>

Next look for this code

<div class='post-outer'>

The add the code given below in the code shown above

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
</b:if>

Your result should be like this

<div class='post-outer'>...</div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
</b:if>

You are finally done with the installation, replace YOUR CODE SCRIPT NATIVE ADS with your in-feed ad that you previously created and safe your template. Refresh your bog for result.

Below are some of the benefits of using In-feed ads:

• Better user experience: In-feed ads offer a better user experience to your visitors. They're part of the user's flow and match the look and feel of your site.
• Monetizing new ad spaces: In-feed ads offer the opportunity to further monetize your pages by placing ads in new places, i.e., inside your feeds.
• Ideal for mobile: In-feed ads are ideal for mobile as they can help you to better monetize the smaller screen spaces available on mobile devices.

Point To Note: In-feed ads are different from standard ads in the following ways:

• They're part of the user's flow
• They're highly customizable.
• They use high quality advertiser ad elements.

Share:

Read More

How To Install (Hide/Unhide) Spoiler button In Blogger Post

This time around am gonna share with a  simple tips on how to make the spoiler which has an amazing slide effects in the blog post.

The spoiler has the function to hide and show text or images, and is very useful when trying to reduce space in the inputs or only if you want the text or image only see when pressed.

This effect displays a button with text and by clicking on the button it will expand the content and on clicking it again will hide the content. It has a simple script code and can also be used anywhere. You can hide whatever you want an image, code, text etc.

Follow me step by step through this tutorial ans we'll learn 'How to Add Spoiler or Hide/Show Button in Blogger'.

Always Instruction To Follow:

1. Go to Blogger Dashboard→Your Blog
2. Click Template→Click Edit HTML tab
3. Find anywhere inside template </style> or ]]></b:skin>

Step 1: Now,copy the below CSS code and put it above ]]></b:skin>

#flippy {
text-align: center;
}
#flippy button {
background: # aa65c7;
color: # fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
box-shadow: 3px 0px 0px 0px # 883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px RGBA (0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#flippy button: hover, #flippy button: focus {
background: # 9e4fbf;
outline: none;
}
#flippanel {
padding: 1px;
text-align: left;
background: # f5f5f5;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}

Step 2:  After you have Done that! proceed and copy JQuery code below and paste it just after/below </body>

<Script>
$ (Document) .ready (function () {
    $ ("# Flippy"). Click (function () {
        $ ("# Flippanel"). SlideToggle ("normal");
    });
});
</Script>

Save your template and follow the step below.

Step 3: Now whenever you want to put the spoiler button to your post just copy the below HTML code and switch to HTML POST EDITOR and the add it anywhere you want the spoiler to appear.

HTML CODE TO USE

<Div id = "Flippy"><button> Your Button Text Here </button></div>
<Div id = "flippanel">
--- Put Your Content Here ---
</Div>

I hope this tutorial has been of great help to you and also further decorate your blogs like never before by creating beautiful widgets that may engage your readers even more. If facing any difficulties let me know the the comment section below and I will glad to help you more.

Share:

Read More