Cara Membuat Tanda Centang Biru Di Sebelah Nama Admin Pada Komentar Blog

Membuat Centang Biru atau verified pada komentar Blog

Komentar merupakan kegiatan penting dalam suatu blog untuk berinteraksi atau menyelesaikan pendapat dari para pembaca kepada penulis agar memberikan masukan, kritik atau saran yang dibutuhkan. Hal inilah membuat para penulis lebih bersemangat dalam membuat suatu artikel.

Membuat centang biru inilah agar komentar Admin bisa dibedakan oleh pembaca, ada baiknya juga hanya diberi penanda agar bisa membedakan contohnya seperti komentar pada Disqus. Sayangnya juga komentar blogger belum bisa ditambahkan fitur seperti itu secara permanen.

Tetapi tenang saja, kamu bisa membuatnya hanya dengan membuat/menambahkan script CSS pada blog kamu.

Memberikan tanda ceklis biru pada komentar blog

Perlu di ingat juga, cara ini hanya bekerja pada komentar original bawaan blogger saja, Semisalkan template yang kamu gunakan sudah di modifikasi dan ditambahkan komentar Disqus maka cara ini bukan masalahnya. namun kamu harus menghapusnya terlebih dahulu dan mengganti dengan komentar blogger.

Tambahkan kode ini DIATAS  </style> Atau ]]></b:skin> Kode ini berfungsi untuk memunculkan ceklis alias centang birunya.

/* Admin Badge on Blogger Comments by igniel.com */
#comments .comments-content .icon.blog-author{
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: -3px;
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;
}

Seletah itu simpan tema dan lihat hasilnya.
Tentu saja cara ini sangat mudah dan tidak ribet tentunya hanya menambahkan kode CSS pada blog kamu, dan centang biru pada kolom Author/Admin sudah muncul.

Berikut adalah hasilnya.

Template Premium Igniplex v2.4 Agustus 2019 Terbaru

Template Premium Igniplex Terbaru 
Siapa yang tidak kenal dengan template yang satu ini, template yang sangat bagus dan responsive ini tentunya sudah banyak sekali diminati oleh penulis dan tentunya sangat cocok untuk artikel yang tujuannya sharing dan membuat suatu tutorial. Template ini didesain sekaligus dibuat oleh mba Igniel blogger muda yang sudah lama meningkat ini membuat para penulis atau blogger bersemangat akan tutorial dan sharing yang diberikannya, termasuk saya juga hehehehe. Mba igniel ini merupakan penulis asal sukabumi yang hobinya sharing dan memberikan tutorial kepada teman-teman agar lebih bersemangat membuat artikel yang ingin di post.

Membahas tentang template yang sudah banyak dibuat, Template Igniplex inilah yang membuat kagum para penulis sekaligus memperindah tampilan blognya. saya pribadi sangat merekomendasikan template ini untuk dipakai pada blog kamu yang ingin memposting suatu artikel.

Screenshot Template

 
 

Fitur Kelebihan v2.4 Terbaru

1. Update Layout v2 dan v3
2. Panduan untuk menempatkan posisi iklan
3. Pagination (Page Split)
4. Social Share Counter
5. Anti adblock (Bebas iklan atau pop up yang mengganggu)
6. Super ringan dan fast loading
7. SEO Freindy
8. Costum Related post
9. Navigasi halaman bernomor
10. Sangat responsive dan pokoknya cocok banget buat dipasang di blog 

Info download gratis dan beli

Saya akan membagikan link download secara gratis dan tentunya tidak usah berbayar, karena harga template ini cukup terjangkau yaitu sekitar Rp.200.000 artinya kamu sudah mendapatkan template ini secara gratis. namun saya hanya membagikan versi 2.1 yaitu sekitar diupdate bulan Januari lalu, dan tentunya tidak kalah dengan v2.4 yang terbaru dibulan agustus ini.

Untuk mendapatkan v2.4 kamu harus membeli di website resminya, bisa cek dibawah.

Untuk kamu yang ingin mendapatkan update v2.4 harus membelinya terlebih dahulu, dan tentunya hanya berbeda dari segi tampilan dan ada beberapa yang diupdate oleh pembuatnya.

Harga dan cara beli Template v2.4

Template ini saya bandrol dengan harga Rp. 200.000. Mahal? Tentu tidak jika dibandingan dengan berbagai fitur yang akan kamu dapatkan.
Untuk membeli langsung hubungi di halaman kontak dengan cara klik tombol di bawah ini. Dalam isi pesan jelaskan bahwa kamu ingin membeli template Igniplex.

