Blog Tutorial Supporter - Blogger Developer

September 4, 2016

Image Hover effect
A long time ago Blog Supporter shared an article related with the image hover that works with HTML code that called Reflective Image Rollover and there are many bloggers are using it. To get the Image hover effects, some web developers use CSS hover code and plugins such as Image Hover Effects WordPress Plugin, Image Hover Effects In CSS3, Image Hover Effects Jquery, and Image Hover Effect In Bootstrap.

Recently, new image hover effect codes are popular for bloggers that they are using to make more attract from visitors. From now on you will get new specific image hover effect code that you can use on your PHP and HTML website and blog designed. These image hover effect codes are the best choice for beginner blogger and web developer. You will be allowed to use few simple CSS and HTML codes to place on your blog or website by copy and paste method.

In this article, we are going to release seven image hover effect codes specifically built for bloggers and web developers. These below samples come with HTML and CSS snippet that you can see a live demos.

How To Set Up Image Hover Effects?

To start set up the image hover effect, you will need to use two simple CSS (stylesheet) and HTML document.

Image Hover Effect's CSS

The hover effect is power by CSS, so please coppy this below css stylesheet and paste in your website head section <head> tag or above </head> tag.
<link rel="stylesheet" href="">

Image Hover Effect's HTML Document

 Choose any style you prefer and places into your website HTML code area where you love to show.

1. Image Hover Fade

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-fade">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

2. Image Hover Fade In Up

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-fade-in-up">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

3. Image Hover Fade In Down

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-fade-in-down">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

4. Image Hover Flip Vert

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-flip-vert">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

5. Image Hover Hinge Right

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-hinge-right">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

6. Image Hover Zoom In

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-zoom-in">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

7. Image Hover Zoom Out

Image Hover effect

Two Brothers

Two Brother Monkeys, they are so lovely.
<figure class="imghvr-zoom-out">
    <img src="Add Image URL Here">
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    <a href="Add URL Here"></a>

Final Things To Do

Once you have copied and pasted the CSS and HTML code, you have to do few final things as below;

  1. Add a personal image link in the image section which highlights in Orange
  2. Add Image Hover Effect Title where highlight in Blue
  3. Add description text where we highlight in Red
  4. Add a personal link where we highlight in Purple.

August 27, 2016

Publish Instant Articles For Blogger
In the previous articles, I explained what the instant articles is. And the another article I had shared you about a way to create instant articles for WordPress website.

In this latest article, it will share you the another tutorial that you can get Facebook Instant Articles for a Blogger blog. You will not have any another way to push Facebook approves your instant articles for your Blogger blog besides this below explanation. You need to understand about the instant articles HTML rule and I think that it would be hard for beginner blogger, so I would share this and the easiest way for a young blogger experience to get approval fro Facebook.

Approved to Publish Instant Articles

How To Start Facebook Instant Articles For Blogger?

Thus, before you step into this tutorial, you have to get ready within the creation of the Facebook developer App that you can start to create it from the Facebook developer website. And here is the another tutorial that guides you to create the Developer App for Website and here to get the video tutorial.

How To Get Facebook Instant Articles For Blogger?

If you are using WordPress CMS, you would be getting more easy configuration instant articles by using WordPress Instant Articles Plugin. But in this tutorial, I am focusing on sharing the information that helpful for all of you that are using Blogger Blog and need to get approved to publish instant articles from Facebook for your instant articles submission.

Create New Instant Article

After creating new apps and configure it with your blog, you have to create 10 instant articles by the manual.

  1. Go to your Facebook page and click on Publishing tools (top right side)
  2. Click on the Production Articles
  3. Click on Create button
  4. Copy below Simple Code then paste into the field and change everything which shown in highlight then press Save.

Here is the simple code that you can of the Production Instant Articles that you can use it for the primary one.

<link rel="canonical" href="Add Your Artices URL Here">
<meta charset="utf-8">
<meta property="op:generator" content="facebook-instant-articles-sdk-php">
<meta property="op:generator:version" content="1.1.0">
<meta property="op:generator:application" content="facebook-instant-articles-wp">
<meta property="op:generator:application:version" content="2.11">
<meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php">
<meta property="op:generator:transformer:version" content="1.1.0">
<meta property="op:markup_version" content="v1.0">
<meta property="fb:article_style" content="default">
<h1>Article Title Here</h1>
<time class="op-published" datetime="2016-01-26T16:59:55+00:00">January 26th, 4:59pm</time>
<time class="op-modified" datetime="2016-01-26T03:33:47+00:00">January 26th, 3:33am</time>
<address><a>Author Name Here</a></address>
<h2>Sub Titile Here</h2>
<p>Full Paragraph Here 1</p>
<p>Full Paragraph Here 2</p>
<p>Full Paragraph Here 2</p>
<b>Bold Text or Head of Article</b>

