October 2019
Log In

Tutorial IDNews.co | Indonesia Dalam Berita: October 2019

Membuat Formulir Pertanyaan (pesan) dengan Google Apps Script

Membuat Formulir Pertanyaan (pesan) dengan Google Apps Script

Fitur Utama Formulir kontak terlihat bebas menggunakan Google Apps Script Formulir pertanyaan tanpa server Formulir kontak tidak mem...
Tuesday, October 29, 2019

Fitur Utama

  • Formulir kontak terlihat bebas menggunakan Google Apps Script
  • Formulir pertanyaan tanpa server
  • Formulir kontak tidak memerlukan JavaScript
  • Namun, JavaScript digunakan ketika Google Apps Script merespons
  • Karena itu, ketika JavaScript dinonaktifkan, layar respons default adalah Google Apps Script.
  • Jika tidak ada masalah dengan respons TEXT alih-alih respons HTML, respons itu dapat direalisasikan tanpa JavaScript.


Tinjauan

  1. Pengguna mengisi formulir pertanyaan di halaman web/blog
  2. Pengguna menekan tombol kirim pada formulir pertanyaan
  3. Formulir kontak mengakses Google Apps Script
  4. Google Apps Script mengirimkan formulir pertanyaan ke alamat email yang ditentukan
  5. Google Apps Script menampilkan layar penyelesaian transmisi yang ditentukan untuk pengguna
  6. Selesai

Suplemen

  • Perhatikan bahwa kotak masuk tidak akan ditampilkan jika tujuan email adalah akun Google yang sama yang menjalankan Google Apps Script.
  • Pembatasan mengirim email
  • 2000 email per hari
  • Ketika batas tercapai, Anda tidak dapat lagi mengirim email hingga 24 jam
  • Keterbatasan pengiriman Gmail dengan bantuan Admin G Suite-G Suite
  • Jika Anda tidak memerlukan formulir pertanyaan penampilan gratis
  • Formulir pertanyaan dapat dibuat dengan Formulir Google
  • Rencana ekspansi
  • Mungkin praktis untuk mengubah transmisi email ke penulisan spreadsheet dll.
  • Penulisan spreadsheet + Email sekali sehari juga realistis
  • Jika reCAPTCHA disetel, penanggulangan spam mungkin dilakukan

Screenshot



Buat Google Apps Script

var param = {};

function doPost(e) {
  param.name = e.parameter.name;
  param.email = e.parameter.email;
  param.message = e.parameter.message;
  param.noscript = e.parameter.noscript;

  var message = ''
  + 'Nama:' + param.name + '\n'
  + 'Email:' + param.email + '\n'
  + 'Isi pertanyaan:\n'
  + param.message;
  Logger.log(message);

  MailApp.sendEmail('idnews.publik@gmail.com', 'Formulir Pertanyaan', message);
  if (param.noscript == 'true') {
    return;
  } else {
    return HtmlService.createTemplateFromFile("complete").evaluate();
  }
}
* Tulis ulang "ensikology@gmail.com"
* Tulis ulang "Formulir Pertanyaan" ke judul email pilihan Anda
<!DOCTYPE html>
<html lang="id">
<head>
 <title>Pengiriman pertanyaan selesai</title>
</head>
<body>
  <h1>Pengiriman pertanyaan selesai</h1>
  <p>Permintaan dikirim dengan konten berikut:</p>
  <hr/>
  <p>Nama : <?= param.name ?></p>
  <p>Email : <?= param.email ?></p>
  <p>Isi pertanyaan:
<?= param.message ?></p>
</body>
</html>
Diperkenalkan sebagai aplikasi web

Dapatkan URL aplikasi web di Publik > Instal sebagai aplikasi web.

Jalankan aplikasi sebagai pengguna: saya sendiri

Pengguna yang dapat mengakses aplikasi: Semua orang (termasuk pengguna anonim)

* Versi proyek harus diperbarui setiap kali sumber diubah.

Note : artikel tidaklah murni dari tutorial idnews dan banyak bahasa yang kurang begitu saya pahami karna hasil dari translate, punya pertanyaan? ajukan pada Contact Form baru saya di atas :D
Sign out
Stiker Lucu Facebook di Blogger

Stiker Lucu Facebook di Blogger

Pada artikel ini, aurealisa memberikan Koleksi Gift lucu antara lain be...
Monday, October 28, 2019





Pada artikel ini, aurealisa memberikan Koleksi Gift lucu antara lain berjumlah 32 dalam 2 kategori berbeda, semoga bermanfaat :v


Emoticon Facebook Pertama