Cara Membuat Artikel Terkait/Related Post di Tengah Postingan Blog

Tutorial kali ini saya akan memberikan cara bagaimana menampilkan artikel terkait di tengah postingan blog. Sebelumnya saya sudah memberikan Cara Membuat Multiple Related Post (Artikel Terkait) Pada Postingan Blog dan jika sudah maka kita langsung saja ke langkah-langkahnya. Related post ini berbeda dengan yang lainnya, tampilannya pun sangat responsive dan bagus.

Cara Menampilkan Artikel Terkait di Tengah Postingan 
Cari kode <data:post.body/> dan simpan kode berikut tepat DIBAWAHNYA

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

var jumlah = 4; Bisa diubah sesuai dengan keinginan, dan pastikan hanya mengubah angka saja

Cara membuat multiple related postCara membuat buka tutup komentarCara membuat kotak berlanggananCarar membuat tombol donasiCara mengatasi google driver penuh

Cara menambah VRAM komputerCara flashing oppo neo 5Cara menonaktifkan secure bootCara poting rom mediatekCara porting TWRP tanpa PC

Iklan oleh Faizall TM

Agar tampilannya tidak membosankan, tambahkan kode CSS ini dan simpan DIATAS </style> atau ]]></b:skin> Kamu juga bisa ganti untuk menyesuaikan blog kamu.

/* Related Posts Middle by igniel.com */
.ignielRelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
.ignielRelatedMiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}
.ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;}
.ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.ignielRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}

Terakhir jangan lupa simpan template dan lihat hasilnya, keberadaan Related post ini sangat penting untuk menarik perhatian pengunjung. Selamat mencobanya.

Cara Membuat Multiple Related Post (Artikel Terkait) Pada Postingan Blog

Multiple related post adalah Artikel yang terkait ditengah postingan dan biasanya memiliki beberapa jumlah artikel di setiap paragrafnya, tujuannya adalah agar si pembaca lebih mudah untuk membaca artikel yang ada di tombol itu dan juga menarik perhatian. Script ini juga menurut saya lebih bagus dan menyesuaikan paragraf agar tampilan postingan menjadi lebih indah, untuk style sesuaikan selera masing-masing saja.

Biasanya related post hanya tampil pada satu tempat, contohnya seperti ini;

Paragraf satu.
Paragraf dua.
Paragraf tiga.
Paragraf empat.
<!-- Related Post -->
Paragraf lima.
Paragraf enam.
Paragraf tujuh.
Paragraf delapan.

Namun tutorial kali ini, keberadaaan related post disispkan antara paragraf, dan jumlahnya kamu bisa atur dan sesuaikan dengan keberuhanmu.

Paragraf satu.
Paragraf dua.
<!-- Related Post -->
Paragraf tiga.
Paragraf empat.
<!-- Related Post -->
Paragraf lima.
Paragraf enam.
<!-- Related Post -->
Paragraf tujuh.
Paragraf delapan.

