Featured Post

Recommended

Cara Membuat Syntax Sederhana di Blog

Kehadiran Syntax Highlighter pada suatu website maupun blog sangat penting, karena Syntax ini berfungsi sebagai fitur editor teks yan...

8/24/2020

Dokumentasi Template Arlina Code

Dokumentasi Template Arlina Code

Dokumentasi Template Arlina Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in ipsum in est ultricies accumsan nec vitae augue. In hac habitasse platea dictumst. Praesent dignissim eget quam ultrices euismod. Pellentesque mollis imperdiet lorem semper ornare. Vivamus eleifend vehicula dolor ullamcorper pretium. Aenean rutrum, dui eget finibus consectetur, velit felis feugiat dui, sit amet suscipit felis massa vitae magna. Vivamus mollis nisi sed neque dictum, bibendum pretium lacus commodo. Nulla facilisi. Ut et risus sed lorem suscipit pretium eget in lectus. Nullam in lacinia lectus. Proin faucibus sapien vel augue congue ultricies. Duis ut odio orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in iaculis sapien. Cras id odio interdum, accumsan orci ac, vestibulum nunc.

In tempus, metus et sodales blandit, neque turpis dignissim arcu, nec sollicitudin magna est id lorem. Nam id leo turpis. Curabitur ullamcorper sem gravida euismod tincidunt. Integer eget ex vulputate, venenatis ipsum et, vehicula velit. Donec vehicula erat vitae ligula sagittis, eget cursus est laoreet. In a egestas mauris, vel euismod est.

  1. It starts with one thing
  2. I don't know why
  3. It doesn't even matter how hard you try
  4. Keep that in mind

Watch the time go right out the window
Trying to hold on, but you didn't even know
Wasted it all just to watch you go

I kept everything inside And even though I tried, it all fell apart What, it meant to me. Will eventually be a memory of a time when.

What it meant to me will eventually be a memory of a time when

Perfect pictures

There's only one thing you should know I've put my trust in you Pushed as far as I can go.

KBD Tag

dolor + sit + amet

Syntax Highlighter

HTML
<pre class="html"><code>
<!-- Masukkan semua kode HTML disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS disini -->
</code></pre>
<pre class="javascript"><code>
<!-- Masukkan semua kode Javascript disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery disini -->
</code></pre>

CSS
/* Syntax Ala Igniel by Faizall TM */
.post-body pre,#comments pre{background-color:#292E34;border-left:5px solid #008c5f;padding:0;margin:.5em auto;position:relative;white-space:pre;word-wrap:break-word;word-break:normal;overflow:auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.post-body pre code,#comments pre code{display:block;color:#BFBF90;font-size:13px;max-height:250px;padding:10px 15px;line-height:1.5em;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre code span{color:#95b2f6;font-style:italic}.post-body pre mark,.post-body code mark,.post-body pre code mark{background-color:#95b2f6;color:#292E34;margin:0;padding:0}.post-body code,.post-body code.tutor{color:#d85555;letter-spacing:-.3px;font-size:1em;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre.html:before,.post-body pre.css:before,.post-body pre.javascript:before,.post-body pre.jquery:before{background-color:#bde0b9;font:500 14px 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Roboto', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;color:#333333;display:block;padding:10px 35px;font-size:16px;background-repeat:no-repeat;background-size:20px 20px;background-position-x:7px;background-position-y:center}.post-body pre.html:before{content:'HTML';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.css:before{content:'CSS';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.javascript:before{content:'Javascript';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.jquery:before{content:'jQuery';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'/%3E%3C/svg%3E")}

