Free Software & Template Full Tutorial.

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Wednesday, January 15, 2020

Here's How to Install the CSS Minifier Tool on Blogger Static Pages

CSS Minify / Minifer is a tool or tool that has a function to clean up CSS code sets or Cascading Style Sheets. In addition, this tool can also compress CSS scripts to be smaller and lighter when used.

Better, this tool is used by Bloggers to load their blogs lighter.

Speaking of CSS Minify Tools, on this occasion the author will give a brief tutorial on How to Easily Create Responsive Minifer CSS Pages on Blogger. If you are interested in being invited, you can see in the following tutorial.

Here's How to Create a Responsive Color Picker Page on Blogger

Color Picker in English which means 'color picker'. As the name implies, Color Picker is a tool or tool that has a function to choose colors and will be displayed in detail. Like the color of HEX and RGB. This tool is usually often encountered in some photo editing software and applications.

In addition, this tool is also often used by graphic designers and blog template designers who are nothing but choosing unique and beautiful colors.

Talking about the Color Picker Tool, in this article the author will give a short tutorial on How to Create a Responsive Color Picker Page on Blogger. If you are interested in making it, you can look at the following tutorial.

Friday, December 13, 2019

How To Install Recent Comment Disqus + Back To Top

How To Install Recent Comment Disqus + Back To Top. surely you already know with this style that many have used. and especially the template users commenting on disqus ... one of them is the famous blog Arlina Design uses Recent Comment Disqus + Back To Top

Step 1
First As usual Login to Blogger> click Themes> Click Edit Theme. after you enter the editing template Search</head> or &lt;/head&gt;&lt;!--<head/>--&gt;for faster Press Ctrl + F on your computer keyboard
After meeting Place the Code below right above the Code</head> or &lt;/head&gt;&lt;!--<head/>--&gt;

Monday, December 2, 2019

How to Change the Look of the First Image to Beautiful or Make a First Image

Hi all !! I am crazy about making articles, even though I have discussed many articles, and copying articles this time. I am currently posting gas2 .
Okey, this time I will discuss Tutorial:  How to Change the First Image to Be Beautiful or Make First Image , this tutorial has been discussed with one of Bogger's masters, Ms  Rhinokage Rio admin from , I re-discussed because there were many requests from 2 Blogger friends to make the First Image Tutorial, even though it was clearly discussed at

First Image There are 2 versions of the first version of the Invert Pro Template  made by and the second is First Image from
- Ok ... straight on its making

Saturday, October 13, 2018

How to Make a Sitemap with the Timeline Style

This time Wiendhy Stres will discuss and explain how the ways or steps you can follow and do in How to Make a Sitemap with the Timeline Style .
The creation of a sitemap aims to simplify visitor navigation in tracing posts in a blog. In addition, the sitemap also allows search engine crawler robots to explore blogs. Blogs will be judged to be more structured if they have a special sitemap page.

How to Make a Sitemap with the Timeline Style

Okay, just go ahead and follow the steps below 

Open your Blogger page , click the Theme menu , click the Edit HTML button and add this code before </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.namina-sitemap{position:relative;margin:30px auto}
.namina-toc-wrap .namina-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
.namina-toc{margin:0;padding:30px 20px;position:relative}
.namina-sitemap ul.namina-toc{margin:0;padding:30px 0;list-style-type:none}
.namina-toc li{list-style:none;margin:0;padding:0;position:relative}
.namina-toc &gt; li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
.namina-toc &gt; li .namina-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:22%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
.namina-toc &gt; li .namina-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:&quot;&quot;;height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
.namina-toc &gt; li .namina-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
.namina-toc &gt; li .namina-post a{color:#333;font-weight:700}
.namina-toc &gt; li:last-child .namina-post{margin:0 0 0 23%}
.namina-toc &gt; li .namina-post a:hover{color:#999}
<script type='text/javascript'>
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="namina-sitemap"></div>');$(".post-body .namina-sitemap").text(t);var r=$(".namina-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".namina-sitemap").html(i);$(".namina-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="namina-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="namina-icon"></div><span class="namina-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="namina-toc-wrap"><div class="namina-cat">'+t+'</div>'+i+"</div>")}})})}})}});

When finished, click the Save theme button.

Then select the Page menu then click the new Page button

After that, click the HTML button then add the caller code below in HTML


Then click Publish and see the results

Now that's from Wiendhy Stres about how to make a sitemap with the timeline style . Sorry if there are deficiencies and hopefully useful for you.

Monday, September 17, 2018

HTML5 Seo Friendly and Valid Meta Tags

HTML Tag Seo Friendly and Valid HTML5 - This time I will answer the question that was asked by blogger friends about how to fill in the xxxxx code that I added to the templates I shared.

Maybe some bloggers still don't understand the meta tag, so here I will explain a little about the meta tag in the blogger template.

Meta tags are one of the optimizations on blogs so that the blogs and articles we post have a clear identity. So that blogs will be easier to track search robots like in Google, Bing, or other search tools and will be easier to sort in SERP (search engine results page).

The meta tag function basically consists of several important elements including:

Meta tag description