Langsung saja ke tutorialnya,
Pertama slahkan cari kode <data:post.body/> dan simpan kode berikut tepat DIBAWAHNYA. jika ada banyak, silahkan pilih paling akhir biasanya sih berfungsi.

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
  // Multiple Related Posts by igniel.com
  (function() {
    var jumlah = 4;
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('Z i=["\J\v\l\s\j\E\t\l\q\x\w\t\n\14\w\J\v\l\s\j\E\t\l\q\x\w\v","\X\F\h\n\x\D\h\k\h\A\j\l\n\T\k\k","\k\h\m\B\j\U","\G\n\l\u","\q\o\L","\A\n\h\r\j\h\K\k\h\u\h\m\j","\A\k\r\s\s\z\r\u\h","\o\B\m\o\h\k\M\F\k\j\o\O\h\k\r\j\h\q","\m\l\q\h\z\r\u\h","\P","\o\m\s\h\n\j\R\h\G\l\n\h","\v\r\n\h\m\j\z\l\q\h","\m\h\N\j\D\o\t\k\o\m\B"];y p=I[i[1]](i[0]),a=C+1,b=p[i[2]]/a;c=V[i[3]]({W:C},(15,H)=>H+1);Y(y d=0;d<c[i[2]];d++){y e=c[d],f=13((b*e)),g=I[i[5]](i[4]);g[i[6]]=i[7];S(p[f][i[8]]==i[9]){p[f][i[11]][i[10]](g,p[f])}Q{p[f][i[11]][i[10]](g,p[f][i[12]])}}',62,68,'|||||||||||||||||x65|_0xe7e5|x74|x6C|x6F|x6E|x72|x69|post|x64|x61|x73|x62|x6D|x70|x20|x79|let|x4E|x63|x67|jumlah|x53|x2D|x75|x66|_0x67aex5|document|x2E|x45|x76|x4D|x78|x52|x50|else|x42|if|x41|x68|Array|length|x71|for|var||||parseInt|x2C|_0x67aex4'.split('|'),0,{}));
  })();
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('a 9=["\i\c\l\L\d\C","\c\l\d\k\H","\x\c\c\K","\F\d","\d\w\d\i\c","\i\w\l\M","\k\c\i","\z\i\d\c\k\l\z\d\c","\C\k\c\x"];a n=o p();a m=0;a f=o p();t E(u){r(a b=0;b<u[9[2]][9[1]][9[0]];b++){a j=u[9[2]][9[1]][b];n[m]=j[9[4]][9[3]];r(a h=0;h<j[9[5]][9[0]];h++){s(j[9[5]][h][9[6]]==9[7]){f[m]=j[9[5]][h][9[8]];m++;I}}}}t G(){a e=o p(0);a g=o p(0);r(a b=0;b<f[9[0]];b++){s(!B(e,f[b])){e[9[0]]+=1;e[e[9[0]]-1]=f[b];g[9[0]]+=1;g[g[9[0]]-1]=n[b]}};n=g;f=e}t B(v,y){r(a q=0;q<v[9[0]];q++){s(v[q]==y){A D}};A J}',49,49,'|||||||||_0x6cd8|var|_0x941ax6|x65|x74|_0x941axa|relatedUrls|_0x941axb|_0x941ax8|x6C|_0x941ax7|x72|x6E|relatedTitlesNum|relatedTitles|new|Array|_0x941axf|for|if|function|_0x941ax5|_0x941axd|x69|x66|_0x941axe|x61|return|contains|x68|true|related_results_labels|x24|removeRelatedDuplicates|x79|break|false|x64|x67|x6B'.split('|'),0,{}));
  //]]> </script>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:view.isPost'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
    </b:loop>
  </b:if>
  <script> //<![CDATA[
    // Multiple Related Posts by igniel.com
    (function ignielMultiRelated() {
      var text = 'BACA JUGA:';
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('P b=["\e\f\c\B\h\E","\o\d\c\z\q\N","\A\e\q\q\o","\S\n\B\c\n\f\e\C\y\e\h\n\T\f\e\d\h\f\z","\M\y\f\o\G\H\f\e\f\p\h\q\o\L\e\e","\n\c\c\f\o\F\V\C\I","\k\g\m\d\c\s\p\e\d\g\g\u\j\p\q\c\h\f\c\h\j\l\k\g\m\d\c\s\p\e\d\g\g\u\j\h\f\K\h\j\l","\k\w\g\m\d\c\l\k\d\s\E\o\f\A\u\j","\j\s\h\n\h\e\f\u\j","\j\l","\k\w\d\l\k\w\g\m\d\c\l\k\g\m\d\c\s\p\e\d\g\g\u\j\n\p\q\c\j\l\k\w\g\m\d\c\l"];v r=D[b[2]]((t[b[0]]-1)*D[b[1]]());v i=0;v x=O[b[4]](b[3]);Q(i<t[b[0]]&&i<x[b[0]]){R(v a=0;a<x[b[0]];a++){x[a][b[5]]=b[6]+W+b[7]+Y[r]+b[8]+t[r]+b[9]+t[r]+b[U];J(r<t[b[0]]-1){r++}X{r=0};i++}}',61,61,'|||||||||||_0x2867|x6E|x61|x6C|x65|x73|x74||x22|x3C|x3E|x70|x69|x72|x63|x6F||x20|relatedTitles|x3D|let|x2F|jumlah|x75|x64|x66|x67|x4D|Math|x68|x48|x79|x53|x4C|if|x78|x41|x71|x6D|document|var|while|for|x2E|x52|10|x54|text|else|relatedUrls'.split('|'),0,{}));
    })();
  //]]> </script>
</b:if>

Setelah itu tambahkan kode CSS agar tampilannya lebih menarik. Simpan kode berikut DIATAS </style> atau ]]></b:skin>

