Blogs that discuss Blogger tutorials, tricks, and widgets as well as SEO and the Internet.

Greetings friend bloggers, on this occasion I will share a tutorial to create a  subscription box on a blog. What makes this tutorial special is the rainbow effect. How do you suggest the rainbow effect? Just watch this tutorial carefully.

From the picture above you might guess if the subscription box is just like that, and don't get me wrong! not just like the picture above you know. Subscribe box there is a rainbow effect that is the border will move which consists of 5 colors namely red, yellow, green, in the blue sky, time.

This tutorial is very easy, friends for you who are still beginners, God willing, will be easy to understand. Immediately, here are the steps.

Easy Ways to Make a Rainbow Effect Subscribe Box

1. The first step is to open my friend,, then select Theme and click Edit HTML.

2. If you have searched for the code ]]> <b: skin>, to make it easier to find, use the CTRL + F hotkeys. If you have copied the code below and paste it directly above the code ]]> <b: skin> earlier.

/* Subscribe Box Efek Rainbow from Konten Ajaib */
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}.rainbow::before{content:'';position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);animation:rotate 8s linear infinite}.rainbow::after{content:'';position:absolute;z-index:-1;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}
#HTML99{padding:0}#HTML99 h2{color:#222;padding:0}#HTML99 h2:before{display:none}.subscriber-wrapper{color:#222;line-height:20px;margin:0;padding:20px}.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}.subscriber-wrapper p{margin:0;font-size:14px}form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:14px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}.subscribe-css-button{background:#2c3e50;color:#fff;cursor:pointer;font-weight:500;padding:7px;text-transform:none;width:100%;border:none;font-size:16px;border-radius:3px;transition:all .3s}.subscribe-css-button:hover{background:#34495e}

3. Click Save Theme.

4. Next, we move on to the Layout and create a new gadget to select the type of HTML / Javascript. Enter the following code into it, just leave the title field blank.

<div class="rainbow">
<div id="subscribe-css">
<div class="subscriber-wrapper">
<p>If you like articles on this blog, please subscribe for free via email.</p>
<div class="subscribe-form">
<form action='' class="subscribe-form" method="post" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="seoindzign" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />

5. Click Save and Finish.

The result will be like the following gif image, cool or not? Cool, wow.

How to Install Rainbow Effect Subscription Box on Blogger

For you, content creators will definitely need a screen recorder application, especially if the content that you are presenting is game content and the tutorial is definitely in need of this screen recorder application.

Many various screen recorder applications that you can use to record a PC screen, but this time I will give a list of the best PC screen recorders and of course free that you can use, although it's free but make no mistake, the resulting video resolution is not inferior to the same application paid.

Here are 4 of the best screen recorder versions of Technogratis:

1. Action! - Screen Recording Software and Gameplay Recorder

The first application is  Action! . This application is perfect for recording games and tutorials, this application was developed by Mirillis Ltd which is developing in the field of digital TV and advanced audio / video processing.

The superior features offered lie in the resulting video resolution is very good up to 1080p and able to do live streaming  in  real-time.

2. Open Broadcaster Software

The second application is  Open Broadcaster Software / OBS.  This application is open source that you can use on many platforms, such as Windows, Linux, macOS to record screens and live streaming.

The advantage of using OBS is that you can add text and images when you do live streaming.

3. TinyTake

The TinyTake application is  available in two versions, the paid version and the free version, and also has their respective advantages. By using the paid version you can enjoy the annotation feature, but unfortunately the time duration for recording is limited to only 5 minutes.

What I like about TinyTake is looks userfriendly and also free of the watermark , and you get 2GB of free cloud.

4. Bandicam Screen Recorder

Bandicam Screen Recorder, this application is perfect if you want to use it to record when playing games or live streaming, because you can record certain areas on the PC screen and record in full screen.

You can also use the live drawing feature, which is useful for drawing in certain areas when recording the screen.

Which of the 4 applications above are the best screen recorder applications in your opinion?

Top 4 PC and Laptop Screen Recording Apps - Free

Easiest Way Website Screenshot 2019 - As a blogger, sometimes we need a screenshot of a website for posting illustrations. Many ways to make screenshots of a web page, from browser extensions to application tools and more.

But this time I will share the easiest way to make a screenshot of the latest website which of course is very useful for bloggers.

I casually explore the features of Staticaly . Apparently there are other cool features in addition to the Favicon , the Screenshot feature.