Basic Blockquote

Add blockquote to your instant article by using the <blockquote> element within the body of your articles.

  Create a blockquote is available here

The Simple List Code

If you would like to add an unordered list in your instant article, please use the <ul> element to wrap the items in the list, that each designated with the <li> tag.


Basic Image In the articles

In case you would like to add the image in your articles, use this simple presentation of the image within an Instant Articles is to wrap an <img> tag with a <figure> element and have the src attribute points to the URL course of the image.

  <img src="" />

Once you have done the above instruction, you will need to wait for 3 to 5 days to get checking and approved publish Instant Articles from the Facebook team.

August 14, 2016

WordPress Template
WordPress Theme is a most popular template for bloggers that are using WordPress Custom Management System (WCMS). Wordpress system provides a website control by downloading and config into the personal website hosting. A Blogger or website developer will be able to control their posts, pages and everything in WordPress dashboard.

Now everyone can use my free premium WordPress Theme for travel agency website. You can also use it as a personal blog or whatever you want to customize because this template is designed specific with travel agency idea and flexibility for your style. This WordPress template offers many features that designed in many different features and benefit for users. These are below features we design to help you to enjoy you blogging.

WordPress Theme

WordPress Theme Key Features:

  • Minimalistic
  • Grid Layout Related Posts
  • Fast Loading
  • Google Testing Tool Validation
  • Responsive Desing (mobile friendly)
  • 7 Custom Page Templates
  • Featured Image Ready
  • Header Ads Ready
  • Custom Widgets
  • SEO Optimization
  • Support all major browsers (Chrome, Firefox, Safari, IE, and other)
  • Featured Posts Slider
  • Theme Options
  • Cleaned Code
  • Contacts Page Template.

How To Add Grid Layout On Page?

The grid layout is an another feature that you can create it by manual. The below HTML codes are special code that allows you create it by manual. Before you create full-width grid page, you would install this template. This tutorial will be assisting you to install WordPress themes.

Grid Layout On Page

1. Create a new page, look at  Page Attributes > Full Width, Homepage.

Fullwidth Page

2. Select on Text and copy below code and paste in the text field then fill up then the information you need such as Title, description, URL, and Image.

WordPress Text field

<section class="lazy-load-box trigger effect-fade">
<ul class="posts-grid row-fluid unstyled services ul-item-0">
<li class="span3 list-item-4"><figure class="featured-thumbnail thumbnail">
<a title="Title Here" href="URL HERE"><img src="Image URL Here" alt="Title Here"/></a>
<div class="clear"></div>
<h4 class="golf-destination">
<a title="Title Here" href="Link URL Here">Title Here</a></h4>
<p class="excerpt">Text here (Long as long as you want)</p>
<a class="price-botton">Price Here</a>
<a class="booking-botton" href="Link URL Here">Book Now <i class="fa fa-chevron-circle-right"></i>
<li class="span3 list-item-6"><figure class="featured-thumbnail thumbnail">
<a title="Title Here" href="URL HERE"><img src="Image URL Here" alt="Title Here"/></a>
<div class="clear"></div>
<h4 class="golf-destination">
<a title="Title Here" href="Link URL Here">Title Here</a></h4>
<p class="excerpt">Text Here (Long as long as you want)</p>
<a class="price-botton">Price Here</a>
<a class="booking-botton" href="Link URL Here">Book Now <i class="fa fa-chevron-circle-right"></i>
<li class="span3 list-item-7"><figure class="featured-thumbnail thumbnail">
<a title="Title Here" href="URL HERE"><img src="Image URL Here" alt="Title Here"/></a>
<div class="clear"></div>
<h4 class="golf-destination">
<a title="Title Here" href="Link URL Here">Title Here</a></h4>
<p class="excerpt">Text here (Long as long as you want)</p>
<a class="price-botton">Price Here</a>
<a class="booking-botton" href="Link URL Here">Book Now <i class="fa fa-chevron-circle-right"></i>
3. If you are ready. Click on Publish button.