Javascript / JQuery
<script> //<![CDATA[
    // Related Posts Middle by igniel.com
    var jumlah = 4;
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('c a=["\e\d\s\Q\f\C","\d\s\f\h\W","\B\d\d\I","\V\f","\f\k\f\e\d","\e\k\s\S","\h\d\e","\r\e\f\d\h\s\r\f\d","\C\h\d\B","\h\r\s\I\F\U","\B\e\F\F\h","\m\O\e\l","\T\h\k\f\d","\m\e\k\l\m\r\K\C\h\d\B\P\w","\w\K\f\k\f\e\d\P\w","\w\l","\m\D\r\l\m\D\e\k\l","\m\D\O\e\l"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|ignielBacaJuga|else|true|jumlah'.split('|'),0,{}));
  //]]></script>
  <div class='ignielRelatedMiddle'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:view.isPost'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
        </b:if>
      </b:loop>
    </b:if>
    <span class='judul'><span>Baca Juga</span></span>
    <script> //<![CDATA[
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('L b=["\i\p\e\i\a\c\K\a\c\m\d\a\h\J\i\h\h\c\a","\p\a\d\S\c\a\s\a\e\d\j\v\r\R\c\m\j\j\t\m\s\a","\x\n\f\j\d\y\o\f\h\r\u\o\k\Q\u\x\n\f\j\d\y\o\f\h\r\u\n","\P\D\a\k\r\w\a\c\a\E\d\f\k\F\c\c","\c\a\e\p\d\G","\e\f\h\a\t\m\s\a","\C","\i\e\j\a\k\d\v\a\H\f\k\a","\n\m\k\a\e\d\t\f\h\a","\e\a\I\d\w\i\o\c\i\e\p"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|ignielBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
    //]]> </script>
  </div>
</b:if>

Unordered list
  • Template Premium
  • Template Free
  • Template Paid
  • Password Template
  • Blogger Template

Ordered list
  1. Checkout & pay
  2. Download Template
  3. Install
  4. Enjoy! for Premium Template

Youtube Video

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Button Atribut

Table
Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

8/16/2020

Fungsi Meta Tag SEO Friendly dan Valid HTML 5

Fungsi Meta Tag SEO Friendly dan Valid HTML 5

Fungsi Meta Tag SEO Friendly dan Valid HTML 5

Meta Tag merupakan salah satu optimisasi pada suatu blog agar blog yang kita posting memiliki identitas yang sangat jelas. Sehingga blog kita akan lebih mudah ditelusuri robot penelusuran seperti pada Browser Google, Yahoo, Bing dan sebagainya.

Adapun fungsi dari Meta Tag pada dasarnya terdiri dari beberapa elemen yang sangat penting diantara dan contohnya:

1. Meta Tag Description
Meta tag description ini digunakan untuk memberikan gambaran umum mengenai isi dari halaman blog sobat. Dan yang paling terpenting ukurannya disarankan tidak melebihi dari 200 karakter.

<meta content='Tulis deskripsi di sini'  name='description'/>

2. Meta Tag Keyword
Meta tag ini sangat penting keberadaannya, karena meta tag ini menentukan kata kunci apa yang bisa menemukan halaman blog pada search engine.

<meta content="kata kunci 1, kata kunci 2, kata kunci 3,... name="keywords"/>

3. Meta Tag Robots
Tujuan terpenting dari Meta tag robots adalah untuk menentukan suatu halaman blog mana yang akan diindex oleh penelusuran dan halaman blog yang tidak akan ditelusuri. Tag ini sangat berguna sekali keberadaannya karena menggunakan frame untuk navigasinya.

<meta content='Tulis deskripsi di sini' name='description'/>
<meta content='kata kunci 1, kata kunci 2, kata kunci 3...' name='keywords'/>
<meta content='index, follow' name='robots'/>

Setelah sobat mengetahui fungsi dan beberapa komponen dasar yang wajib sobat blogger terapkan pada template blogger. Sekarang saya akan menjelaskan tentang kode xxxxx yang ada pada Meta Tag SEO yang sering kita jumpai pada suatu template blog.

Meta Tag SEO Friendly dan Valid HTML 5
Saya akan membagikan contoh meta tag SEO Friendly dan Valid HTML 5 yang digunakan pada suatu template blog sebagai contoh saya mengambilnya dari tag template In Seo Pro buatan idntheme. Kode di bawah ini dipasang di bawah tag pembuka <head>

<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<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='https://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;https://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='DESKRIPSI-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;https://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://www.blogger.com/profile/IDAKUNANDA' rel='publisher'/>
<link href='https://www.blogger.com/profile/IDAKUNANDA' rel='author'/>
<link href='https://www.blogger.com/profile/IDAKUNANDA' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6syQX-_BdIxM0fv6Wq5R7ew9ORVPnT8fGtn1zQXLYBHfFFZVD9C0JqAVsk2-q9gGRpT9vhBFmR-4Yz23BRVzJXBBhfousZbil53lnKPwNxm_z0qo7HxpphxIrv7Qn7fwjETQMzIYLCDC6/s1600/Arlina+Logo.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='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-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'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/><link href='//adservice.google.ca' rel='dns-prefetch'/><link href='//adservice.google.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//disqus.com' rel='dns-prefetch'/><link href='//github.com' rel='dns-prefetch'/><link href='//cdn.jsdelivr.net' rel='dns-prefetch'/><link href='//fontawesome.com' rel='dns-prefetch'/><link href='//www.sharethis.com' rel='dns-prefetch'/>

Keterangan:

NilaiKeterangan
DESKRIPSI-BLOGDiisi dengan deskripsi atau kata kunci blog
USER-BLOGGERDiisi dengan ID user blog, contoh : https://www.blogger.com/profile/07405635929635938311
KODE-VALIDASI-GOOGLE-WEBMASTERDiisi dengan kode validasi Google di Search Console
KODE-VALIDASI-BING-WEBMASTERDiisi dengan kode validasi Bing Webmaster *
NAMA-ADMINIsi dengan nama penulis
id dan IndonesiaIsi dengan kode negara lokasi dimana blog sobat dipublikasikan
PROFIL-FACEBOOKIsi dengan link profil Facebook sobat
FAN-PAGE-FACEBOOKIsi dengan link Fan Page Facebook
KODE-APLIKASI-FACEBOOKIsi dengan kode App Facebook, bisa buat di
https://developers.facebook.com
KODE-ADMIN-FACEBOOKIsi dengan kode profil Facebook sobat, dapatkan di
https://findmyfbid.com
USER-TWITTERIsi dengan nama user Twitter sobat

Sisanya tinggal sesuaikan saja dengan yang sobat inginkan, Terima kasih sudah berkunjung di blog ini semoga bermanfaat dan membantu.
Sumber: www.arlinacode.com

8/15/2020

Cara Membuat Kotak Spoiler Simple di Blog

Cara Membuat Kotak Spoiler Simple di Blog

Cara Membuat Kotak Spoiler Simple di Blog

Kotak Spoiler sangat penting di dalam blogger, karena kotak spoiler ini berfungsi sebagai tombol buka tutup untuk menyembunyikan sebuah konten yang berisikan spoiler. Maka dari itu kotak tombol ini dinamakan Spoiler Box.

Fungsi dari kotak spoiler ini tidak hanya menyembunyikan konten seperti teks, gambar maupun video melainkan fungsi lain dari spoiler box ini adalah berfungsi sebagai menghemat space artikel agar artikel yang ditampilkan tidak terlalu banyak dan panjang pada postingan blogger.

Jika sobat blogger penasaran dengan cara pemasangannya, langsung saja sobat simak tutorialnya di bawah ini.

Membuat Spoiler Box Simple di Blog
Seperti biasa hal pertama yang harus sobat lakukan adalah login terlebih dahulu ke akun blogger sobat masing-masing, dan jika sudah klik pada bagian menu Tema dan klik Edit HTML. Lalu tambahkan kode CSS di bawah ini dan letakkan tepat di atas kode ]]></b:skin> atau kode </style>

