Mas Fadli: Blogger
News Update
Loading...
Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Menambahkan Script Anti AdBlock di Blogger

AdBlock merupakan sebuah extention yang berfungsi untuk menghilangkan seluruh adsanse atau iklan yang berjalan di sebuah website dengan tujuan agar user tersebut tidak terkena atau melihat iklan sama sekali.

Untuk user biasa extention ini sangat menguntungkan karena mereka tidak akan terganggu dengan iklan iklan yang muncul di website tersebut, akan tetapi untuk para blogger extention satu ini sangat merugikan, karena dengan adanya extention ini mereka tidak bisa mendapatkan penghasilan dari iklan yang ditampilkan tersebut.

Nah disini mimin ingin membagikan script yang bisa membaca AdBlock tersebut sehingga user yang ingin mengakses website kita harus mematikan AdBlock terlebih dahulu supaya bisa melihat isi dari artikel kita. Gimana caranya?

Langsung saja masuk ke edit HTML dari template kalian. Kemudian tambahkan script berikut ini di antara <head></head>. Boleh juga tepat dibawah script adsanse kalian.

<script> //<![CDATA[
/* Anti AdBlock By igniel.com */
(function ignielAdBlock() {
var judulAd = 'Matikan AdBlock', /* Judul */
notifAd = 'Support blog ini dengan cara matikan AdBlock atau masukkan blog ini ke dalam whitelist.<br/>Terima kasih.'; /* Isi tulisan. Garis baru diganti dengan <br/> */
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}('O b=["\\f\\w\\o\\k\\q\\n","\\w\\o\\c\\g\\n\\c\\V\\s\\c\\K\\c\\m\\n","\\n\\B\\q\\c","\\n\\c\\1a\\n\\r\\P\\g\\z\\g\\f\\w\\o\\k\\q\\n","\\f\\o\\w","\\r\\r\\q\\g\\v\\c\\g\\j\\t\\d\\v\\l\\l\\v\\s\\c\\f\\B\\m\\j\\k\\w\\g\\n\\k\\l\\m\\d\\w\\l\\K\\r\\q\\g\\v\\c\\g\\j\\r\\P\\f\\r\\g\\j\\f\\F\\B\\v\\l\\l\\v\\s\\c\\d\\P\\f","\\g\\f\\B\\m\\w","\\l\\m\\c\\o\\o\\l\\o","\\j\\k\\z","\\k\\j","\\k\\v\\m\\k\\c\\s\\C\\j\\J\\s\\l\\w\\X","\\k\\m\\m\\c\\o\\H\\1c\\N\\G","\\y\\j\\k\\z\\i\\w\\s\\g\\f\\f\\L\\A\\k\\f\\k\\C\\j\\f\\A\\x\\y\\f\\q\\g\\m\\i\\w\\s\\g\\f\\f\\L\\A\\P\\1b\\j\\1b\\s\\A\\x","\\y\\r\\f\\q\\g\\m\\x\\y\\F\\o\\r\\x\\y\\f\\z\\v\\i\\z\\k\\c\\W\\J\\l\\1a\\L\\A\\u\\i\\u\\i\\t\\R\\i\\t\\R\\A\\x\\y\\q\\g\\n\\S\\i\\j\\L\\A\\N\\a\\e\\h\\a\\e\\H\\a\\a\\U\\p\\H\\a\\e\\N\\a\\t\\h\\a\\p\\d\\e\\C\\a\\d\\e\\h\\a\\d\\e\\i\\u\\i\\u\\h\\a\\i\\a\\u\\d\\p\\h\\a\\Z\\C\\a\\d\\e\\h\\a\\d\\e\\i\\u\\i\\u\\h\\a\\i\\a\\t\\h\\a\\R\\d\\p\\C\\a\\d\\e\\h\\a\\d\\e\\i\\u\\i\\u\\h\\a\\i\\a\\e\\d\\e\\h\\a\\Z\\C\\a\\d\\e\\h\\a\\d\\e\\i\\u\\i\\u\\h\\a\\i\\a\\t\\h\\a\\p\\d\\e\\N\\a\\I\\d\\p\\e\\h\\e\\H\\Q\\d\\t\\p\\G\\e\\h\\Q\\d\\t\\p\\U\\a\\I\\d\\p\\e\\G\\Q\\d\\t\\p\\h\\t\\a\\H\\a\\I\\d\\p\\e\\G\\t\\a\\h\\a\\I\\d\\p\\e\\U\\Q\\d\\t\\p\\G\\a\\I\\d\\p\\e\\h\\e\\1g\\A\\x\\y\\r\\q\\g\\n\\S\\x\\y\\r\\f\\z\\v\\x\\y\\F\\o\\r\\x","\\y\\r\\j\\k\\z\\x","\\g\\q\\q\\c\\m\\j","\\F\\l\\j\\B","\\l\\z\\c\\o\\1e\\s\\l\\W","\\f\\n\\B\\s\\c","\\S\\k\\j\\j\\c\\m","\\g\\j\\F\\s\\l\\w\\X","\\v\\c\\n\\V\\s\\c\\K\\c\\m\\n\\f\\J\\B\\1c\\g\\v\\Y\\g\\K\\c","\\k\\m\\f\\c\\o\\n\\J\\c\\1e\\l\\o\\c","\\q\\g\\o\\c\\m\\n\\Y\\l\\j\\c"];O D=E[b[1]](b[0]);D[b[2]]=b[3];D[b[4]]=b[5];D[b[6]]=1d;D[b[7]]=1k(){O M=E[b[1]](b[8]);M[b[9]]=b[10];M[b[11]]=b[12]+1m+b[13]+1j+b[14];E[b[16]][b[15]](M);E[b[16]][b[18]][b[17]]=b[19];1f[b[1i]]=1d};O T=E[b[1l]](b[0])[0];T[b[1h]][b[1n]](D,T)',62,86,'||||||||||x31|_0xd5a9|x65|x2E|x33|x73|x61|x2C|x20|x64|x69|x6F|x6E|x74|x72|x37|x70|x2F|x6C|x32|x30|x67|x63|x3E|x3C|x76|x22|x79|x41|ad|document|x62|x4C|x48|x35|x42|x6D|x3D|_0xc9cbx2|x4D|var|x6A|x38|x34|x68|b_ad|x56|x45|x77|x6B|x4E|x36|||||||||||x78|x75|x54|true|x66|window|x5A|23|20|notifAd|function|21|judulAd|22'.split('|'),0,{}));
})();
//]]> </script>