With the screenshot feature from Staticaly, we can easily display screenshots of a web page without the need for a tool, even we don't need to open the website page that we want to take pictures of.

The method is quite easy, if you want to try it please follow the steps below.

1. Use the following URL to screenshot the page



By default, Staticaly will make a screenshot of a page with 1280x960 image dimensions.

2. Save the image as PNG or JPEG

If you want to take screenshots of pages and want to edit them on a computer, you can save screenshots in PNG or JPEG format.

Please access with the following URL, then right-click on the image and select Save Image as.




3. Take a full page screenshot

We can take a full page screenshot with the following URL:



4. Set the screenshot quality

We can adjust the image quality with the following URL:



5. Take a screenshot of mobile mode

If the page we want to take a screenshot of supports mobile display, we can use the following URL



6. Set the width or height of the page

We can adjust the width of the image with a maximum width of 1280px and or adjust the height of the image with a maximum height of 960px. wfor width (width) and hfor height (height).




7. Combining parameters

All the parameters above can be combined or combined as follows:


And all the URLs above can be directly made as an image src URL like this

<img alt="Screenshot" src="" width="1280" height="960" title="Screenshot" />

Like the following picture:

With this we can now display images from any website and set them with the parameters provided to match what we want.

The Easiest Way to take Website Screenshot 2019

The most basic thing in search engine optimization ( SEO ) is a website keyword. Keywords can determine the amount of blog or web traffic that comes from search engines. 

Keyword is also the most noticed thing in applying basic SEO tips. Therefore, choosing the right keywords is important to get maximum results.

Keyword is the key in SEO (Search Engine Optimization). The keywords you choose will play a role in determining the amount of traffic or visitors coming from search engines, such as Google. 

For more maximal results, do a research first in finding the right keywords. 

The selected keywords should be the most searched keywords on search engines. 

If you select the wrong keywords, this will surely lead to quiet visitors. But, if the selected keywords are correct, more visitors from the search engine. 

An article or writing should have good keywords to support its ranking in the search engine.

One of the tips in selecting it is to use specific keywords or may be called long tail keywords rather than using short keywords with a high level of competition. This is mainly used for new blogs or websites. 

The advantage gained by using long tail keywords is that it can reduce competition for a keyword on search engines. 

Thus, the chances of articles appearing on search engines will become even greater. In addition, information seekers on search engines usually also use several words to search.

Basic SEO Techniques for Beginners

Previously, register to the search engine first the website you have, especially Google. Because currently the Google search engine is the most popular compared to other search engines. 

For blogger / blogspot users do not need to register a website to Google. Blogger will automatically register your blog on the Google search engine if you do not change the default settings. 

The basic SEO techniques are first mastered for those who want to learn free SEO. 

Below, we will explain 3 basic tips for learning SEO for beginners who need to know in doing search engine optimization, including:

  1. Determine the page title (title tag) correctly
  2. Make an effective description (meta description)
  3. Use keywords on the page

Below will be explained in more detail about the three things above.

1. Determine the page title (title tag) correctly

The page title is the sentence contained in the title tag and is located between the head tags. 

This title will be used as the title of the tab of a page that is opened in a web browser. In addition, this title tag will also be read by search engines as web titles in the search results. 

Here's an example of the code.

<title>Judul Halaman</title>

See more about placing title tags in HTML files. 

Title tag is one of the most important components in onpage optimization. Because this tag will show the search engine what topic is being discussed in the text and will appear in the first row before the description. 

The reader will also first look at the title of the article rather than its contents to choose which website to open in the search results. 

Therefore, do not make the title of an article carelessly. 

One of the things that must be done is to add the selected keywords to the page title. Place the keyword at the beginning of the page title also for optimal results. Because the more in front of the keywords are put, the better.

One mistake that is often made is to put the brand or homepage title at the beginning of the article title. 

If you are a blogspot user and use a default template, the brand will be created at the beginning of the title of each article. In SEO tips, this is not recommended. So put the brand at the end of the title for better results.

Tips for determining page titles

To be able to make a good article title in the eyes of readers and search engines, you should know the tips. The following tips that need to be known in making an article title.

Create a title according to the contents of the article

The title should be made describing the writing content of a page. 

Based on the SEO starter guide made by Google, it is said to avoid creating titles that have no connection with the content / content of the page. Also, avoid making default or obscure titles like "Untitled", "New Page 1".

Create article titles that are fishing