/* Spoiler Button by Cara Terkini */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}

Kemudian tambahkan kode Javascript di bawah ini dan letakkan tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $('#soore-spoiler').click(function(){
    $('#soore-spoiler-content').slideToggle('normal');
  })
});
//]]>
</script>

Dan juga sobat tambahkan kode JQuery di bawah ini dan letakkan tepat di atas kode </body>

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Terakhir tinggal sobat klik Simpan Tema dan selesai.

Pemanggilan Script
Untuk pemanggilan script Spoiler box sobat salin kode di bawah ini dan letakkan di postingan atau halaman mana saja yang ingin sobat tambahkan.

<div id='soore-spoiler'>
<button>Lihat Spoiler</button>
</div>
<div id='soore-spoiler-content'>
••••••••••••
</div>

Untuk demo dan hasilnya sobat bisa lihat link di bawah ini:

Cara Membuat Syntax Sederhana di Blog

Cara Membuat Syntax Sederhana di Blog

Cara Membuat Syntax Sederhana di Blog

Kehadiran Syntax Highlighter pada suatu website maupun blog sangat penting, karena Syntax ini berfungsi sebagai fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemograman seperti: Skrip, Markup, HTML, CSS, Javascript, JQuery maupun skrip jenis lainnya.

Fitur ini menampilkan skrip teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemograman itu sendiri. Dengan menggunakan fitur Syntax Highlighter ini memudahkan kita untuk menyorotkan suatu teks atau bahasa pemograman agar lebih mudah di baca layaknya software Notepad++.

