Cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js

Berikut adalah cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js. Adalah bagian dasar dan semoga bermanfaat dan dapat dikembangkan lagi.

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Gunanya, untuk memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).

Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Untuk mengaktifkan fitur ini dibutuhkan javascript yang dapat ditempatkan pada code HTML Template Blog. Pada postingan kali ini, saya ingin share cara membuat syntaxhighlighter, menggunakan Highlight.js dari Softwaremaniacs.

Caranya: copy dulu kode javascript di bawah ini atau lebih aman download disini.

Langkah 1 : Menyimpan JavaScript

Simpan JavaScript ini di atas </head> dalam tamplate blog.

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>    <script>      hljs.initHighlightingOnLoad();    </script>

Langkah 2 : Pilih CSS

Code CSS dalam hal ini, berfungsi menampilkan style SyntaxHighlighter dimaksud.  

Ada banyak pilihan CSS yang bisa digunakan, sebelum anda memilih, terlebih dahulu dapat melihat-lihat demo DISINI.

Untuk Pilihan CSS, anda bisa download DISINI.

Atau salah satu contoh Default CSS SyntaxHighlighter:

/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
  color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
  color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
  color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
  color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
  color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
  font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
  font-style: italic;
}
pre .nginx .built_in {
  font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
 

Langkah 3 : Simpan CSS tersebut di atas ]]></b:skin> 

Langkah 4 : Cara Penggunaan

Untuk menggunakan Highlight.js ini, sangat simple, kita tidak perlu menentukan bahasanya, anda tinggal tulis seperti ini :

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

FAQs

Apa itu SyntaxHighlighter?

SyntaxHighlighter adalah kode mandiri sintaks yang berfungsi penuh yang dikembangkan dalam JavaScript. Untuk mendapatkan gambaran tentang kemampuan SyntaxHighlighter, lihat halaman kami. SyntaxHighlighter saat ini digunakan oleh Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks, dan lainnya.

Apa gunanya Syntax Highlighting?

Syntax Highlighting adalah fitur editor teks yang digunakan untuk pemrograman, scripting, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah.

Demikian cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js. Happy blogging..

Cara pasang Auto Read More Otomatis #Terbaru

Cara pasang Auto Read More Otomatis #Terbaru

All About Blogspot templates : Fungsi Read More tanpa hosting file .JS, memang agak berbeda dengan versi Read More biasanya. Bila sebelumnya  kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class=”fullpost”>..</div> atau <span class=”fullpost”>..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Atau penggunaan fungsi pemenggalan kalimat bawaan blogger seperti dibawah gambar ini:

Cara pasang Auto Read More Otomatis #Terbaru
Fungsi Read More Standar dengan pemenggalan artikel bawaan blogger

Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas. Artikel ini dibuat menjawab pertanyaan zhoe_haemy pada artikel “Cara merubah ukuran, jenis font dan warna pada judul post” sehubungan dengan fitur readmore pada blognya tidak berfungsi.

Fungsi Read More berikut ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Atau bisa juga disebut saja dengan fasilitas image thumbnail.

Tidak hanya itu, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Bahkan kita dapat memodifikasi ukuran image yang akan ditampilkan di home page blog anda. Hebat bukan??? Yah.. anggap hebat lah….

   NOTE!!    Bagi anda yang sudah memasang Read More versi lama atau auto read more-nya tidak berfungsi, sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru di dalam Quote dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, jika sudah tinggal lanjutkan langkah-langkah berikut ini:

Pertama : silahkan langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Setelah itu, jangan lupa di simpan terlebih dahulu.

<!-- Auto read more script Mulai -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan tanpa gambar
summary_img = 340; //panjang tulisan dengan gambar
img_thumb_height = 200; // tinggi gambar thumbnail
img_thumb_width = 200; // lebar gambar thumbnail
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script Berakhir -->

Kedua : Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more Berakhir -->

Ketiga : Save Template!. Selesai.

Cara Memodifikasi Auto Read More.

  • Thumbnail_mode : setting menjadi “yes” untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi “no” untuk menghilangkan Thumbnail pada Auto Read More. Temen – temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
  • Pada kode kedua, para Blogger juga Bisa merubah Teks “Baca Selengkapnya” sesuai dengan Keinginan.

Demikian tutorial sederhana Cara pasang Auto Read More Otomatis #Terbaru. Terima Kasih. Semoga Bermanfaat !.

Cara Menghilangkan Link Aktif pada Komentar Blog

Cara Menghilangkan Link Aktif pada Komentar Blog

All About Blogspot Templates -Artikel ini sebenarnya saya posting karena sedikit terganggu dengan adanya spammer pada kolom komentar, dengan menyimpan link aktif/hidup.

Memang, banyak blogger sering dipusingkan dengan adanya spammer pada komentar. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Untuk itu, kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan aktif pada komentar.

Tutorial ini saya dapat dari salah satu blog milik blogger Indonesia, Kang Ismet. Yakni tentang cara menghilangkan link aktif pada komentar blogspot.

