catatan kecil blog dan internet untuk berbagi dan berkreasi

Cara Membuat Artikel Terkait atau Related Post di Blog

noreply@blogger.com (Unknown) — Wed, 08 Apr 2020 13:46:00 +0000

Related Post atau Posting Terkait berguna untuk menampilkan artikel-artikel atau postingan terkait dengan artikel yang sedang dibaca pengunjung berdasarkan label. Hal ini memudahkan pengunjung untuk melihat artikel-artikel lainnya terkait dengan artikel yang bersangkutan.

Langkah-Langkah Membuat Related Post atau Artikel Terkait di Blog

Pada dasbord blog, klik "Tema" atau "Template"
Kemudian klik "Edit Tema"
Langkah selanjutnya, silahkan anda ikuti langkah di bawah sesuai dengan model Navigasi Halaman yang anda inginkan
Cari kode ini : ]]></b:skin>

Simpan kode berikut di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhn_2iFCA29kU2rZdHDBvPvQrMIYPXS3S7F_rHamyRXpH2FIUl-92OHXazqIXpaBprvRCKJFNXYfmNFRyP2sf_1vB7iDiVg2i4qs_vg0jkYSNQqm1goYYUwsbicPTxMiS2fe4vrJvt-Y/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

Cari kode ini : ]]></head>

Simpan kode berikut di atas kode ]]></head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle=&quot;Catatan Terkait&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Catatan :

Angka 5 adalah banyaknya postingan yang akan ditampilkan, bisa dirubah sesuai keinginan
Untuk tulisan yang diberi warna merah "Catatan Terkait" bisa diganti dengan keinginan misal supaya kelihatan lebih keren "Related Post" atau apa saja yang penting ada hubungannya.

Cari kode :
- kode <data:post.body/> yang yang kedua atau ketiga atau
- kode <div class='post-footer'> atau
- kode <div class='post-footer-line post-footer-line-3'>

Simpan kode berikut :

di bawah kode <data:post.body/> yang yang kedua atau ketiga atau
di atas kode <div class='post-footer'> atau
di bawah kode <div class='post-footer-line post-footer-line-3'>

<!--postingan terkait-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

Catatan :

Penempatan kode tersebut tergantung dari template atau tema blog anda dan tergantung keinginan anda mau di mana ditempatkannya (Sesuaikan saja)

Langkah terakhir klik "Simpan Tema"

Sumber :

Cara Membuat Waktu Hitung Mundur (Countdown Timer) di Blog

noreply@blogger.com (Unknown) — Mon, 06 Apr 2020 15:42:00 +0000

Countdown timer atau Waktu Hitung Mundur biasanya digunakan untuk memberikan informasi waktu sebuah kegiatan atau event kegiatan yang akan dilaksanakan seperti hari ulang tahun, pemilihan umum, pemilihan kepala daerah atau event/kegiatan lainnya.

Cara Memasang Hari, Tanggal dan Jam di Blog :

Masuk ke Dashbor Blog
Klik "Tata Letak"
Klik "Tambahkan Gadget"
Klik "HTML/JavaScript"
Masukan kode yang ada di bawah (silahkan pilih kode sesuai keinginan)

Kode Untuk Menampilkan Waktu Hitung Mundur

<style scoped="scoped" type="text/css">
#countdownbaladaka {background:black;color:yellow;font-family:Trebuchet MS, sans-serif;font-size:13px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
.teks {color:white}
.teks-event {color:DarkOrange; font-size:21px}
.tanggal-event {color:Cyan}
</style>
<div id="countdownbaladaka">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Juni 26, 2021").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);

// format countdown string + set tag value
  countdown.innerHTML = days + " <span class='teks'>hari</span> " + hours + " <span class='teks'>jam</span> "
  + minutes + " <span class='teks'>menit</span> " + seconds + " <span class='teks'>detik <br/>Menuju Tahun Baru Hijriyah</span> <br/>26 Juni 2021";}, 1000);
//]]></script>

Hasilnya :

Catatan :

Silahkan anda rubah sesuai keinginan

background black
Warna Angka yellow
Jenis Huruf / font-family Trebuchet MS
Warna teks (hari, jam, menit, detik)
Warna teks-event atau nama event/kegiatan
Tuliskan nama event/kegiatan Menuju Tahun Baru Hijriyah 1442
Ukuran font teks event / font-size:21px
Tanggal kegiatan/event August 20, 2020 menggunakan format bahasa inggris
Tanggal kegiatan/event di bawah teks kegiatan 26 Juni 2021

Silahkan dicoba-coba saja

Untuk menampilkan tanggal sekarang silahkan baca Cara Memasang Hari, Tanggal dan Jam di Blog

Cara Memasang Hari, Tanggal dan Jam di Blog

noreply@blogger.com (Unknown) — Sat, 04 Apr 2020 12:19:00 +0000

Untuk menampilkan penanda waktu (hari, tanggal, bulan, tahun, jam, menit, detik) di blog, ada beberapa cara. Dan di sini akan diuraikan menampilkan waktu dengan kode HTML di blog. Adapun pemasangannya anda bisa di sidebar, postingan ataupun di template/tema blog.

Cara Memasang Hari, Tanggal dan Jam di Blog :

Masuk ke Dashbor Blog
Klik "Tata Letak"
Klik "Tambahkan Gadget"
Klik "HTML/JavaScript"
Masukan kode yang ada di bawah (silahkan pilih kode sesuai keinginan)

Kode Untuk Menampilkan Tanggal, Bulan dan Tahun

<script type="text/javascript">
now = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()

var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
document.write(tanggal+" "+bulanarray[bulan]+" "+tahun)
</script>

Hasilnya :

Kode Untuk Menampilkan Hari, Tanggal, Bulan dan Tahun

<script type="text/javascript">
now = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()

var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script>

Hasilnya :

Kode Untuk Menampilkan Hari, Tanggal, Bulan dan Tahun Serta Jam (Jam, Menit, Detik)

<script type="text/javascript">
tday  =new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,");
tmonth=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
function GetClock(){
d = new Date();
nday   = d.getDay();
nmonth = d.getMonth();
ndate  = d.getDate();
nyear = d.getYear();
nhour  = d.getHours();
nmin   = d.getMinutes();
nsec   = d.getSeconds();
if(nyear<1000) nyear=nyear+1900;
if(nhour ==  0) {ap = " AM";nhour = 12;} 
else if(nhour <= 11) {ap = " AM";} 
else if(nhour == 12) {ap = " PM";} 
else if(nhour >= 13) {ap = " PM";nhour -= 12;}if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}
document.getElementById('clockbox').innerHTML=" "+tday[nday]+" "+ndate+" "+tmonth[nmonth]+" "+nyear+" 
"+nhour+":"+nmin+":"+nsec+ap+"";
setTimeout("GetClock()", 1000);}window.onload=GetClock;</script><div id="clockbox">
</div>

Hasilnya :

Selamat Mencoba.

Cara Membuat dan Memodifikasi Next Post Older Post dengan Judul Posting di Blog

noreply@blogger.com (Unknown) — Fri, 03 Apr 2020 16:49:00 +0000

Cara menampilkan Next Post dan Older Post dengan menampilkan Judul Postingan dibawahnya, hal ini untuk memudahkan pengunjung untuk melihat postingan sebelum dan sesudahnya.

Langkah-langkah menampilkan Next Post dan Older Post dengan menampilkan Judul Postingan :

Pada dasbord blog, klik "Tema" atau "Template"
Kemudian klik "Edit Tema"
Cari kode :
</head>