WordPress Plugins Installation

Last work you would do is install all WordPress plugins that provided in the folders that we provide in the download folder.

If you would like to install those plugin one by one, you would compress each plugin into a zip file before install it.

There are many other functions in the theme dashboard where you can customize your blog template yourself such as logo, slider, header ads, primary menu,secondary menu, and featured image options.

August 4, 2016

Google Tag Assistant
It would be great if you knew your Google Analytics Code that placed in HTML of your website was an error or blocked tracking analysis. You can not find this problem in your website HTML or in your Google Analytics account. You have the another method to add Google tag assistant that is a Chrome browser extension. You will be allowed install into your browser from the Chrome Web Store.

The Google tag assistant will help you to get verification that you have installed various Google tag correctly on your blog or web page. The tag assistant will tell you the tag are present every time you open the web page. The tag assistant will report all errors that found and suggest to improve all of them. It will work with google products including Google Adwords Conversion Tracking, Google Analytics, Google Tag Manager and more.

How to Add Google Tag Assistant?

Well, go the Chrome Web Store where you can search for the Tag Assistant then add it to your chrome web browser.

Three Different Tag Assistant Color Marks

  1. Green: mean the tag is finding correctly.
  2. Blue: mean that google will suggest how to improve your error.
  3. Red: A technical error. The tag is not tracking properly for most users. You should fix it as soon as possible.
As well as you will see the number of error on the top of you tag assistant screen when you click on the extension icon.

Google Analytics Error

How To Use Tag Assistant To Solve Google Analytics Error?

There are different errors that happen on the different problem that most users are facing. So the most problem that always happen is "Invalid or missing property ID, Premium Content section not found, and No HTTP response detected".

The Tag Assistant extension will guide on when you got an error. Click on question mark gets more detail about the solution.

Missing Web Property ID

July 30, 2016

Google Domains
A long time ago I wrote an article about how to configure custom domain name with blogger blog and a few weeks ago I explained a way to increase the domain authority score.

In this new articles, I will share the another new thing that is most important for bloggers and web developers. That is Google Domains, it is the best choice for all of you that is looking for a good domain name for building a blog or website. 

I knew there are many international and local companies are providing domain name and hosting services but those are some third party suppliers and limited services providers. These below reasons and benefits that you will need to choose Google domains name.

Google Domains

Why Choose Google Domains?

A buyer always thinks about benefits that received from the products that he/she bought from a company. If you a clever buyer, you will think about those company that provides benefits and truth. These are below benefits lists you will get from the Google.

Best Security backed by the Google