Ada beberapa cara untuk menghilangkan link aktif/link hidup pada komentar tersebut, diantaranya dengan melakukan pemasangan code CSS dan JavaScript pada template blog.

1. Dengan CSS (Not Recommended)

Untuk menyembunyikan link dengan CSS, simpan kode ini di atas ]]></b:skin>

#comments p a{ display: none !important;}

Akan tetapi menurut Kang Ismet, cara ini tidak direkomendasikan, karena masih terbaca di browser, otomatis masih terbaca sebagai link oleh Mesin Pencari.

2. Dengan JavaScript (Recommended)

Sebetulnya ada banyak javaScript untuk menghilangkan link hidup pada komentar ini, namun pada kesempatan ini saya akan share 2 JavaScript saja. Dan setelah saya coba, sangat efektif dan berhasil dengan baik.

Simpan salah satu JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>

Hasilnya, Anchor Link akan menjadi teks biasa. Artinya komentar yang menggunakan link aktif akan dilumpuhkan menjadi teks biasa.

Atau kita dapat mengunakan JavaScript berikut, dan cara tersebut yang saya pakai saat ini.

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (content[i].innerHTML.indexOf('</a>') !== -1) {
content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
content[i].className = "spammer-detected";
}
}
}
blockLinks('comment-holder', 'p');
//]]>
</script>

Hasilnya, akan terlihat seperti gambar dibawah ini:

Cara Menghilangkan Link Aktif pada Komentar Blog

Dengan kata lain, teks komentar akan diubah dengan kata-kata peringatan.

Demikian tips Menghilangkan Link Aktif pada Komentar Blog, semoga bermanfaat dan terimakasih atas kunjungan.

Cara membuat Tag Pre pada postingan

Cara membuat Tag Pre pada postingan

All About Blogspot Templates | Pre Tag – Sebelumnya saya pernah menulis tentang Cara membuat Highlight pada Script/Kode di Postingan. Dan oleh sahabat blogger saya +Djangkaru Bumi, dipertanyakan apakah sama dengan blockqoute? Awalnya saya mau jawab Iya.. biar urusannya selesai. Namun akhirnya saya memilih untuk menunda memberi jawaban. Lalu gentayangan mencari tutorial yang relevan.. 😀

Dari hasil blogwalking, langkah saya terhenti pada blog Kang Ismet. Dan ternyata disana ada jawabannya. Sekalian saya share..

Mirip? Mungkin, akan tetapi ada perbedaan besar antara Blockqoute, Highlight.js, dan Pre Tag. Tentang highlight mungkin sudah dibahas sebelumnya. Untuk saat ini, yang menjadi topik utama yakni tentang PRE Tag. Dan apa bedanya dengan Blockquote? Mana yang lebih baik digunakan untuk menulis kode/script? Serta Tips Bagaimana Cara membuat kode warna-warni?

Tertarik? Oke.. kita lanjut dan langsung ke inti pembahasan. 

PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.

Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag pre, spasi akan tetap.

Sebagai gambaran, untuk lebih memahaminya coba copy kode ini pada postingan (mode HTML).  Dan kemudian dilihat hasilnya pada mode Compose.

<pre>
ini adalah contoh
tag pre
coba tulis
seperti
ini di
blog sobat
</pre>

<p>
ini adalah contoh
tag pre
coba tulis
seperti
ini di
blog sobat
</pre>

Maka ketika dilihat melalui mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag p hasilnya akan lurus atau berjejer ke bawah.

Perbedaan  pre dan blockquote

Banyak yang menggunakan blockquote untuk berbagi kode. Termasuk saya… he… he… Lihat artikel-artikel sebelumnya. Untuk menjawab pertanyaan “Mana yang lebih baik untuk berbagi kode? blockquote atau pre?” Sebelum melangkah pada jawaban, silahkan simak pengertian blockquote. 

Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. anda akan lebih tertarik pada paragraf ini, daripada di atasnya atau yang lain.

Kalau melihat pengertian blockquote, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeri blockquote merupakan ‘blok kutipan’. Sebenarnya sah-sah saja kita menggunakan blockquote sebagai tempat kode.

Tapi kalau dibandingkan, lebih baik menggunakan tag pre daripada blockquote untuk kode. Berikut ini kelebihan tag pre dibanding blockquote :

1. Struktur HTML lebih mudah difahami, lihat gambar :

Perbedaan  pre dan blockquote

Lihat yang di tandai dengan garis merah, jelas mana pembuka dan penutup. Anda akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, sedikit lebih susah untuk memahami struktur HTML-nya.

2. Standar huruf menggunakan monospace.
Artinya, tanpa CSS pun tag pre akan mempunya hurup monospace, dimana hurup ‘W’ akan sama dengan huruf ‘s’ atau lainnya dalam segi ukuran. lebih jelasnya baca disini.

3. Bisa disisipi SyntaxHighlighter (Kode warna warni).

Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.