<!-- 16 Emoji Gift Lucu Kelinci -->
<style>
.aurealisa_icon1{background:url(https://2.bp.blogspot.com/-saMq1lsL3Qw/XbZAEriG0zI/AAAAAAAACbo/QKkyq0M7MjAjVUpIomSDHPWKGqDXortQACLcBGAsYHQ/s1600/aurealisa-00.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon2{background:url(https://1.bp.blogspot.com/-1V9eHsX-Xv8/XbZAEo3mKdI/AAAAAAAACbk/0E8L_Ne7gO0X0NNyj-XcmyvK4mKg4S55wCLcBGAsYHQ/s1600/aurealisa-01.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon3{background:url(https://1.bp.blogspot.com/-OBltM8nnOZg/XbZAEgWkIvI/AAAAAAAACbs/Ysvf9sOJx1caH8tl_TwwZA8qTulY45ASwCLcBGAsYHQ/s1600/aurealisa-02.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon4{background:url(https://3.bp.blogspot.com/-Xyeo8PiY77Q/XbZAGNX7CuI/AAAAAAAACbw/F2If7_ezRus3CsJKSR4rG6daiOzSZikrgCLcBGAsYHQ/s1600/aurealisa-03.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon5{background:url(https://3.bp.blogspot.com/-8VT1QgiuyNI/XbZAGpXQ3YI/AAAAAAAACb0/9lkFBZ7ziYcsHs97lQzCNH1oUYmFlcqBwCLcBGAsYHQ/s1600/aurealisa-04.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon6{background:url(https://4.bp.blogspot.com/-v6I3nB0nS38/XbZAGliA9VI/AAAAAAAACb4/si4QD3FHW0s33wXZjXZgd69RsA-HrvgqgCLcBGAsYHQ/s1600/aurealisa-05.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon7{background:url(https://1.bp.blogspot.com/-Cx3PhcJObkw/XbZAHKZYmmI/AAAAAAAACb8/porbKeZzdmgy5A-EkOyt9thW26POPe9LgCLcBGAsYHQ/s1600/aurealisa-06.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon8{background:url(https://4.bp.blogspot.com/-Xcbcs0_TjF0/XbZAHt4nF7I/AAAAAAAACcA/DzPpwG7RDo81-6kMkpsHO9pRakuxMzJ-gCLcBGAsYHQ/s1600/aurealisa-07.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon9{background:url(https://4.bp.blogspot.com/-rSnshhh7ueM/XbZAH-LeN5I/AAAAAAAACcE/IMIOOBATAHAXWP50HC9FSYlK-wm4Os5cgCLcBGAsYHQ/s1600/aurealisa-08.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon10{background:url(https://2.bp.blogspot.com/-jYEhgRs6Jdw/XbZAIQ34tUI/AAAAAAAACcI/Ir6mHc1MM0InCWWDS1-z3GJG1b8qrjUpACLcBGAsYHQ/s1600/aurealisa-09.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon11{background:url(https://1.bp.blogspot.com/-UHnrPLKLN_U/XbZAI6RsKyI/AAAAAAAACcM/2G825JmJRg8u5q1gUpCMHGh-yee450U0QCLcBGAsYHQ/s1600/aurealisa-10.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon12{background:url(https://4.bp.blogspot.com/-opCsJ2MPF2U/XbZAJF_RSkI/AAAAAAAACcQ/9vcgXa8YdYgmcMkk5hUsKThfza6-R1HZACLcBGAsYHQ/s1600/aurealisa-11.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon13{background:url(https://2.bp.blogspot.com/-m8cBJIYY4nk/XbZAJRIcyqI/AAAAAAAACcU/YPLHCM9xTlUXqyhRFZj-YXpsurlVykUXwCLcBGAsYHQ/s1600/aurealisa-12.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon14{background:url(https://3.bp.blogspot.com/-rlmCJyD0m3I/XbZAJ51kP3I/AAAAAAAACcY/OuCuN7YFzFIT0Lsx9jLysVJGEHIGo5V3gCLcBGAsYHQ/s1600/aurealisa-13.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon15{background:url(https://1.bp.blogspot.com/-UD1lzXKdtz4/XbZAKL3FFrI/AAAAAAAACcc/3mJ64kgsJRc6Hs-Rzl3m4czaLp6Z2dT4wCLcBGAsYHQ/s1600/aurealisa-14.gif) no-repeat;display:inline-block;width:150px;height:150px}
.aurealisa_icon16{background:url(https://3.bp.blogspot.com/-2ek0Bc5MpJQ/XbZAKSXHv5I/AAAAAAAACcg/sC4_QhLfDoQlLIAsvuX88AJmbXPwOw6rQCLcBGAsYHQ/s1600/aurealisa-15.gif) no-repeat;display:inline-block;width:150px;height:150px}
</style>
<!-- 16 Emoji Gift Lucu Kelinci End -->
<!-- Mulai menampilkan --> 
<div class="aurealisa_icon1"></div>
<div class="aurealisa_icon2"></div>
<div class="aurealisa_icon3"></div>
<div class="aurealisa_icon4"></div>
<div class="aurealisa_icon5"></div>
<div class="aurealisa_icon6"></div>
<div class="aurealisa_icon7"></div>
<div class="aurealisa_icon9"></div>
<div class="aurealisa_icon10"></div>
<div class="aurealisa_icon11"></div>
<div class="aurealisa_icon12"></div>
<div class="aurealisa_icon13"></div>
<div class="aurealisa_icon14"></div>
<div class="aurealisa_icon15"></div>
<div class="aurealisa_icon16"></div>
<!-- Selesai menampilkan -->


Emoticon Facebook Kedua

<!-- 16 Emoji Gift Lucu Kelinci 2 -->
<style>
.aurealisaIcon1{background:url(https://1.bp.blogspot.com/-YSWmJb-0eFM/XbZDVhQxt2I/AAAAAAAACdA/uapi95n2NHsz2m1kqG5r-TVeon9GXsKHgCLcBGAsYHQ/s1600/aurealisa-01.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon2{background:url(https://4.bp.blogspot.com/-8gq6ZPNealg/XbZDVkpIWuI/AAAAAAAACdI/dNo2sNen5Ig8zLDucdw_oJp8wiiV8t44gCLcBGAsYHQ/s1600/aurealisa-02.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon3{background:url(https://1.bp.blogspot.com/-RUd-pudGcVo/XbZDViwV9DI/AAAAAAAACdE/3OtpyV6qhJYWm32qev5gWBC6Rx6YPlElACLcBGAsYHQ/s1600/aurealisa-03.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon4{background:url(https://4.bp.blogspot.com/-xfsVk8GLhV8/XbZDWi5YzyI/AAAAAAAACdM/sNdJ4ywEGKAFNI0iplk-aP_GAGN-dxR0wCLcBGAsYHQ/s1600/aurealisa-04.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon5{background:url(https://4.bp.blogspot.com/-QkbXx1EO4D4/XbZDXRmVWBI/AAAAAAAACdQ/R3PQL-nnHQo0cAGGMmMPGInPLEly8w3cQCLcBGAsYHQ/s1600/aurealisa-05.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon6{background:url(https://1.bp.blogspot.com/-iBZBS59ZdYs/XbZDXtTUi-I/AAAAAAAACdU/juNqoWzJujsZu1IKTYTDVxdbTdM8tO3cgCLcBGAsYHQ/s1600/aurealisa-06.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon7{background:url(https://4.bp.blogspot.com/-3mDJqDbd918/XbZDX2lIAMI/AAAAAAAACdY/517wFr8GQ-cnjpwlfm9tbpSh0qhs1vdagCLcBGAsYHQ/s1600/aurealisa-07.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon8{background:url(https://3.bp.blogspot.com/-DV7W4u6RQYM/XbZDYGoOnKI/AAAAAAAACdc/SDprnyXtPw8Fov6UizejBd7LPERUZ3xjACLcBGAsYHQ/s1600/aurealisa-08.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon9{background:url(https://4.bp.blogspot.com/-UunrxeX9jx0/XbZDYpLFZjI/AAAAAAAACdg/id1uvgwYR9ozcPFD0t-phTclDFqYWqYqwCLcBGAsYHQ/s1600/aurealisa-09.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon10{background:url(https://1.bp.blogspot.com/-O7PNKwYU3Xo/XbZDY1Oqc3I/AAAAAAAACdk/Zg1K8aGHUtg8ujyNMn1t_7eOtNieu_YKQCLcBGAsYHQ/s1600/aurealisa-10.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon11{background:url(https://1.bp.blogspot.com/-gz3UasHh2ew/XbZDZXDyeeI/AAAAAAAACdo/EiNrTzQ4w0cJq-h5cdUZ59aNKD5h8-pLACLcBGAsYHQ/s1600/aurealisa-11.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon12{background:url(https://3.bp.blogspot.com/-CU4nocNn5tw/XbZDZrN909I/AAAAAAAACds/scIBQcdnff8AB8TLSWaOyuZviqIsO1RYACLcBGAsYHQ/s1600/aurealisa-12.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon13{background:url(https://3.bp.blogspot.com/-RP7zjXd17R0/XbZDaIo9-jI/AAAAAAAACdw/dduxbCaW7bwT52f_1K5UA9ZgqkG_CwxIACLcBGAsYHQ/s1600/aurealisa-13.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon14{background:url(https://1.bp.blogspot.com/-TG-ko9_OePI/XbZDaWC-dlI/AAAAAAAACd0/N4C9RA_U5LU_5vm9kEP4lw_S0O5gWapFQCLcBGAsYHQ/s1600/aurealisa-14.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon15{background:url(https://3.bp.blogspot.com/-ywsT7YIOpbU/XbZDaxhLazI/AAAAAAAACd4/KfygMTzIr88ZO5BeZxAgyug3_dKIOHedACLcBGAsYHQ/s1600/aurealisa-15.gif) no-repeat;display:inline-block;width:240px;height:240px}
.aurealisaIcon16{background:url(https://3.bp.blogspot.com/-dy1LY5SdeCY/XbZDay6DfBI/AAAAAAAACd8/xTbdAiOt8qUmNxqpKKJGMi9j2GVukGjGwCLcBGAsYHQ/s1600/aurealisa-16.gif) no-repeat;display:inline-block;width:240px;height:240px}
</style>
<!-- 16 Emoji Gift Lucu Kelinci 2 -->
<!-- Mulai Menampilkan --> 
<div class="aurealisaIcon1"></div>
<div class="aurealisaIcon2"></div>
<div class="aurealisaIcon3"></div>
<div class="aurealisaIcon4"></div>
<div class="aurealisaIcon5"></div>
<div class="aurealisaIcon6"></div>
<div class="aurealisaIcon7"></div>
<div class="aurealisaIcon8"></div>
<div class="aurealisaIcon9"></div>
<div class="aurealisaIcon10"></div>
<div class="aurealisaIcon11"></div>
<div class="aurealisaIcon12"></div>
<div class="aurealisaIcon13"></div>
<div class="aurealisaIcon14"></div>
<div class="aurealisaIcon15"></div>
<div class="aurealisaIcon16"></div>
<!-- Selesai Menampilkan -->



Note : Jika anda memiliki pertanyaan atau keluhan tentang hak cipta, beri komentar di bawah ini untuk memberi tahu saya. Email milito:idnews.publik@gmail.com
Sign out
Membuat Komentar Terbaru Blogger Anti Spam Backlink

Membuat Komentar Terbaru Blogger Anti Spam Backlink

Pada artikel ini, saya hanya merepost artikel (copas) dan semoga kamu suka dengan adanya artikel ini, karna ini sangat bermanfaat jika kamu ...
Saturday, October 26, 2019
Pada artikel ini, saya hanya merepost artikel (copas) dan semoga kamu suka dengan adanya artikel ini, karna ini sangat bermanfaat jika kamu menerapkanya.


Membuat Komentar Terbaru Blogger Anti Spam Backlink

Sumber pertama adalah dari blog nya mankoin, dan yang kedua dan ketiga adalah dari hasil modifikasi yang saya dapat di google, antara lain Artisteer Tutorials dan Obesity Strike.


Komentar Blogger Simple SEO

Tutorial pertama adalah dari blog nya mainkoin, silahkan simak panduannya disini.


/* Komentar Blogger Simple SEO */
*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#comment-holder,.thread-chrome{margin:0;padding:0;position:relative;z-index:1}
b{font-weight:700}
cite,i{font-style:italic}
a,a:link{color:#2962ff}
a:link,a:visited{text-decoration:none}
p{margin-top:20px;margin-bottom:20px}
:focus{outline:0}
h4{line-height:normal;font-weight:700;margin-bottom:10px}
h4{font-size:110%}
li,ul{margin:5em 0}
ul{list-style:disc}
a:focus,a:hover,a:link:hover,a:visited:hover{color:#2962ff}
:target:before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
#comments h4{margin-top:0;font-size:22px}
#threaded-comment-form p,.comment-form p{line-height:24px;padding:10px;margin-top:0;border-radius:2px;position:relative;background-color:#eee;color:#444;font-size:16px;margin-bottom:10px;font-weight:500}
#threaded-comment-form p:before,.comment-form p:before{content:"";width:0;height:0;position:absolute;top:100%;left:30px;border:10px solid transparent;border-top-color:#eee;display:block}
.comment-replies{padding-left:10px;border-left:1px solid #ccc;margin-top:15px}
#comments .comment{list-style-type:none;padding:15px 10px;box-shadow:inset 0 -1px 0 0 rgba(100,121,143,.122);margin:0}
#comments .comment-reply{padding:10px 10px 5px;list-style-type:none;background-color:#fafafa;margin-bottom:0}
.avatar-image-container{width:35px;height:35px;float:left;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='35' height='35' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234374e0' d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat}
.comment-block:hover .item-control{opacity:1}
.comment-header a.user{font-size:15px;font-style:normal;font-weight:700;color:#202124}
.reply-to{cursor:pointer}
.comment-header .datetime a{bottom:0;color:rgba(0,0,0,.54);display:inline-block;font-size:13px;font-style:italic}
.datetime a{color:rgba(0,0,0,.54)}
.comment-content p{margin:7px 0 10px;font-size:16px}
#comment-editor{border:0;width:100%;height:250px}
.comments .continue{display:inline-block;margin-top:10px}
#addcomment+#threaded-comment-form{margin-top:-55px}
#addcomment{color:#fff;margin:20px 10px;text-align:center;padding:6px;cursor:pointer;font-weight:700;font-size:17px;border-radius:2px}
#addcomment{background-color:#31a954}
#comments .comment:hover{box-shadow:0 1px 3px 1px rgba(60,64,67,.15)}
.comment-reply:hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.3)}
.item-control{background-color:transparent;opacity:0}
.item-control,.item-control:hover{position:absolute;top:0;right:0;padding:5px;border-radius:17px}
.comment-block{position:relative}
.item-control a:before{content:'';border-radius:50%;background-color:rgba(32,33,36,.059);line-height:0;width:24px;height:24px;display:none}
.item-control a:after,.reply-to:before{content:'';width:24px;height:24px;background-repeat:no-repeat;vertical-align:middle}
.item-control a:after{opacity:54;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23000000' d='M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:24px 24px;display:block}
.comment-header{margin-left:45px;line-height:17px}
.reply-to{color:#5f6368;padding:3px 8px 5px 5px;box-shadow:inset 0 0 0 1px #dadce0;border-radius:4px}
.comment-actions{margin:10px 0 0}
.comment-reply:hover .item-control,.item-control:hover a::after{opacity:1}
.reply-to:before{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23757575' d='M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:20px 20px;display:inline-block}
.item-control:hover,.reply-to:hover{background-color:rgba(32,33,36,.059)}
.comment-replies .author-avatar{background-color:#fafafa}
.user{display:block}

Kemudian cari kode <b:includable id='threadedComments' var='post'> dan </b:includable>, ganti dengan kode berikut.
<b:includable id='commentblock' var='cb'>
 <div class='comment-block' itemprop='comment' itemscope='' itemtype='https://schema.org/Comment'>
 <div class='avatar-image-container'>
 <b:if cond='data:cb.level.authorAvatarSrc != &quot;//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35&quot;'>
 <img class='author-avatar' expr:alt='data:cb.level.author' expr:src='data:cb.level.authorAvatarSrc' expr:title='data:cb.level.author' height='35' width='35' />
 </b:if>
 </div>
 <div class='comment-header'><b:if cond='data:cb.level.author != &quot;Unknown&quot;'><a expr:href='data:cb.level.authorUrl' rel='noopener external nofollow' target='_blank' class='user' itemprop='author' itemscope='' itemtype='https://schema.org/Person'><span itemprop='name'><data:cb.level.author/></span></a><b:else/><span class='user'>Unknown</span></b:if><span class='datetime secondary-text' itemprop='datePublished'><a expr:href='&quot;#c&quot; + data:cb.level.id' itemprop='url'><data:cb.level.timestamp/></a></span></div>
 <div class='comment-content' itemprop='text'>
 <p>
 <b:if cond='data:cb.level.authorUrl != data:post.author.profileUrl'><b:eval expr='data:cb.level.body snippet { links: false }' /><b:else/>
 <data:cb.level.body/>
 </b:if>
 </p>
 </div>
 <b:if cond='data:cb.d'><span expr:class='&quot;item-control &quot; + data:cb.level.adminClass'><a expr:href='data:cb.level.deleteUrl' rel='noopener external nofollow' target='_blank'/></span></b:if>
 </div>
</b:includable>
<b:includable id='threadedComments' var='post'>
 <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
 <h4><data:messages.postAComment/>:</h4>
 <b:if cond='data:post.numberOfComments &gt; 0'>
 <div class='comments-content'>
 <meta expr:content='data:post.numberOfComments' itemprop='commentCount' />
 <ol id='comment-holder'>
 <b:loop values='data:post.comments where (c =&gt; not c.inReplyTo)' var='commentLevel1'>
 <li class='comment' expr:id='&quot;c&quot; + data:commentLevel1.id'><b:include data='{level: data:commentLevel1,d: true}' name='commentblock' />
 <div class='comment-actions'><span class='reply-to' expr:data-reply-to='data:commentLevel1.id'>Balas</span></div>
 <b:with value='data:post.comments where (c =&gt; c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
 <b:if cond='data:commentL2.size != &quot;0&quot;'>
  <div class='comment-replies'>
  <ul class='thread-chrome thread-expanded'>
  <b:loop values='data:commentL2' var='commentLevel2'>
  <li class='comment-reply' expr:id='&quot;c&quot; + data:commentLevel2.id'><b:include data='{level: data:commentLevel2,d: true}' name='commentblock' /></li>
  </b:loop>
  </ul>
  <div class='continue'><span class='reply-to' expr:data-reply-to='data:commentLevel1.id'>Balas</span></div>
  </div>
 </b:if>
 </b:with>
 </li>
 </b:loop>
 </ol>
 </div>&lt;div class=&#39;comment-form&#39;&gt;
 <script>
 var comment = true;
 </script>
 <div aria-label='Berkomentar' id='addcomment' role='button'>Tambahkan Komentar</div><b:else/>
 <meta content='0' itemprop='commentCount' />
 <script>
 var comment = false;
 </script>&lt;div class=&#39;comment-form&#39;&gt;</b:if>
 <div id='threaded-comment-form'>
 <p>Berkomentar sopan dan baik. Ada kata buruk atau berisi tautan url/link aktif, komentar tidak akan disetujui atau disetujui dengan link mati! | Berdiskusi gunakan <b>Disqus</b>!</p>
 <iframe class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc' height='250' id='comment-editor' name='comment-editor' width='100' />
 </div>&lt;/div&gt;</section>
<script>//<![CDATA[mankoin.blog
document.addEventListener("DOMContentLoaded", function() {
 var a=document,
 b = a.getElementById("comment-editor"),
 d = b.getAttribute("data-src");
 if (b.setAttribute("src", d), 1 == comment) {
 var f = a.getElementsByClassName("reply-to"),
  c = a.getElementById("threaded-comment-form"),
  h = f.length,
  k = function(b, d, e, f) {
  b.addEventListener("click", function() {
  var c = b.getAttribute("data-reply-to");
  a.getElementById("c" + c).appendChild(d);
  e.src = f + "&parentID=" + c
  })
  };
 for (i = 0; i < h; i++) k(f[i], c, b, d);
 var l = a.getElementsByClassName("comment-form")[0];
 a.getElementById("addcomment").addEventListener("click", function() {
  l.appendChild(c);
  b.src = d
 })
 }
}); //]]></script>
 </b:includable>


Fitur Komentar Blogger Simple SEO

  • Valid HTML5 - memiliki struktur yang baik
  • Sangat Ringan - tanpa javascript eksternal
  • SEO - dengan schema.org
  • Threaded comment - komentar bertingkat (balas komen)
  • Anti backlink - menghapus link aktif apapun pada komentar dengan snippet.
  • Valid AMP - bisa digunakan untuk blog AMP


Komentar Blogger Bertingkat Anti Spam tanpa Pop Up

Tutorial kedua adalah dari blognya Obesity Strike
/* KOMENTAR tanpa Pop Up */
.comments{font:13px &quot;Lucida Grande&quot;,Tahoma,Verdana,Arial,sans-serif!important;color:#999;}
.comments a{color:#2D5E7B}
.cf:before,.cf:after{content:&quot;&quot;;display:table}
.cf:after{clear:both}
.cl{display:block;clear:both}
#comments h4{font-size:18px;font-weight:normal;margin:20px 0}
.cm_wrap{margin-bottom:30px}
.delete{border-radius:4px;padding:9px 12px;color:#FFF;background-color:#8D2079}
.avatar-image-container{float:left;max-height: 36px;overflow: hidden;width: 36px;}
.avatar-image-container img{width:35px;height:35px;border-radius: 50%;}
.avatar-image-container img[src$=&quot;blogblog.com/img/blank.gif&quot;]{background: url(&#39;data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIwAjAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t8VPZ2NxqE6w20MlxKeiRqWP6VB+Fe1/C/SYLHwxDdIoM90Wd374DEAfTj8yaAPJtS8N6ppEYkvLGeCM/xsvy/nWbivpeeCO5heKZFkicFWRhkEdwa+d9fsE0vW760jOY4ZmRST2BOKAKGKKUUUAJn3r1z4TXOpf2W1vPat/Z4JaC4Y45J5UDuM5OfrXA+CNAHiLxBDbSZNugMs2O6jt+JIH4171FGsMaoihEUAKqjAA7AUAVtXuLq10+aWytvtd0q/JEWC5P1NfO9+9w99cNdhluWkZpQ4w24nnI+tfSdedfFnw5HNYrq8KBZoiEmIH3lPAJ9wcD8fagDyrPvRRzRQB6H8GVB1PUTjkQqM/wDAv/rV6waKKAErC8cqH8I6pkZ/ck/qKKKAPAgOKKKKAP/Z&#39;) no-repeat center center;}
.cm_reply{padding:6px;color:#fff;text-align:center;text-decoration:none;border-radius:2px;background-color:#E5E5E5;font:11px/18px sans-serif;display:inline-block;width:44px;margin:3px 0 0;line-height:1;cursor:pointer;border-width:1px;border-style:solid;border-right:1px solid #C4C4C4;border-color:#E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4}
.cm_reply:hover{text-decoration:none!important;background-color:#fefefe}
.cm_body{position: relative;padding: 20px;margin-left: 45px;border: 2px solid #efefef;border-radius: 10px;word-break: break-word;}
.cm_header{padding:0;margin:0 0 10px;overflow:hidden}
.name{margin:0;padding:0;float:left}
.cm_text{font-size:13px;margin: 0 0 15px;text-align: left;line-height: 1.6;color: #555555;}
pre,i[rel=&quot;pre&quot;]{padding:0.8em 1em;margin:0;background-color:#222;border-left:4px solid #40627E;font-size:13px;color:#839496;font-family:Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,monospace;line-height:1.4em;position:relative;word-wrap:normal;white-space:pre;overflow:auto}
blockquote,b[rel=&quot;quote&quot;]{margin:0;position:relative;font-style:italic;border-left:3px solid #C69F73;padding:0 18px}
.cm_date{font-size:11px;margin-left: 6px;}
.cm_pagenavi{font-size:10px;text-transform:uppercase;color:#666;text-shadow:1px 1px white;font-weight:bold}
.cm_pagenavi a{color:#666;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{color:#888;background:white;padding:4px;border:1px solid #E0E0E0}
.comment-form {overflow: hidden;margin-top: 20px;}
iframe#comment-editor {min-height: 10px;}
.comment-form p{margin:40px 0 0;background-color:#fff;padding:10px;color:#000;line-height:20px;font-size:11px;border-radius:3px;position:relative;border:1px solid #ddd}
.comment-form p:before,.comment-form p:after{content:&quot;&quot;;width:0;height:0;position:absolute;top:100%;left:15px;border-width:12px;border-image:none;border-style:solid;border-color:#ddd transparent transparent}
.comment-form p:after{left:17px;border-width:10px;border-color:#fff transparent transparent}
.loader{background-image:url(&#39;data:image/gif;base64,R0lGODlhKwALAPEAAP///2aZzLPM5WaZzCH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=&#39;);background-repeat:no-repeat;background-position:50% 50%}
.batal{margin:0;padding:10px;border:1px solid #4B81AA;color:#fff!important;text-align:center;text-shadow:0 -1px 0 white;text-decoration:none;border-radius:2px;background-color:#468BC1;display:none;height:15px;width:30px}
.emo{cursor: pointer;width:17px;height:16px;display:inline-block;background-image:url(&quot;data:image/png;base64,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&quot;);background-repeat:no-repeat;background-size:auto auto;vertical-align:middle}
.smile{background-position:0 -324px}
.sad{background-position:0 -103px}
.melet{background-position:0 -375px}
.mrangas{background-position:0 -154px}
.oo{background-position:0 -120px}
.ok{background-position:0 -426px}
.koco{background-position:0 -137px}
.kocoi{background-position:0 -358px}
.uu{background-position:0 -392px}
.nangis{background-position:0 -69px}
.jahat{background-position:0 -86px}
.apa{background-position:0 0}
.kiss{background-position:0 -222px}
.hati{background-position:0 -189px}
.imut{background-position:0 -205px}
.lha{background-position:0 -341px}
.ori{background-position:0 -52px}
.oka{background-position:0 -35px}
.sepet{background-position:0 -409px}
.pacman{background-position:0 -239px}
.wkwk{background-position:0 -18px}
.emotki{margin:20px 0}
.emone{text-align:center;float:left}
.texte{padding:0;text-align:center;margin:0 0 0 3px;letter-spacing:1px;width:2em;vertical-align:middle;border:1px solid #ddd;box-shadow:medium none}
.batal:hover{text-decoration:none}
.cm_wrap .batal{display:block}
.cm_wrap[style*=&quot;margin-left:25%&quot;] .cm_reply{display:none}

Sekarang cari kode <b:includable id='comments' var='post'> dan ganti kode tersebut dengan kode dibawah ini, sampai kode penutupnya yaitu kode </b:includable>
      <b:includable id='comments' var='post'>
<div class='comments' id='comments' itemscope='itemscope' itemtype='http://schema.org/Comment'>
    <meta expr:content='data:post.title' itemprop='about'/>
    <meta expr:content='data:post.canonicalUrl' itemprop='discussionUrl'/>
  <b:if cond='data:post.allowComments'>
          <h3> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0</span> Komentar untuk &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span> Komentar untuk &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span> Komentar untuk &quot;<data:blog.pageName/>&quot; </b:if> </h3>

    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container cl cf'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160;
        <data:post.commentRangeText/>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div id='comment_block'>
      <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.author == data:post.author'>
          <div expr:id='&quot;a&quot; + data:comment.id'>
            <div class='cm_wrap admin cl cf' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.isDeleted'>
                <div class='delete'>
                  <data:comment.body/>
                </div>
                <b:else/>
                <div class='avatar-image-container'>
                  <img class='lazy' expr:alt='data:comment.author' expr:data-src='data:comment.authorAvatarSrc' expr:title='data:comment.author' src='data:image/gif;base64,R0lGODlhAgABAIAAAO/v7wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw=='/>
                </div>
                <div class='cm_body'>
                    <header class='cm_header cf'>
                      <h5 class='name'>
                        <b:if cond='data:comment.authorUrl'>
                          <a><span itemprop='creator'><data:comment.author/></span></a>
                          <b:else/>
                          <data:comment.author/>
                        </b:if>
                      </h5>
                    </header>
                    <div class='cm_text admin' itemprop='text'>
<b:if cond='data:comment.inReplyTo'>@<a expr:href='&quot;#a&quot; + data:comment.inReplyTo'>Balasan</a></b:if>
   <b:if cond='data:comment.authorUrl != data:post.author.profileUrl'>
    <b:eval expr='data:comment.body snippet { links: true }'/>
    <b:else/>
    <data:comment.body/>
   </b:if>
                    </div>
                    <footer class='cm_date' itemprop='datePublished'>
                      <a expr:href='&quot;#c&quot; + data:comment.id' rel='nofollow ugc'><data:comment.timestamp/></a>
                    </footer>
                  <footer class='response' style='margin-bottom: -26px;'>
                    <a class='cm_reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>Balas</a>
                  </footer>
                </div>
              </b:if>
            </div>
          </div>
          <b:else/>
          <div expr:id='&quot;a&quot; + data:comment.id'>
            <div class='cm_wrap cl cf' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.isDeleted'>
                <div class='delete'>
                  <data:comment.body/>
                </div>
                <b:else/>
                <div class='avatar-image-container'>
                  <img class='lazy' expr:alt='data:comment.author' expr:data-src='data:comment.authorAvatarSrc' expr:title='data:comment.author' src='data:image/gif;base64,R0lGODlhAgABAIAAAO/v7wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw=='/>
                </div>
                <div class='cm_body'>
                    <header class='cm_header cf'>
                      <h5 class='name'>
                        <b:if cond='data:comment.authorUrl'>
                          <a><data:comment.author/></a>
                          <b:else/>
                          <data:comment.author/>
                        </b:if>
                      </h5>
                    </header>
                    <div class='cm_text visitor' itemprop='text'>
                      <b:if cond='data:comment.inReplyTo'>@<a expr:href='&quot;#a&quot; + data:comment.inReplyTo'>Balasan</a></b:if>
   <b:if cond='data:comment.authorUrl != data:post.author.profileUrl'>
    <b:eval expr='data:comment.body snippet { links: false }'/>
    <b:else/>
    <data:comment.body/>
   </b:if>
                    </div>
                    <footer class='cm_date' itemprop='datePublished'>
                      <a expr:href='&quot;#c&quot; + data:comment.id' rel='nofollow ugc'><data:comment.timestamp/></a>
                    </footer>
                  <footer class='response' style='margin-bottom: -26px;'>
                    <a class='cm_reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>Balas</a>
                  </footer>
                </div>
              </b:if>
            </div>
          </div>
        </b:if>
      </b:loop>
    </div>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container cl cf'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160;
        <data:post.commentRangeText/>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div class='comment-form' id='comment-form'>
      <p>
        <data:blogCommentMessage/>
        Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
        <br/>
        Untuk menyisipkan tautan dengan aman, gunakan kode 
        <code>
          [url=http://example.com]Teks Tautan[/url]
        </code>
        <br/>
        Untuk menyisipkan kode, gunakan tag 
        <code>
          &amp;lt;i rel=&quot;code&quot;&amp;gt;KODE ANDA&amp;lt;/i&amp;gt;
        </code>
        <br/>
        Kode yang panjang bisa menggunakan tag 
        <code>
          &amp;lt;i rel=&quot;pre&quot;&amp;gt;KODE PANJANG ANDA&amp;lt;/i&amp;gt;
        </code>
        <br/>
        Untuk menyisipkan gambar, gunakan kode 
        <code>
          [img]URL GAMBAR[/img]
        </code>
        <br/>
        Untuk menyisipkan judul, gunakan tag 
        <code>
          &amp;lt;b rel=&quot;h4&quot;&amp;gt;JUDUL ANDA DI SINI...&amp;lt;/b&amp;gt;
        </code>
        <br/>
        Untuk menciptakan efek tebal gunakan tag 
        <code>
          &amp;lt;strong&amp;gt;TEKS ANDA DI SINI...&amp;lt;/strong&amp;gt;
        </code>
        <br/>
        Untuk menciptakan efek huruf miring gunakan tag 
        <code>
          &amp;lt;em&amp;gt;TEKS ANDA DI SINI...&amp;lt;/em&amp;gt;
        </code>
        <br/>
        <br/>
        <br/>
      </p>
      <div class='emotki' id='emo_box'> :) :( :p :D :o ;) 8-) 8:) :/ :&#39;( 3:) O:) :* &amp;lt;3 ^_^ -_- o.O O.o &gt;:o :v :3
      </div>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' id='comment-editor-src'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' id='comment-editor-src'/>
      </b:if>
      <div>
        <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' width='100%'/>
      </div>
      <a class='batal' href='javascript:replyTo(&quot;cancel&quot;);'>Batal</a>
      <data:post.friendConnectJs/>
 <data:post.cmtfpIframe/>
 <script>
  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
 </script>
<script>
// Komentar
//<![CDATA[
!function(e,a){function s(){var e=-1;if("Microsoft Internet Explorer"==navigator.appName){var a=navigator.userAgent,s=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");null!=s.exec(a)&&(e=parseFloat(RegExp.$1))}return e}function l(e){var s=e.target.id,l=a.querySelector("#emo_box #"+s);l.parentNode.insertBefore(y,l.nextSibling),y.type="text",y.className="texte",y.value=l.title,y.select()}var r=(e.location.href,a.getElementById("comment_block")),t=r.innerHTML,n=[],o=[],i=[],c=0,p="",m="",d="",g=0,f=0,u=0,b=0,v="",h="",$="",x=a.getElementById("emo_box"),y=a.createElement("input"),k=a.getElementById("comment-editor").src.split("#");e.replaced=function(e,a){var s=a,s=s.replace(/^(<br ?\/?>|&nbsp;)+/i,"").replace(/(<br ?\/?>)+(:|;|\^|=)/gi,"<br> $2").replace(/^(&nbsp;|<br ?\/?>| <br ?\/?>)+/gi,"").replace(/\@<a href="\#c([0-9]+)\"( rel="nofollow")?>.*?<\/a>\:? ?/g,"").replace(/\s:\)+/g," <span class='emo smile' id='emo1' title=' :)'></span>").replace(/\s:\(/g," <span class='emo sad' id='emo2' title=' :('></span>").replace(/\s;\)/g," <span class='emo ok' id='emo3' title=' ;)'></span>").replace(/\s:p/gi," <span class='emo melet' id='emo4' title=' :p'></span>").replace(/\s:3/g," <span class='emo wkwk' id='emo5' title=' :3'></span>").replace(/\s:v/g," <span class='emo pacman' id='emo6' title=' :v'></span>").replace(/\s:D/g," <span class='emo mrangas' id='emo7' title=' :D'></span>").replace(/\so.O/g," <span class='emo ori' id='emo8' title=' o.O'></span>").replace(/\sO.o/g," <span class='emo oka' id='emo9' title=' O.o'></span>").replace(/\s:o/g," <span class='emo oo' id='emo10' title=' :o'></span>").replace(/\s:\//gi," <span class='emo uu' id='emo11' title=' :/'></span>").replace(/\s:'\(/g," <span class='emo nangis' id='emo12' title=' :&#39;('></span>").replace(/\s\^(\_|)\^/g," <span class='emo imut' id='emo13' title=' ^_^'></span>").replace(/\s\-(\_|)\-/g," <span class='emo lha' id='emo14' title=' -_-'></span>").replace(/\s&gt;:o/gi," <span class='emo sepet' id='emo15' title=' &gt;:o'></span>").replace(/\s&lt;3/gi," <span class='emo hati' id='emo16' title=' &lt;3'></span>").replace(/\s:\*/g," <span class='emo kiss' id='emo17' title=' :*'></span>").replace(/\sO:\)/g," <span class='emo apa' id='emo18' title=' O:)'></span>").replace(/\s3:\)/g," <span class='emo jahat' id='emo19' title=' 3:)'></span>").replace(/\s8:\)/g," <span class='emo kocoi' id='emo20' title=' 8:)'></span>").replace(/\s8-\)/g," <span class='emo koco' id='emo21' title=' 8-)'></span>").replace(/\[note\](.*?)\[\/note\]/gi,"<div class='note'>$1</div>").replace(/\[(youtube|iframe)\](.*?)\[\/(youtube|iframe)\]/gi,"<div class='loader'><iframe class='video' src='$2' frameborder='0'></iframe></div>").replace(/<em rel="note">(.*?)<\/em>/gi,"<div class='note'>$1</div>").replace(/<b rel="quote">(.*?)<\/b>/gi,"<blockquote>$1</blockquote>").replace(/<i rel="pre">(.*?)<\/i>/gi,"<pre><code>$1</code></pre>").replace(/<i rel="code">(.*?)<\/i>/gi,"<code>$1</code>").replace(/<b rel="h([0-6])">(.*?)<\/b>/gi,"<h$1>$2</h$1>").replace(/<i rel="anchor">(.*?)<\/i>/gi,"<a class='allow' href='$1' rel='nofollow'>$1</a>").replace(/\[(link|url)\](.*?)\[\/(link|url)\]/gi,"<a class='allow' href='$2' rel='nofollow'>$2</a>").replace(/\[url\=('|")?(.*?)('|")?\](.*?)\[\/url\]/gi,"<a class='allow' href='$2' rel='nofollow'>$4</a>").replace(/(<i rel="image">|\[img\])(.*?)(<\/i>|\[\/img\])/gi,"<img class='center besar' src='$2' alt='Loading...'>").replace(/<\/h([0-6])>(<br ?\/?>)+/g,"</h$1>");e.innerHTML=s},e.replyTo=function(e){var s=a.getElementById("comment-editor"),l=a.getElementById("comment-form"),r=a.getElementById("cancel"!=e?"c"+e:"comments"),t=k;s.className+=" transparent",s.parentNode.className+=" loader",s.src="cancel"!=e?t[0]+"&parentID="+e+"#"+t[1]:t[0]+"#"+t[1],r.insertBefore(l,null),s.onload=function(){this.className=this.className.replace(/ transparent/g,""),this.parentNode.className=this.parentNode.className.replace(/ loader/g,"")}};var E=s();if(-1==E||E>=9){for(;-1!=t.indexOf('id="a');)g=t.indexOf('id="a'),t=t.substring(g+4),g=t.indexOf('"'),n[c]=t.substring(0,g),t=t.substring(g),o[c]=a.getElementById(n[c]).innerHTML,i[c]=0,c++;for(g=0;c-1>g;g++)for(f=g+1;c>f;f++)if(-1!=o[f].indexOf(n[g])){for(p=n[f],m=o[f],i[f]=i[g]+1,d=i[f],b=g+1;f>b&&!(i[b]<d);b++);for(u=f;u>b;u-=1)n[u]=n[u-1],o[u]=o[u-1],i[u]=i[u-1];n[b]=p,o[b]=m,i[b]=d}for(g=0;c>g;g++)f=o[g].indexOf('@<a href="#a'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f+1),f=$.indexOf("</a>"),$=$.substring(f+4),o[g]=h+$),f=o[g].indexOf('class="cm_wrap'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f),i[g]>6&&(i[g]=6),o[g]=h+'style="margin-left:'+(0+5*i[g])+'%" '+$),v+=o[g];replaced(r,v),replaced(x,x.innerHTML),r.style.display="block"}else replaced(r,"<h4><em>Old IE Suck!</em></h4>");for(var p=0;p<x.children.length;p++){var N=x.children[p];N.addEventListener("click",l,!1)}var O=[".texte"];e.addEventListener("mouseup",function(e){for(var s=0;s<O.length;s++){var l=a.querySelector(O[s]);e.target!=l&&e.target.parentNode!=l&&l.parentNode.removeChild(l)}})}(window,document);
//]]>
</script>
    </div>
  </b:if>
</div>
</b:includable>


Fitur Komentar Bertingkat Anti Spam tanpa Pop Up

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
menyisipkan Gambar, Shortcode, dan banyak lainya.

Terakhir, tinggal mengaktifkan thread comment ini, yaitu dengan cara mencari semua kode yang nampak seperti ini:
<b:include data='post' name='threaded_comments'/>
Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:
<b:include data='post' name='comments'/>

Klik Simpan dan lihat hasilnya!


Sign out
Cara Membuat Lazyload Image Ala IDNews.co

Cara Membuat Lazyload Image Ala IDNews.co

Pengalaman pengguna yang perlu diperhatikan oleh setiap webmaster, ketika menjumpai situs web dengan pemuatan yang lambat, itu akan membuat ...
Sunday, October 20, 2019
Pengalaman pengguna yang perlu diperhatikan oleh setiap webmaster, ketika menjumpai situs web dengan pemuatan yang lambat, itu akan membuat mereka meninggalkan situs anda. Jadi selain konten, anda juga perlu mempertimbangkan masalah mengoptimalkan waktu membuka halaman.



Cara di bawah adalah pengalaman yang saya pelajari dalam proses meningkatkan kinerja halaman Tutorial IDNews.co ini.

Berikut tutorial menerapkan lazyload image di blog :

1. Salin css dibawah ini pada template kamu, kemudian sesuaikan lagi sesuai selera.


@keyframes idnewscoShake {
 0% {
  background-position: -400px 0
 }
 100% {
  background-position: 400px 0
 }
}

@-webkit-keyframes idnewscoShake {
 0% {
  background-position: -50% 0
 }
 100% {
  background-position: 50% 0
 }
}

@-moz-keyframes idnewscoShake {
 0% {
  background-position: -50% 0
 }
 100% {
  background-position: 50% 0
 }
}

.idnewscoShake {
 background: #eeeeee linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, .75) 20%, rgba(255, 255, 255, 0) 30%);
 background-size: 100% 100%;
 animation: aurealisaShake 3s linear infinite;
 -moz-animation: idnewscoShake 3s linear infinite;
 -webkit-animation: aurealisaShake 3s linear infinite;
 -o-animation: aurealisaShake 3s linear infinite
}

.idnewscoShake img {
 opacity: 0;
 transition: 1s all
}

2. Masukkan js dibawah ini sebelum head, catatan : kode sudah di minify sepenuhnya.
<script>
//<![CDATA[//
// LazyLoad by Idnews.co
function LazyOnScroll(){setTimeout(function(){function e(){for(var e=document.getElementsByClassName("lazy"),n=0;n<e.length;n++)t(e[n])&&(e[n].src=e[n].getAttribute("data-src"));var o;o=document.querySelectorAll(".aurealisaShake"),[].forEach.call(o,function(e){e.classList.remove("aurealisaShake")})}function t(e){var t=e.getBoundingClientRect();return t.bottom>=0&&t.right>=0&&t.top<=(window.innerHeight||document.documentElement.clientHeight)&&t.left<=(window.innerWidth||document.documentElement.clientWidth)}function n(e,t){window.addEventListener?window.addEventListener(e,t):window.attachEvent("on"+e,t)}n("load",e),n("scroll",e),document.addEventListener("DOMContentLoaded",function(){"use strict";for(var e=document.querySelectorAll("a"),t=e.length,n=/firefox|trident/i.test(navigator.userAgent)?document.documentElement:document.body,o=function(e,t,n,o){return(e/=o/2)<1?n/2*e*e*e+t:n/2*((e-=2)*e*e+2)+t};t--;)e.item(t).addEventListener("click",function(e){var t,i=n.scrollTop,r=document.getElementById(/[^#]+$/.exec(this.href)[0]).getBoundingClientRect().top,d=n.scrollHeight-window.innerHeight,c=d>i+r?r:d-i,l=function(e){var r=e-(t=t||e),d=o(r,i,c,900);n.scrollTop=d,900>r&&requestAnimationFrame(l)};requestAnimationFrame(l),e.preventDefault()})})},1e3)}window.addEventListener?window.addEventListener("load",LazyOnScroll,!1):window.attachEvent?window.attachEvent("onload",LazyOnScroll):window.onload=LazyOnScroll;
//]]>
</script>

3. Simpan dan lihat hasilnya.
Sign out
Cara Mudah Mempercepat kecepatan tampilan Blogger

Cara Mudah Mempercepat kecepatan tampilan Blogger

PageSpeed Insights Poin terakhir adalah penggunaan cache browser. adsbygoogle.js dan analytics.js adalah masalah, tetapi karena ini adal...
Thursday, October 17, 2019

PageSpeed Insights

Poin terakhir adalah penggunaan cache browser. adsbygoogle.js dan analytics.js adalah masalah, tetapi karena ini adalah file eksternal, saya menyerah.

Selain itu, tergantung pada waktu respons server, mungkin jumlahnya tidak stabil sekitar 86 poin. Karena waktu respons server tidak dapat mengatasinya, itu adalah pujian.


Kecepatan semakin ditingkatkan dengan menerapkan pemuatan lazyload. Kamu sekarang dapat secara stabil mendapatkan skor sempurna 100 poin.


GTmetrix

Masalahnya telah ditunjukkan hampir sama dengan PageSpeed ​​Insights.

Saya puas secara pribadi karena pemuatan halaman dipotong beberaopa detik saja.




Ini juga lebih cepat. Namun, ini tetap merupakan indikasi. Peramban dan kebocoran kompresi beberapa byte telah ditunjukkan.


Lighthouse(Audits)

Ini juga skor sempurna bukan :vos

Sebagai cerita orang, halaman atas tidak memiliki iklan, jadi itu jauh lebih cepat daripada halaman artikel dengan iklan. Halaman atas berukuran di atas. Namun, karena penerapan pemuatan lazy, kecepatan telah ditingkatkan pada halaman penempatan GoogleAdsense. Saat ini, bahkan halaman artikel memiliki nilai numerik yang sebanding dengan hasil pengukuran di atas.

Hapus JS standar

Jika widget.js tidak diperlukan, tentukan b:if='false' di tag html. Namun, jika widget.js dihapus, beberapa bagian widget tidak akan berfungsi.
<html b:js='false'>

Jika plusone.js tidak diperlukan, ganti tag </body> dengan deskripsi berikut.
&lt;!--</body>--&gt;&lt;/body&gt;

Jika keduanya tidak diperlukan, komentar pada bagian pemuatan widget.js akan dihapus jika kedua modifikasi di atas dibuat, sehingga bagian HTML yang tidak perlu akan berkurang. Proses memuat widget.js besar dan efektif.

* Formulir pertanyaan dapat diganti dengan GoogleAppsScript
Buat formulir pertanyaan dengan GoogleAppsScript (comming soon)

* Jika JS standar dihapus, lebar dan tinggi halaman berikut mungkin tidak ditampilkan dengan benar.
Blogger > Tata Letak


Hapus CSS standar

Jika widget_css_bundle.css tidak diperlukan, tentukan b:css='false' di tag html. Namun, jika widget_css_bundle.css dihapus, tampilan halaman mungkin rusak. Mari sebaris bagian yang diperlukan.
<html b:css='false'>

Jika otorisasi.css tidak diperlukan, ganti tag </head> dengan deskripsi berikut.
&lt;/head&gt;&lt;!--</head>--&gt;

Jika keduanya tidak perlu, modifikasi kedua hal di atas akan menghapus komentar di bagian bacaan otorisasi.css, mengurangi bagian HTML yang tidak perlu.


Tunda membaca kolom komentar

Tunda membaca kolom entri komentar sampai pengguna mengklik tindakan. Kecepatan tampilan halaman ditingkatkan dengan menunda pembacaan elemen eksternal iframe.

Tingkatkan komentar Blogger
Tentang peningkatan bidang komentar yang diterapkan sebagai bagian dari akselerasi Blogger.

Defaultnya
  • Secara default, bilah gulir ditampilkan karena ketinggian tidak mencukupi
  • Area iframe mungkin terlalu besar saat ditampilkan dalam scrip
  • Memuat skrip eksternal (comment_from_post_iframe.js) sebagai standar
  • Pemuatan halaman tertunda
  • Baca iframe saat memuat halaman
  • Munculan
  • Komentar ditampilkan dalam sembulan
  • Komentar digandakan karena ditampilkan di halaman
  • Untuk seluler, itu akan tertanam secara paksa
  • Halaman penuh
  • Pindah ke halaman eksternal
  • Umum
  • scrip blogger.com perlu diaktifkan

Perbaikan
  • Gunakan penyematan
  • Amankan ketinggian dan tahan tampilan bilah gulir
  • Buat itu berfungsi tanpa scrip eksternal
  • Namun, fungsi balasan tidak dapat digunakan.
  • Baca iframe setelah meminta komentar (klik)
  • Namun, ada penundaan waktu tertentu dari permintaan ke pembacaan iframe

Hasil
Muat iframe saat mengklik "Kirim Komentar".

Berikut tutorial membuat lazyload komentar blogger

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a id='comment-form-btn' style='display:block;text-align:center;'><data:postCommentMsg/></a>
    <noscript>
      <style>.comment-form-btn{display:none !important;}</style>
      <a style='display:block;text-align:center;' title='Harap aktifkan JavaScript.'><data:postCommentMsg/></a>
    </noscript>
    <script type='text/javascript'>
(function() {
  let src = &#39;<data:post.commentFormIframeSrc/>&#39;;
//<![CDATA[
  function onClick() {
    let btn = document.querySelector('#comment-form-btn');
    btn.insertAdjacentHTML('afterend', "<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='"+src+"' style='min-height:200px;margin-top:10px;' width='100%'/>");
    btn.style.display = 'none';
    btn.removeEventListener('click', onClick);
   };
   document.querySelector('#comment-form-btn').addEventListener('click', onClick);
})();
//]]>
    </script>
  </div>
</b:includable>

* Ganti => <b:includable id='comment-form' var='post'>


Teks daftar artikel dihilangkan

Ubah artikel pada halaman pencarian dari <data:post.body/> menjadi <data:post.snippet/>. Volume komunikasi akan sangat berkurang. (Kamu mungkin hanya perlu judul dan gambar sebelum menghilangkan..)


Kurangi komentar HTML

Jika kamu menggunakan <!-- ... --> mengomentari dalam template Blogger, kamu akan diarahkan ke kompresi HTML.

Sebagai tindakan balasan, bagian komentar yang tidak perlu dihapus. Lebih baik meninggalkan templat skala kecil (misal <!-- .widget-footer -->) dari sudut pandang keterbacaan. Ada metode untuk menghapus skala besar (beberapa baris) dengan <b:comment>. (Render salah secara default, sehingga dapat dihilangkan)
<b:comment render='false'>
...
</b:comment>

Lainnya
Ini adalah rencana untuk mempercepat tingkat kepuasan. Pertanyaannya tetap, apakah masuk akal?
Muat favicon.ico terlebih dahulu

IDNews.co tidak tahu siapa Blogger / GTmetrix / browser, tetapi ketika memuat halaman, favicon.ico dimuat di akhir pemuatan. Memuat lambat. Menggunakan favicon.ico di halaman akan mempercepat karena favicon.ico terakhir tidak akan dimuat.


Jangan memuat gambar komentar anonim

Gambar komentar dibaca dengan <data:comment.authorAvatarImage/>, tetapi blank.gif dibaca ketika anonim. blank.gif adalah gambar 43B, tetapi tidak memengaruhi tampilan. Posisi: absolut; juga ditentukan untuk penempatan, sehingga tidak akan memengaruhi elemen lain meskipun hilang. Ini adalah elemen yang tidak perlu.

Dalam kasus anonim, itu dapat dihapus hanya dalam kasus blank.gif seperti yang ditunjukkan di bawah ini menggunakan HTML untuk memasukkan adalah 180 karakter (tergantung bahasa). (Jika ada gambar, itu akan menjadi sekitar 400 karakter)

<b:if cond='data:comment.authorAvatarImage.size != 180'>
 <data:comment.authorAvatarImage/>
</b:if>

* Gambar komentar telah dihapus karena dinilai tidak perlu.


Jangan gunakan widget

Mengganti widget yang tidak memerlukan fungsi khusus Blogger seperti header dan pemberitahuan hak cipta dengan penulisan langsung HTML. Bergantung pada pemrosesan server di Blogger, mungkin lebih cepat. Minimal, tag yang tidak perlu seperti bagian dan widget dapat dihapus.


Hapus baris templat yang tidak perlu

Saat kamu mengedit template, sesekali kamu akan melihat garis yang tidak pernah berlalu. Dengan mengurangi jumlah garis template, tergantung pada pemrosesan server di Blogger, dimungkinkan untuk mempercepat.


Note : artikel tutorial cara mempercepat tampilan blogger ini dari beberapa blog dan web yang saya kunjungi dan murni dari apa yang saya pelajari, jika kamu tidak paham dalam bahasa silahkan berikan komentar atau hubungi kami, sehingga artikel bisa dapat menjadi lebih baik.
Sign out
Cara Buat Template dari Kosong di Blogger

Cara Buat Template dari Kosong di Blogger

Template kosong Ini adalah konfigurasi minimum template Blogger. Cara Buat Template dari Kosong di Blogger https://t.co/bPIicpglX...
Cara Membuat Template di Blogger Terbaru


Template kosong

Ini adalah konfigurasi minimum template Blogger.



Kriteria untuk template kosong adalah sebagai berikut. Silakan merujuk ke bahan referensi untuk detailnya.
  • Berisi <b:skin>
  • Berisi <b:section>
  • Tetapkan ID unik untuk setiap bagian
  • Sintaksnya benar

Jika kriteria di atas tidak terpenuhi, menyimpan templat akan gagal.
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin></b:skin>
</head>
<body>
<b:section id='main' showaddelement='yes'/>
</body>
</html>


Keluarkan template kosong

Output dari template kosong adalah sebagai berikut. Blogger standar CSS dan JS adalah output dalam bentuk banyak saling menempel.
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link href='https://www.blogger.com/static/v1/widgets/2549344219-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style id='page-skin-1' type='text/css'><!--

--></style>

</head>
<body>
<div class='no-items section' id='main'></div>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/640298382-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5wBwOhp16l9U1lvi7e2SSvcHuXfQ:1571247701999';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4820893236779245790','//aurealisa.blogspot.com/','4820893236779245790');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4820893236779245790', 'title': 'Aurealisa', 'url': 'https://aurealisa.blogspot.com/', 'canonicalUrl': 'https://aurealisa.blogspot.com/', 'homepageUrl': 'https://aurealisa.blogspot.com/', 'searchUrl': 'https://aurealisa.blogspot.com/search', 'canonicalHomepageUrl': 'https://aurealisa.blogspot.com/', 'blogspotFaviconUrl': 'https://aurealisa.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-148030444-1', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Aurealisa - Atom\x22 href\x3d\x22https://aurealisa.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Aurealisa - RSS\x22 href\x3d\x22https://aurealisa.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Aurealisa - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4820893236779245790/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/c467b5cc6c1a4a9d', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'disableGComments': true, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 300, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'index', 'pageName': '', 'pageTitle': 'Aurealisa', 'metaDescription': 'Menyediakan Informasi, Pengetahuan, Kutipan, \x26amp; hal-hal yang mungkin belum anda ketahui.'}}, {'name': 'features', 'data': {'sharing_get_link_dialog': 'true', 'sharing_native': 'false'}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Aurealisa', 'description': 'Menyediakan Informasi, Pengetahuan, Kutipan, \x26amp; hal-hal yang mungkin belum anda ketahui.', 'url': 'https://aurealisa.blogspot.com/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}]);
</script>
</body>
</html>


Hapus CSS dan JS standar

<?xml version="1.0" encoding="UTF-8" ?>
<html b:css='false' b:js='false' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin></b:skin>
&lt;/head&gt;&lt;!--</head>--&gt;
<body>
<b:section id='main' showaddelement='yes'/>
&lt;!--</body>--&gt;&lt;/body&gt;
</html>

Keluaran dengan CSS standar dan JS dihapus
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<style id='page-skin-1' type='text/css'><!--

--></style>
</head><!--
</head>-->
<body>
<div class='no-items section' id='main'></div>
<!--
</body>--></body>
</html>

* Pada tahap template kosong, CSS dan JS dapat dihilangkan dengan hanya b:css dan b:js dari html. Namun, karena dapat ditambahkan tergantung pada pengaturan lain, itu lebih aman untuk memproses tag head dan body pada akhirnya.
Tambahkan widget

Kamu dapat menambahkan widget sebagai berikut: (Deskripsi standar widget akan ditambahkan tanpa izin)
  • Ganti kode berikut dengan pernyataan <b:section> dan simpan.
  • Tutup editor sekali
  • Buka editor lagi
<b:section id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>


Kompatibel dengan versi terbaru

Versi terbaru
  • Tema: b:version='2'
  • Templat: b:b:templateVersion='1.3.0'
  • Layout: b:layoutsVersion='3'
  • Widget: vversion='2'
  • Skin: version='1.3.0'
<?xml version="1.0" encoding="UTF-8" ?>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' b:version='2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin version='1.3.0'><![CDATA[
]]></b:skin>
&lt;/head&gt;&lt;!--</head>--&gt;
<body>
<b:section id='main' showaddelement='yes'>
</b:section>
&lt;!--</body>--&gt;&lt;/body&gt;
</html>

* Jika kamu menambahkannya ke template di atas menggunakan prosedur "Tambahkan widget", widget versi 2 akan ditambahkan.
* Tampaknya berfungsi tanpa <b:defaultmarkups>

Referensi : Blogger Blank Theme
Sign out
SEO Friendly Blogspot Table Of Contents

SEO Friendly Blogspot Table Of Contents

Pendahuluan Daftar isi memudahkan pengguna untuk beralih ke bagian yang ingin mereka baca. Mengapa Harus Menambahkan Daftar Isi di P...
Saturday, October 12, 2019
SEO Friendly Blogspot Table Of Contents


Pendahuluan

Daftar isi memudahkan pengguna untuk beralih ke bagian yang ingin mereka baca.

Mengapa Harus Menambahkan Daftar Isi di Posting Blogspot?
Kamu mungkin telah melihat daftar isi di situs web seperti Wikipedia. Daftar isi memudahkan pengguna untuk beralih ke bagian yang ingin mereka baca dalam artikel panjang.


Ini juga membantu dengan SEO Blogger kamu karena Google secara otomatis menambahkan lompatan ke bagian link di sebelah situs kamu dalam hasil pencarian.

Kamu dapat secara manual membuat daftar isi di Blogger dengan menulis kode HTML. Namun itu sulit bagi pemula karena kamu harus secara manual membuat daftar, menambahkan tautan, dan menambahkan atribut ID sepanjang artikel.

Tapi ada cara mudah. Mari kita lihat bagaimana cara membuat daftar isi dengan mudah di posting dan halaman Blogger.


Tutorial Table of Contents Otomatis

Masukkan dan simpan kode dibawah ini pada template yang kamu pakai.

Untuk css defaultnya bisa kamu lihat pada postingan ini, kalo kurang suka dengan desainnya kamu bisa menggantinya lagi.
<style>
/* TABLE OF CONTENTS */
.aurealisaToc {margin: 10px 0;background: rgba(236,236,254,0.8);box-shadow: inset 0 0 3px #6363ff;border: 2px solid #6363ff;border-radius: 5px;}
.aurealisaToc ol, .aurealisaToc ul {margin: 0 0 15px 20px;padding: 0;}
.aurealisaToc ul {list-style: disc;}
.aurealisaToc ol li, .aurealisaToc ul li {font-size: 95%;padding: 5px 10px 0 0;margin: 0 0 0 30px;}
.aurealisaToc a {text-decoration: none;}
.aurealisaToc a:hover {text-decoration: underline;}
.aurealisaToc .aurealisatocHead {font-weight: bold;font-size: 100%;position: relative;outline: none;border: none;padding: 5px 15px 5px 5px;margin: 5px 10px;}
.aurealisaToc .aurealisatocHead a {text-decoration: none;cursor: pointer;}
.aurealisaToc .aurealisatocHead a:hover {text-decoration: underline;}
</style>

Kemudian tambahkan kode dibawah ini diatas </head>


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
/* 
 * SEO Friendly Blogspot Table Of Contents
 * https://aurealisa.blogspot.com/2019/10/seo-friendly-blogspot-table-of-contents.html
*/
//<![CDATA[
function aurealisaToc(){var e=i=headinglength=getheading=0;if(headinglength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length,headinglength>1)for(i=0;i<headinglength;i++){getheading=document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;var t=getheading.replace(/[^a-z0-9]/gi," ").trim().replace(/\s/g,"_");document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id",t),e="<li><a href='#"+t+"'>"+getheading+"</a></li>",document.getElementById("aurealisaToc").innerHTML+=e}else document.write("<style>.aurealisaToc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>")}function aurealisatocShow(){var e=document.getElementById("aurealisaToc"),t=document.getElementById("aurealisatocWrap"),n=document.getElementById("aurealisatocLink");"none"===e.style.display?(e.style.display="block",t.style.display="block",n.innerHTML="Tutup"):(e.style.display="none",t.style.display="inline-block",n.innerHTML="Tampilkan")}
//]]>
</script>
<noscript><style>#aurealisatocWrap,.aurealisaToc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>
Note : javascript sepenuhnya sudah di minify


Langkah Pemasangan TOC Otomatis

Setelah menambahkan kode diatas, kamu harus pergi ke bagian Pengaturan lanjutan. Cari <data:post.body/> dan masukan kode dibawah ini.
<b:if cond='data:blog.metaDescription'>
  <data:blog.metaDescription/><br/>
</b:if>
<div id='post-toc'>
  <div class='aurealisaToc' id='aurealisatocWrap'>
    <div class='aurealisatocHead'>
      Daftar Isi [<a id='aurealisatocLink' onclick='aurealisatocShow()'>Tutup</a>]
    </div>
      <ul id='aurealisaToc' style='display:inline-block'/>
  </div>
<data:post.body/>
<script>aurealisaToc();</script>
</div>
Bisa di halaman postingan dan halaman stastis.

3. Jangan lupa mengklik tombol Simpan Perubahan untuk menyimpan pengaturan ini.

Daftar isi akan muncul tepat di atas Deskripsi Penelurusan pertama dalam artikel kamu. Pembaca Anda dapat mengklik tautan dan melompat ke bagian yang ingin mereka baca.

Aurealisa harap artikel ini membantu kamu mempelajari cara membuat daftar isi di posting dan halaman Blogger. Kamu mungkin juga ingin melihat panduan aurealisa tentang cara mempercepat loading blogger.


Penutup

Jika kamu menyukai artikel ini, silakan bagikan ke temen temen kamu yaa. Kamu juga dapat menemukan kami di Twitter dan Facebook.

Untuk selengkapnya silahkan kunjungi sumbernya di Bibit WS Blog.


Referensi

1. Cara Membuat Table of Contents Otomatis di Artikel Blogger
2. Table of Contents (TOC) Otomatis Blogger
Sign out

TerPopuler