Jika sudah jangan lupa save dan silahkan kalian ujicoba apakah script tersebut sudah berjalan atau belum. Jika sudah hasilnya akan seperti berikut ini

Cara Import Konten di Blogger

Setelah sebelumnya mimin bahas bagaimana cara backup konten yang ada di blogger, di artikel ini mimin bakal bahas bagaimana cara import konten di blogger.


Import konten ini fungsinya untuk memasukkan atau menambahkan konten yang pernah kita backup kedalam blog yang baru.
Jadi dengan import kita tidak perlu membuat artikel baru yang isinya sama dengan yang ada di blog sebelumnya. Berikut ini caranya.

1. Buka halaman awal blogger
2. Masuk ke menu setting / pengaturan > pilih other
3. Dibagian atas pilih import konten kemudian centang bagian captcha > Klik import from your computer.
4. Pilih file backup (file.xml) dari blog sebelumnya > Klik open.
5. Secara otomatis akan terjadi proses import

Cara Backup Artikel di Blogger

Backup adalah proses pembuatan data cadangan dengan cara membuat arsip dari data yang ada sehingga dapat digunakan lagi nantinya.

Nah di blogger juga terdapat fitur backup, fungsinya yaitu untuk melakukan pecadangan konten atau artikel, jika suatu saat kita ingin berganti blog tapi tidak ingin kehilangan konten/artikel yang sudah pernah dibuat.