Penggunakan Syntax ini membuat pembaca atau visitor menjadi terlihat lebih nyaman, karena skrip atau kode yang sobat masukkan ke dalam postingannya menjadi lebih rapi dan bersih.

Jika Blog sobat belum memasang Syntax Highlighter pas dan cocok sekali mengunjungi blog ini, karena saya akan memberikan tutorial mudah dan gampang untuk dipahami.

Cara Memasang Syntax Highlighter di Blog
Login terlebih dahulu ke akun blogger sobat masing-masing lalu klik Tab Tema - Edit HTML.
Lalu tambahkan kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau kode </style>

/* Syntax Highlighter Cara Terkini */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Kemudian tambahkan kode ini di atas kode </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

Terakhir klik Simpan Tema.

Catatan:

Jika sobat ingin mengganti warna atau style dari Syntax Highlighter ini silahkan kunjungi link disini
https://github.com/isagalaev/highlight.js/tree/master/src/styles

Cara Menggunakan Syntax Highlighter
Untuk menerapkannya cukup mudah dan simpel. Untuk pemanggilan skripnya bisa ditulis dengan kode: <pre> dan <code>
untuk tag penutupnya </code> </pre> Untuk detailnya lihat di bawah ini:

<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
1. Contoh Javascript
2. Contoh CSS
3. Contoh HTML
</pre></code>

Jika ingin memasukan kodenya silahkan di parse terlebih menggunakan Parse HTML, Tetapi untuk kode CSS tidak perlu melalukan parse HTML.

Bagaimana mudah bukan untuk memasang dan menerapkannya. Terima kasih sudah berkunjung ke Artikel ini semoga bermanfaat.
Cara Membuat Sitemap Sederhana Berdasarkan Label di Blog

Cara Membuat Sitemap Sederhana Berdasarkan Label di Blog

Cara Membuat Sitemap Sederhana Berdasarkan Label di Blog

Kesempatan kali ini saya akan menulis artikel tentang Cara Membuat Sitemap Sederhana di Blog. Sitemap yang saya berikan memiliki tampilan yang cukup sederhana, berbeda dengan Sitemap pada umumnya disini saya memberikannya tanpa adanya tabel dan sangat ringan untuk loadingnya.

Widget sitemap atau Daftar isi ini sangat penting pada suatu blogger karena pengungjung akan melihat postingan mana saja dan di label berapa yang sobat tulis. Sitemap yang di sortir berdasarkan label ya.

Untuk Demo tampilannya sobat bisa melihatnya disini:

Bagaimana menurut sobat? terlihat sederhana bukan? tenang saja walaupun tampilannya sangat sederhana, membuat blog menjadi ringan dan responsive. Jika sobat penasaran silahkan sobat ikuti langkanya di bawah ini.

Cara Memasang Sitemap Sederhana di Blog
  1. Langkah pertama login ke akun blogger sobat masing-masing terlebih dahulu.
  2. Lalu klik Halaman dan Klik Buat Halaman Baru selajutnya arahkan tab Compose menjadi HTML.
  3. Tambahkan kode di bawah ini dan paste di halaman tersebut dan ingat paste yang paling atas.
<div style="background-color:none; max-height:1200px; margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;">
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/daftsimple.js"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Terakhir Publikasikan post dan selesai. Caranya cukup mudah dan tidak terlalu sulit jadi sangat cocok di pasang di blogger sobat. Terima kasih sudah berkunjung dan semoga bermanfaat.
Membuat Auto Refresh di Blog

Membuat Auto Refresh di Blog

Membuat Auto Refresh di Blog

Banyak sekali yang berpendapat bahwa tujuan dari Memasang Auto Refresh di Blog dapat meningkatkan traffic blog menjadi naik. lalu bagaimana caranya? apakah aman pada blog kita?
Tentu saja aman karena script auto refresh ini telah diuji di beberapa blog dan hasilnya aman tidak ada masalah yang terdeteksi seperti script error atau yang lainnya.