If your page is included in the top ten of Google searches with certain keywords, it is likely that the page will be flooded by visitors, especially if it ranks first. 

However, it would be better if the title of the article made is fishing. Maybe visitors will prefer articles with titles like this and the possibility to be clicked will be greater. 

It is even possible that your article will be clicked more than the higher order article but has a mediocre title.

2. Make an effective description (meta description)

Descriptions are a few sentences which are excerpts from a writing. 

An important description to add to each page because maybe Google will use it as a snippet or snippet in the search results. Although Google can make its own snippet to display relevant sentences.

Just like the title, also add keywords at the beginning of the description. Then how do you add a description? Descriptions are created using the description meta tag in the template. This meta tag will look like this.

<meta name="description" content="deskripsi halaman"/>

Google can also use descriptions that come from the Open Directory Project (ODP) if your website is registered there. You can read it in an article from Google regarding snippets. 

Use the following meta tag to prevent all search engines from using data from ODP as a page description.

<meta name="robots" content="NOODP">

If you only want to prevent Google from using descriptions from ODP, use the following meta tag.

<meta name="googlebot" content="NOODP">

According to Google through the Webmaster Central Blog, meta descriptions have no effect on the position of the website in search engines, but can improve clickthrough. 

Indirectly, however, the meta description will also affect the search engine ranking. Because clickthrough has an impact on the search engine results page (SERP).

Tips for making an article description

Below will be explained about some basic SEO tips in making a description of an article.

Descriptions are made according to the contents of the article

Same as making a title, the description must also be made according to the article. Make the correct description to describe the written content. Don't make descriptions that have no connection with the content.

Does not only contain keywords

In making a description, don't just enter keywords into it. Because this description will also be read by information seekers, not only by search engines. So for the convenience of the reader make a quality description, not completely filled with keywords.

Create descriptions of fishing

Descriptions should also be made to encourage visitors to click on them. Because besides the title, the description might also be seen by the reader as a consideration to determine the website that will be opened. 

Create in each article a unique or different title tag and meta description.

3. Using keywords on the page

Besides being used in the title and description, keywords are also used in the contents of the page. 

You can repeat keywords several times to indicate the keyword of an article. Note that repetition of keywords is not excessive. Do repetition with logical sentences. Do not arbitrarily add keywords if indeed it is not needed in the sentence. 

Then, what about keyword density? 

Keyword density on a page really used to affect SEO. But now keyword density has no more role to play in search engine optimization. Most importantly, naturally add keywords.
Keyword repetition is better by using word variations, i.e. keywords that are more specific, rather than just repeating the exact same keyword. By having a lot of keyword variations, the chances of articles appearing on the search engine will be even greater. 

One basic SEO technique that is quite important is where keywords are placed. Then how do you put good keywords for optimization? There are several places that need attention to put keywords in it. Are as follows.

Tag Heading (H1, H2, H3, ....)

This heading tag is used to make a page structured using the main headings and subtitles. 

Tag heading must be made sequentially, not carelessly. This means that there are no heading tags that jump to undue headings. 

Also add keywords to this tag. Google will prefer web pages like this.


The URL should be made not too long. A shorter URL will be better. Also use keywords in creating URLs.


Add keywords to the anchor text of the link. Avoid making text links with words that have nothing to do with the intended page, for example "click here". 

Links added can be internal links or external links. Both types of links if used correctly can also help website ranking in search engines.

Alt Tag

Alt tags will be seen by the reader as text in the image if the web browser is not able to open it. For this reason, create text in the alt tag that can describe the image. 

This tag will also help search engines find images on a website with certain keywords in image search. 

It's best to use keywords effectively in paragraphs without overdoing them. 

That's the basic SEO tips that need to be known in doing search engine optimization. The three basic tips above are onpage SEO tips. 

Hopefully these tips can help you learn SEO for free.

Basic SEO Techniques for Beginners

Google AdSense is an advertising program launched by the largest search engine company in the world, you all know this company is called "Google". The Google AdSense program allows publishers or ad publishers to register and get money from their ads. these ads are different like text ads, image ads and video ads. Google AdSense gives publishers their income according to the number of clicks on the ad and the cost-per-click (CPC) of the ad. the cost per click (CPC) is different from each ad and differs from country to country and we can say that the United States has the highest cost for cost per click or CPC.