Mungkin masih banyak kelebihan lainnya, silahkan bisa anda cari dan temukan.

Bagaimana Cara Menulis Kode dengan Tag PRE?

Untuk penulisan standar seperti ini

<pre>
isi kode
</pre>

Apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :

<pre><code>
isi kode
</code></pre>

atau

<pre lang="css">
isi kode
</code>

dan lain-lain

 Tag pre Details

1. Browser Support :

  •     Netscape 2, 3, 4, 6, 7 dst
  •     Chrome 1 dst
  •     Firefox 1 dst
  •     Internet Explorer 2, 3, 4, 5, 6 dst
  •     Opera 3, 4, 5, 6, 7, 8 dst
  •     Safari 1 dst
  •     WebTV / MSNTV
  •     AvantGo Palm OS
  •     AvantGo Windows CE
  •     HTML 3.2, 4.0
  •     XHTML 1.0
  •     XHTML Text Module, XHTML Legacy Module

2. Atribut

  •     align (optional)
  •     class (optional)
  •     dir (optional)
  •     id (optional)
  •     lang (optional)
  •     onclick (optional)
  •     ondblclick (optional)
  •     onkeydown (optional)
  •     onkeypress (optional)
  •     onkeyup (optional)
  •     onmousedown (optional)
  •     onmousemove (optional)
  •     onmouseout (optional)
  •     onmouseover (optional)
  •     onmouseup (optional)
  •     style (optional)
  •     title (optional)

3. Contents:Teks. Beberapa tag yang valid pada tag pre tag:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

4. Valid Context :blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.

Cara membuat Highlight pada Script/Kode di Postingan

Cara membuat Highlight pada Script/Kode di Postingan

Dalam posting artikel tips blogging, sering kali kita harus menyertai Script/Kode HTML sebagai bagian isi konten. Sebagai pembeda, biasanya beberapa blogger membuat Highlight untuk lebih memperjelas hal tersebut pada pembaca/visitor.

Pertanyaan, tentunya adalah bagaimana Cara membuat Highlight pada Script/Kode di Postingan tersebut. Sebenarnya, langkah untuk membuat highlight (kotak) yang akan membedakan dengan tulisan artikel ini sangat sederhana.  

Untuk mempersingkat segala sesuatunya, kita langsung kepokok persoalan 🙂

   Caranya :  

  • Login ke blogger lalu pilih Layout–> Edit HTML
  • Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna biru (#DDE4FF) adalah warna background kotak highlight, anda bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog anda.

  • Jika selesai lalu save/simpan

   Cara Posting Artikel menggunakan Highlight pada Script/Kode   

Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus dengan cara-cara tersendiri. Yaitu dengan menambahkan kode tersebut <p class=”alert”> sebelum kode/script yg akan diberi highlight. Kemudian ditambahkan kode </p> diakhir script/Kode.

Tidak begitu susah bukan?? Semoga bermanfaat..

Cara menampilkan widget hanya pada halaman awal

Artikel bagus ini, saya dapat dari BLOG DARI WARIM. Tips editing template tentang Cara menampilkan widget hanya pada halaman awal. Hal ini dilakukan, agar setiap laman posting yang tampil memiliki koding yang lebih ringan dari pada sebelumnya.

Artinya, beberapa widget hanya tampil pada halaman homepage saja. Sedangkan pada halaman posting, hanya widget penting yang berpontensi meningkatkan trafik atau promo saja.

Sebagai contoh, pada blog ini, dua widget, yakni; histats dan submitstart hanya tampil pada homepage dan tidak tampil pada halaman posting.

Untuk merubahnya silakan ikuti langkah-kangkah sederhana sebagai berikut :
1. Sobat log in dulu di blogger
2. Pilih rancangan
3. Pilih edit HTML
4. Pilih Wigdet yang akan sobat rubah, sebagai contoh saya rubah di recent comment.
5. Sisipkan kode yang berwarna merah seperti kode di bawah ini.

<b:widget id=’HTML3′ locked=’false’ title=’ recent comment’ type=’HTML’> <b:includable id=’main’> <b:if cond=’data:blog.url == data:blog.homepageUrl’> <!– only display title if it’s non-empty –> <b:if cond=’data:title != “”‘> <h2 class=’title’><data:title/> </h2> </b:if> <div class=’widget-content’> <data:content/> </div> <b:include name=’quickedit’/> </b:if> </b:includable> </b:widget>

Kemudian save template, sekarang widget recent comment hanya akan muncul pada halaman awal atau homepage, sedangkan jika kita masuk ke salah satu halam posting, widget tersebut tidak akan muncul. 

Sebagai tips, bagi blogger yang blognya Valid HTML5, maka <b:include name=’quickedit’/> biasanya tidak ada. Dan atau jika ingin Valid HTML5 maka kode tersebut diatas dapat anda hapus.

Demikian postingan tentang Cara menampilkan widget hanya pada halaman awal ini. Semoga bermanfaat dan terimakasih atas kunjungannya.