Lalu bagaimana caranya?
Cara Terkini akan memberikan sebuah tutorial mudahnya karena ini sangat recomended banget buat sobat yang ingin mendapatkan lebih banyak pengunjung. Berikut adalah langkah-langkahnya:

Cara Mudah Membuat Auto Refresh di Blog
Pertama Login terlebih dahulu ke akun blogger sobat masing-masing, lalu klik tab Tema dan Edit HTML. Tambahkan script atau kode di bawah ini dan letakkan di atas kode </head>

<meta content='60' http-equiv='refresh'/>

Keterangan:

Angka 60 adalah waktu yang diperlukan untuk melakukan auto refresh, silahkan ganti sesuai dengan keinginan sobat

Terakhir klik Simpan Tema

Perlu diketahui juga jika sobat mengganti angkanya terlalu cepat Google akan menganggapnya sebagai tindakan manipulasi trafik. Usahakan pengaturan waktunya tidak terlalu cepat dan berlebihan.

Terima kasih sudah berkunjung dan semoga bermanfaat.
Cara Mudah Redirect Costum Domain 301 di Blog

Cara Mudah Redirect Costum Domain 301 di Blog

Cara Mudah Redirect Costum Domain 301 di Blog

Artikel kali ini saya akan membahas tentang redirect costum domain. Sesuai dengan judul artikel di blog ini yaitu Bagaimana Caranya Membuat Redirect Costum Domain di Blogger. cara atau tutorial ini sangat cocok untuk sobat blogger yang baru saja mengganti domain lama ke domain yang baru yaitu me-redirect semua artikel yang di domain lama ke domain baru. Artinya semua halaman, postingan akan berpindah secara otomatis ke domain yang baru.

Alasan kenapa kita harus melalukan redirect domain:
  1. Agar pengunjung lama kita tetap menyimpan permalink sewaktu-waktu dia mengunjungi alamat blog kita kembali.
  2. Memliki beberapa blog yang dimana kontennya ingin digabungkan ke dalam satu domain.
  3. Agar blog kita tetap terindex di mesin pencarian seperti: Google, Yahoo dan Bing.

Dari beberapa alasan di atas mungkin yang sangat sobat pertimbangkan adalah poin pada nomer 3, karena tidak capek-capek membangun blog dari awal dan mengindeksnya kembali dari awal. Belum lagi menyimpan alamat permalink dari postingan tertentu dan sewaktu-waktu mengunjunginya kembali. sebelum membahasnya lebih jauh sobat blogger harus mengetahui dulu apa itu Redirect 301?

Apa Itu Redirect 301?
Redirect 301 atau redirect permanen adalah tujuannya digunakan untuk memberi tahu bots mesin pencarian bahwa halaman atau postingan yang ada telah dipindahkan ke halaman yang baru, sehingga semua tautan permalink lama akan merubah permalink baru dan meminimalisir kerugian peringkat pada SERP (Search Engine Result Pages)

Cara Membuat Redirect 301 di Blog
Langkah utama dan yang paling penting adalah pastikan sobat telah membackup semua postingan blog sobat yang terdapat di pengaturan blog. Contohnya backupnya seperti:
Masuk ke menu Setelan lalu klik Lainnya dan klik tombol Backup Konten

Selanjutnya pada blog lama sobat tambahkan kode Javascript di bawah ini dan letakkan di atas kode <head>

<script>
//<![CDATA[
var d='<data:blog.url/>';
d=d.replace(/.*\/\/[^\/]*/, '');
location.href = 'https://www.domain_baru.com' + window.location.pathname;
//]]>
</script>

Keterangan:

Ganti tulisan https://www.domain_baru.com dengan domain baru sobat.

Terakhir klik tombol Simpan Tema.

Setelah sobat melakukan cara di atas, maka URL yang diketikan pada domain lama akan otomatis berpindah ke domain yang baru dan berarti proses Redirect 301 artinya berjalan dengan baik.

Mungkin hanya segitu saja yang dapat saya share atau saya tulis pada artikel kali ini silahkan sobat coba sendiri dan lihat hasilnya. Terima kasih semoga bermanfaat.