Most of us as ad publishers, including me, must have felt that the average cost per click is very low. CPC may be 0.01 dollars or less than 0.5 dollars. So sometimes I personally ask myself, why do companies like Google AdSense have low CPCs?

In this article, Arlina Design will help you to increase your income from Google AdSense because I will explain the exact tips to increase the cost per click of Google AdSense, so I suggest you read this article carefully and slowly to get the highest income from Google AdSense, Aamiin. 

How to Increase Google AdSense CPC

1 Choose the Best Keyword

Keyword or keyword is a very important factor that affects Cost per Click because there are some keywords that have a high CPC and others have a low CPC and you can get it from Google Adwords. As we know keywords are a few words that your friend writes and Google takes it, it's that easy. If you use keywords with a high CPC that allows Google AdSense to place ads with high CPC on your website and hopefully you will get high income.

For example, if your keyword is a smartphone, you will give Google AdSense the ability to place ads about smartphones. Ads that are displayed by Google Adsense on the site pages depend on and are related to your keywords so you have to use the best keywords with the highest cost per click if you want to get high income. 

2. Choose your Niche carefully

A niche site or blog is a blog that addresses one particular topic and does not discuss a variety of topics, if we discuss a variety of topics we can call Sob gado-gado blogs. Niche sites are very important if you want to get high income from Google AdSense because the cost per click has different values ​​from each niche so be careful when choosing a niche. 

If you are looking for high per click costs to get high income, you can choose a niche that is related to the following topics because the CPC for this topic is very high:

  • Make a site to sell domains and hosting services
  • Related to technology applications
  • Related to banking.
  • Related to health and food.
  • Related to job openings.
  • Related to Microsoft Office.
  • Related to cars.
  • Related to home design (exterior design and interior design).
  • Related to fashion design and trend.

For more details about choosing a niche blog, you can visit another article, which is the method of increasing adsense revenue. In the article maybe you want to create a blog with more specific keywords or maybe a blog with English.

3. Targeted Quality Traffic

The most important factor that affects the increase in cost per click on Google AdSense is visitors because they allow us to get money from AdSense if they click on an ad. But to make them click on ads, they must be targeted and they want to read articles on our blog because they will help them. 

If you use Google AdSense on a website and think that Google will give money because of advertising, in my opinion it's a wrong mindset because Google won't give anything for it and pay only for the number of clicks on the ad. So, you have to get targeted traffic.

If Google AdSense Advertisers get good impressions for clicks, they will be happy and give a high CPC. So it attracts visitors to visit your site with the best and most trusted ways like writing the best search engine optimization articles with interesting titles.

4. Take advantage of Google Analytics

In Google Analytics, you will get a report about the website. So it will help to know which pages on a site or blog can be more clicked and this will make you in the right place and write topics that are more related to this page that have high cost-per-clicks. So I suggest you to connect your account on Google AdSense with your account on Google Analytics to get more and more.

5. Select the best Ad Placement

There are too many places where you can place Google AdSense ads like at the top of the page and below the page title, in the middle, in the sidebar or in the place you want on the site page. The best place you can use is below the article title, but if you have the best location, please comment below.

6 AdSense Channels or Adsense Channels

The AdSense channel allows you to experiment if you make Channels. this channel allows you to determine your CPC and CPC or Ad block CTR. Then you can make the best strategy to earn income from AdSense. 

You can change the position of your ad or delete a block with a low CPC. If the site is very good, make sure that Google AdSense will provide a high CPC because advertisers will pay for maximum exposure.

7. Different Ad Types

There are various types of advertisements to choose from but before you choose your ad, you should know that some visitors like the image and text ads more than text ads because they show the contents of the ad and attract visitors, some visitors are happy with the ad.

8 Countries from Visitors

Cost per click depends on the visitor's website, sure. And the United States is the highest in the CPC. I will provide a list of countries with high cost-per-click on Google AdSense and you must target visitors from that country. If you have a country that has a high cost-per-click (CPC), please share in the comments to learn from each other.

  • United States (US)
  • Canada
  • German
  • Australia
  • Netherlands
  • United Kingdom (UK)
  • Spanish
  • Albania
  • French
  • Turkey

9. Choose the Site Domain Name carefully

Domain names are one of the factors that affect cost per click in Google AdSense so you have to use a domain name that is related to the content of the site to get high cost-per-clicks. However, it does not affect the CPC rates so much compared to other factors such as the quality of the content and niche of your site. You can read my article about how to choose a domain name to fit the site.

10. Use Responsive Themes for the Site