Untuk caranya juga cukup mudah yaitu:

1. Masuk ke halaman utama blogger

2. Klik menu Setting / pengaturan > Pilih Other

3. Kemudian di bagian atas pilih back up content

4. Terakhir pilih save to your computer

Cara Mengaktifkan Notifikasi Komentar di Blogger

Notifikasi komentar bisa jadi penting untuk para blogger, karena dengan adanya notifikasi ini kita bisa tau apakah ada komentar yang masuk di blog kita, entah itu kritik, saran ataupun ucapan terimakasih dari para pembaca.

Nah untuk mendapatkan notifikasi ini kita harus mengaturnya secara manual. Berikut ini langkah langkahnya:


1. Buka blogger kalian
2. Lanjut ke menu setting / pengaturan
3. Kemudian ke sub menu Email
4. Selanjutnya di bagian Comment Notification Email isi dengan email blog kalian ya.
5. Simpan perubahan tadi. Kemudian buka email kalian dan pastikan sudah mendapatkan pesan dari blogger.
6. Isi pesannya seperti berikut ini. Dan klik pada pilihan subscribe



Itu tadi langkah langkah untuk mengaktifkan notifikasi komentar di blogger. Semoga bermanfaat.

Cara Mengatasi Masalah Breadcrumb di Search Console

Breadcrumb merupakan sebuah navigasi yang ada pada suatu website yang tujuannya untuk membantu pengunjung dalam mengetahui lokasi saat mengunjungi website tersebut.

Breadcrumb berfungsi untuk menyempurnakan navigasi pada sebuag website seperti homepag, tag, ataupun yang lainnya.

Beberapa hari kemarin mimin mengalami masalah pada breadcrumb, mimin sendiri tidak menyadari karena tidak mendapatkan email dari google, berbeda dengan teman blogger lainnya yang langsung mendapatkan email dari google yang berisi pemberitahuan masalah breadcrumb ini.

Untuk mengatasinya cukup mudah, hanya perlu merubah bagian breadcrumbs yang ada di template blog.

Masuk ke menu template kemudian pilih edit HTML. Cari kode dibawah ini.


<b:includable id="breadcrumb" var="posts"> ...sampai dengan penutup ... </b:includable>

Jika sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini.


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
 <b:loop values='data:posts' var='post'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
   <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
   <meta content='1' itemprop='position'/>
   <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
   </span>
   <b:if cond='data:post.labels'>
   <b:loop index='nomor' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
     <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
    <meta expr:content='data:nomor+2' itemprop='position'/>
    <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>
      <span itemprop='name'><data:label.name/></span>
    </a>
     </span>
   </b:loop>
   <b:else/>
   &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
   </b:if>
  </div>
 </b:loop>
<b:elseif cond='data:view.isPage'/>
 <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
  <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
  <meta content='1' itemprop='position'/>
  <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
  </span> &amp;nbsp;&#8250;&amp;nbsp; 
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
  <meta expr:content='data:num+2' itemprop='position'/>
  <a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'>
    <span itemprop='name'><data:blog.pageName/></span>
  </a>
  </span>
 </div>
</b:if>
</b:includable>

Langkah terakhir kalian bisa masuk ke webmaster, kemudian pilih validasi perbaikan. Jika tidak muncul berarti masalah sudah terselesaikan.

Cara Membuat Kotak "Artikel Lainnya" di Blogger

Membuat related post atau artikel lainnya dianggap sebagai cara terbaik untuk mempertahankan pengunjung agar tidak segera meninggalkan blog/website kita.


Sebenarnya ada 2 cara untuk membuat kotak artikel terkait, pertama yaitu dengan cara otomatis dan kedua dengan cara manual.

Nah diartikel ini saya akan memberikan tutorial yang manual. Maksudnya adalah kita menambahkan sendiri apa saja artikel terkait yang ingin diikut sertakan dalam postingan tersebut.

