THEBOEGIS: HTML
THEBOEGIS

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  Idblanter.com , 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 Idblanter.com

First Image There are 2 versions of the first version of the Invert Pro Template  made by  arlinadzgn.com and the second is First Image from Idblanter.com
- 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'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.namina-sitemap{position:relative;margin:30px auto}
.namina-toc-wrap{display:inline-block;width:100%}
.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::before{background:#333;bottom:0;content:&quot;&quot;;left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
.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}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
$(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>")}})})}})}});
/*]]>*/
</script>
</b:if>

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


[sitemap]

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='http://www.blogger.com/openid-server.g' 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;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<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;http://schema.org&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></b:if>
<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;http://www.blogger.com/feeds/&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'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' 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='geo.country'/>
<!-- [ 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'/>
</b:if>
<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'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-aKZzSAygVKk/VYPkX_nAwrI/AAAAAAAACeo/cgQTs8nR5Rg/s1600/Arlina%2BLogo.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' 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'/>

Information

ValueInformation
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 https://developers.facebook.com
CODE-ADMIN-FACEBOOKFill in your Facebook profile code, get it at http://findmyfbid.com
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:else/>
<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='http://data-vocabulary.org/Breadcrumb'><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='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<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>
</b:loop>
<b:else/>
<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>
</div>
<b:else/>
<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>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

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 chkme.com 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'/>
</a>

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'/>
</a></h1>
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>
</a>

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

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.

Sunday, September 16, 2018

Replacing Post Summary on the Minima Template

Replacing Post Summary on the Minima Template
Changing Post Summary to Minima Template - A few days ago there was a blogger friend asking about how to add posts in post summary template new minima colored.

Okay, just follow the application method:

First log in to Blogger> Template> Click Edit HTML

Search and delete the code below
:

/* CSS Read More */
a.adreadmore {position:absolute;display:inline-block;bottom:20px;background:#fff;color:#666;padding:5px 10px;font-family:'Open Sans';font-size:12px;font-weight:400;border-radius:2px;border:1px solid #e9e9e9;transition:all .1s;}
a.adreadmore:hover,a.adreadmore:active {text-decoration:none;background:#f9f9f9;color:#444;}
a.adreadmore:after {content:'\f0da';font-family:Fontawesome;font-weight:normal;text-align:center;margin-left:5px;display:inline-block;line-height:10px;transition:all .1s;}

Then find the code below

<div>
<data:post.snippet/>
</div>
<a class='adreadmore' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> Read More </a>

Delete and replace the above code with this code

<div>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
</div>

Next add the script below just before the closing tag </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
snippet_count = 160;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}
//]]>
</script>
</b:if>
</b:if>

Save the template.

To increase or decrease the number of posts in a post summary, please edit this code in the script above

snippet_count = 160;

The above method, you can apply to all the templates that I share here and do not rule out the possibility that you can apply to other templates.

After applying the above code, you can:
  • Save space on the main page of the blog
  • The appearance of the blog becomes more neat and interactive
  • Add an anchor link to the title keyword
And you are advised to:
  • Add a jump break to each post after the first paragraph
  • Change the blog site feed settings to prevent it from auto post blogs

So about How to Change Post Summary on Minima Template, if there are difficulties you can ask via the comments column. thank you

Saturday, September 15, 2018

How to Make a Table of Contents in Blogger Posts

How to Make a Table of Contents in Blogger Posts
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 make it easier for the reader to choose what part of the subject they will read. We often encounter this Table of Contents on the Wikipedia, Encyclopedia, and also PDF files from E-Book which are usually placed after the preface or the main idea of ​​an article.

Well, here I will provide tips on how to make a Table of Contents in Blogger Posts easily.

How to Make a Table of Contents in Blogger Posts

To make it please friend follow the steps below.

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}
#toc{display:grid}
.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}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

The next step, add the code below before </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>          
//<![CDATA[
$(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})}})});
//]]>
</script>

Click the Save theme button.

Next to the posting section, create 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">
<ol>
<li><a href="#toc_1" title="
Subheading 1">Subheading section 1</a></li>
<li><a href="#toc_2" title="
Subheading 2">Subheading section 2</a></li>
<li><a href="#toc_3" title="
Subheading 3">Subheading section 3</a></li>
<li><a href="#toc_4" title="
Subheading 4">Subheading section 4</a></li>
<li><a href="#toc_5" title="
Subheading 5">Subheading section 5</a></li>
</ol>
</div>
</div>

Edit writing marked with your own writing. Then add id="toc_1" in each heading according to the ID in the code above. For example like this
<h4>
How to make 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 ID to headings like this

<h4 id="toc_1">
How to make 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.

Perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang sobat buat. Contohnya

<h4 id="toc_1">
Heading Bagian 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 Bagian 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 Bagian 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 Bagian 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 Bagian 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>

Then the result becomes 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 this is an example of a 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 cautious.
Notification
This is just an example, you can fill it later with your own note.
Done