Cara Memasang Syntax Highlighter di Postingan Blog

Cara Memasang Syntax Highlighter di Postingan Blog

Pada kesempatan kali ini Bloggerin Id akan share kepada kalian Cara Memasang Syntax Highlighter di Postingan Blog


Syntax Highlighter merupakan fitur khusu pemindahan kode bahasa pemrograman tertentu dengan tulisan, seperti warna, dan juga posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dibaca dan dipelajari.


Syntax Highlighter diperuntukkan bagi blog yang membahas tutorial pemrograman agar pengunjung dapat lebih memahami sebuah kode yang diajarkan step by stepnya dan juga pengunjung agar lebih nyaman saat memcara konten blog, dan bagi penulis atau admin blog akan membuatnya lebih menjadi lebih professional dalam menyajika artikel tutorialnya.


Syntax Highlighter untuk cara kerjanya hampir sama dengan blockquote yang menjadi perbedaannya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi sebagai intinya Syntax Highlighter akan lebiih memiliki efektif dalam proses pembuatan atau pemindahannya jika dibandingkan dengan blockquote.


Langsung saja jika sobat berminat inginmemasang Syntax Highlighterpada blog, simak tutorial dibawah ini dengan tepat.


Cara Memasang Syntax Highlighter Pada Template Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML Tambahkan kode CSS dibawah ini tepat diadat kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;


Perlu diperhatikan tutorial yang saya bagikan ini akan berfungsi dengan baik jika blog sobat sudah menggunakan jquery library contoh scripnya seperti ini : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

Kemudian tambahkan kode dibawah ini tepat diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;


<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Jika sudah klik tombol Simpan Tema


Cara Memasang Syntax Highlighter pada postingan

Setelah memasang kode diatas sekarang saatnya menerapkannya di postingan, buat postingan baru, perlu diingat menulis dengan mode Tampilah HTML bukan Tampilan Menulis


<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti yang saya tandai tersebut dengan kode HTML/CSS maupun JavaScript. Khusus untuk kode HTML dan Javascript sebelum memasang silahkan terlebih dahulu ngeparse kode tersebut di HTML Converter


Berikut adalah contoh penulisan kode HTML, yang bertanda tersebut kode yang akan ditambahkan.


<pre><code><html>
<head>
  <title>Bloggerin</title>
</head>
<body>
  <main>
    <h1>Bloggerin Indonesia</h1> 
    <h2>Gudangnya ilmu teknologi</h2>
    <p>Pusatnya tutorial blogger</p> 
    <img src="" alt=""> 
    <p></p>
  </main>
</body>
</html></code></pre>

Sama halnya dengan kode CSS maupun Javascript, cara penulisannya sama seperti contoh diatas.


Oke sekian yang bisa saya sampaikan tentang bagaimana caraCara Memasang Syntax Highlighter di Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.


Sumber : https://github.com/isagalaev/highlight.js


Cara Mengunci Isi Artikel Blog Dengan Password

Cara Mengunci Isi Artikel Blog Dengan Password


Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Mengunci Isi Artikel Blog Dengan Password


Mengapa mengunci artikel? mengunci isi artikel ini bagus digunakan untuk para guru maupun yang mempunyai les privat, jadi apa yang ditulis hanya dapat diakses yang mengetahui passwordnya saja. Contohnya seperti dibawah ini:


Masukkan Password Untuk Membuka Artikel ini!
password: bloggerin

Ini isi artikel yang dikunci

Nah itu contoh dari artikel yang diberi password, untuk yang berminat memasangnya silahkan simak tutorial dibawah ini:


Pertama agan masuk terlebih dahulu ke Blogger > Buat postingan baru pada mode HTML kemudian copy kode dibawah ini dan pastekan pada kolom HTML postingan


<script>
function verify() {
  if (document.getElementById('password').value === 'bloggerin') {
    document.getElementById('HIDDENDIV').classList.remove("kurahidden");
    document.getElementById('credentials').classList.add("kurahidden");
  } else {
    alert('Password Salah!');
    password.setSelectionRange(0, password.value.length);
  }
  return false;
}
</script>

<style>
.kurahidden {display: none;}
.kurapassword{padding:20px;background:#007bfd;border-radius:5px;width:300px;}
.kuratombol{padding:4px 20px 4px; 20px;background:#222;color:#fff;width:80%;border-radius:5px;}
.kurainput{padding:4px;background:#fff;color:#000;width:80%;text-align:center;border-radius:5px;margin-bottom:3px;}
.kuraket{text-align:center;margin-bottom:5px;}
</style>

<center>
<div id="credentials">
<div class="kurapassword">
<div class="kuraket">
Masukkan Password Untuk Membuka Artikel ini!
</div>
<input class="kurainput" type="text" id="password" onkeydown="if (event.keyCode == 13) verify()" />
<br/>
<input class="kuratombol" id="button" type="button" value="Buka Artikel" onclick="verify()" />
</div> 
</div>
</center>

<div id="HIDDENDIV" class="kurahidden">
LETAKKAN ISI ARTIKEL YANG INGIN DIPASSWORD DISINI YA GAES!
</div>

Noted: Isi yang saya tandai sesuai keinginan agan ya

Jika merasa sudah semua lalu klik publikasikan dan lihat hasilnya.


Sumber: kurazone.net


Oke sekian yang bisa saya sampaikan tentang Cara Mengunci Isi Artikel Blog Dengan Password Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara menghilangkan Tahun dan Bulan Pada Link Blogger

Cara menghilangkan Tahun dan Bulan Pada Link Blogger

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara menghilangkan Tahun dan Bulan Pada Link Blogger


Pada dasarnya permalink postingan blogger yaitu nama_domain.com/tahun/bulan/judul_postingan. jika tahun dan bulan dihilangkan akan tampak seperti platform wordpress. Bagaimana cara menghilangkan tahun dan bulan pada permailink postingan blogger? sebelum ke tutorialnya saya beritahu terlebih dahulu apa sih pengaruhnya terhadap SEO blogger.


Dengan menghapus tahun dan bulan tentu saja melanggar kebijakan blogger, pastinya blogger menambahkan tahun dan bulan itu merupakan cara terbaik untuk mengoptimalkan blog agan pada search engine seperti Google. Apalagi kalau blog agan sudah memiliki Adsense awas hati-hati saja jika kena banned dari pihak google.


Tutorial ini kembali kepada agan, jika agan tidak begitu memperdulikan tentang SEO silahkan ikuti langkah-langkah dibawah ini:


Catatan: Resiko ditanggung sendiri!

Cara menghilangkan Tahun dan Bulan Pada Link Blogger


Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy kode JS dibawah ini dan pastekan tepat diatas kode </body>


<script type='text/javascript'>
//<![CDATA[
// BloggerJS v0.3.1
// Copyright (c) 2017-2018 Kenny Cruz
// Licensed under the MIT License
var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
//]]>
</script>

Jika sudah klik Simpan Tema, dan lihat hasilnya.


Ilustrasi dari kode diatas :


Permalink postingan blogger asli :
http://bossmajid.blogspot.com/2018/06/faktorial-test.html


Permalink postingan blogger yang sudah memasang kode diatas :
http://bossmajid.blogspot.com/faktorial-test


Oke sekian yang bisa saya sampaikan tentang Cara menghilangkan Tahun dan Bulan Pada Link Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.