Simpan kode berikut di atas kode </head>

<!--djCode menampilkan next post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.halaman{padding:5px 0;background:#fff;border-top:2px solid #9ACD32;border-bottom:3px solid #9ACD32;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:&#39;Oswald&#39;,sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
</style>
</b:if>

Cari kode :
<div class='post-footer-line post-footer-line-3'>

Simpan kode berikut di bawah kode
<div class='post-footer-line post-footer-line-3'>

<!--djCode menampilkan next post2-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Previous</span><br/>
  <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next</span><br/>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>

Catatan :

Penempatan kode tersebut disesuaikan dengan template blog yang anda gunakan
Penempatan kode tersebut bisa disimpan di atas kode
<div id='related post'> (kode posting terkait)
atau di atas kode <div id='comments'> (kode kotak komentar), tergantung keinginan.
Anda bisa mengganti kalimat yang diberi warna merah dengan kalimat keinginan anda
- Previous bisa diganti dengan Artikel Selanjutnya
- Newest bisa diganti dengan Artikel Terbaru
- You are reading the newest post bisa diganti Anda sedang membaca postingan terbaru
- Next bisa di ganti dengan Artikel Sebelumnya
- Next Post bisa di ganti dengan Artikel Sebelum artikel ini
- You are reading the latest post bisa diganti Anda sedang membaca postingan pertama

Cari kode :
</body>

Simpan kode berikut di atas kode </body>

<!--djCode menampilkan next post3-->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
 </b:if>

Cari kode :
<b:include name='nextprev'/>

Hapus kode tersebut dan ganti dengan kode berikut

<!--djCode menampilkan next post4-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:include name='nextprev'/>
</b:if>
</b:if>

biru

Catatan :

Apabila kode <b:include name='nextprev'/> tidak ada
Cari kode <b:includable id='nextprev'>
Tambahkan kode yang diberi warna Catatan Biru seperti kode lengkapnya di bawah

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:if>
</b:if>
</b:includable>

Apabila di template blog anda belum di pasang kode JavaScript, silahkan anda simpan kode JQuery di atas </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>
atau (kode jquery yang otomatis update):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

Setelah selesai, klik "Simpan Tema/Template"

Cara Memasang Navigasi Halaman Blog dengan Nomor Angka

noreply@blogger.com (Unknown) — Thu, 02 Apr 2020 02:33:00 +0000

NAVIGASI halaman merupakan bagian dari internal link (tautan internal) yang dianjurkan oleh Google. Fungsinya untuk memudahkan user mengeksplorasi konten blog kita.

Secara default Nagivasi Halaman blog yaitu : Posting Lebih Baru-Beranda-Posting Lebih Lama atau Newer Post-Home-Older Post.

Langkah-Langkah Memasang Navigasi Halaman dengan Nomor Angka di blog

Pada dasbord blog, klik "Tema" atau "Template"
Kemudian klik "Edit Tema"
Langkah selanjutnya, silahkan anda ikuti langkah di bawah sesuai dengan model Navigasi Halaman yang anda inginkan

Model 1 :

Cari kode ini : ]]></b:skin>

Simpan kode berikut di atas kode ]]></b:skin>

.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#3498db;}
.pagenavi .current{color:#fff !important;background-color:#555;}
.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#fff !important;background-color:#555;}
.pagenavi .pages {margin:0 -1px 0 0}
@media screen and (max-width:384px) {
.post{padding:10px;margin:0 0 10px}
.post-info {margin: 10px;padding: 10px 0;}
.post-thumbnail img{width:100%;padding: 0;margin: 0 0 10px 0;}
.pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px;}
}
@media screen and (max-width:885px){
.post-outer{margin:5px 5px 0 0;}
}
@media screen and (max-width:800px){
.post-outer {width:49% !important;height:auto;float:left}
.post h2 {font-size:13px;}
}
@media screen and (max-width:600px){
.post-outer {width:100% !important;float: none !important;margin-top:5px;}
.post h2 {font-size:13px;height:auto}
}

Cari kode :

<b:includable id='nextprev'>

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:if>
</b:if>
</b:includable>

Simpan kode berikut di bawah kode
<b:includable id='nextprev'>....</b:includable>

              <b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
        //]]>
</script>
    </div>
    </b:includable>

Silahkan rubah kode yang diberi warna merah sesuai keinginan pada :

var perPage=5; untuk menampilkan jumlah artikel setiap halaman

var numPages=6; untuk menampilkan jumlah halaman

Cari kode :

<b:include name='nextprev'/>

Hapus Kode : <b:include name='nextprev'/> dan ganti dengan kode berikut :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:include name='page-navi'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='page-navi'/>
    </b:if>
</b:if>

Langkah terakhir Simpan Tema

MODEL YANG LAIN MENYUSUL....!!!

Cara Menyembunyikan atau Menghapus Beranda-Postingan Lama-Postingan Lebih Baru di Blog

noreply@blogger.com (Unknown) — Thu, 02 Apr 2020 02:04:00 +0000

Pada halaman utama blog, secara default akan ditampilkan Navigasi Halaman dengan Tulisan Beranda - Postingan Lama atau Postingan Lebih Baru

Langkah-Langkah Menyembunyikan Navigasi Halaman di Blog dengan Tulisan Beranda - Postingan Lama - Postingan Lebih Baru

Pada dasbord blog, klik "Tema" atau "Template"
Kemudian klik "Edit Tema"
Cari kode ini : ]]></b:skin>

Simpan kode berikut di atas kode ]]></b:skin>

#blog-pager,.blog-pager {display:none;}

Jika sudah selesai silahkan klik "Simpan Tema" atau "Simpan Template".

Langkah-Langkah Menghapus Navigasi Halaman di Blog dengan Tulisan Beranda - Postingan Lama - Postingan Lebih Baru

Cari kode :
<b:include name='nextprev'/>

Hapus Kode <b:include name='nextprev'/>
Simpan Tema atau Template

Cara Menghilangkan Ikon Edit (Quick Edit) Gambar Obeng di Blog

noreply@blogger.com (Unknown) — Wed, 01 Apr 2020 15:54:00 +0000

Ikon Quick Edit biasanya digunakan untuk memudahkan blogger mengedit postingan dan tampil apabila kita sudah login di blog dan biasanya berada di bagian akhir posting. Selain itu ikon tersebut berada di setiap gadget/widget di sidebar.

Apabila kita mengklik ikon tersebut maka dibawa ke halaman postingan atau ke gadget/widget yang dimaksud.

Langkah-langkah Menghilangkan Ikon Edit (Quick Edit) Gambar Obeng di Blog

Pada dasbord blog klik “Tema”
Lalu klik “Edit Tema” atau “Edit Template”
Cari kode :

<b:include name="quickedit">

Hapus semua kode <b:include name="quickedit">

Kemudian Cari kode </b:skin> atau kode ]]></b:skin>

Simpan kode berikut atau di bawah ini di atas kode </b:skin>
atau di atas kode ]]></b:skin>

.quickedit{display:none;}
.quickedit{display:none;visibility:hidden;}

Jika sudah selesai silahkan klik "Simpan Tema" atau "Simpan Template".

Cara Menghapus "Langganan Posting Komentar (Atom)" Pada Blog

noreply@blogger.com (Unknown) — Tue, 31 Mar 2020 06:09:00 +0000