As known as Google is a giant company that developed search engine website (, and other services such as Blogger, Gmail, Google Drives, Social Networks (Google Plus), Google map, Google Adsense, Google webmaster tools, Google Analytics, and many other. So Google has enough ability to protect all those services that are providing to the customers.

Private Registration Without Surcharge

The private registration will be offered when you purchase or transfer your existing domain to Google domains without surcharge. This feature is an option that will not display your register information such as your address, name, contact information, and other.

Faster Integrate With Top Website Builders

You can create a website with few website builders such as Blogger, Squarespace, Weebly, Shopify, and Wix. This feature is vary in cost and options include good speed hosting, security, good templates, and other power features such as drag and drop, and mobile friendly management.

Create Email With Domain and Forward It To Existing Gmail Account

In this feature, you will be able to create at least 100 email aliases with your domain name, like, and forward them to your existing Gmail email address.

Customizable Multi Sub-Domain

At least 100 sub-domains such as will allow the users to create within the unique page and within a website.

More than 90 New Domains are including in Google Domain

You will be able to purchase a domain name within more than 90 new domain such as dot world, dot business, dot media, dot network, dot exchange, and dot codes, etc...

These above feature benefits are few that you will get when you purchase Google domains. Moreover, you will get many other functions that can manage your domain name such as Simple domain management tools (manage your domain dynamic DNS, manage resource records: A, CNAME, AAAA, MX, NS, PTR, SOA, SPF, SRV, TXT).

How to Purchase Google Domain?

Recently Google does not allow citizen that are living out of the USA to purchase a domain name from Google Domain unless they have a U.S. billing address, but they can manage the existing domains. 

The US citizen can purchase domain names from Google Domains website where you can search a domain and register to purchase it.

July 28, 2016

Integrate reCAPTCHA with Contact Form 7
If you have a blog or a website, you might be thinking about the contact form that is an easy method to allow your visit contact you faster then they use their email. The contact form needs a tool that can protect from the spam mail that sends to you without permission and the spam emails are very bother your mind.

To protect from the spam mail, you need to use CAPTCHA that will help you to avoid those spam emails problem or spam activities. So it this tutorial I will share you the way to integrate reCHAPTCHA with your contact form 7. To integrate them you have to register both reCAPTCHA and install Contact Form 7 plugin.

To create install Contact Form Plugin you may need this assistance, The Way to Add Contact Form Form WordPress.

Register reCAPTCHA form

What is a Contact Form 7?

Contact Form 7 is a WordPress Contact Form Plugin that allows you to download and install it by free of charge. The Contact form 7 allows you to create and manage multiple forms. You can create forms such as text form, email form, telephone form, reCAPTCHA, file, date, drop-down menu, checkboxes, text area form, radio buttons, acceptance, quiz, and submit button.

What is reCAPTCHA?

reCAPTCHA created, offered, and managed by Google that users can register and integrate with any suitable activities. It is a new system that allows a user to show the personality as human activities before he/she click on the button.


How to Register reCAPTCHA?

  1. Register from Google’s reCAPTCHA admin page.
  2. Register your website in the form that shown above.
  3. Then you will receive a site key and secret key. (The site key and secret key will use to integrate with form you apply).

How to Integrate reCAPTCHA with Contact Form 7?

Note: Before you start a reCAPTCHA integration, you have to install Contact Form 7 into your WordPress website.

  1. Login Wordpress Website
  2. On the dashboard find Contact > Integration
  3. Use the site key and secret key into the reCAPTCHA fields then save them.

Integrate reCAPTCHA with Contact Form 7

Now you ready integrated your contact form 7 with CAPTCHA, then every time you create a captcha in your contact form 7, it will appear a specific one on your form.

July 15, 2016

 Page Level
In the previous posts, I have explained you about how to apply Google Adsense and create Adsense unit to place to your blog and website. So this fresh article I will explain the another thing that will be offering you more benefit from Google Adsense.

I do believe that you might be love mobile temple or responsive template for your blog or website because it has a power for every view on the mobile and let your visitors enjoy with it. The mobile friendly for a website is one that display your website in a correctly on mobile view.

Thus, Adsense page-level is a topic that I will share by today. Add Google Adsense page-level to monetize your ad to effort your website template.

What is Adsense Page-Level?

Adsense page-level is a new kind of ads format that innovative method for you to monetize your website contents. Use the Adsense page-level ads to effort ads on your website and especially for the mobile view. When you use page-level, you can place the same ad code on the same page and many your want, then it will exchange automatically and it optimizes time to show your ads. This performed well for user experiences.

What is the Benefit of Adsense Page-Level?

Why do you need to use Page-level? What benefit you get from this innovative ads?. Well, you will see something change after your add the page-level code into your website HTML. Then the benefit found such as:

  • Provide a new experience to your website visitor. 
  • Stop ads that show more than 3 Units.
  • Good show on mobile page view.
  • Increase your revenue.

Ad Formats For Mobile Friendly

Add page-level ads to your website and blog to get a great page view through mobile. The ad will show full size at the bottom the mobile screen. It optimizes your ads to show them effectively and following to users mobile screen.

Adsense Page Level

How to Setup Page-Level?

Please Following this below guide within few steps to setup page-level while you are on the Google Adsense account or log in your Google Adsense before processing it.
  1. Click on My Ads menu.
  2. Click on Page-level-ads on the left navigation bar.
  3. To allow it works on mobile, please switch the Anchor and Vignette ads function on .
  4. Click on Get Code button to get a code.

Setup Page-Level

How to Add Adsense Page-Level on Blogger Blog?

One you got the Google Adsense Account and place some code it to your website, then you can setup page-level ads for your website. The below guide is a way to setup Adsense page-level.

Step 1: Login Your Blogger Account.

Step 2: Select a blog that you would like to add the code, Then click on Template on the left of the navigation bar.

Step 3: Click on Edit HTML button.

Step 4: Add the page-level code in the Blogger blog HTML: Now you got a code from you setting up page-level then copy it and paste in the head section or below the <head> tag of your blog HTML code area.

Step 5: After added the code in your blog head section then click on Save Template button to change.

How to Add Adsense Page-Level Ads on WordPress Site?

If you are using WordPess CMS, you might need the below tutorial that will guide you to add page-level on the WordPress website.

Step 1: Login Your WordPress Website.

Step 2: When you are on the dashboard of your website. Just reach to the head section <head> tag.

  1. On the left navigation bar, just click on Appearance
  2. And click on Editor
  3. Find out and Click on head.php on the right of the navigation bar.
  4. Paste the page-level code in suitable place (below head section).

Step 3: Everything has done, just click on Update File button.

Adsense Page Level For WordPress

Now you are ready set up and add code to your website, then you will see something change within your ads that added to your website and especially, the add view on mobile friendly.

July 12, 2016

Meta Description.
Meta Description is known by blogger writers, web development, and web designers. It is a most important for search engine ranking for blog and website where everyone can see on the search engine result page. It would be a great ranking on the google search engine if your website has a strong page description on the page.

A young Blogger who is using Blogger CMS, he might be getting stress to find where he/she can create and add a description to their post or page so a blogger should not miss two things to improve SEO on Blogger when you create a post and page. Follow the link I provided to set up meta description on Blogger blog.  And this below guide will intend to help you write a strong meta description.

What is a Meta Description?

The meta description is a message that is intended to provide the user a snippet of what they want to look for on search engine results and it was limited to write 160 characters long that summarizes about the page of content.

The user will meet it in the search result on any search engine website when they use a phrase to search for something then a short snippet show below the page titles. That is a meta description that the webmaster wrote for their page content.

Meta Description Snippet

How to Write a Killer Meta Description?

I still strong believe that a page description will impact search engine rankings. Although, Google said that meta description does not impact search engine rankings in 2007. So I work focus with page description hardly within these below guides.

Limite Length of Meta Descriptions

You can create a meta description tag and write as long as you want, but it will not impact on search engine ranking because the search engine will truncate any longer than 160 characters. So I recommend to write it about 135 to 160 characters length.

Write A Page Description to Match the Content

What are you writing about? Think about it and start to write a page description to match it. Google will find your page description and it tricks the visitor into clicking and score it less but bounce rate will be increasing. So to avoid  the mistake you should write a page description to match your content of a page.

Write a Unique Meta Description

Try to think a unique one or summarize your content avoid copy or duplicate from other websites. The unique meta-description is an effective marketing message reach to visitors and recognize it's quality by the search engine.

Put Keywords Inside It

If you value to any keywords that force you to write the article or a keyword that you are targeting, then put them in your meta-description because Google will highlight the search term in the page description. If your description is strong the page will be ranking.

Take Off Page Description From Un Useful Pages

There are few pages such as contact us page, privacy page, term and condition page, and others that you would think about them and put them in your term. Should you provide a meta description tag to all of them? If you have any pages that are not necessary to live on the search engine you should be provided meta-description to them, then Google or other search engines will hard to find all of them it the search result.

How to Change or Create Your Meta Description

The Meta Description mostly placed in the HTML tag where you can find below <head> tag. If you view page source you found it as below sample one.

<meta content="This is my Sample Page Description for my Webpage" name="description"/>

You are a webmaster or administrator of a website, then you will be able to change or create for your blog or website page. You can use the above sample to place in your website HML if you do not add it yet.

Use Google Webmaster Tool To Improve Duplicate Meta Descriptions

Google webmaster tool is an SEO checking tool that your can use to analysis your website, especially meta description analysis tool. It will automatically check and address you to improve some pages description as well as to improve user experience and performance.

How to Find Duplicate Meta Descriptions in Google Webmaster Tool?

Use this Google Webmaster Tool tutorial to improve your website page descriptions in case they got duplication.

  1. Login To Google Webmaster Tool
  2. On the Google webmaster dashboard just go to Search Appearance
  3. Click in HTML Improvements
  4. In the Meta description navigation will tell you a number of duplicate meta descriptions. 
  5. You got pages that need to customize, then go to your website page and follow this tutorial for customizing its description.

Duplicate Meta Descriptions


Finally, you got to know a way to write a strong meta description and it is importation thing you should focus on your web page with meta description to improve SEO ranking.

If you would like to learn more about basic SEO, then do not forget to get in touch with  our Search Engine Checklist where you can review your SEO score.