>>Langkah-langkah
1. Masuk ke blogger
2. Klik menu themes dan edit html
3. Cari ]]></b:skin> agar lebih cepat gunakan Ctrl+F
4. Masukkan kode CSS dibawah ini tepat diatas ]]></b:skin>
5. Code CSS

/* kotaklink Mulai*/
.kotaklink {background: rgb(246, 247, 249);
    border-top: 7px solid #219FDE;border-bottom: 2px solid #219FDE; /* tebal dan warna garis*/
    margin: 25px 20px 10px 20px;
    padding: 5px 15px 0px 0;
    position: relative;
    color:#383838;}
.kotaklink:before {display: block;border-radius: 5px;content: "Baca Juga"; /* bisa diganti dengan kata yang anda sukai*/
    text-align: center;
    font-size: 16px;width: 130px;
    font-weight: bold;background: #219fde;
    position: absolute;
    border: 2px solid #219fde;left: 25px;top: -20px; /* pengaturan posisi kotak atas*/
    color: #fff;}
.kotaklink cite {text-align: left;color: #999999;
    font-size: 12px;
    display: block;
    margin-top: 5px;}
.kotaklink cite:before {content: "\2014 \2009";}/* costumisasi pada badian bullet*/
.kotaklink ul {padding: 0 0 0 15px;}
.kotaklink ul li {border-bottom:1px dashed #219FDE; /* posisi bullet*/
    line-height:1.75em;
    list-style:none;
    padding: 0 0 0px;}
.kotaklink a:visited {color: #585858;} /* warna link*/
.kotaklink ul li:before{content:'\f138';font-family:fontawesome;position:absolute; /* mengatur bullet dan animasi*/
    margin:0 9px 0 -28px;
    color:#219fde;overflow:hidden;
    transition:all .3s}
.kotaklink ul li:hover:before{content:'\f138';font-family:fontawesome; 
    -webkit-animation:bounceright .3s alternate ease infinite;
    animation:bounceright .3s alternate ease infinite}/* Pengaturan huruf dalam kotak*/
/* kotaklink Selesai*/
6. Jika sudah simpan atau kalian dapat merubah tampilan terlebih dahulu di code CSS tersebut.

>>Cara Penggunaan
Tulis artikel yang kalian inginkan. Jika sudah panggil kotaklink dengan cara menggunakan div class. Perhatikan langkah dibawah ini:
1. Pindah dari Compose ke HTML

2. Jika sudah panggil dengan script dibawah ini


Untuk menempatannya bebas sesuai keinginan kalian sendiri. Entah itu ditengah artikel, di bawah artikel ataupun di tengah dan bawah artikel.

Cara Memasang Tag Hreflang di Blogger dan wordpress

Tag hreflang merupakan sebuah tag yang digunakan untuk menentukan bahasa pada halaman blog atau website. Jadi bisa diambil kesimpulan bahwa tag hreflang merupakan acuan bahasa pada blog yang diikuti oleh google secara otomatis.


Dengan tag ini kita dapat menentukan bahasa yang digunakan diblog kita, ketika ada orang yang melakukan pencarian di google. Sehingga jika ada pengunjung dari luar negeri akan muncul menu Terjemahkan/Translate di index pencarian atau bisa juga pengunjung tersebut melihat artikel kita sesuai dengan bahasa yang mereka gunakan.


>>Cara memasang tag hreflang

1. Untuk pengguna blogger
Pasang salah satu tag berikut ini tepat dibawah tag <head>

<link rel="alternate" hreflang="id" expr:href="data:blog.url"/>

<link rel="alternate" hreflang="x-default" expr:href="data:blog.url"/>


Note :
  • hreflang="x-default" = artinya tidak mengkhususkan bahasa blog kita jadi target pembaca adalah seluruh dunia
  • hreflang="id" = artinya menargetkan untuk wilayah indonesia saja

2. Untuk pengguna wordpres
Pasang salah satu tag berikut ini

<link href="<?php the_permalink() ?>" hreflang="id" rel="alternate"/>

<link href="<?php the_permalink() ?>" hreflang="x-default" rel="alternate"/>

Note :
  • hreflang="x-default" = artinya tidak mengkhususkan bahasa blog kita jadi target pembaca adalah seluruh dunia
  • hreflang="id" = artinya menargetkan untuk wilayah indonesia saja
Setelah memasang tag ini perubahan tidak langsung terjadi. Putuh waktu untuk mesin robot webmaster merayap ulang website kita.

Cara Memasang Iklan di Dalam Postingan Blogger

Iklan pada blog merupakan sumber penghasilan bagi seorang blogger, yang sudah bersusah payah membagikan artikel agar bermanfaat untuk para pembaca. Namun, untuk blogger pemula terkadang merasa hasil dari iklan yang di tampilkan di blog belum seberapa atau sama sekali belum membuahkan hasil.


Nah untuk mendapatkan penghasilan agar lebih maksimal, seorang blogger harus menambahkan iklan diposisi terntentu agar iklan yang sudah dipasang mudah dilihat oleh para pembaca/pengunjung.

Agar lebih maksimal lagi, iklan dapat dipasang di dalam artikel blogger sesuai dengan keinginan diri sendiri. Ada 3 tawaran penempatan iklan yang banyak digunakan oleh para blogger, yaitu:
1. Dibawah judul artikel
Dengan menempatkan iklan dibawah judul akan membuat pembaca langsung melihat iklan yang sudah kita pasang.

2. Ditengah-tengah artikel
Posisi ini juga masih ideal, jika iklan relevan maka pembaca akan dengan mudah mengunjungi iklan yang ada.

3. Dibagian paling akhir/bawah artikel
Pengunjung akan ditunjukkan iklan setelah selesai membaca. Sehingga masih ada kemungkinan untuk mengunjungi iklan tersebut.

Cara Memasang Iklan di Dalam Postingan Blogger

1. Memasang Iklan di Bawah Judul Artikel

  • Siapkan kode iklan yang sudah diparse. Jika belum di parse langsung saja kunjungi link berikut Parse Kode Iklan 
  • Masuk ke blogger dan pilih menu Tema > Edit HTML
  • Kemudian masukkan kode dibawah ini tepat diatas kode <data:post.body/> untuk lebih cepat cari dengan kombinasi Ctrl + f
Pilih ingin posisi iklan yang kalian inginkan

a. Rata Kiri


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if> 


b. Rata Kanan


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-left: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if> 


c. Rata Tengah


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center;'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>

2. Memasang Iklan di Tengah-Tengah Artikel

  • Siapkan kode iklan yang sudah diparse. Jika belum di parse langsung saja kunjungi link berikut Parse Kode Iklan 
  • Masuk ke blogger dan pilih menu Tema > Edit HTML
  • Kemudian cari kode <data:post.body/> untuk lebih cepat cari dengan kombinasi Ctrl + f
  • Jika sudah ketemu, ganti code <data:post.body/> dengan kode dibawah ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<div class='separator' style='clear: both;
text-align: center; '>
Letakkan Kode Iklan yang sudah Anda PARSE disini
</div>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script> 


3. Memasang Iklan di Akhir/Bawah Artikel

  • Siapkan kode iklan yang sudah diparse. Jika belum di parse langsung saja kunjungi link berikut Parse Kode Iklan 
  • Masuk ke blogger dan pilih menu Tema > Edit HTML
  • Kemudian masukkan kode berikut ini tepat dibawah kode <data:post.body/> untuk lebih cepat cari dengan kombinasi Ctrl + f
a. Rata Kanan


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-left: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>


b. Rata Kiri


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>


c. Rata Tengah

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center;'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>

Notification
Selamat datang di masfadli.com. Jangan lupa memakai masker dan handsanitizer. Terapkan protokol yang ada ketika diluar rumah. STAY SAFE dan SELAMAT MEMBACA
Done