If you want to increase your cost per click, you must use a responsive friendly template for smartphones and tablets because a large number of visitors use smartphones. If the site template is responsive, you will get a large number of visitors and this will result in high cost-per-clicks and high revenue. You can check whether the template is responsive or not here.


Cost Per Click (CPC): is considered income by Google AdSense and will give friends when visitors click on ads that are different and also different from each country as we discussed earlier. 

Google AdSense has a system of analysis so that it will analyze your site's performance continuously. 

You must stay focused on competition keywords, take keywords that have medium or low competition and avoid high competition and also your keywords must have a large number of searches per month to get visitors.

How to Increase Google AdSense CPC

Blogger Basic Structure Template - On this occasion I want to share knowledge about the Basic Structure of Blogger Templates, which is basically a fundamental knowledge for a blogger to be able to successfully develop his blog in the future. 

We can make knowledge about the basic structure of this blog template to modify the appearance of our blog so that it can be more user-friendly.

Basically, a blogger template is all a collection of several widgets. To prove it, please open your blogger, then go to layout. It's all a collection of widgets that build a blog with the blogger platform. Starting from the header, body, sidebar to the footer it also uses a widget.

The following is a framework for HTML codes that build a blog or website:

<title>Judul Blog</title>

From this simple HTML structure, it was then developed to form a website. Okay, now we go straight to our main topic.

Blogger Template Structure

To explain the structure of the bogger we will start from the top structure. The most special thing about blogger is that we have to declare XML (eXtensible Markup Language). We can see the XML declaration on blogger in the top part of the template. Following is the default XML declaration of the blogger.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='' xmlns:b='' xmlns:data='' xmlns:expr=''>

Element Head

In the element head, there are 3 important elements, namely for the placement of meta, Javascript and CSS tags that beautify the template later.

1. Meta tags

Following is the form of the default meta tag of the blogger template.

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>
<b:include data='blog' name='all-head-content'/>

Now it can be seen in the above elements that we declare the all-head-content meta tag. This means that here we use automatic meta tags. If we describe it again the meta tag will be like this:

<meta content='blogger' name='generator' />
<link href='' rel='icon' type='image/x-icon' />
<link href='' rel='canonical' />
<link rel="alternate" type="application/atom+xml" title="titleblog - Atom" href="" />
<link rel="alternate" type="application/rss+xml" title="titleblog - RSS" href="" />
<link rel="" type="application/atom+xml" title="sinau - Atom" href="" />
<link rel="openid.server" href="" />
<link rel="openid.delegate" href="" />

Wow, a lot too, hehe. For the optimization of God willing meta tags, I will discuss later in the next article. 

Besides the all-head-content declaration we also see the declaration of our blog title. This is the element that declares the blog title: <title> <data: blog.pageTitle /> </ title>

2. CSS (Cascading Style Sheet)

Cascading Style Sheet (CSS) is a rule for controlling several components in a web so that it will be more structured and uniform. CSS is not a programming language according to Simply put, CSS is the flesh that forms the body, so the thin and fat that governs is CSS. Here is an example of CSS on a standard template:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);

3. Javascript

Well besides CSS and meta tags, usually on the head element is also used as a place to put javascript. Here's one example of a java script that is usually placed above the head.

<script type="text/javascript" src=""></script>

Now the script above is called jQuery and is usually used to run back to top, dropdown menus etc. Actually, we can put scripts on the body, but there are certain scripts that we can't put into the body element and we can't help but place them in the element head.

Body Elements

In this body element, the framework and structure of the blog template are shaped. Like the word this element that forms the template framework :). There are lots of elements in the body. Like human skeletons in general, bodybuilding structures include:

1. Header

The header is the top component of a template. This is where you put your blog title and blog description. For advanced template designers, they can use land in the header to advertise etc. Here's a simple HTML builder header:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>

From the HTML arrangement above it can be seen that the header is a locked widget, so if you see the header layout it can't be deleted because it has been locked.

2. Navbar

Actually, this Navbar is on the top too. Even the location above the header, the Navbar itself functions to make it easier for us to log out from blogger and when we want to re-edit the template. But for the modified templates the navbar is usually hidden. Next is the navbar structure I mean:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>

3. Main Blog

Play or we usually call a blog post. From the brief explanation, it is clear here where our posts will be displayed: D. The main build framework (blog post) starts from the post title, post date until the comment box is all here. Build an html code Main blog/blog post:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