Meta tag description is used to provide an overview of the contents of your blog page. The size is recommended no more than 200 characters. And make sure that this description can be:
<meta content='Write a description here'  name='description'/>
Meta keyword tag

Keyword Meta tags are very important because they determine what keywords can find blog pages on search engines.
<meta content="keyword 1, keyword 2, keyword 3,... name="keywords"/>
Meta tag robots

The main purpose of using robots meta tags is to determine which blog pages will be indexed by searches and which blog pages will not be searched. This tag is very useful especially if a blog uses frames for navigation.
<meta content="index follow" name="robots"/>
The three components of the meta tag if combined, the form is as below:
<meta content='Write a description here' name='description'/>
<meta content='keyword 1, keyword 2, keyword 3 ...' name='keywords'/>
<meta content='index, follow' name='robots'/>
Well, after you know the function and some basic components that you have to apply to the blog template. Now I will explain one by one in the xxxxx code that is often found in the template that I share.

HTML5 Seo Friendly and Valid Meta Tags

Here I will share examples of HTML5 Seo Friendly and Valid meta tags that I use on the latest version of the Simplify 2 template as well as the answers of bloggers about how to remove blog titles when sharing articles to social media. The code below can be installed under the opening <head> or before </head> tag

<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION OF BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='' rel='publisher'/>
<link href='' rel='author'/>
<link href='' rel='me'/>
<meta content='CODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='CODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='English' name='geo.placename'/>
<meta content='ADMIN-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='eg' name=''/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<meta content='' property='og:image'/>
<meta content='' property='article:author'/>
<meta content='' property='article:publisher'/>
<meta content='CODE-APPLICATION-FACEBOOK' property='fb:app_id'/>
<meta content='CODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>


DESCRIPTION OF BLOGFilled with description or keyword of the blog
USER-GOOGLE-PLUSFilled with Google+ admin blog link, for example: + WiendhyWianaOK
CODE-VALIDASI-GOOGLE-WEBMASTERFilled with Google validation code in Search Console
CODE-VALIDASI-BING-WEBMASTERFilled with Bing Webmaster validation code *
ADMIN-NAMEFill in the name of the author
eg dan EnglishFill in the country code where the blog is published
PROFIL-FACEBOOKFill with your Facebook profile link
FAN-PAGE-FACEBOOKFill in with the Facebook Fan Page link
CODE-APLIKASI-FACEBOOKFill in the Facebook App code, can be made at
CODE-ADMIN-FACEBOOKFill in your Facebook profile code, get it at
USER-TWITTERFill in your Twitter user name

* = Delete if not in use
Re-adjust the xxxxx code in your template with the placement of the meta tag above or simply replace the existing meta tag with this meta tag. So about HTML5 Seo Friendly and Valid Meta Tags. Hopefully helpful, and thank you.

How to install SEO Friendly Breadcrumbs

How to install SEO Friendly Breadcrumbs
How to Install Breadcrumb SEO Friendly - Breadcrumbs is a navigation menu that is usually above the title of a blog or website post. The contents are in the form of a link to the home or main page followed by a label then the title of the post that was opened. Breadcrumbs are quite important as a supporting factor for SEO on blogs, because with breadcrumbs we can inform visitors about the categories of articles in the blog.

Breadcrumbs that I will share this has the advantage of SEO Friendly, although I myself am not very good at SEO. However, I have proven this breadcrumbs myself that breadcrumbs are SEO Friendly, all labels are indexed by Search Engines and of course Valid HTML5.

How to install SEO Friendly Breadcrumbs

1. Open Blogger> Click Template> Edit HTML> Then add the CSS code below before ]]></b:skin> or </style>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. The next step, look for HTML post code like this

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

3. Then add the HTML code for breadcrumbs just below the code above

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype=''><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype=''><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='' itemprop='url'><span itemprop='title'><></span></a></span>
/ <span><data:post.title/></span>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>

4. Save the template.

To find out that breadcrumbs are installed correctly on the blog, you can check here Google testing tool

Thus the tutorial How to Install Breadcrumb SEO Friendly, hopefully useful.

Overcoming H1 Zero that is Really Bad on Chkme

Overcoming H1 Zero that is Really Bad on Chkme
Overcoming H1 Zero that is Really Bad on Chkme - For those of you who change the title and description of the blog with the image or logo on the header, of course you will experience H1 Zero that is Really Bad when you check the blog at and it will reduce the SEO value of your blog in the eyes of search engines.

Error in this header will reduce SEO value to 22%
Actually, many of these tricks have been shared on other blogs, but there is nothing wrong if I share again on this Wiendhy blog.

Here's How to Overcome H1 Zero that is Really Bad on Chkme:

1. Login to Blogger> Templates> Edit HTML> Search for the code below:

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Add the h1 markup to the <h1> <a ... /> </h1> tags so the results will look like this:
<div id='header-inner'>
<h1><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
Or it can also add to the <h1> <img .../> </h1> tags and the results will look like this:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></h1>

2. Save the template and check your blog again on whether it has been resolved. If the application is correct then your blog will return to normal.

For HTML5 validation, please delete the code marked in the markup below:
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

That's enough about how to Overcome H1 Zero that is Really Bad on Chkme, hopefully useful.
This is just an example, you can fill it later with your own note.