Pada catatan yang lalu saya sudah mencatat Cara Menghapus "Langganan Postingan (Atom)" Pada Blog dan untuk catatan kali ini saya akan mencoba mencatat Cara Menghapus Langganan Posting Komentar (Atom). Fasilitas ini hampir sama dengan Langganan Postingan, namun di sini berlangganannya apabila ada komentar yang masuk maka sobat sebagai pelanggan akan menerima pemberitahuan melalui email. Langganan Posting Komentar ini berada di bawah formulir Komentar setelah postingan. Dan ini juga rasanya tidak diperlukan lah, makanya kita hapus saja.

Di dasbor blog klik menu “Tema/Template” lalu klik “Edit HTML” lalu cari kode berikut :

<b:includable id='feedLinksBody' var='links'>

Apabila sudah ketemu, hapus semua kode tersebut mulai dari <b:includable id='feedLinksBody' var='links'> sampai dengan kode </b:includable>

Kode lengkap yang dihapus sebagai berikut :

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType'
target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Kemudian cari kode berikut dan hapus :

<b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>

Lalu Simpan Tema atau Template, dan lihat hasilnya. Selamat Mencoba

Tools Parse HTML di Blog

noreply@blogger.com (Unknown) — Thu, 26 Mar 2020 14:34:00 +0000

Codes copied to clipboard!

Parse HTML merupakan proses merubah karakter-karakter kode HTML tertentu dalam suatu script menjadi kode unik. Adapun fungsi Parse yaitu untuk mencegah tampilan error pada sebuah halam html yang dibuka melalui beberapa browser tertentu, dan kode html yang sudah di parse akan lebih SEO Friendly dan Valid html5.

Kode iklan yang diberikan oleh Google Adsence sebaiknya di Parse terlebih dulu agar kodenya sesuai atau dapat diterapkan pada template blog anda / agar terbaca oleh berbagai template yang berbeda-beda dengan struktur yang beragam.

Selain itu Parse HTML sering digunakan untuk menampilkan kode script html di postingan terbaca sebagai teks biasa. Sebagai contoh form (kotak) Parse HTML seperti di atas, itu merupakan hasil dari kode HTML yang tidak di Parse, sedangkan kode HTML yang berada di bawah merupakan kode html untuk membuat form Parse HTML yang sudah di Parse sehingga tampilnya kode html tersebut seperti teks biasa. Sobat bisa mencoba copy kode html di bawah dan paste di postingan blog sobat. Kemudian coba juga kode html di bawah lalu Parse dan copy paste ke postingan blog sobat, dan sobat bisa melihat perbedaan hasilnya.

Bagi sobat yang ingin membuat form Parse HTML di blog sobat, silahkan gunakan kode berikut di postingan blog sobat. sehingga dengan adanya Form Parse HTML di blog kita sendiri maka dalam membuat postingan untuk menampilkan kode script HTML agar pekerjaan saya bisa lebih cepat.

Masukan kode berikut pada postingan anda pada mode HTML bukan "Compose"