If you see for yourself, there must be lots of elements to build this blog post.

4. Sidebar

The sidebar is like a human hand. In this sidebar element, people usually place popular posts, labels, and advertisements. The HTML code for the sidebar builder is:

<b:section class='sidebar' id='sidebar' preferred='yes'/>

5. Footer

Footer is the lowest element in the blogger template structure. Here people usually put credit templates. Html code builder footer namely:

<b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

Thus the description of the Basic Structure of Blogger Templates, hopefully, useful as additional knowledge.

Basic Blogger Template Structure

Table of Contents is a list consisting of points or parts of the subject contained in an article. We can use the Table of Contents as a breakdown of the contents of the article in the form of a link so that it will be easier for the reader to choose what information the subject area will be reading. We often find the Table of Contents on Wikipedia sites, Encyclopedias, and also PDF files from E-Books which are usually placed after the introduction or main idea of ​​an article.

Alright, here Arlina Design will provide tips on how to easily create a Table of Contents in Blogger Posts.

How to Create a Table of Contents in Blogger Posts

To make it, please follow the steps below, buddy.

Open Blogger> Click the Theme menu > Click the Edit HTML button > Then add this CSS code

before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}

The next step, add the code below before

</body> or &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>       
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});

Click the Save theme button .

Next to the posting section, make a post in the blogger post editor. Add the code below on the HTML tab (not Compose)

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>

Edit posts marked with their own writing. Then add id="toc_1"to each heading according to the ID in the code above. For example like this

How to Create a Table of Contents in Blogger Posts</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Add IDs to headings to be like this

<h4 id="toc_1">
How to Create a Table of Contents in Blogger Posts</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Pay attention to the marked code, for the next heading, adjust the order of ID on the Table of Contents that you made. Example

<h4 id="toc_1">
Heading Part 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_2">
Heading Part 2</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_3">
Heading Part 3</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_4">
Heading Part 4</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_5">
Heading Part 5</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Then add this code at the end of each paragraph in each section

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

So the results are like this

<h4 id="toc_1">
Heading Part 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

When finished, please click the Publish post button and see the results on your blog.

And here is an example of the Table of Contents that I have added to the blog template

Thus tips on How to Make a Table of Contents in Blogger Posts , hopefully useful and grateful.

How to Create a Table of Contents in Blogger Posts

Having a blog that appears on the top page of the Google search engine is the hope of all bloggers and webmasters. Finally, they are competing to optimize their blog to be friendly in search engines, better known as SEO techniques. But it turns out that many of the bloggers are doing SEO with the wrong technique. This erroneous myth about SEO will make the condition of the blog better, on the contrary, it has a negative impact. Following are some erroneous myths about SEO.

Mistaken Myth About SEO

1. SEO is only done once

You need to know, SEO techniques are long-term projects. You should not be satisfied just because your blog is in the top position of Google and finally stops the SEO techniques that you use. Out there, your competitors are doing website optimization too, so if you stop then your site might be lost from the circulation of Google's top pages because of losing the competition.

2. SEO and Social Media There Are No Relationships at All

Some say backlinks from social media are not important and have nothing to do with SEO. Obviously, this is a mistaken myth about SEO. Content that is widely shared on social media is more reliable and relevant content from authors / trusted sources will greatly affect Google's search results.

3. More and more backlinks will be better

Backlinks are indeed very good at SEO in determining the position of the blog/site on the search engine. But the problem is if you only focus on backlinks, it is like digging your own grave because of the number of links that point to the site but not necessarily relevant and quality. So then you are too focused on link building it will be better if you devote your time and mind to creating quality content.

4. H1 tags are the key to SEO success

The H1 tag structure that is usually used in the site title does have an important role in SEO. But imposing keywords in the H1 tag actually impressed spam. The most important thing in SEO is that the information that exists with the site pages is relevant to the topic being discussed.

5. The more indexes on Google, the better

Lots of people think that the index of a large site on Google indicates that the site will be more qualified. Of course, this is a mistaken myth about SEO. It's okay if the bloggers use multiple tags in the hope that they will be indexed and can generate even more traffic. But the problem is sometimes keywords that are entered into these tags are not relevant to the content of the content that can cause problems in the article on the search engine.

That's the Wrong Myth About SEO the bloggers or site owners. So focus on continuing to make quality articles and benefit visitors regularly.

Mistaken Myth About SEO

Subscribe Our Newsletter