/* Multiple Related Posts by igniel.com */
.ignielMultiRelated {background-color:#C0392B; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.ignielMultiRelated:hover {background-color:#252525;}
.ignielMultiRelated .content {padding:10px 15px;}
.ignielMultiRelated .content .text {margin-right:10px; text-decoration:underline;}
.ignielMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.ignielMultiRelated .icon{height:auto; min-width:50px; background:#E74C3C url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat; transition:all .3s ease;}
.ignielMultiRelated:hover .icon {background-color:#000;}

Terakhir simpan template dan,ihat hasilnya, memang sudah banyak artikel yang menulis tentang pembuatan Related Post ini, tetapi yang ini berbeda dan cukup unik juga untuk dicoba.Tutorial ini saya dapatkan dan saya pelajari dari Igniel terima kasih sebelumnya. Mudan dan simple bukan?, Selesai dan selamat mencoba.

Repost by Faizall TM
Source https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html

Terbaru!!! Cara Membuat Tombol Buka Tutup Komentar Pada Blog dengan HTML

Pada kesempatan kali ini, saya akan memberikan bagaimana cara membuat Tombol buka-tutup komentar pada blog, tujuannya adalah agar blog tersebut memberikan waktu yang sangat singkat pada saat loading artikel dan menata tempat pada footer agar terlihat lebih bagus dan rapi.

Pembuatan tombol ini tidaklah sulit hanya mencari dan menempatkan beberapa kode HTML. Tutorial ini hanya bekerja atau berfungsi pada komentar blogger, yaitu kolom komentar bawaan dari blog, jika kamu menggunakan komentar Disqus ataupun Facebook, silahkan untuk di ganti terlebih dahulu. Next saya akan buat untuk Disqus dan Facebook. Langsung saja ke tutorialnya

Silahkan cari kode dibawah ini atau mirip kode dibawah ini

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Kemudian ganti atau ubah kode diatas dengan kode dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>

Bila script diatas tidak ditemukan silahkan cari kode untuk memanggil

<b:include cond=

Biasanya penutup tag diatandai dengan 'name-comment'/>

Jika sudah silahkan save teemplatenya dan silahkan cek hasilnya di semua postingan, Jika ingin mengubah warna background tombolnya, cari dan sesuaikan pada kode 

background-color:#11589D;color:#fff;

Berikut adalah hasilnya

BUKA TUTUP KOMENTAR BLOG

Gimana mudah bukan?

Selesai dan selamat mencobanya.

Cara Membuat Kotak Berlangganan Dan Tombol Sosial Media pada Blog

Tutorial - Kali ini saya akan membuat postingan bagaimana cara "Membuat Kotak Berlangganan di Blog". Awalnya saya tertarik dari website www.ingiel.com dan ingin menerapkan pada blog saya karena efek loncengnya sangan Responsive dan pokoknya cocok untuk template Responsive lainnya seperti Viomagz, Arlinadzgn, dan Soratemplate. 

Sebelum lanjut memuat, kamu harus membuat akun Feedburner terlebih dahulu.

https://feedburner.google.com

Jika sudah langsung ke tutorialnya dan harap simak secara baik-baik.

Kotak Berlangganan Blog Melalui Email

Setelah memiliki akun Feedburner  dan mengaktifkan email subscriptions. Langkah selajutnya tinggal penerapan kode CSS dan HTML saja ke pengaturan blog kamu.

Pertama-tama simpan kode CSS ini diatas ]]></b:skin>

/* Subscribe Box by igniel.com */
#ignielSubscribe {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#ignielSubscribe .email__ {padding:15px 15px 5px;}
#ignielSubscribe .email {margin:auto; color:#555; text-align:center;}
#ignielSubscribe .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#ignielSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}
#ignielSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}
#ignielSubscribe input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
#ignielSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielSubscribe button:hover, #ignielSubscribe button:focus {background-color:#1d2129;}
#ignielSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
#ignielSubscribe .medsos {width:100%; text-align:center;}
#ignielSubscribe .medsos svg {width:20px;height:20px;margin-top:7px}
#ignielSubscribe .medsos svg path {fill:#fff}
#ignielSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}
#ignielSubscribe .medsos a:last-child {margin-right:0px;}
#ignielSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#ignielSubscribe .medsos .facebook{background:#3a579a}
#ignielSubscribe .medsos .twitter {background:#00abf0}
#ignielSubscribe .medsos .googleplus {background:#df4a32}
#ignielSubscribe .medsos .youtube {background:#cc181e}
#ignielSubscribe .medsos .instagram {background:#992ebc}
#ignielSubscribe .medsos .pinterest {background:#e60023}
@-webkit-keyframes ignielRing{
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }
  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

Yang ditandai width:300px adalah lebar dari kotak subscribe. Jika ingin lebarnya otomatis mengikuti lahan yang tersedia, ganti menjadi width:100%.

Jangan lupa simpan pengaturannya. Setelah itu simpan kode HTML ini dimanapun kamu menginginkannya. Disini saya contohkan untuk memasang di sidebar. Masuk ke layout (Tata letak) lalu klik add gadget (Tambah Gadget) pada area sidebar dan pilih HTML/Javascript.

<!-- Subscribe Box by igniel.com -->
<div id="ignielSubscribe">
  <div class="email__">
    <div class="email">
      Dapatkan artikel terbaru setiap hari
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=faizall" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=faizall', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
        <input name="email" class="email" placeholder="Contoh: nama@mail.com"/>
        <input name="uri" type="hidden" value="faizall" /> <input name="loc" type="hidden" value="en_US" />
        <button type="submit"></button>
      </form>
    </div>
  </div>
  <div class="medsos__">
    <div class="medsos">
      <a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
      <a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
      <a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
      <a class="instagram" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
   <a class="pinterest" title="Pinterest" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a>
    </div>
  </div>
</div>

- Ganti yang ditandai faizall (ada 3 buah) dengan username Feedburner masing-masing.
- Sementara tanda xxxx adalah username atau ID dari setiap media sosial. Ganti dengan milik kamu sendiri.

Oh iya perlu kamu ketahui, Subscribe box diatas mengunakan ikon SVG sehingga tidak begitu memberatkan pada blog kamu karena tidak membuat library atau script yang terlalu banyak.

Untuk melihat hasilnya ada di atas kanan sidebar blog ini.

Source thanks to : www.igniel.com

Cara Membuat Kotak Donasi Paypal Responsive di Blog

Tutorial - sudah lama sekali saya tidak membuat tutorial. kali ini saya akan membagikan tutorial seputar blog dan website yaitu bagaimana cara membuat kotak Donasi sendiri dengan menggunakan CSS dan javascript dengan efek yang luar biasa lho. Penasaran? pastikan kamu mempunyai akun Paypal terlebih dahulu, dengan situs resminya yaitu :

https://www.paypal.me

Jika sudah membuat akun, selanjutnya kita akan langsung ke langkahnya.

Kotak Donasi Dengan Efek Memantul

Setelah membuat Username di PayPal.Me, selajutnya kamu buka Dashboard Blogger dan buka bagian Tema kemudian edit html. Simpan kode CSS berikut di atas ]]></b:skin>.