<style scoped="">
.btn,.btn:active{background-image:none}
.btn{font-weight:400;padding:6px
 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:300px;width:100%;padding:10px;margin:0 0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
.btn-sm{font-size:12px;line-height:1.5;border-radius:3px;padding:5px 10px}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
.collapse{display:none}
#parser2{position:relative}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px} button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id="parser2">
<textarea id="somewhere" placeholder='Tulis/paste kode di sini lalu klik tombol Parse Codes'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>
<h4>Codes copied to clipboard!</h4>
</div>
<button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Codes</button>
<div class="clear"></div>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Bersihkan</button>
</div>
<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var
 d=document.createElement("script");d.src="https://cdn.statically.io/gh/KompiAjaib/kompi-js/master/copyclipboard_parse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Sobat bisa juga melakukan Parse di blogcrowds

Sumber :

Cara Membuat Garis Baru dengan HTML

noreply@blogger.com (Unknown) — Mon, 07 Jan 2019 05:19:00 +0000

Dalam membuat baris baru dalam penulisan HTML, tidak seperti membuat baris baru pada penulis di Ms Word yaitu menggunakan "ENTER". HTML tidak membaca spasi untuk membuat spasi tambahan maupun enter untuk membuat baris baru (ganti baris).

Untuk membuat baris baru (ganti baris) dalam penulisan HTML baik dalam pembuatan postingan di mode "HTM" maupun dalam pembuatan template atau Edit Template, kita bisa menggunakan Tag Line Break atau bisa juga ditulis

Contoh penulisan di HTML menggunakan Enter, seperti berikut :

Ini merupakan contoh teks yang Pertama
Ini merupakan contoh teks yang Kedua
Ini merupakan contoh teks yang Ketiga

Hasil tampil di browser :

Ini merupakan contoh teks yang Pertama Ini merupakan contoh teks yang Kedua Ini merupakan contoh teks yang Ketiga

Hasilnya yaitu dari ketiga baris tersebut maka tampil di web browser menjadi satu baris. Hal ini dikarenakan html HTML tidak membaca baris baru dengan menggunakan enter (walaupun beberapa kali di enter) tetap saja akan menjadi satu baris. Untuk membuat baris baru atau ganti baris kita bisa menggunakan Tag

Contoh penulisan di HTML, seperti berikut :

Ini merupakan contoh teks yang Pertama 
Ini merupakan contoh teks yang Kedua 
Ini merupakan contoh teks yang Ketiga

atau

Ini merupakan contoh teks yang Pertama
 
Ini merupakan contoh teks yang Kedua
 
Ini merupakan contoh teks yang Ketiga

Hasil tampilan di browser, seperti berikut :

Ini merupakan contoh teks yang Pertama
Ini merupakan contoh teks yang Kedua
Ini merupakan contoh teks yang Ketiga

Apabila jarak antar baris tersebut kurang lebar, kita bisa menambahkan lagi Tag atau sesuai keinginan.

Ini merupakan contoh teks yang Pertama
 
Ini merupakan contoh teks yang Kedua
 
Ini merupakan contoh teks yang Ketiga

Hasil tampilan di browser, seperti berikut :

Ini merupakan contoh teks yang Pertama

Ini merupakan contoh teks yang Kedua

Ini merupakan contoh teks yang Ketiga

Cara Membuat Paragraf dengan HTML di Blog

noreply@blogger.com (Unknown) — Mon, 07 Jan 2019 05:16:00 +0000

Dalam membuat sebuah postingan kita bisa mengatur isi postingan menjadi beberapa paragrag agar kelihatan rapi. Paragraf mempunyai peran yang cukup penting terhadap informasi yang ditampilkan di dalam website yang kita buat. Namun sebenarnya kita bisa saja membuat postingan tanpa menggunakan tag paragraf, tetapi ada baiknya dalam membuat postingan kita menggunakan tag paragraf agar browser mendeteksi paragraf yang kita buat.

Cara Membuat Paragraf

Sebagai contoh kita membuat postingan di HTML dengan membuat tiga paragraf tanpa menggunakan Tag Paragraf, seperti berikut :

Ini merupakan contoh paragraf yang Pertama

Ini merupakan contoh paragraf yang Kedua

Ini merupakan contoh paragraf yang Ketiga

Hasil tampilan di browser, seperti berikut :

Ini merupakan contoh paragraf yang Pertama Ini merupakan contoh paragraf yang Kedua Ini merupakan contoh paragraf yang Ketiga

Hasilnya yaitu dari ketiga paragraf tersebut maka tampil di web browser adalah dari ketiga paragraf tersebut menjadi satu baris/paragraf. Hal ini dikarenakan kita tidak menggunakan Paragraf. Walaupun kita memisahkan antar teks atau paragraf tersebut dengan "Enter" maka tetap saja akan menjadi satu paragraf atau satu baris. Dalam mode HTML tidak membaca spasi ataupun enter

Untuk membuat paragraf dalam sebuah postingan dengan mode "HTML" kita bisa menggunakan Tag dengan contoh penulisannya, sebagai berikut :

Ini merupakan contoh paragraf yang Pertama

Ini merupakan contoh paragraf yang Kedua

Ini merupakan contoh paragraf yang Ketiga

Sehingga Hasilnya setelah menggunakan Tag Paragraf tampilan di browser, seperti berikut :

Ini merupakan contoh paragraf yang Pertama

Ini merupakan contoh paragraf yang Kedua

Ini merupakan contoh paragraf yang Ketiga

Pada ketiga paragraf tersebut sudah berada pada posisi masing-masing, dan setiap antar paragraf ada jarak pemisah yang di sesuaikan dengan besarnya huruf yang digunakan. Jadi alangkah baik apabila membuat lebih dari satu paragraf menggunakan tag paragraf

Cara Membuat Garis Bawah dan Garis atau Coretan Pada Teks dengan HTML

noreply@blogger.com (Unknown) — Wed, 02 Jan 2019 06:37:00 +0000

Pada catatan sebelumnya, saya sudah mencatat Cara Penulisan Bolt, Italic, Strong dan Emphasis dengan Kode HTML dan pada catatan sekarang saya akan mencoba membuat garis bawah dan garis atau coretan pada teks.

Untuk membuat garis bawah pada teks atau sebuah kalimat dengan HTML, kita bisa menggunakan :

Tag
Tag <ins></ins>

Contoh Penulisan kode HTML membuat garis bawah menggunakan Tag atau tag underline-nya :

Contoh teks yang diberi garis bawah menggunakan Tag underline

Hasilnya :

Contoh teks yang diberi garis bawah menggunakan Tag underline

Contoh Penulisan kode HTML membuat garis bawah menggunakan Tag <ins></ins> :

<ins>Contoh teks yang diberi garis bawah menggunakan Tag ins</ins>

Hasilnya :

Contoh teks yang diberi garis bawah menggunakan Tag ins

Jadi untuk membuat garis bawah pada teks bisa menggunakan tag atau tag <ins></ins> hasilnya SAMA.

Untuk membuat garis atau Coretan pada teks atau sebuah kalimat dengan HTML, kita bisa menggunakan :

Tag <strike></strike> atau bisa disingkat dengan huruf s <s></s>
Tag <del></del>

Contoh Penulisan kode HTML membuat garis atau coretan pada teks menggunakan Tag <strike></strike> :

<strike>Contoh teks yang diberi garis atau coretan pada teks menggunakan Tag strike</strike>

Hasilnya :

~~Contoh teks yang diberi garis atau coretan pada teks menggunakan Tag strike~~

Contoh Penulisan kode HTML membuat garis atau coretan pada teks menggunakan Tag <s></s> :

<s>Contoh teks yang diberi garis atau coretan pada teks menggunakan Tag s</s>

Hasilnya :

~~Contoh teks yang diberi garis atau coretan pada teks menggunakan Tag s~~

Contoh Penulisan kode HTML membuat garis atau coretan pada teks menggunakan Tag <del></del> :

<del>Contoh teks yang diberi garis atau coretan pada teks menggunakan Tag s</del>

Hasilnya :

~~Contoh teks yang diberi garis atau coretan pada teks menggunakan Tag del~~

Jadi untuk membuat ~~garis atau coretan pada teks~~ bisa menggunakan tag <strike></strike> atau tag <s></s> atau juga Tag <del></del>hasilnya SAMA.

Selamat mencoba.

Cara Penulisan Bolt, Italic, Strong dan Emphasis dengan Kode HTML

noreply@blogger.com (Unknown) — Wed, 02 Jan 2019 03:42:00 +0000

Dalam membuat artikel yang menggunakan mode "HTML" atau pada "Edit HTML" di blog/template, maka untuk menebalkan teks (bold) atau memiringkan teks (italic), Tag yang digunakan adalah :

Menebalkan teks (bold) menggunakan Tag atau tag
Memiringkan teks (italic) menggunakan Tag atau tag (emphasis).

Menebalkan huruf

Cara menebalkan huruf (bold) dengan kode HTML tag

Contoh Penulisan kode HTML-nya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Hasilnya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Cara menebalkan huruf (bold) dengan kode HTML tag

Contoh Penulisan kode HTML-nya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Hasilnya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

teks menjadi tebal /menebalkan teks (bold)

SAMA

Memiringkan huruf

Cara memiringkan huruf (italic) dengan kode HTML tag

Contoh Penulisan kode HTML-nya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Hasilnya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Cara memiringkan huruf (italic) dengan kode HTML tag

Contoh Penulisan kode HTML-nya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Hasilnya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Jadi untuk memiringkan teks (italic) bisa menggunakan tag atau tag hasilnya SAMA, namun Tag sudah tidak disupport lagi di HTML5. Jadi sebaiknya untuk memiringkan huruf gunakan Tag

Menebalkan dan Memiringkan huruf

Contoh Penulisan kode HTML-nya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Hasilnya :

Contoh-1, Contoh-2, Contoh-3, Contoh-4, Contoh-5, Contoh-6, Contoh-7, Contoh-8, Contoh-9, Contoh-10

Dalam menuliskan tag HTML yang digabungkan, penempatan tag pembuka dan tag penutup jangan sampai terbalik. Catatan aturan penulisan tag HTML bisa di baca pada catatan Cara Penulisan Kode HTML di Blog

Jenis-Jenis Nilai Atribut Style Untuk Memperindah Tampilan Blog

noreply@blogger.com (Unknown) — Mon, 31 Dec 2018 03:06:00 +0000

Dalam beberapa Tag HTML, ada salah satu atribut yang dapat digunakan untuk mengatur gaya sebuah postingan ataupun sebuah template blog. Atribut tersebut adalah atribut style. Dalam atribut Style kita bisa memberikan sebuah perintah baik untuk warna teks, warna background, posisi teks dan masih banyak lagi. Atribut Style memiliki beberapa nilai atribut yang dapat digunakan untuk membuat atau memodifikasi sebuah blog maupun untuk membuat sebuah postingan.

Pada catatan sebelumnya tentang Cara Penulisan Kode HTML di Blog telah dicatat Penulisan Kode Dasar Atribut, seperti berikut :

<namatag_pembuka nama atribut="nilai atribut">Isi Konten</namatag_penutup>

Dalam atribut style ada sedikit perbedaan dengan atribut lainnya dalam menuliskan kode HTML-nya. Berikut kode dasar dalam penulisan atribut style :

<namatag_pembuka nama atribut="property: nilai atribut">Isi Konten</namatag_penutup>

Di sini kita akan menggunakan atribut Style dan akan menggabungkan beberapa property dan nilai atributnya, sebagai contoh berikut :

<div style="border: solid 1px red; background-color: #F5F5DC; padding: 10px; t-align: left; border-bottom: double 5px #0000FF;">Isi Konten</div>

Catatan :

Untuk Tag yang dapat digunakan dengan atribut style bisa dilihat pada tabel Jenis-jenis Tag dan Atribut HTML

property adalah property CSS
Untuk menggabungkan property ditandai atau dipisahkan dengan tanda titik koma (;)

Value atau nilai atribut adalah nilai dari property CSS
Nilai atribut dapat digabungkan dan ditandai atau dipisahkan dengan spasi

nilai atribut dapat dimodifikasi atau ditambahkan dengan nilai atribut lainnya.
Sebagai contoh pada nilai atribut border: dalam tabel dibawah, nilai atribut tercatat solid, double dan sebagainya. Di sini kita bisa menambahkan nilai atribut tersebut, misalnya : solid (model border) 1px (ketebalan border) dan #FF4500 (kode warna border)

Adapun nilai atribut dan isi nilai atribut dari Atribut Style, sebagai berikut :

Property	Value / Nilai Atribut	Keterangan
alignment-adjust:
	after-edge
	alphabetic
	auto
	baseline
	before-edge
	central
	hanging
	ideographic
	mathematical
	middle
	text-after-edge
	text-before-edge
alignment-baseline:
	after-edge
	alphabetic
	auto
	baseline
	before-edge
	central
	hanging
	ideographic
	mathematical
	middle
	text-after-edge
	text-before-edge
	use-script
animation:
animation-delay:
animation-direction:
	alternate
	normal
animation-duration:
animation-iteration-count:
animation-name:
animation-play-state:
	paused
	running
animation-timing-function:
	cubic-bezier(<number>
	ease
	ease-in
	ease-in-out
	ease-out
	linear
appearance:
	button
	checkbox
	checkbox-group
	field
	hyperlink
	list-menu
	normal
	password
	pop-up-menu
	push-button
	radio-group
azimuth:
	behind
	center
	center-left
	center-right
	deg
	far-left
	far-right
	grad
	inherit
	left
	left-side
	leftwards
	rad
	right
	right-side
	rightwards
background:
	bottom
	center
	color
	fixed
	left
	length
	none
	no-repeat
	percentage
	repeat
	repeat-x
	repeat-y
	right
	scroll
	top
	transparent
	url('')
background-attachment:
	color
	fixed
	inherit
	scroll
background-clip:
background-color:
	color
	inherit
	transparent
background-image:
	inherit
	none
	url('')
background-origin:
background-position:
	bottom
	center
	inherit
	left
	length
	percentage
	right
	top
background-repeat:
	inherit
	no-repeat
	repeat
	repeat-x
	repeat-y
background-size:
	auto
baseline-shift:
	<length>
	<percentage>
	baseline
	sub
	super
binding:
bookmark-label:
bookmark-level:
bookmark-target:
	attr()
	url()
border:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
	thick
	thin
border-bottom:
	border-top-color
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
	thick
	thin
border-bottom-color:
	color
	inherit
	transparent
border-bottom-style:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
border-bottom-width:
	inherit
	medium
	thick
	thin
border-collapse:
	collapse
	inherit
	separate
border-color:
	color
	inherit
	transparent
border-left:
	border-top-color
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
	thick
	thin
border-left-color:
	color
	inherit
	transparent
border-left-style:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
border-left-width:
	inherit
	medium
	thick
	thin
border-right:
	border-top-color
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
	thick
	thin
border-right-color:
	color
	inherit
	transparent
border-right-style:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
border-right-width:
	inherit
	medium
	thick
	thin
border-spacing:
	inherit
	length
border-style:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
border-top:
	border-top-color
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
	thick
	thin
border-top-color:
	color
	inherit
	transparent
border-top-style:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	medium
	none
	outset
	ridge
	solid
border-top-width:
	inherit
	medium
	thick
	thin
border-width:
	inherit
	medium
	thick
	thin
bottom:
	auto
	inherit
	length
	percentage
border-spacing:
	length
box-align:
	baseline
	center
	end
	start
	stretch
box-decoration-break:
	clone
	slice
box-direction:
	inherit
	normal
	reverse
box-flex:
box-lines:
	miltiple
	single
box-ordinal-group:
box-orient:
	block-axis
	inherit
	inline-axis
	vertical
	horizontal
box-pack:
	center
	end
	justify
	start
box-sizing:
	border-box
	content-box
	inherit
caption-side:
	bottom
	inherit
	top
clear:
	both
	inherit
	left
	none
	right
clip:
	<shape>
	auto
	inherit
color:
	color
	inherit
color-profile:
	<name>
	<uri>
	auto
	inherit
	srgb
column-count:
column-gap:
column-rule:
column-rule-color:
column-rule-style:
column-rule-width:
columns:
column-span:
column-width:
content:
	<counter>
	attr(x)
	close-quote
	inherit
	no-close-quote
	none
	no-open-quote
	normal
	open-quote
	url('')
counter-increment:
	identifier
	inherit
	integer
	none
counter-reset:
	identifier
	inherit
	integer
	none
crop:
	auto
	inset-rect()
	rect()
cue:
	'cue-after'
	'cue-before'
	inherit
cue-after:
	inherit
	none
	url('')
cue-before:
	inherit
	none
	url('')
cursor:
	auto
	crosshair
	default
	e-resize
	help
	inherit
	move
	ne-resize
	n-resize
	nw-resize
	pointer
	se-resize
	s-resize
	sw-resize
	text
	url('')
	wait
	w-resize
direction:
	inherit
	ltr
	rtl
display:
	block
	inherit
	inline
	inline-block
	inline-table
	list-item
	none
	run-in
	table
	table-caption
	table-cell
	table-column
	table-column-group
	table-footer-group
	table-header-group
	table-row
	table-row-group
dominant-baseline:
	alphabetic
	auto
	central
	hanging
	inline
	ideographic
	mathematical
	middle
	no-change
	reset-size
	text-after-edge
	text-before-edge
	use-script
drop-initial-after-adjust:
	after-edge
	alphabetic
	central
	ideographic
	mathematical
	middle
	text-after-edge
drop-initial-after-align:
drop-initial-before-adjust:
	before-edge
	central
	hanging
	mathematical
	middle
	text-before-edge
drop-initial-before-align:
	caps-height
drop-initial-size:
drop-initial-value:
	initial
elevation:
	above
	below
	deg
	grad
	higher
	inherit
	level
	lower
	rad
empty-cells:
	hide
	inherit
	show
fit:
	fill
	hidden
	meet
	slice
fit-position:
float:
	inherit
	left
	none
	right
float-offset:
font:
	caption
	'font-family'
	'font-size'
	'font-style'
	'font-variant'
	'font-weight'
	icon
	inherit
	'line-height'
	menu
	message-box
	small-caption
	status-bar
font-family:
	cursive
	fantasy
	'font-name'
	inherit
	monospace
	sans-serif
	serif
font-size:
	inherit
	large
	larger
	length
	medium
	percentage
	small
	smaller
	x-large
	x-small
	xx-large
	xx-small
font-size-adjust:
	inherit
	none
font-stretch:
	condensed
	expanded
	extra-condensed
	extra-expanded
	inherit
	narrower
	normal
	semi-condensed
	semi-expanded
	ultra-condensed
	ultra-expanded
	wider
font-style:
	inherit
	italic
	normal
	oblique
font-variant:
	inherit
	normal
	small-caps
font-weight:
	100
	200
	300
	400
	500
	600
	700
	800
	900
	bold
	bolder
	inherit
	lighter
	normal
grid-columns:
grid-rows:
hanging-punctuation:
	auto
height:
	auto
	inherit
	length
	percentage
hyphenate-after:
hyphenate-before:
	auto
hyphenate-character:
	auto
hyphenate-lines:
	no-limit
hyphenate-resource:
	none
hyphens:
	auto
	manual
	none
icon:
	auto
	inherit
	url()
image-orientation:
	auto
image-resolution:
	auto
	dpi
	normal
inline-box-align:
	initial
	integer
	last
left:
	auto
	inherit
	length
	percentage
letter-spacing:
	inherit
	length
	normal
line-height:
	inherit
	length
	normal
	number0-100
	percentage
line-stacking:
line-stacking-ruby:
	exclude-ruby
	include-ruby
line-stacking-shift:
	consider-shifts
	disregard-shifts
line-stacking-strategy:
	block-line-height
	grid-height
	inline-line-height
	max-height
list-style:
	inherit
	'list-style-image'
	'list-style-position'
	'list-style-type'
list-style-image:
	inherit
	none
	url('')
list-style-position:
	inherit
	inside
	outside
list-style-type:
	armenian
	circle
	decimal
	decimal-leading-zero
	disc
	georgian
	inherit
	lower-alpha
	lower-greek
	lower-latin
	lower-roman
	none
	square
	upper-alpha
	upper-latin
	upper-roman
list-style-type:
	auto
	inherit
	length
	percentage
margin-bottom:
	auto
	inherit
	length
	percentage
margin-left:
	auto
	inherit
	length
	percentage
margin-right:
	auto
	inherit
	length
	percentage
margin-top:
	auto
	inherit
	length
	percentage
mark:
mark-after:
mark-before:
marks:
	crop
	cross
	none
marquee-direction:
	forward
	reverse
marquee-play-count:
	infinite
	integer
marquee-speed:
	fast
	normal
	slow
marquee-style:
	alternate
	scroll
	slide
max-height:
	inherit
	length
	none
	percentage
max-width:
	inherit
	length
	none
	percentage
min-height:
	inherit
	length
	percentage
min-width:
	inherit
	length
	percentage
move-to:
	here
	identifier
	normal
nav-down:
	auto
	id
	target-name
nav-left:
	auto
	id
	target-name
nav-right:
	auto
	id
	target-name
nav-up:
	auto
	id
	target-name
opacity:
	alphavalue
	inherit
orphans:
	inherit
	integer
outline:
	inherit
	'outline-color'
	'outline-style'
	'outline-width'
outline-color:
	color
	inherit
	invert
outline-style:
	dashed
	dotted
	double
	groove
	hidden
	inherit
	inset
	none
	outse
	ridge
	solid
outline-width:
	inherit
	medium
	thick
	thin
overflow:
	auto
	hidden
	inherit
	no-content
	no-display
	scroll
	visible
overflow-style:
	auto
	marquee-block
	marquee-line
overflow-x:
	auto
	hidden
	no-content
	no-display
	scroll
	visible
overflow-y:
	auto
	hidden
	no-content
	no-display
	scroll
	visible
padding:
	inherit
	length
	percentage
padding-bottom:
	inherit
	length
	percentage
padding-left:
	inherit
	length
	percentage
padding-right:
	inherit
	length
	percentage
padding-top:
	inherit
	length
	percentage
page:
page-break-after:
	always
	auto
	avoid
	inherit
	left
	right
page-break-before:
	always
	auto
	avoid
	inherit
	left
	right
page-break-inside:
	auto
	avoid
	inherit
page-policy:
	first
	last
	start
pause:
	1ms
	1s
	inherit
	percentage
pause-after:
	1ms
	1s
	inherit
	percentage
pause-before:
	1ms
	1s
	inherit
	percentage
phonemes:
pitch:
	1hz
	1khz
	high
	inherit
	low
	medium
	x-high
	x-low
pitch:
	inherit
	number0-100
play-during:
	auto
	inherit
	mix
	none
	repeat
	url('')
position:
	absolute
	fixed
	inherit
	relative
	static
presentation-level:
	increment
	integer
	same
punctuation-trim:
	adjacent
	end
	none
	start
quotes:
	''
	inherit
	none
rendering-intent:
	absolute-colorimetric
	auto
	inherit
	perceptual
	relative-colorimetric
	saturation
resize:
	both
	horizontal
	inherit
	none
	vertical
rest:
rest-after:
	inherit
	medium
	none
	strong
	time
	weak
	x-strong
	x-weak
rest-before:
	inherit
	medium
	none
	strong
	time
	weak
	x-strong
	x-weak
size:
	auto
	landscape
	portrait
speak:
	inherit
	none
	normal
	spell-out
speak-header:
	always
	inherit
	once
speak-numeral:
	continuous
	digits
	inherit
speak-punctuation:
	code
	inherit
	none
speech-rate:
	fast
	faster
	inherit
	medium
	number0-100
	slow
	slower
	x-fast
	x-slow
stress:
	inherit
	number0-100
string-set:
target:
target-name:
	current
	modal
	new
	parent
	root
	string
target-new:
	none
	tab
	window
target-position:
	above
	back
	behind
	front
text-align:
	center
	inherit
	justify
	left
	right
text-align-last:
	center
	end
	justify
	left
	right
	start
text-decoration:
	blink
	inherit
	line-through
	none
	overline
	underline
text-emphasis:
	accent
	after
	before
	circle
	disc
	dot
	none
text-height:
	auto
	font-size
	max-size
	text-size
text-indent:
	inherit
	length
	percentage
text-justify:
	auto
	distribute
	inter-cluster
	inter-ideograph
	inter-word
	kashida
	tibetan
text-justify:
	color
	length
	none
text-replace:
text-shadow:
text-transform:
	capitalize
	inherit
	lowercase
	none
	uppercase
text-wrap:
	none
	normal
	suppress
	unrestricted
top:
	auto
	inherit
	length
	percentage
transition:
transition-delay:
	time
transition-duration:
	time
transition-property:
	all
	none
transition-timing-function:
	cubic-bezier
	ease
	ease-in
	ease-in-out
	ease-out
	linear
unicode-bidi:
	bidi-override
	embed
	inherit
	normal
vertical-align:
	baseline
	bottom
	inherit
	length
	middle
	percentage
	sub
	super
	text-bottom
	text-top
	top
visibility:
	collapse
	hidden
	inherit
	visible
voice-balance:
	center
	inherit
	left
	leftwards
	number
	right
	rightwards
voice-duration:
	time
voice-family:
	child
	female
	inherit
	male
	'specific-voice'
voice-pitch:
	high
	inherit
	low
	medium
	number
	percentage
	x-high
	x-low
voice-pitch-range:
	high
	inherit
	low
	medium
	number
	percentage
	x-high
	x-low
voice-rate:
	fast
	inherit
	medium
	percentage
	slow
	x-fast
	x-slow
voice-stress:
	inherit
	moderate
	none
	reduced
	strong
voice-volume:
	inherit
	loud
	medium
	number
	percentage
	silent
	soft
	x-loud
	x-soft
volume:
	inherit
	loud
	medium
	number0-100
	percentage
	silent
	soft
	x-loud
	x-soft
white-space:
	inherit
	normal
	nowrap
	pre
	pre-line
	pre-wrap
white-space-collapse:
	collapse
	discard
	preserve
	preserve-breaks
widows:
	inherit
	integer
width:
	auto
	inherit
	length
	percentage
word-break:
	break-all
	break-strict
	keep-all
	loose
	normal
word-spacing:
	inherit
	length
	normal
word-wrap:
	break-word
	normal

Jenis-jenis Tag dan Atribut HTML di Blog

noreply@blogger.com (Unknown) — Mon, 24 Dec 2018 04:00:00 +0000

Dalam membuat kode HTML baik untuk postingan maupun untuk membuat sebuah template atau modifikasi template, ada beberapa Kode Tag dan Atribut yang dapat digunakan. Tag merupakan suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Tag berfungsi untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek (teks, video, audio dan gambar dll) di tampilkan berdasarkan Tag yang di gunakan.

Atribut memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut. Sedangkan Atribut Value adalah Nilai dari sebuah informasi atau nilai sifat apa yang akan di berikan kepada tag dan elemen yang mengandung atribut tersebut. Atribut Value atau Nilai Atribut berada diantara tanda petik dua ("") atau tanda petik satu ('')

Contoh Penulisan kode HTML :

<namatag_pembuka nama atribut="nilai atribut">Isi Konten</namatag_penutup>

Contoh :

<a href="https://catatan-blog-ku.blogspot.com">Isi Konten</a>

Jenis-Jenis Tag dan Atribut HTML :

Tag	Atribut	Keterangan
<!-- -->		Membuat Keterangan
<a></a>		Membuat Link
	accesskey=""
	charset=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	href=""	alamat link
	hreflang=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	media=""
	rel=""
	spellcheck=""
	style=""
	tabindex=""
	target=""	target link
	title=""	memberi keterangan
	type=""
<abbr></abbr>		Keterangan pada teks
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<acronym></acronym>		Keterangan pada teks
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<address></address>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<area />
	accesskey=""
	alt=""	alternatif
	class=""
	contenteditable=""
	contextmenu=""
	coords=""
	dir=""
	draggable=""
	hidden=""
	href=""	alamat link
	hreflang=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	media=""
	rel=""
	shape=""
	spellcheck=""
	style=""
	tabindex=""
	target=""	target link
	title=""	memberi keterangan
	type=""
<article></article>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<aside></aside>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<audio></audio>
	accesskey=""
	autoplay=""
	class=""
	contenteditable=""
	contextmenu=""
	control=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	loop=""
	preload=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<b></b>		Menebalkan huruf (bold)
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<banner></banner>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<base></base>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	href=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	target=""	target link
	title=""	memberi keterangan
<bdo></bdo>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<bgsound></bgsound>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	loop=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<big></big>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<blink></blink>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<blockquote></blockquote>
	accesskey=""
	cite=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<body></body>
	accesskey=""
	alink=""	warna link pada saat mouse pada teks link
	background=""	warna background
	bgcolor=""	warna background
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	leftmargin=""
	link=""	warna link (default blue)
	spellcheck=""
	style=""
	tabindex=""
	text=""
	title=""	memberi keterangan
	topmargin=""
	vlink=""	warna link yang sudah di kunjungi
<br />		Membuat garis baru (enter)
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<button></button>
	accesskey=""
	autofocus=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	form=""
	formaction=""
	formenctype=""
	formmethod=""
	formnovalidate=""
	formtarget=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
	value=""
<canvas></canvas>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	height=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	width=""
<caption></caption>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<cite></cite>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<code></code>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<col></col>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	span=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<colgroup></colgroup>
	accesskey=""
	align=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	span=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	valign=""
<command></command>
	accesskey=""
	checked=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	hidden=""
	icon=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	label=""
	lang=""
	radiogroup=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
<datalist></datalist>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<dd></dd>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<del></del>
	accesskey=""
	cite=""
	class=""
	contenteditable=""
	contextmenu=""
	datetime=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<details></details>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	open=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<dfn></dfn>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<div></div>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<dl></dl>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<dt></dt>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<em></em>		Italic
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<embed>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	height=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
	width=""
<fieldest></fieldest>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disable=""
	draggable=""
	form=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<figcaption></figcaption>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<figure></figure>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<footer></footer>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<form></form>
	accept-charset=""
	accesskey=""
	action=""
	autocomplete=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	enctype=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	method=""
	name=""
	novalidate=""
	spellcheck=""
	style=""
	tabindex=""
	target=""
	title=""	memberi keterangan
<frame />
	accesskey=""
	bordercolor=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	frameborder=""
	framespacing=""
	hidden=""
	id=""
	lang=""
	marginheight=""
	marginwidth=""
	name=""
	noresize=""
	scroling=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<frameset></frameset>
	accesskey=""
	border=""
	bordercolor=""
	class=""
	cols=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	frameborder=""
	framespacing=""
	hidden=""
	id=""
	lang=""
	rows=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<h1></h1>		heading
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<h2></h2>		heading
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<h3></h3>		heading
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<h4></h4>		heading
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<h5></h5>		heading
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<h6></h6>		heading
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<head></head>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<header></header>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<hr />		Membuat garis horizontal
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<html></html>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	manifest=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<i></i>		Italic
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<iframe></iframe>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	height=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	sandbox=""
	seamless=""
	spellcheck=""
	src=""
	srcdoc=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	width=""
<img />		menampilkan gambar
	accesskey=""
	alt=""	alternatif
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	height=""
	hidden=""
	id=""
	ismap=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	usemap=""
	width=""
<input></input>
	accept=""
	accesskey=""
	alt=""	alternatif
	autocomplete=""
	autofocus=""
	checked=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	form=""
	formaction=""
	formenctype=""
	formmethod=""
	formnovalidate=""
	formtarget=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
	value=""
<ins></ins>
	accesskey=""
	cite=""
	class=""
	contenteditable=""
	contextmenu=""
	datetime=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<kbd></kbd>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<keygen></keygen>
	accesskey=""
	autofocus=""
	challenge=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	form=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	keytype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<layer></layer>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<legend></legend>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<li></li>		List Item
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<link />
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	href=""
	hreflang=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	media=""
	rel=""
	sizes=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
<listing></listing>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<map></map>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<mark></mark>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<marquee></marquee>
	accesskey=""
	align=""
	behavior=""
	bgcolor=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	direction=""
	draggable=""
	height=""
	hidden=""
	hspace=""
	id=""
	lang=""
	loop=""
	scrollamount=""
	scrolldelay=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	vspace=""
	width=""
<menu></menu>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	label=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
<meta />
	accesskey=""
	charset=""
	class=""
	content=""
	contenteditable=""
	contexmenu=""
	dir=""
	draggable=""
	hidden=""
	http-equiv=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<meter></meter>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	form=""
	hidden=""
	high=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	low=""
	max=""
	min=""
	optimum=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	value=""
<multicol>
	accesskey=""
	class=""
	cols=""
	contenteditable=""
	contexmenu=""
	dir=""
	draggable=""
	gutter=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	width=""
<nav></nav>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<nextid>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<nobr></nobr>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<noembed></noembed>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<noframes></noframes>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<noscript></noscript>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<note></note>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<object></object>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	data=""
	dir=""
	draggable=""
	form=""
	height=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
	usemap=""
	width=""
<ol></ol>		ordered list
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	resersed=""
	spellcheck=""
	start=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<optgroup></optgroup>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<option></option>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	label=""
	lang=""
	selected=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	value=""
<overlay>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<p></p>		paragraf
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<param />
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	name=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	value=""
<person></person>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<plaintext></plaintext>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<pre></pre>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<progress></progress>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	form=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	max=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	value=""
<q></q>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<range>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<rp></rp>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<ruby></ruby>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<samp></samp>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<script></script>
	accesskey=""
	charset=""
	class=""
	contenteditable=""
	contextmenu=""
	defer=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
<section></section>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<select></select>
	accesskey=""
	autofocus=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	disabled=""
	draggable=""
	form=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	multiple=""
	name=""
	size=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<small></small>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<sound>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<source></source>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	media=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
<span></span>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<spot>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<strong></strong>		menebalkan huruf
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<style></style>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	media=""
	scoped=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	type=""
<sub></sub>		subscript (huruf/angka dibawah)
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<summary></summary>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<sup></sup>		superscript (huruf/angka diatas)
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<tab>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<table></table>		membuat tabel
	accesskey=""
	align=""	mengatur posisi table
	background=""	warna background
	bgcolor=""	warna background
	border=""	ukuran border
	bordercolor=""	warna border
	bordercolordark=""
	bordercolorlight=""
	cellpadding=""	mengatur ukuran garis antar cell dan objek
	cellspacing=""	untuk mengatur jarak luar antar cell
	class=""	mengatur style css dan javascript
	clear=""
	cols=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggalbe=""
	frame=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	nowrap=""
	rules=""	membuat garis antara cell
	spellcheck=""
	style=""
	summary=""
	tabindex=""
	title	membuat keterangan pada teks
	valign=""
<tbody></tbody>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<td></td>		table definition
	accesskey=""
	class=""
	colspan=""	merge colomn
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	headers=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	rowspan=""	merge baris/row
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<textarea></textarea>
	accesskey=""
	autofocus=""
	class=""
	cols=""
	contenteditable=""
	contextmenu=""
	dir=""
	disable=""
	draggable=""
	form=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	maxlength=""
	name=""
	placeholder=""
	readonly=""
	required=""
	rows=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
	wrap=""
<tfoot></tfoot>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<th></th>		table header
	accesskey=""
	class=""
	colspan=""	merge colomn
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	headers=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	rowspan=""	merge baris/row
	scope=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<thead></thead>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<time></time>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	datetime=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	pubdate=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<title></title>
	accesskey=""
	class=""
	contenteditable=""
	contexmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<tr></tr>		table row
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<tt></tt>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<ul></ul>		unordered list
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<var></var>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan
<wbr></wbr>
	accesskey=""
	autoplay=""
	class=""
	contenteditable=""
	contextmenu=""
	controls=""
	dir=""
	draggable=""
	height=""	lebar
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	loop=""
	poster=""
	preload=""
	spellcheck=""
	src=""
	style=""
	tabindex=""
	title=""	keterangan
	width=""	panjang
<wbr></wbr>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	itemprop=""
	itemscope=""
	itemtype=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	keterangan
<xmp></xmp>
	accesskey=""
	class=""
	contenteditable=""
	contextmenu=""
	dir=""
	draggable=""
	hidden=""
	id=""
	lang=""
	spellcheck=""
	style=""
	tabindex=""
	title=""	memberi keterangan

Cara Menghapus Langganan Postingan (Atom) Pada Blog

noreply@blogger.com (Unknown) — Mon, 29 Oct 2018 10:45:00 +0000

Salah satu fasilitas yang di terapkan blogger pada semua template blog, yaitu Langganan : Postingan (Atom) atau kalau dalam bahasa Inggrisnya Subcribe to : Posts (Atom). Fasilitas tersebut berada di bawah halaman depan (Home) blog.

Langganan Post tersebut tujuannya untuk mengikuti langganan postingan dari blog tersebut. Namun sebenarnya sudah ada fasilitas widget Langganan Postingan atau Ikuti Lewat Email dengan feedburner google.com

Untuk itulah saya kira fasilitas Langganan : Postingan (Atom) ini tidak diperlukan lagi.

Baca Juga : Cara Cepat Mencari Kode HTML-CSS di Blog

Dan untuk menghapusnya sebagai berikut :

Di dasbor blog klik menu “Tema/Template” lalu klik “Edit HTML” lalu cari kode :

<b:include data='feedLinks' name='feedLinksBody'/>

Hapus saja kode tersebut lalu klik “Simpan Tema” dan Silahkan lihat hasilnya.

Cara Menghilangkan Baca Selengkapnya dan Kode #more dibelakang url Postingan Blog

noreply@blogger.com (Unknown) — Thu, 25 Oct 2018 08:34:00 +0000

Apabila postingan yang berada di halaman Utama blog atau di halaman label, kita sering menggunakan perintah “Insert Jump Break” untuk menampilkan postingan sebagian saja atau postingan tidak ditampilkan seutuhnya. Dan hal ini biasanya pada postingan tersebut akan tampil tulisan “Baca Selengkapnya” atau “Readmore” atau lainnya.

Apabila kita mengklik tulisan “Baca Selengkapnya” atau “Readmore” atau lainnya, ternyata di alamat url postingan tersebut diakhiri dengan kode #more

Lihat alamat url di adress bar :

Untuk menghilangkan kode #more di akhir alamat url postingan tersebut, kita perlu menghapus kode tersebut di template-nya. Namun apabila kita menghilangkan kode tersebut maka tulisan “Baca Selengkapnya” atau “Readmore” akan hilang juga. Walaupun tulisan “Baca Selengkapnya” atau “Readmore” hilang, kita atau pengunjung tetap bisa mengakses postingan tersebut untuk melihat isi postingan seutuhnya dengan mengklik “Judul Postingan” tersebut. Dan hal ini juga akan mengurangi kecepatan blog dan akan kelihatan rapih juga.

Untuk menghilangkan tampilan “Baca Selengkapnya” atau “Readmore”, maka pada dasbor blog klik “Tema” atau Template” lalu klik “Edit HTML”

Cari kode :

<b:if cond='data:post.hasJumpLink'>

Lihat Kode Lengkap di gambar ini :

Kode selengkapnya :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Hilangkan kode tersebut dan klik Simpan Tema.

Cara Memperbaiki Error Data Terstruktur url

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 14:32:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur url, seperti keterangan error sebagai berikut :

Baca Juga : Cara Menguji Data Struktur Blog

Lihat keterangan kesalahan dibawah ini

Kesalahan ini karena saya tidak memasukan alamat lengkap Url. Lihat kode dalam gambar diatas. Setelah <meta conten=’catatan-blog-ku.blogspot.com

Seharusnya saya memasukan alamat Url seperti ini https://catatan-blog-ku.blogspot.com

Eh… ternyata dari kesalahan kita mengutak-atik template ada hikmahnya, menambah ilmu lagi. Jadi jangan pernah takut melakukan hal-hal yang baru karena di sanalah kita akan belajar dan belajar menambah wawasan dan ilmu.

Seperti biasa Simpan Tema lalu lakukan “Pengujian Baru” dan lihat hasilnya.

Apabila hasil “Pengujian Baru” hasilnya seperti gambar dibawah ini, berarti sekarang blog kita sudah bagus.

Ada yang lain ga yach error tersebut. Hanya itu yang error di blog saya ini. Mudah-mudahan ke depan tidak terjadi error lagi. Amiin.

Cara Memperbaiki kesalahan Atribut itemtype

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 14:25:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur Atribut itemtype, seperti keterangan error sebagai berikut :

Cara Memperbaiki Error Data Terstruktur Atribut logo

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 14:13:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur Atribut logo, seperti keterangan error sebagai berikut :

Cara Memperbaiki Error Data Terstruktur dateModified

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 13:59:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur dateModified, seperti keterangan error sebagai berikut :

Cara Memperbaiki Error Data Terstruktur datePublished

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 13:22:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur datePublished, seperti keterangan error sebagai berikut :

Cara Memperbaiki Error Data Terstruktur author

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 13:10:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur author, seperti keterangan error sebagai berikut :

Cara Memperbaiki Error Data Terstruktur mainEntityOfPage

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 12:53:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur mainEntityOfPage, seperti keterangan error sebagai berikut :

Cara Memperbaiki Error Data Terstruktur headline

noreply@blogger.com (Unknown) — Sat, 13 Oct 2018 11:39:00 +0000

Untuk memperbaiki data terstruktur blog error pada terstruktur headline, seperti keterangan error sebagai berikut :