Blog Tutorial Supporter - Blogger Developer

April 22, 2017

Facebook Messenger Chatbox
Messenger Chatbox has always been a good choice for a web developer to make the communication with their clients. More than chat box software the business website or blog should make the clickable hyperlinks email address that clients can click on it and link to their email composing box. But I am sure that you may think about the instant way to make easier and best way to communication with your clients and a popular way.

Althouse email is an important method to chat communication with other people but the new generation is known to love instant texting way like Facebook Messenger over the email. Facebook Messenger Chatbox or Icon allows people to the community with you through Facebook profile or page.

There are two methods that you can add one of them to place on your blog/website sidebar, text link, or anywhere you preferring to place it.

Facebook Messenger


A. Facebook Messenger Text Link

Facebook Messenger text link is an easy method to link your text with the Facebook Messenger, just following the few below starts;

1. Choose a text or phrase then link this href="https://m.me/yourfacebookid
Make sure that you replace your Facebook profile ID instead of yourfacebookid, it should your facebook username or ID number. Here is the chat demo or if you need a specific chat bottom, I suggest to use this below code to place anywhere on your blog or website.
 <style>
 .fb-messenger {margin: 30px 5px 20px;}
 .fb-messenger span {
border-radius: 4px;
        background: #0084ff;
        color: #fff;
        font-size: 13px;
        padding: 6px 8px;
        display:inline-block;
        font-family: helvetica, arial, sans-serifnn;
        white-space: nowrap;
}
.fb-messenger a {cursor:pointer; text-decoration:none;}
</style>
<div class="fb-messenger">
<a target="_blank" href="https://m.me/yourfacebookid">
        <span>
        Message Blog Supporter
        </span>
</a>
</div>
Then use your facebook ID to replace on yourfacebookid

March 26, 2017

Google Tag Assistant
Just in case you've hung on the net and gotten just a little whiff of the search engine marketing updates, you'd have collected when you've your website optimized, you stand the opportunity for getting better hits and more gains and ranking on the search engines. It could appear to be something unattainable as you could have no idea of how you could get the required optimization to your blog or website. In the beginning, most bloggers are often on the fence on the type of applications that may be perfect for their web blogging business, but with time, they come to settle on the WordPress choice.

They've essentially no knowledge of the inner workings of the search engine marketing tips and training that's critical for their online success. When you make an excellent combination of search engine marketing for WordPress website, you'd be amazed yourself at the changes that may result from this sort of a combination. Trying to efficiently tap to the marvels of Search engine optimization without using WordPress is actually like trying to fill up just a Jacuzzi with just a basket. For these people, the WordPress search engine marketing training will be fairly good, since this affords them a chance to earn money without having to spend any of theirs.

It's numerous reasons too, it's simple to install, totally free and an excellent friend of google.  Here are a few ways you may use in enhancing your blog for much better visibility on the search engines or earn more for search engine checklist.

Best Keyword For Article

You see, the keywords are the primary things which would ascertain how far you'd go in the search engine marketing soup. It's, therefore, essential for you to possess a well-composed list of your keywords.


Customize your WordPress website for Google SEO

Firstly, of course, you must log on to your dashboard, go to settings and permalinks. Once there, change the default framework of your blog. Click on the radio button with the Custom header and insert [ /%postname%/ ] in the box. Do not be irregular in your writing, and ensure your articles are quality because there's nothing an internet search engine loves more.

Website SEO Training

March 18, 2017

Positive SEO Tutorial

Why Positive SEO? 

The world of web blogging and content generation nowadays has a lot of different important factors with regards to obtaining desired traffic numbers and models. In the core of that's the concept of internet search engine optimization or SEO. Unless of course individuals are pursuing direct links to your content, the only way they will find you is thru searching, and if you do not make it on the first page of outcomes, you are missing on most of your potential.

So there are five ways that you may create naturally occurring positive Search engine optimization include Writing content that describes a procedure, Answer a question, Creates a discussion, links to top quality resources, or Goes deep with textual descriptions - see a modern search engine technique. People search the internet for explanations of things all of the time. So a terrific way to claim awesome Search engine optimization scores is to work these explanations. In case your website deal with the idea of credit, explain credit repair. In case your website deals with the automotive industry, explain how vehicles are manufactured. There are thousands and 1000 of related subjects to any business, and you've just as much of a go like someone else to explain them completely, this provides attention and trust to your site. Concrete vocabulary in the right spots, particularly with regards to the question format.

There are plenty of techniques for Search engine optimization business within social network concepts as well. If you can determine how to start a discussion on a thread that gets archived by Google, Yahoo or Bing, for instance, all of the text and interactivity counts towards optimistic search results and a higher score for you. It will help your content Search engine optimization score each time you link to excellent resources online. There is a loose term - link juice - for this effort, and although the precise algorithm that Google uses is not known, it is understood that the better your web is for sourced info, the better your post may be scored in connection. It is something like the positive proximity effect.

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="http://www.cambodiagolfholidays.com/blogsupporter/css/image-hover-effect.css">

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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">
    <figcaption>
        <h3>Title Here</h3>
        Add Your Text Here!!!!
    </figcaption>
    <a href="Add URL Here"></a>
</figure>

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

How To Get Facebook 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.

<html>
<head>
<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">
</head>
<body>
<article>
<header>
<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>
</header>
<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>
<footer>
</footer>
</article>
</body>
</html>

Basic Blockquote

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

<blockquote>
  Create a blockquote is available here
</blockquote>


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.

<ul>
  <li>Aproval</li>
  <li>Instant</li>
  <li>Articles</li>
</ul>

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.

<figure>
  <img src="http://blogsupporter.com/folder/img.jpg" />
</figure>

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>
</figure>
<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>
</a>
</li>
<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>
</figure>
<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>
</a>
</li>
<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>
</figure>
<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>
</a>
</li>
</section>
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 (google.com), 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 info@blogsupporter.com, and forward them to your existing Gmail email address.


Customizable Multi Sub-Domain

At least 100 sub-domains such as convert.blogsupporter.com 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.