/* Paypal Donation Box Bounce by igniel.com */
.ignielDonasi {background:#bde0b9; /* warna background */
  color:#000;
  display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:center; margin:20px 0px; display:flex; padding:15px; overflow:hidden; transition:all .3s ease; border-radius:7px;}
.ignielDonasi .ikon a {background-color:#008c5f; /* warna ikon */
  color:#fff;
  text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:ignielBounce 1s linear 1s infinite normal; animation:ignielBounce 1s linear 1s infinite normal}
.ignielDonasi svg {width:50px; height:50px}
.ignielDonasi svg path {fill:#bde0b9}
.ignielDonasi .ikon {margin-right:15px}
.ignielDonasi .deskripsi {line-height:1.5em;} 
.ignielDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}

@keyframes ignielBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes ignielBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}

Klik Simpan Tema, Simpan kode HTML berikut tepat di bawah <data:post.body/>

<!-- Paypal Donation Box Bounce by igniel.com -->
<div class='ignielDonasi'>
  <div class='ikon'>
    <a href='https://www.paypal.me/faizaltech98' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Paypal'>
      <svg viewbox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>DONASI VIA PAYPAL</span>
    Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk membeli domain <b><i>https://faizaltech98.blogspot.com</i></b>. Terima kasih.
  </div>
</div>

Jangan lupa untuk mengganti URL PayPal.Me dan ubah tulisannya sesuai dengan keinginan masing-masing.

Kotak Donasi ini sangat ringan dan responsive, Jika ingin menggunakan akun seperti Bitcoin dan lainnya ganti Url Paypal.Me tadi.

Bagaimana mudah bukan cara membuatnya, silahkan Share dan bagikan artikel ini jika bermanfaat dan sukses selalu!!!.

Source thanks to : www.igniel.com