Situs web tanpa konten sama seperti rumah kosong, itu artinya tidak ada pengunjung yang akan datang ke situs web jika tidak ada konten disediakan disana.

Pada kesempatan ini kontenweb.com akan berbagi wawasan mengenai konten website yang mungkin bisa dijadikan referensi bagi kamu yang berpropesi sebagai pengelola website terutama bagi blogger-blogger pemula.
Ada banyak jenis konten website di dunia ini tapi tahukah kamu konten website seperti apa yang paling diminati oleh pengunjung dan konten website seperti apa yang mampu menarik banyak pengunjung ke situs web? Berikut pemaparan selengkapnya.

Daftar Konten Web Paling Banyak Peminat (Sering Dicari)

1. Video

Konten website yang paling diminati di urutan pertama adalah video, seiring menurunnya minat baca pengguna, video menjadi alternatif terbaik untuk dijadikan konten website. Sejak kehadiran youtube di dunia perwebsite-an orang-orang kini beralih ke pancarian video, mulai dari hiburan, berita hingga tutorial kini telah dicari lewat pencarian video.
(Video) Konten Website Paling Diminati
Tidak hanya youtube saja yang sukses menarik ratusan juta pengunjung ke situs web mereka melalui konten video, ada ratusan bahkan ribuan website sukses menarik banyak pengunjung ke situs web mereka melalui konten video.

Bagi kamu yang ingin mencoba bersaing di konten video, sekarang belum terlambat, masih banyak kesempatan jika ingin bekerja keras dan keluar sedikit modal untuk mempromosikan situs web kamu.

2. Artikel

Konten website yang paling diminati berikutnya adalah konten article, meskipun sempat mengalami penurunan ternyata konten artikel sampai saat ini belum terkalahkan sepenuhnya oleh konten video dalam menarik pengguna untuk mengunjungi situs web yang berbasis konten artikel.
(Artikel) Konten Website Paling Diminati
Ada banyak hal yang sulit dicerna pengguna melalui konten video maka dari itu, konten artikel menjadi satu-satunya alternatif terbaik untuk saat ini bagi pengguna demi mendapatkan apa yang mereka ingin dapatakan (tuju).

Sebut saja tutorial yang melibatkan bahasa pemograman sebagai contohnya. Dalam hal ini pengguna akan tentap mencari konten artikel, karena mustahil bagi banyak orang untuk menghafal css, html, javascrip dan sabagainya dengan menonton video.

Masih banyak lagi jenis-jenis konten artikel yang masih diminati dan mampu menarik banyak pengunjung ke situs web seperti artikel berita dsb, insya allah akan saya jelaskan dalam artikel yang akan datang.

3. File Dan Sofware Download

Konten website yang masih exis dan masih diminati banyak pengunjung yang ke tiga adalah file dan sofware download.
(File Dan Software Download) Konten Website Paling Diminati
Situs web yang berkecimpung di bidang ini pastinya masih mendapatkan pengunjung dan income yang menjanjikan, meskipun setiap perusahaan smartphone sudah memiliki playstore sendiri, faktanya masih banyak file dan software yang bisa sediakan dan masih di cari oleh banyak pengguna. Terutama file dan software download untuk kepentingan komputer.

4. Tool online

Konten website yang mampu menarik banyak pengunjung ke situs web yang terakhir adalah tool online, tidak hanya diminati tool online juga merupakan konten website yang mampu menarik pengguna yang sama untuk berkunjung ke situs web secara berulang-ulang. Baik itu web tools maupun tool layanan informasi masyarakat.

5. Forum

(Forum) Konten Website Paling Diminati
Konten website yang tidak kalah diminati oleh banyak pengguna ada forum, website forum biasanya disediakan untuk wadah tempat bertanya dan menemukan jawaban.

Bisa dikatakan website forum adalah tempat bertemunya sang penanya dan pemberi jawaban.

Kesuksesan website forum mengundang banyak pengunjung ke situs web tidak perlu diragukan lagi, bahkan website forum mampu memelihara pengguna atau member mereka untuk selalu berkunjung kembali.

Terima kasih sudah mengunjungi situs web kontenweb.com, semoga artikel ini bisa memberikan wawasan maupun referensi yang bagus buat kamu yang berpropesi sabagai pengolola website.

Hubungi admin melalui formulir kontak jika kamu punya referensi lain tentang konten website yang paling diminati oleh banyak pengguna, mari kita share ilmu dan pengetahuan sebanyak-banyak-nya.

Panduan Lengkap Memasang Iklan Adsense - Sebelumnya tutorial memasang iklan adsense di situs blogger memang sudah banyak bersebaran di internet, baik dari website bantuan google maupun dari blog-blog personal yang berasal dari platform blogger.com. Yang saya lakukan disini adalah memperjelas tutorial-tutorial cara memasang iklan adsense tersebut agar lebih mudah dipahami oleh siapa saja termasuk blogger pemula.

Memasang Iklan Adsense Di Paling Atas Artikel

Lebih spesifik posisi iklan yang saya maksudkan adalah dibawah judul artikel tepat sebelum badan artikel/konten seperti contoh pada gambar dibawah ini;
Untuk memasang iklan adsense diposisi tersebut (diatas posts) yang harus kamu lakukan adalah menempatkan kode iklan adsense tepat sebelum/diatas kode <data:post.body/> yang ada di dalam html template blogger.

Catatan: Template blogger biasanya memiliki kode <data:post.body/> yang lebih dari 1, bisa dua, tiga bahkan lebih, pilih kode <data:post.body/> yang berada di dalam tag kondisional data:blog.pageType == &quot;item&quot; seperti contoh dibawah ini;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
//Code Adsense Here
<data:post.body/>
<--Other Code-->
</b:if>[/code]
Atau pada desain template yang berbeda akan terlihat seperti berikut ini;
[code type="HTML"]<b:if cond='data:blog.pageType in {&quot;static_page&quot;, &quot;item&quot;}'>
//Code Adsense Here
<data:post.body/>
<--Other Code-->
</b:if>[/code]
Atau kamu bisa mencoba satu-persatu kode <data:post.body/> yang dimaksudkan diatas.

Memasang Iklan Adsense Dibawah Artikel

Langkah-langkah untuk memasang iklan adsense dibawah artikel (bottom of content) masih sama dengan petunjuk diatas, yang membedakan hanya kode iklan adsense yang akan dipasangkan ditempatkan setelah atau dibawah kode <data:post.body/> seperti contoh berikut ini;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
//Ads Top Content Here
<data:post.body/>
//Ads Bottom Content Here
<--Other Code-->
</b:if>[/code]
Untuk mempercepat pencarian kode <data:post.body/> ikuti langkah berikut ini;
  • Masuk ke Blogger.com, kemudian
  • Pilih Tab Template > Edit HTML
  • Tempatkan kusor atau klik sembarang di area kode template, kemudian
  • Tekan tombol Ctrl + F pada keyboard
  • Pada kolom pencarian/find action yang muncul masukkan kode <data:post.body/> kemudian tekan enter untuk mulai mencari.

Memasang Iklan Adsense Ditengah Artikel

Jika memasang iklan diatas dan dibawah konten (artikel) cukup hanya menempatkan kode iklan diatas atau dibawah kode <data:post.body/> maka akan berbeda ketika memasang iklan adsense ditengah artikel.

Diperlukan container baru yang dapat membelah/membagi konten agar iklan adsense dapat disisipkan ditengahnya, untuk melakukan itu silahkan ganti kode <data:post.body/> tersebut dengan script berikut ini;
[code type="HTML"]<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='middle-ad'>
//AdSense ad code here
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script async='async' 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>[/code]
Jika ketiga langkah tersebut (memasang iklan adsense diatas, ditengah dan dibawah artikel) saya sederhakan, maka akan terlihat seperti berikut ini;[ads-post]
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
//Ads Top Content Here
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='middle-ad'>
//Ads Middle Content Here
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script async='async' 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>
//Ads Bottom Content Here
<--Other Code-->
</b:if>[/code]

Memasang Iklan Adsense Di Footer Of Content

Iklan adsense di footer of content juga tidak kalah populer dikalangan blogger, posisi iklan di footer of content terbilang cukup berpotensi memberikan penghasilan kepada pemilik situs, posisi yang lebih spesifik iklan footer of content adalah dibawah tombol share.

Untuk memasang iklan adsense di footer of content cukup mudah, kamu hanya perlu menambahkan atau memasang kode iklan adsense dibawah kode penutup </article> dengan format seperti berikut ini;
[code type="HTML"]
<b:if cond='data:blog.pageType == &quot;item&quot;'>
//Ads Footer Of Content Here
</b:if>[/code]
Tips: Gunakan iklan adsense responsive untuk mendapatkan performa dan penayangan iklan yang maksimal.

Demikian panduan memasang iklan adsense di template blogger, semoga bermanfaat dan dapat membantu anda dalam menyelesaikan masalah pemasangan iklan adsense, selamat mencoba dan good luck for you.

Cara Membuat Tabel Responsive - Di tutorial ini, saya akan membagikan desain tabel data responsive yang simple, ringan namun tetap elegan dan memiliki aksesibilitas yang sangat baik untuk pengguna, dan itu saya lalukan hanya dengan menggunakan css dan html dasar dengan size yang sangat kecil karena saya mengerti, halaman web anda mungkin membutuhkan lebih banyak variasi table data yang responsive dan tidak membebani loading situs web.
Jadi langsung saja, ambil css table responsive-nya di bawah ini dan simpan atau pasang di kumpulan css situs web anda, untuk pengguna blogger silahkan letakkan css tabel data diatas kode ]]></b:skin> atau </style>.
[code type="CSS Table Responsive"]table th{color:#1e1e1e}table caption{color:#1e1e1e;font-size:17px;font-weight:700;text-transform:uppercase}table.data,main table{width:100%;background-color:#fff}table.number_list th:first-child{width:26px;text-align:center}table.data th,main table th{background-color:#007b37;color:#fff}table.data th[scope=col],main table th[scope=col]{border-bottom:grey 1px solid}table.data th[scope=row],main table th[scope=row]{border-right:grey 1px solid}table.data,table.data th,table.data td,main table,main table th,main table td{border-collapse:collapse;border:1px solid #ccc;vertical-align:top}table.data td,table.data th,main table td,main table th{padding:4px}table.data th,main table th{font-weight:700}table.data td,main table td{background-color:#fff!important}[/code]
Kemudian, untuk membuat table di halaman posts, silahkan gunakan kode html table data berikut ini melalui mode pengeditan HTML bukan Compose seperti contoh berikut ini;
html table

HTML Table (2 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
  </tbody>
</table>[/code]
Jika kamu ingin membuat table data 4 column dan 5 row, gunakan kode html berikut ini dan ganti teks atau isi data sesuai dengan yang ingin input kedalam tabel.

HTML Table (3 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Row 1</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 2</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 3</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 4</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 5</th><td>Data</td><td>Data</td></tr>
  </tbody>
</table>[/code]

HTML Table (4 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th><th scope="col">Column 4</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Data 1</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
 <tr><th scope="row">Data 2</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
 <tr><th scope="row">Data 3</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
  </tbody>
</table>[/code]
Kamu mungkin ingin melihat demo table responsive ini, sebelum menerapkannya ke situs web, silahkan uji demo table data responsive berikut di berbagai ukuran layar (deice)
Table Data Responsive
Kolom 1Kolom 2Kolom 3Kolom 4
Baris 1Data 1Data 2Data 3
Baris 2Data 1Data 2Data 3
Baris 3Data 1Data 2Data 3

HTML Table Dengan Daftar/List

Kusus untuk membuat table dengan list atau daftar (number list), gunakan kode html table berikut ini, sedangkan kode css table responsive yang digunakan masih sama.
[code type="HTML"]<table class="data number_list">
<caption>Teks Caption Disini</caption>
<thead>
<tr><th scope="col">No</th><th scope="col">Month</th><th scope="col">Production</th><th scope="col">Reject</th><th scope="col">Other</th></tr>
</thead>
  <tbody>
<tr><th scope="row">1</th><td>January</td><td>97%</td><td>2%</td><td>input</td></tr>
<tr><th scope="row">2</th><td>February</td><td>73%</td><td>0,5%</td><td>input</td></tr>
<tr><th scope="row">3</th><td>March</td><td>100%</td><td>5%</td><td>input</td></tr>
<tr><th scope="row">4</th><td>April</td><td>89%</td><td>1%</td><td>input</td></tr>
<tr><th scope="row">5</th><td>May</td><td>65%</td><td>0%</td><td>no data</td></tr>
</tbody>
</table>[/code]
Demo table resposnsive dengan dafar atau list (number list)
Table Responsive With Number List
NoMonthProductionRejectOther
1January97%2%input
2February73%0,5%input
3March100%5%input
4April89%1%input
5May65%0%no data

Spesifikasi Table
  • Desain responsive dan support di banyak jenis browser (IE, Firefox, Chrome, Safari, Opera)
  • Ringan (tidak mempengaruhi kecepatan loading situs web)
  • Font tabel mengikuti setelan font pada halaman web
  • Mudah di pasang di situs web apa saja (blogger, wordpress dll)
  • Gratis selamanya
Demikian tutorial membuat table responsive, semoga artikel ini bisa membantu anda dalam membuat tabel yang responsive di situs web anda dan memberikan manfaat kepada banyak blogger-blogger yang aktif di konten review.

Cara Memasang Form Komentar Facebook Di Template Blogger - Beberapa waktu lalu saya baru saja mempublikasikan tutorial memasang plugin komentar disqus di template blogger, dan pada kesempatan ini saya kembali dengan tutorial yang masih membahas form komentar (widget komentar) yaitu "cara memasang form komentar facebook di template blogger".

Secara teknis langkah-langkah yang saya gunakan dalam menginstall / memasang widget form komentar facebook di template blogger masih sama dengan tuturial yang sebelumnya (memasang komentar disqus), jika kamu sudah mengikutinya maka tutorial memasang form komentar facebook di template blogger ini akan terasa mudah untuk diaplikasikan.
Langsung saja ke proses penginstallan form komentar facebook, langkah pertama yang harus dilakukan adalah memasang css facebook comments diatas kode kode ]]></b:skin> atau diatas kode </style> agar tampilan form komentar facebook responsive dan memiliki lebar yang penuh (sesuai dengan lebar post body), berikut css nya.
[code type="CSS"]/* --- Facebook Comments --- */
#container-commentfb .fb-comments,#container-commentfb .fb_iframe_widget,#container-commentfb .fb_iframe_widget span,#container-commentfb .fb_iframe_widget iframe{width:100%;display:block!important;min-width:100%;}[/code]
Selanjutnya kita menuju penginstallan kode html widget dan script facebook comments, lakukan ini secara perlahan (step by step).
[ads-post]
Cari kumpulan kode widget form komentar blogger, atau cari kode di bawah ini;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Atau jika folder kode terbuka maka kode diatas akan terlihat seperti ini;
[code type="JS"]<b:includable id='comments' var='post'>
...other code...
...other code...
</b:includable>[/code]
Kemudian, tepat dibawahnya tambahkan kode facebook app id dan script facebook comments berikut ini (pasang secara beruntun);
[code type="HTML"]<b:includable id='displayed-facebookid' var='post'>
<div id='facebook-comment-appid' style='display:none'>218168578325095</div>
</b:includable>
<b:includable id='facebook-comment' var='post'>
<b:if cond='data:post.allowNewComments'>
 <div id='fb-root'/>
 <div class='facebook-comment comment-box' id='facebook_cm'>
 <div class='hide' style='line-height: 0;visibility: hidden;'>
 <script>
 var APPID = $('#facebook-comment-appid').text();
 if (APPID == '' || APPID == null) {
 APPID = '218168578325095';
 }
 window.fbAsyncInit = function(){
 FB.init({appId:APPID,status:true,cookie:true,xfbml:true});};
 (function(){var e = document.createElement('script');
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
 </script>
 </div>
 <script async='async' src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
 <div id='container-commentfb'>
 <div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='100%' expr:data-href='data:post.url'/>
 </div>
 </div>
</b:if>
</b:includable>[/code]
Perhatikan nomer seri plugin komentar facebook 218168578325095 pada kode diatas, itu adalah kode facebook app id saya, setelah widget komentar facebook berhasil di install sepenuhnya silahkan ganti kode facebook app-id saya dengan kode facebook app-id anda sendiri.

Langkah selanjutnya cari juga kode dibawah ini;
[code type="HTML"]<b:includable id='iframe_comments' var='post'>....</b:includable>[/code]
Kemudian diatas kode tersebut tambahkan kode berikut ini;
[code type="HTML"]<b:includable id='fn_comment_picker' var='post'>
<div class='comments'>
 <b:if cond='data:post.allowComments'>
  <b:include data='post' name='displayed-facebookid'/>
  <b:if cond='data:top.commentLabel != &quot;facebook&quot;'>
   <b:include data='post' name='comment_picker'/>
  </b:if>
  <b:if cond='data:top.commentLabel == &quot;facebook&quot;'>
   <b:include data='post' name='facebook-comment'/>
  </b:if>
 </b:if>
  </div>
</b:includable>[/code]
Catatan: Jika semua kode yang dimaksud tidak ada atau tidak ditemukan didalam template blog anda, silahkan pasang secara beruntun semua kode dan script facebook comments yang saya berikan tepat berada dibawah kode;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Terakhir cari kode di bawah ini untuk menyelesaikan penginstallan form komentar facebook di template blogger, berikut kode nya;
[code type="CSS"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>[/code]
Perhatikan kode comment_picker silahkan ganti 'comment_picker' dengan 'fn_comment_picker' kemudian save template, pada tahap ini widget form komentar facebook sudah selesai di install namun status-nya masih dalam keadaan siaga atau stanby. Untuk menampilkan widget komentar facebook silahkan pergi ke Tata Letak Blogger > Widget Post/Blog klik Edit, pada kolom tampilkan komentar ganti teks "komentar" menjadi "facebook" (tanpa tanda petik), lihat contoh gambar dibawah ini;
Menampilkan Form Komentar Facebook
Penting: Jika sebelumnya kamu sudah mengaplikasikan tutorial memasang komentar disqus dari situs ini maka harap di hapus terlebih dahulu agar pemasangan widget komentar facebook ini berjalan dengan mulus dan jangan lupa follow by email situs ini untuk mendapatkan pemberitahuan konten terbaru dari blog ini.

Kelebihan: Teknik pemasangan plugin komentar facebook pada tutorial ini valid html5 dan memungkinkan anda mengganti form komentar dengan cepat (facebook atau blogger), jika ingin kembali ke komentar blogger kamu hanya perlu mengaktifkan-nya melalui tata letak (ganti "facebook" menjadi "blogger" atau "komentar" dan tanpa tanda petik), Selain itu script facebook comments pada tutorial ini juga memungkinkan browser untuk memuat halaman situs secara dinamis (lebih cepat) karena menggunakan teknik pemuatan script asyncr.

Membuat Thumbnail Image Khusus URL HomePage - Home Page atau halaman beranda website harusnya memiliki thumbnail image sendiri seperti logo website yang sudah di desain khusus untuk menggambarkan keorganisasian website itu sendiri, saya memperhatikan banyak situs-situs blog personal yang tidak memperhatikan ini, jadi ketika pengguna membagikan url homepage situs web mereka ke sosial media, gambar thumbnail yang muncul berasal dari halaman post sehingga seringkali gambar thumbnail tersebut tidak sesuai dengan judul dan deskripsi situs.
Cara Membuat Thumbnail Image Khusus URL HomePage
Maka dari itu sekarang saya akan menjelaskan dan membagikan cara membuat thumbnail image khusus URL HomePage dengan menggunakan sedikit tag meta, mari kita simak dengan seksama.
  1. Siapkan gambar atau logo situs kemudian upload ke host masing-masing, kemudian copy url gambar atau logo yang akan dijadikan thumbnail image url homepage
  2. Khusus untuk pengguna blogger silahkan gunakan url gambar logo header masing-masing.
  3. Jika situs tidak menggunakan logo header, silahkan upload gambar melalui posts editor atau page editor,
  4. Setelah gambar berhasil di upload, klik HTML Mode pada post editor untuk melihat url gambar (logo), agar lebih mudah silahkan Open image in new tab untuk melihat url gambar kemudian Copy URL
  5. Setelah URL gambar di dapatkan (di copy), boleh menghapus gambar logo yang ada di post editor, kemudian
  6. Masuk ke HTML Template dan tambahkan kode atau tag meta berikut ini tepat sebelum atau di atas kode </head>.
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='url_image_here/logo.png' property='og:image'/>
</b:if>[/code]
Secara lengkap meta tags yang mengatur thumbnail image, baik hompage maupun postpage adalah sebagai berikut;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='https://4.bp.blogspot.com/-JNT92J_5SbY/XUgRrdSUnxI/AAAAAAAAAjo/8kKdGf6s52YIhBhJZRBapr04Q9wNgGoqgCK4BGAYYCw/logo.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:elseif cond='data:blog.postImageThumbnailUrl'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if>[/code]
Cara ini bisa juga digunakan untuk memperbaiki logo website yang tidak muncul di sosial media. Sekarang cobalah sendiri, jika anda ingin melihat apakah tutorial ini benar-benar bekerja dengan baik, silahkan share url situs blog Gigi Pages ke sosial media anda.

Tips Mengatasi Iklan Adsense Yang Blank - Setelah google adsense melakukan banyak perubahan pada kebijakan iklan mereka banyak publisher yang mengalami iklan adsense blank sehingga banyak terdapat slot iklan kosong karena iklan tidak muncul/tidak tampil.

Sebenarnya ini masalah sederhana bahkan google sendiri telah menjelaskan cara mengatasi iklan adsense yang tidak muncul (blank) tetapi mungkin beberapa publisher tidak memperdulikan notifikasi adsense yang dikirimkan melalui dashboard publisher.
Jika kamu adalah salah satu publisher yang mengalami hal ini (iklan adsense blank), sebaiknya periksa dashboard adsense anda dan ikuti petunjuk pembaharuan google adsense, jika tidak ada pemberitahuan silahkan lihat pada url dibawah ini;
[code type="URL"]https://support.google.com/adsense/announcements/9189068?hl=id[/code]

Penyebab Iklan Adsense Blank Dan Cara Mengatasinya

Sebelum ke tahap mengatasi masalah iklan adsense blank sebaiknya mari kita simak terlebih dahulu faktor-faktor apa saja yang menyebabkan iklan adsense blank padahal sebelumnya muncul.

1. Terkena Dampak Pembaharuan Kebijakan Adsense

Perubahan kebijakan google adsense pada 2019 tidak hanya sebatas perubahan pada dashboard dan penghapusan iklan teks saja, algoritma iklan adsense, tepatnya pada bagian "experiment" juga telah diperbaharui sehingga berdampak langsung pada unit iklan dan penayangan iklan.

Maka dari itu sangat disarankan untuk menghentikan/menghapus experiment lama pada unit iklan agar metrik dan jenis-jenis experiment yang baru (yang ditawarkannya saat ini bekerja dengan baik), Setelah menghapus experiment yang lama tunggulah 1 - 2 hari insya allah iklan akan tayang kembali.

Jika iklan masih tetap blank setelah menghapus experiment, disarankan untuk mengganti unit iklan lama dengan unit iklan baru dan dengan ukuran responsive (recommend).

2. Penayangan Iklan Dibatasi

Jika penayangan iklan adsense anda dibatasi biasanya akan ada pemberitahuan baik itu melalui dashboard adsense maupun pemberitahuan melalui email, ini masalah yang serius pembatasan penayangan iklan umumnya dikarenakan rendahnya kualitas trafik situs, tapi ini belum sampai level banned dan masih bisa diatasi.

Untuk mengatasi pembatasan penayangan iklan adsense perbanyaklah membuat konten original dan pastikan pencarian keyword yang dikandung oleh konten memiliki peminatnya sendiri, selanjutnya pelajari SEO untuk mendorong konten masuk ke halaman 1 Google SERP.

3. Situs Melanggar Kebijakan Adsense

Selain dua hal diatas pelanggaran kebijakan google adsense juga sering menyebabkan iklan adsense menjadi bank, tetapi biasanya hanya dibeberapa halaman saja yang ditangguhkan penayangan iklan-nya, tergantung seberapa berat pelanggaran yang dilakukan.

Jika ingin bermitra lebih lama dengan google adsense, sebagai publisher yang baik sudah seharusnya kita menghindari segala bentuk kecurangan dan memahami dengan baik semua kebijakan-kebijakan google adsense agar terhindar dari pelanggaran-pelanggaran yang mungkin terjadi secara tidak disengaja ketika mengembangkan situs.

4. Akun Adsense Dinonaktifkan (Banned)

Hal ini sebenarnya jarang terjadi karena satu kesalahan kecil saja google dapat mendeteksi dan langsung memberitahukan jika terdapat konten atau halaman situs yang melanggar kebijakan google adsense, banned hanya terjadi pada publisher-publisher yang bandel dengan tingkat kecurangan diluar batas.

Jika itu terjadi maka jalan satu-satunya agar situs tetap memiliki penghasilan adalah dengan beralih ke alternatif iklan yang lain, kamu dapat mencari informasi di search engine mengenai platform iklan digital yang membayar publisher mereka dengan bayaran tinggi seperti google adsense.

Diluar dari 4 hal diatas yang menyebabkan iklan adsense blank adalah situs dalam proses review dan mungkin juga dikarenakan kesalahan ketika memasang kode iklan adsense.

Jika situs dalam masa review tidak banyak yang dapat dilakukan selain terus membuat konten-konten unik dan fresh tetapi jika karena kesalahan pemasangan kode iklan, silahkan baca artikel saya yang membahas tentang pemasangan kode iklan adsense [Klik disini].

SEO Blogger - Platform Blogger.com pada dasarnya sudah di desain atau sudah memiliki fitur yang mendukung pengoptimalan mesin telusur "search engine optimizer" atau umum disebut SEO (Search Engine Optimization). Hanya saja mungkin banyak blogger pemula kurang mengerti bagaimana seharusnya menggunakan blogger agar web/blog lebih SEO Friendly dan dapat bersaing di laman hasil penelusuran (Google, Bing, Yahoo dan Yandex).

Manfaat dan Tujuan SEO (Search Engine Optimization)

  • Meningkatkan volume trafik organik
  • Menargetkan konten ke audiens (calon pengunjung) yang tepat
  • Mempertahankan PageRank (Ranking) halaman secara terus-menerus
Jadi pada kesempatan kali ini saya akan membagikan tips dan trik seo pada platform blogger dengan mengoptimalkan "Setup" beberapa pengaturan dan fitur pendukung web blogger. Berikut langkah-langkah SEO yang harus dilakukan.

Optimasi Header Blog & Keyword

Buatlah nama dan domain unik untuk situs blog anda misalnya "Borisinil" dan url yang digunakan borisinil.blogspot.com atau borisinil.com untuk custom domain.

Kemudian aktifkan <meta> Description dan isi deskripsi blog dengan kalimat yang mengandung kata kunci yang memberikan gambaran tentang judul dan nice situs.
Meta description blogger
Meta description blogger
Meta description berfungsi untuk menampilkan cuplikan "keterangan" tentang informasi sebuah laman web di laman hasil pencarian. Cuplikan atau paragraf pendek yang ditampilkan pada deskripsi situs sangat membantu untuk meningkatkan jumlah klik (trafik) situs.
Deskripsi Penelusuran
Deskripsi Penelusuran
Pada dasarnya fungsi deskripsi adalah untuk memberikan informasi yang lebih jelas kepada user mengenai url web yang mereka lihat di laman hasil pencarian, terkadang mesin pencari juga memanfaatkan kata kunci yang ada pada deskripsi jika kata kunci yang cari oleh user tidak ditemukan di dalam laman web.

Mengoptimalkan Konten Blog

  1. Buatlah judul konten "artikel" dengan kalimat yang jelas dan singkat
  2. Hindari penggunaan kata yang berulang pada judul artikel.
  3. Hindari penggunaan URL yang terlalu panjang pada url konten/artikel.
  4. Sisipkan kata kunci pada judul artikel, URL dan deskripsi artikel.
1. Teknik Penulisan Artikel dan Keyword

Konten "Artikel" yang SEO Friendly memiliki 3 ciri khas yaitu; Deskriptif, Informatif dan Fresh atau ide baru, jika 3 ciri tersebut sudah terpenuhi 80% artikel sudah seo friendly, untuk mendapatkan nilai atau ranking yang lebih di search engine sedikit tambahan teknik seo perlu diterapkan untuk mengoptimalkan konten / artikel, berikut penjelasan lengkap nya;
  • Buatlah konten atau artikel dengan penjelasan yang lengkap dan tidak bertele-tele.
  • Gunakan "bullet list" untuk mengumpulkan poin-poin materi.
  • Gunakan long tail keyword untuk mendukung kata kunci utama artikel.
  • Buat deskripsi artikel dengan kalimat jelas (deskriptif) dan berisi kata kunci
  • Gunakan subheading (heading tag) pada artikel yang panjang
  • Link-in - Hubungkan antar artikel yang memiliki keterkaitan yang sangat dekat dengan menggunakan tautan.
2. Optimasi Multimedia "Gambar atau Image"

Salah satu perayap google yang paling berpengaruh terhadap indexing dan crawling situs web adalah googlebot-image, Itu sebabnya di dalam sebuah artikel hendaknya disertakan multimedia pendukung misalnya seperti gambar, tujuan-nya agar artikel lebih mudah dikenali dan dapat ditemukan di laman hasil pencarian dengan banyak cara.

Untuk memaksimalkan perayapan "googlebot-image" terhadap laman web atau artikel perlu dilakukan beberapa pengoptimalan pada gambar artikel yaitu;
  • Tambahkan Caption dan Alt Image pada gambar yang di upload kedalam artikel
  • Sisipkan kata kunci utama artikel pada teks Caption dan Tag Alt Image
  • Gunkan file gambar yang sesuai dengan standard web (PNG, JPG, GIF, and SVG)
  • Hindari penggunaan gambar diatas 500kb
Selain memaksimalkan konten di mesin telusur, penggunaan gambar dengan size yang lebih kecil juga bermanfaat untuk menjaga kecepatan pemuatan "loading" situs web/blog.

SEO Strategy

Apa yang dimaksud dengan SEO Strategy? Mengapa SEO membutuhkan strategy? Selain mengoptimalkan konten dan keyword, Optimasi SEO juga membutuhkan strategy untuk menunjang konten yang sudah dioptimalkan di mesin telusur dan berikut ini adalah beberapa strategy yang harus diterapkan dalam Optimasi SEO Blogger.

1. Membuat Navigasi Situs Yang Jelas
  • Kelompokkan artikel dengan menggunakan tag label
  • Hindari penggunaan tag label yang berlebihan (Ideal nya 1 hingga 2 tag label)
  • Hindari penggabungan tag label yang berlawanan misalnya "SEOCooking", yang benar adalah "SEO, Blogging".
Fungsi tag label pada dasarnya adalah untuk membuat kategori artikel/mengelompokkan konten berdasarkan kategori, kemudian didukung dengan Breadcrumb akan memudahkan mesin pencari menemukan konten atau artikel berdasarkan kategori (tag label).

2. Optimasi Blog Di Sosial Media

Mengapa harus mengoptimalkan blog di sosial media? Dalam dunia blogging sosial media merupakan alat promosi situs/konten yang paling efektif, secara tidak langsung grafik lalu lintas (trafik) yang diperoleh melalui sosial media juga mempengaruhi "memberikan pengaruh baik" terhadap rating konten dan situs itu sendiri di search engine dan yang harus dilakukan untuk mengoptimalkan situs web di sosial media adalah;
  • Mengatur thumbnail share posts dan header blog agar lebih menonjol di Sosial Media (Facebook, Twitter, Gplus, Pinterest, LinkedIn dan sebagainya)
  • Membuat laman sosial media yang serupa dengan nama (judul situs web), ini bertujuan agar keyword situs dapat mendominasi halaman hasil penelusuran search engine "google".
  • Kaitkan laman sosial media dengan situs blog untuk membangun backlink positif
  • Bagikan setiap post yang di publikasikan di situs blog ke laman sosial media, untuk mendongkrak keterlihatan (Fanspage Facebook, Twitter, Gplus, Pinterest, LinkedIn dsb) dilaman hasil pencarian search engine.
Sebagai contoh optimasi SEO dengan memanfaatkan sosial media, cobalah ketikkan keyword "Halaman Kepri" di penelusur anda, hampir 100% laman hasil pencarian dikuasai sepenuhnya oleh situs tersebut.

3. Memaksimalkan Kecepatan Pemuatan Situs
  • Asynchronous bundling javascript yang memblokir rendering
  • Kurangi penggunaan inline css pada html situs
  • Minify JavaScript, CSS dan HTML Situs
  • Gunakan Tag DNS Prefetching, atau
  • Gunakan template AMP jika memungkinkan.
Prioritas utama google pada mesin pencari adalah mengutamakan kenyamanan kepada pengguna-nya khususnya pengguna mobile device. Oleh sebab itu google mengajak semua pengembang situs untuk membuat website yang mobile friendly (ramah seluler), Dan bukan rahasia umum jika google memprioritaskan situs yang lebih cepat di mesin pencarian nya.

4. Membantu Penelusur Menemukan Konten Situs
  1. Hindari pencekalan perayapan yang berlebihan oleh robots.txt
  2. Submit sitemap atau peta situs ke webmaster tools "Google Search Console"
  3. Tambahkan Breadcrumb ke situs web/blog
  4. Aktifkan/Buat Tag lokasi untuk mengoptimalkan konten di pencarian lokal
  5. Gunakan meta keyword blogger
  6. Perbaiki markup structured data situs
Lakukan hal serupa "submit sitemap" pada webmaster bing, yahoo dan yandex agar konten situs (artikel) dapat ditemukan di laman hasil penelusuran mereka.

5. Membangun Backlink Secara Berkala

Setiap konten situs blog yang sudah di index oleh perayap google umumnya sudah mendapatkan backlink (tautan balik) dari google, namun itu belum cukup untuk meningkatkan rating situs karena situs web lain juga mendapatkan backlink serupa, berikut tips membangun backlink situs;
  • Upload file video atau gambar original ke dalam konten situs (file original merupakan umpan untuk mendapatkan backlink berkualitas ketika file dipinjam oleh situs lain)
  • Berkomentar di situs-situs populer secara berkala dan pilih situs yang menggunakan kolom komentar dengan link situs (Forum profile).
  • Menulis di blog guest posts atau forum-forum terbuka.
Terakhir kaitkan situs blog dengan Google Analytics, bagian ini sebenarnya hanya untuk menganalisa kinerja situs baik performa maupun keberadaan situs di laman hasil penelusuran, melalui hasil analisa tersebut kita dapat memutuskan langkah-langkah apa saja yang harus dilakukan untuk menunjang perkembangan situs dan pengoptimalan mesin telusur (SEO).

Tutorial diatas merupakan gabungan teknik SEO On-Page dan SEO-Off  Page, diterapkan dengan benar maka situs blog sudah tergolong seo friendly sehingga hampir tidak perlu lagi mempelajari teknik SEO On-Page dan SEO-Off  Page melainkan hanya memahami dasar-dasar materi nya saja.

Cara Menggunakan Aria (Atribut HTML) - Secara garis besar aria merupakan sejumlah mekanisme yang dikembangkan oleh W3C untuk menambahkan label dan keterangan pada elemen html, menambahkan bantuan teks keterangan yang bisa diakses dengan tujuan membangun pohon aksesibilitas halaman web yang lebih ramah kepada pengguna. Tidak sampai disitu saja atribut aria juga dapat digunakan untuk membuat span tersembunyi pada suatu elemen html dan mengidentifikasi secara eksplisit elemen tersebut sehingga pembaca layar dapat menafsirkannya dengan benar.

Sekarang mari kita simak dasar-dasar cara penggunaan dan penerapan atribut aria pada html berikut ini;

Aria-label

Pada elemen html asli dan semantik bawaan, aria-label adalah aribut yang sama dengan atribut title, keduanya sama-sama dapat saling menggantikan satu sama lain. tetapi jika kamu ingin memunculkan isi label (teks bantu aria-label) ke permukaan maka dibutuhkan sedikit sentuhan css sehingga pengguna dapat melihatnya.

Contoh:
[code]<a href="https://www.blogger.com/" aria-label="Hi, link ini akan mengalihkan anda kehalaman blogger">Blogger</a>[/code]
Css Aria-label
[code type="CSS"][aria-label]:after{content:attr(aria-label);display:none;position:absolute;bottom: 120%;left:10px;pointer-events: none;padding:8px 10px;line-height:15px;white-space:nowrap;text-decoration:none;text-indent:0;overflow:visible;font-weight: normal;color:#3a3838;z-index:9999;background-color:#fff;border:1px solid #c1bfbf;border-bottom:2px solid #008066;-webkit-box-shadow:2px -3px 10px rgba(0,0,1);box-shadow:2px -3px 10px rgba(0,0,1)}
[aria-label]:hover:after,[aria-label]:focus:after{
display: block;}[/code]
Jika dilihat pada halaman yang nyata maka elemen <a> akan terlihat seperti gambar dibawah ini ketika pengguna mengarahkan mouse ke element tersebut.
Berbeda dengan atribut title="teks" yang tidak membutuhkan css untuk menampilkan teks bantu, tetapi dalam membangun pohon aksesibilitas atribut aria lebih efektif untuk memodifikasi cara elemen diterjemahkan. Secara umum aria-label digunakan pada elemen <a>, <input>, <img> dan <button>.

Aria-label dan Role="img"

Gambar Tunggal:
[code]<img src="image.png" aria-label="teks deskripsi" alt="alternatif teks"/>[/code]
Group:
[code]<div role="img" aria-label="deskripsi elemen">
  <img src="image.png" alt="alternatif teks"/>
  <img src="image.png" alt="alternatif teks"/>
  <img src="image.png" alt="alternatif teks"/>
</div>[/code]
Atau kamu dapat menggunakan aria-labelledby untuk melabeli elemen gabungan seperti atas, aria-labelledby memungkinkan kita menetapkan ID elemen lain dalam DOM sebagai label elemen. ini masih sama dengan penggunaan elemen label atau aria-label, kelebihannya aria-labelledby dapat digunakan pada sembarang elemen tidak hanya pada elemen yang bisa diberi label seperti yang dijelaskan pada bagian aria-label di paragraf atas bahkan lebih diutamakan dari atribut apapun yang ada pada elemen tersebut.

Untuk mendalami atribut aria pada html secara khusus kamu perlu melihat spesifikasi atribut aria di situs resmi aria yaitu w3.org.

Pengertian Inline Css Dan Cara Mengatasinya - Ketika menguji situs di Google PageSpeed Insights mungkin kamu akan melihat peluang untuk menambah kecepatan pemuatan (loading) situs yaitu dengan mengurangi atau menghilangkan Inline Css dari dalam template situs. Sebenarnya apa sih yang dimaksud dengan inline css itu? Inline Css adalah style css yang ditanamkan pada line/baris HTML, Sederhananya Inline Css merupakan style css yang berada di area tag pembuka <body> dan tag penutup </body> "tidak berada ditempat yang seharusnya yaitu <head>". Untuk lebih jelasnya mari kita simak contoh gambar dibawah ini;
Pengertian Inline Css Dan Cara Mengatasinya
Penjelasan: CSS (Cascading Style Sheets) sepatutnya dikumpulkan "berada" diantara tag pembuka <head> dan </head>, jika style css berada di bagian body atau berada pada line html maka style css tersebut disebut sebagai inline css.

Cara Mengatasi Inline Css

Sebagian kecil inline css dapat dihapus begitu saja namun sebagian lagi tidak, harus ditambahkan property (id='...' atau class='...') pada elemen html yang di dalamnya terdapat inline css, kemudian memindahkan style css pada properti baru dan menempatkan nya di <head>. Contoh;
[code type="HTML"]<textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>[/code]
Pada baris html textarea tersebut, style='display:none;' dikatakan sebagai inline css, karena berada pada baris atau line html, jadi untuk menghilangkan inline css dari baris html tersebut kita tambahkan property baru sehingga menjadi seperti dibawah ini;
[code type="HTML"]<textarea class='hide-textarea' expr:id='&quot;postData-&quot; + data:post.id'><data:post.body/></textarea>[/code]
Kemudian css style='display:none;' diganti menjadi .hide-textarea{display:none} kemudian ditempatkan pada kumpulan css yang berada diantara tag <head> dan </head>, atau di atas kode ]]></b:skin> jika kamu pengguna blogger.

Contoh Inline Css lainnya

Pada template web (blogger) kamu mungkin sering melihat kode ini <div style='clear: both;'/>, kode tersebut juga merupakan inline css karena terdapat property style css di dalam kode html, untuk merubahnya agar tidak menjadi inline css ganti kode tersebut dengan <div class='clear'/> kemudian tambahkan style css ini; .clear{display:block;clear:both;height:0} ke bagian kumpulan css yang berada di tag head.

Contoh inline css lainnya adalah; kode <div style='text-align: center; margin:10px 0'>Element Lain</div> kode ini biasanya digunakan untuk memposisikan suatu elemen menjadi center (ditengah-tengah), sebaiknya tidak seperti itu, silahkan ganti <div style='text-align: center; margin:10px 0'> dengan kode <div id='middle-ad'> misalnya, kemudian css nya menjadi;
#middle-ad{clear:both;display:block;text-align:center;margin:10px 0;}
Dan ditempatkan pada kumpulan css yang seharusnya yaitu di area <head>.

Catatan: Sebelum menambahkan id atau property 'class' baru misalnya: middle-ad pastikan nama id atau class baru tersebut belum ada pada elemen yang lain, agar style CSS tidak bercampur antara satu dengan yang lain.

Masih banyak lagi bentuk-bentuk inline css yang bisa kamu temui pada html template web kamu khusus nya template blogger, seperti properti "width" dan "height" ,biasanya inline css terdapat pada widget-widget blogger seperti widget header, followbyemail, popular post dan sebagainya.

Lakukan perubahan secara perlahan dan jangan lupa backup template anda sebelum merubah atau mengedit sesuatu di dalamnya guna menghindari kesalahan.

Tips: Pada prinsipnya inline css merupakan hal yang wajar, namun jika halaman web memuat terlalu banyak inline css maka akan menyulitkan browser dalam menguraikan situs web. Menghilangkan inline css hingga 100% memang sangat sulit dilakukan.

Cara Meningkatkan Aksesibilitas Situs Web - Selain SEO, Aksesibilitas juga merupakan salah satu faktor kesuksesan situs web, meskipun secara garis besar aksesibilitas sebenarnya ditujukan untuk kemudahan akses pengguna, memaksimalkan ketersediaan situs dan kemudahan jangkauan kepada audiens yang lebih luas dengan disabilitas yang beragam.

Ada banyak alasan kenapa harus meningkatkan aksesibilitas situs web, tapi yang lebih logis bagi anda mungkin adalah masalah keterlihatan konten, audiens dengan penglihatan yang normal mungkin bisa menjangkau semua elemen di situs web, tetapi bagi mereka yang memiliki penglihatan yang kurang mungkin akan kesulitan menjangkau elemen yang tidak memiliki standar ukuran normal dan rasio kontras yang sangat rendah.

Maka dari itu inisiatif aksesibilitas menjadi sangat penting untuk diperhatikan dan dipertimbangkan sebaik-baiknya, dan berikut saya sajikan kiat-kiat meningkatkan aksesibilitas situs web.

01: Desain Responsive

Pastikan halaman web memiliki lebar dan nilai pixel css yang dapat secara otomatis menyesuaikan di banyak ukuran layar atau device (wajib).

02: Font Size (Ukuran Font)

Selain desain responsive font-size atau ukuran font adalah hal pertama yang harus dipertimbangkan untuk meningkatkan aksesibilitas website sehingga konten dapat dijangkau dengan mudah oleh banyak orang. Ukuran minimal font di situs web seharusnya tidak kurang dari 12px dan ukuran ideal font konten sebaiknya memiliki nilai sekitar 15 hingga 18px.

Tidak tanggung-tanggung, sakin pedulinya dengan standarisasi font web, lighthouse mengkategorikan masalah ini ke kategori SEO.

Praktek terbaik
  • Sedikitnya 60% teks pada halaman web harus memiliki nialai tidak kurang dari 12px, jika lebih kecil dari 12px biasanya teks akan sulit terbaca di perangkat seluler.
  • Bedakan antara teks bisa dengan anchor teks atau teks link dengan huruf tebal.

03: Meta Viewport

Pertama, pastikan halaman memiliki meta viewport dan menggunakan menggunakan tag meta viewport dengan benar.
[code]<meta content='width=device-width,initial-scale=1.0' name='viewport'/>[/code]
Praktek Terbaik

Hindari pengguanaan user-scalable="no" dan maximum-scale"1.0" pada meta viewport, karena itu akan menonaktifkan fitur pembesaran layar, sehingga pengguna tidak dapat mencubit layar untuk melihat konten halaman web dengan ukuran yang lebih kecil.

04: Rasio Kontras Foreground dan Background Yang Ideal

Rasio kontras foreground dan background yang tidak ideal atau kurang dari 4,5: 1 biasanya akan sering terlewatkan, hal itu dikarenakan rasio kontras warna teks (foreground) dan background yang kurang dari 4,5: 1 akan menjadi samar sehingga sulit terbaca.

Masalah ini sebenarnya sudah jelaskan pada artikel sebelumnya, tentang bagaiman mengatur rasio kontras foreground dan background dengan baik dan benar dan sesuai dengan pedoman WCAG (Web Content Accessibility Guidelines). Kamu mungkin perlu melihatnya pada tautan ini; WebPage Contrast Ratio.

05: Size Tap Targets

Kiat kelima untuk meningkatkan aksesibilitas situs web adalah dengan menetapkan ukuran ketuk elemen situs yang bisa di klik agar sesuai dengan ukuran jari seseoarang, atau setidaknya tidak kurang area ketuk 48 x 48px.

Jika elemen yang bisa di klik tidak memiliki nilai width dan height, kamu bisa menggunakan padding dan margin untuk membawa elemen ke area ketuk 48 x 48px. Lihat panduan untuk menyesuaikan size tap target. Selain meningkatkan aksesibilitas, size tap targets juga merupakan salah satu faktor SEO halaman web.

06: Teks Bantu (Atribut Title)

Gunakan atribut title atau atribut aria-label pada elemen non-teks seperti, gambar, tombol, elemen input dan sebagainya yang mendukung atribut title maupun atribut aria-label, hal itu akan sangat membantu pengguna memahami setiap elemen yang ada di situs web.
Menambahkan Teks Bantu Dengan Atribut Title
Menambahkan Teks Bantu Dengan Atribut Title

07. Gunakan Teks Alternatif

Alternatif teks perlu di tambahkan pada elemen gambar agar situs dapat divalidasi dengan baik, tidak hanya tujuan aksesibilitas, alternatif teks juga digunakan oleh mesin pencari untuk mengambil informasi halaman karena crawler tidak bisa membaca gambar.

Tidak hanya itu, teknologi seperti pembaca layar juga memanfaatkan teks alternatif untuk membacanya dengan keras kepada pengguna atau ketika gambar dinonaktifkan oleh pengguna teks alternatif akan ditampilkan sebagai gantinya.

08: Accesskey (Pintasan Keyboard Situs Web)

Tambahkan fitur pintasan keyboard di situs web, fitur aksesibilitas memang kurang atau tidak sering digunakan oleh pengguna, tetapi dalam keadaan tertentu mereka akan memerlukan atau menggunakan fitur accesskey (pintasan keyboard situs web) ini.

Kamu dapat mengambil referensi dari artikel dalam tautan ini (accesskey) untuk membuat/menambahkan pintasan keyboard di situs web.

Sedikitnya ada 30 lebih kiat meningkatkan aksesibilitas situs web, tetapi yang paling mendominasi adalah seperti yang telah saya jelaskan diatas, jika kamu ingin mempelajari lebih lanjut mengenai pohon aksesibilitas, kamu dapat mempelajarinya di situs w3c atau lebih sederhananya belajarlah mengaudit situs anda dengan alat open source lighthouse, disana kamu akan dikenalkan hal-hal apa saja yang mempengaruhi aksesibilitas situs web.

Domain Authority Dan Page Authority - Apa yang dimaksud dengan Domain Authority dan Page Authority? Domain Authority (DA) adalah metrix yang digunakan untuk menghitung tingkat otoritas domain atau url situs web sedangkan Page Authority (PA) adalah metrix yang digunakan untuk menghitung tingkat otoritas setiap halaman pada situs web.

Algoritma yang digunakan untuk menghitung Domain Authority (DA) dan Page Authority (PA) dikembangkan oleh Moz.com dengan tujuan memberikan prediksi (analisa) kepada pengembang situs mengenai seberapa baik peringkat situs web mereka di halaman hasil pencarian (SERP).

Jadi untuk mengetahui nilai skor domain authority dan page authority situs web anda silahkan gunakan tool moz analytics (analytics.moz.com).

Perhitungan (Nilai Skor DA PA)

Skor atau penilaian Domain Authority yang digunakan adalah skala logaritmik 100-point (dari 1 hingga 100). Hasil analisa yang menunjukkan skor domain authority dan page authority yang lebih dekat dengan angka/poin 100 adalah prediksi/gambaran kinerja situs di halaman hasil pencarian, semakin tinggi nilai/skor domain authority maka semakin bagus.
Analisa domain authority page authority
Analisa domain authority dan page authority
Faktor Yang Mempengaruhi Domain Authority

Secara garis besar yang mempengaruhi metrik Domain Authority adalah SEO (Search Engine Optimization). Secara khusus Domain Authority juga dipengaruhi oleh profil tautan (backlink), semakin banyak index tautan dari situs lain yang menuju halaman situs maka skor domain authority akan semakin baik.

Setelah membaca ini kamu mungkin akan berpikir "mencari cara bagaimana mendapatkan lebih banyak backlink" dan itu hal yang wajar namun harus di ingat backlink atau profil tautan yang mempengaruhi otoritas "domain authority" situs web adalah backlink berkualitas saja yang tidak melanggar aturan google.
Skema tautan: Pedoman webmaster
Skema tautan: Pedoman webmaster

Tips Meningkatkan DA PA Situs Web/Blog

  • Buat konten original yang sesuai dengan niche situs,
  • Buat konten yang fresh dengan gagasan baru,
  • Bersaing di keyword (kata kunci) yang rendah kompetitor,
  • Pelajari "Cara membuat konten berkualitas",
  • Pelajari tentang SEO (search engine optimization) untuk meningkatkan page authority,
  • Buat Backlink berkualitas melalui guest post dan forum tanya jawab
Hindari
  1. Duplikat Konten
  2. Konten Salinan (Copy Paste)
Seperti yang telah dijelaskan di atas hasil analisa Domain Authority & Page Authority sebenarnya merupakan prediksi "memberikan gambaran" apakah optimasi SEO yang selama ini dikerjakan berhasil atau tidak, taksiran otoritas situs web atau penguasaan situs di laman hasil penelusuran.

SERP (Search Engine Results Pages) diibaratkan seperti lahan perebutan dan situs web sebagai kerajaan, semakin luas wilayah kekuasaan maka otoritas kerajaan semakin bagus, begitu juga dengan situs web, semakin banyak konten yang menempati halam 1 di halaman hasil penelusuran maka otoritas situs web "Domain Authority" akan semakin bagus/tinggi.

Apa yang dimaksud dengan backlink berkualitas?

Secara sederhana backlink yang berkualitas dapat didefinisikan sebagai tautan yang berasal dari situs lain dan memberikan profit berupa traffic melalui tautan tersebut ke situs web. Selain itu pembentukan backlink (tautan balik) melalui proses yang natural tanpa ada paksaan dan auto backlink.

Pelajari tentang backlink (skema tautan) yang lebih spesifik pada url berikut ini;
https://support.google.com/webmasters/answer/66356?hl=id
Apakah situs baru dengan authority yang rendah dapat menempati halaman 1 penelusuran?

Ya, tentu saja bisa jika mengikuti tips di atas "membuat konten fresh, bersaing di keyword low competition, konten original yang deskriptif dan mempelajari seo secara perlahan/bertahap".

Itu adalah strategi yang sangat efektif untuk situs web/blog baru dalam mengembangkan situs dan meningkatkan otoritas situs (Domain Authority) kemudian berdampak positif ke PageRank situs. Sehingga setelah situs memiliki reputasi "Domain Authority dan PageRank" yang bagus di halaman hasil penelusuran situs akan lebih mudah untuk bersaing dengan keyword apapun di SERP dan mendapatkan banyak traffic ke situs web.

Meta Tag Hreflang Dan Cara Penerapannya - Tag hreflang merupakan penanda bahasa yang digunakan pada halaman website, Tag hreflang berfungsi untuk memberikan perintah atau akses kepada perayap atau crawler untuk menerjemahkan bahasa utama situs ke bahasa tertentu.

Kamu mungkin pernah mengunjungi situs web yang menggunakan lebih dari satu bahasa dan uniknya konten atau halaman situs dapat ditelusuri dengan kata kunci yang menggunakan bahasa yang berbeda seperti artikel bantuan google misalnya yang dapat ditelusuri dengan bahasa yang berbeda seperti terlihat pada contoh berikut;
Ketika di telusuri dengan kata kunci dalam bahasa inggris misalnya; seo starter guide, konten yang ditampilkan dilaman hasil penelusuran juga menggunakan bahasa inggris (judul dan deskripsi, dll), begitu juga ketika konten ditelusuri dalam bahasa indonesia.

Untuk melakukan itu sebenarnya tidak cukup hanya dengan menambahkan hreflang tags saja, dibutuhkan suntikan teknologi yang dapat menterjemahkan halaman.

Manfaat tag hreflang itu sendiri adalah sebagai optimasi seo, lebih spesifik lagi untuk memberitahukan bahasa yang digunakan halaman situs kepada perayap, seperti yang telah dijelaskan diatas.

Cara Memasang Tag hreflang

Kode hreflang tags biasanya ditempatkan pada area header html situs "dianta tag <head> dan </head>, secara default pemasangan tag hreflang adalah seperti dibawah ini;
[code type="Tags"]<head>
<link href='http://en-gb.example.com/page.html' hreflang='en-gb' rel='alternate'/>
<link href='http://en-us.example.com/page.html' hreflang='en-us' rel='alternate'/>
<link href='http://en.example.com/page.html' hreflang='en' rel='alternate'/>
<link href='http://de.example.com/page.html' hreflang='de' rel='alternate'/>
<link href='http://www.example.com/' hreflang='x-default' rel='alternate'/>
</head>[/code]
Penerapan tag hreflang diatas hanya berupa contoh saja, jika kamu pengguna blogger, maka penerapan meta tag hreflang harus dikombinasikan meta-data situs seperti contoh berikut.

Tag Hreflang Blogger

[code type="Tags"]<link expr:href='data:blog.url' hreflang='en-gb' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en-us' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='de' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>[/code]
Simpan atau tempatkan hreflang tags tersebut dibawah kode <head> pada html situs web, jika ingin menggunakan lebih banyak tag hreflang silahkan tambahkan baris tag hreflang dengan kode bahasa tujuan berbasis ISO 639-1 pelajari standard kode bahasa berdasarkan lokasi [Buka Tautan]

Pertanyaan seputar tag hreflang

Apa fungsi tag hreflang='x-default' ? Jawab: tag hreflang='x-default' berfungsi untuk memerintahkan mesin penelusur untuk menampilkan bahasa asli (default) website ketika robot crawl tidak menemukan tag hreflang yang cocok untuk target negara tertentu.

Apakah situs berbahasa indonesia harus menggunakan tag hreflang='id-id'? Jawab: Tidak ada penggunaan hreflang='id-id', Tag hreflang untuk situs lokal atau regional sudah diwakili dengan tag hreflang='x-default', kode tag hreflang tersebut bertujuan untuk meminta perayap agar tidak menerjemahkan halaman dan menampilkannya secara default.

Tag hreflang seperti apa yang banyak digunakan oleh situs web "blogger"? Jawab: Belum dilakukan survey secara luas, namun menurut admind tag hreflang yang paling banyak digunakan adalah seperti contoh diatas atau hanya sebaris ini;
[code type="Tags"]<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>[/code]
Situs web yang hanya menggunakan sebaris tag hreflang='x-default' tidak akan diterjemahkan (ditampilkan dan di baca dalam bahasa asli atau default). Namun harus diketahui bahwa tidak semua mesin penelusur support dengan hreflang='x-default', Mesin telusur tertentu seperti Bing contoh-nya tidak mendukung anotasi rel = "alternate" hreflang = "x".

Situs ini hanya menggunakan sebaris tag hreflang='x-default' saja karena menurut salah satu sumber tag tag hreflang pernah mengalami sedikit masalah, sehingga kami memilih untuk tidak menerjemahkan situs dengan memasang sebaris tag hreflang='x-default' saja meskipun sekarang google telah memperbaiki gangguan kecil tersebut.

Demikian penjelasan mengenai "meta tag hreflang dan cara penerapannya", semoga artikel ini dapat membantu dan menambah ilmu bagi kita semua, sampai jumpa kembali.

Cara Memasang Lazy Load Adsense - Berdasarkan analisa saya semakin cepat loading situs web maka semakin banyak variasi iklan adsense yang datang ke situs tersebut seperti iklan video, iklan style animasi dan lainnya tentu saja itu merupakan hal baik, akan tetapi perenderan atau loading halaman web akan semakin bertambah berat.

Berbagai cara sudah dilakukan untuk dapat memuat ikan adsense secara dinamis, mulai dari mengurangi bundle adsense, jumlah iklan hingga menggunakan loader js ads. Tapi saya ingin sesuatu yang lebih cepat lagi dari itu, dan saya fikir lazyload adsense merupakan satu-satunya metode yang tepat saat ini untuk mempertahankan visitor.
Karena biasanya situs yang lambat akan menyebabkan visitor hanya membuka satu halaman saja dan kemudian peninggalkan-nya. Saya fikir teman-teman blogger juga ingin menggunakan lazyload adsense ini agar bisa merasakan kecepatan asli perenderan (pemutan) situs yang sudah dioptimalkan selama ini.

Jadi sebelum menggunakan/memasang lazy load adsense ini sangat disarankan terlebih dahulu untuk mengecek atau menguji kecepatan loading situs melalui PageSpeed Insights, Gtmetrix dan Pingdom Tool supaya kamu bisa mengetahui dengan jelas seberapa besar pengaruh lazy load adsense dalam meningkatkan kecepatan loading situs blog anda.

Script Lazy load Adsense

[code type="JavaScript"]<script>
var lazyloadads=false;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&false===lazyloadads||0!=document.body.scrollTop&&false===lazyloadads)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyloadads=true)},true);
</script>[/code]
1. Pertama tambahkan script lazy load adsense diatas tepat berada diatas kode penutup </body>, selanjutnya agar script bekerja secara maksimal ada beberapa aturan yang harus diikuti yaitu;

Hindari pemasangan iklan adsense melalui widget adsense, situs blogger umumnya memiliki fitur widget adsense dan fitur "tampilkan iklan dibawah post". Setelah menggunakan lazy load adsense sebaiknya pemasanga iklan seperti tidak lagi dilakukan. (pasang iklan dengan script atau kode iklan yang diambil dari dashboard adsense).

2. Buang bundle google adsense disetiap unit iklan yang akan dipasang ke situs blog, lihat contoh bundle adsense dibawah ini;
[code type="JavaScript"]<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>[/code]
Jadi kode iklan yang akan dipasangkan tanpa bundle akan terlihat seperti dibawah ini;
[code type="JavaScript"]<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-42094000000"
     data-ad-slot="987277777"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>[/code]
Lazyload adsense diatas sudah mewakili semua bundle iklan, jika pada suatu halaman situs terdapat bundle adsense selain yang di dalam script lazy load maka script lazy load tidak akan bekerja dengan maksimal, meskipun iklan tetap akan muncul.

Apakah Lazy Loading Sesuai Kebijakan Adsense?

Teman-teman blogger yang masih baru bermitra dengan google adsense mungkin sedikit ragu untuk menggunakan lazyload ads karena mungkin khawatir akan menyalahi aturan (kebijakan publisher adsense). Itu hal yang wajar dan artinya kamu adalah mitra yang baik, jadi sekarang mari kita simak sedikit referensi tentang lazyload adsense dan pusat kebijakan publisher.

Google sangat terbuka dengan lazyload adsense, hal itu disampaikan oleh pihak google adsense melalui artikel bantuan google yang berjudul "Praktik terbaik keterlihatan". Pada halaman tersebut google juga menyarankan untuk menggunakan smart loading, juga dikenal dengan sebutan lazy loading. Seperti, menayangkan iklan di bagian bawah halaman hanya saat pengguna men-scroll ke bagian bawah halaman.

Itu manandakan google tidak mempermasalahkan soal penggunaan lazy laod ads untuk pemuatan iklan mereka. Namun menurut google adsense praktik terbaik penggunaan lazyload adsense dalam memaksimalkan keterlihatan iklan adalah dengan menggunakan tag google publisher (GPT).

Konsekuensi

Selalu ada kemungkinan resiko, menggunakan lazyload adsense tak selalu berjalan mulus dan meningkatkan penghasilan iklan. Dalam kondisi tertentu lazyload adsense justru memberikan pengaruh yang kurang baik untuk keterlihatan iklan.
  • Jika digunakan dengan benar, penundaan lazyload dapat meningkatkan keseluruhan persentase keterlihatan. Akan tetapi jika pengguna tidak menggulir ke bawah misalnya, maka slot iklan paro bawah tidak akan dimuat sehingga menyebabkan permintaan iklan yang masuk akan lebih sedikit.
  • Selanjutnya, jika ukuran iklan terlalu besar atau pemuatannya lambat, pengguna tidak akan sempat melihat iklan saat menggulir ke bawah dan iklan mulai dimuat.
Demikian tentang lazyload adsense, tidak ada yang selalu sempurna keculai allah, kita hanya bisa berusaha memberikan yang terbaik untuk pengguna dan sisanya serahkan kepada allah subhanahu wa ta'ala. Semoga bermanfaat dan sampai jumpa kembali di tutorial selanjutnya, happy blogging.

Meta Tag Keyword Blogger - Dalam dunia blogger penggunaan meta tag keywords masih menjadi alternatif yang populer untuk optimasi seo. Meskipun sebenarnya pada tahun 2018 meta keywords tidak lagi menjadi prioritas pada algoritma google. Saya sendiri tidak menemukan informasi yang jelas apakah meta keywords benar-benar ditiadakan dari system penelusur google atau tidak, namun perubahan algoritma google yang sekarang digadang-gadang lebih memprioritaskan isi konten yang relevan dengan keyword pengguna.

Meski demikian bukan tidak mungkin meta keywords masih memberi sedikit pengaruh dan masih berfungsi untuk menginformasikan isi halaman dan topik pembahasan suatu laman web. Sejauh ini algoritma google masih menjadi rahasia besar demi menjaga penyalahgunaan yang bisa saja terjadi pada system mereka.

Pentingkah Meta Keywords Dalam Optimasi SEO?

Diluar dari yang telah dijelaskan diatas, meta keywords masih menjadi bagian penting dalam mengoptimalkan keterlihatan konten situs di laman hasil penelusuran (SERPs) karena penelusur bukan hanya google saja, masih ada Yahoo / bing, Yandex, Ask, DuckDuckGo dan masih banyak lagi penelusur selain google yang mungkin saja masih memanfaatkan meta keyword dalam system pencarian mereka.

Bagaimana Cara Memasang Meta Keywords?

Pada tutorial ini saya akan membagi metode penerapan meta keywords menjadi dua bagian yaitu meta keywords otomatis dan meta keywords dengan ejaan (manual). Sedangkan untuk pemasangan tag <meta> keywords tetap diletakkan diantara tag pembukaan <head> dan penutup </head>.

Meta Keywords Otomatis

Memasang meta keywords otomatis dapat ditargetkan ke dua keyword target yang berbeda yaitu dengan menjadikan data title atau data deskripsi artikel sebagai keyword target. Metode penerapan meta keywords otomatis ini sangat sesuai dengan prinsip seo on page jadi sebaiknya jangan lupa untuk menyertakan keyword utama pada judul dan deskripsi artikel jika menggunakan meta keywords otomatis ini.
[code type="Meta"]<meta expr:content='data:blog.pageTitle' name='keywords'/>[/code]
Atau
[code type="Meta"]<meta expr:content='data:blog.metaDescription' name='keywords'/>[/code]
Catatan: Gunakan salah satu meta keywords saja, jika ingin menjadikan judul sebagai keyword maka gunakan meta keywords yang paling atas, jika ingin menargetkan deskripsi sebagai keywords maka gunakan meta keywords yang ke dua (bawah).

Tips: Jika menggunakan meta keywords otomatis (merupakan gabungan antara meta tag dan metadata) di sarankan agar memasukkan keyword utama pada judul dan deskripsi konten/artikel.

Meta Keywords Manual (Ejaan)
[code type="Meta"]<meta content='keyword1, keyword2, keyword3' name='keywords'/>[/code]
Contoh penggunaan meta keywords ejaan (manual) dalam html situs web adalah seperti dibawah ini.
[code type="Meta"]<meta content='optimasi seo, blogger, template' name='keywords'/>[/code]
Tips: Agar meta keyword tersebut selalu relevan dengan konten situs sebaiknya konten / artikel tidak keluar dari 3 keyword target yang ada didalam meta keywords tersebut.

Apakah situs blog KontenWeb masih menggunakan salah satu dari meta keywords diatas? Jawaban-nya "ya" saya masih menggunakan meta keywords otomatis, kamu dapat melihatnya melalui view-source setiap halaman situs ini.

Demikian yang dapat saya jelaskan mengenai meta keywords blogger dan cara penerapan-nya (meta keywords otomatis dan manual/ ejaan), semoga bermanfaat dan menambah ilmu pengetahuan blogging bagi kita semua.

Ads.txt - Setelah beberapa bulan tidur kini saya kembali mencangkul blogger dan melakukan perawatan kepada situs blog ini. Tidak diduga bahwa ternyata ada sesuatu yang baru di platform blogger yang sangat menarik untuk di bahas yaitu ads.txt. Ketika saya membuka setelan blogger pada bagian preference penelusuran saya melihat tab Monetisasi yang dibawah-nya tertera fitur ads.txt dan kemudian mencoba mengaktifkan ads.txt tersebut.

Apa itu ads.txt? Ads.txt atau ads.txt kustom adalah sebuah inisiatif yang dikembangkan oleh IAB Tech Lab (Interactive Advertising Bureau - Tech Lab), yang bertujuan untuk memerangi beberapa jenis penipuan iklan, terutama spoofing domain dan arbitrase inventaris yang tidak sah, dan memberikan transparansi dalam industri yang tidak jelas.

Berdasarkan yang saya ketahui ads.txt dirilis pada bulan Mei 2017, proyek ads.txt dirancang untuk membersihkan rantai pasokan periklanan online, membantu merek dan pengiklan membeli media digital asli dengan percaya diri, dan mempersulit penipu untuk memperoleh keuntungan dari menjual inventaris yang bukan miliknya.

Pada awal nya ads.txt hanya ditujukan untuk domain tld saja, akan tetapi diawal tahun 2018 "ads.txt" juga diresmikan untuk sub-domain seperti blogspot.

Cara Mengaktifkan Ads.txt Untuk Blogger

  1. Login ke dasboard Blogger
  2. Klick Setelan > Pilih Preferensi penelusuran
  3. Gulir kebawah dan lihat pada bagian "Monetisasi"
  4. Pada Bagian ads.txt kustom klick "Edit"
  5. Aktifkan ads.txt kustom pilih "Ya"
  6. Isi kotak text yang tersedia dengan kode ads.txt dibawah ini dan simpan setelan.
Kode Untuk Mengaktifkan Ads.txt
[code type="Ads.txt"]google.com, pub-9999999999999910, DIRECT, f08c47fec0942fa0[/code] Catatn Penting: Ganti "9999999999999910" dengan id penayang atau id publisher kamu sendiri, lihat contoh gambar dibawah ini sebagai panduan memasang ads.txt.

Apakah wajib bagi setiap blogger atau publisher adsense meng-aktive kan ads.txt di dalam situs mereka? Berdasarkan Google answer nomor 7532444 ads.txt tidak wajib digunakan, namun bagi kamu yang belum diterima google adsense boleh saja mencoba meng-aktive kan ads.txt kustom lalu kemudian mendaftarkan situs anda kembali.

Manfaat ads.txt - Seperti yang dijelaskan diatas bahwa manfaat ads.txt adalah untuk memerangi beberapa jenis penipuan iklan dan arbitrase inventaris yang tidak sah serta mengidentifikasi inventaris palsu dan membantu kamu menerima lebih banyak pembelanjaan pengiklan yang pada kasus lain mungkin mengarah ke inventaris palsu.

Cara kerja Authorized Digital Sellers atau disebut dengan ads.txt mungkin tidak jauh berbeda dengan robots.txt berfungsi sebagai crawl atau robot perayap ads (authorized digital sellers) yang tentu nya memberi manfaaf baik bagi pengguna nya. Namun jika pada robots.txt kita memiliki akses yang luas maka, pada ads.txt kita hanya bisa meng-aktifkan nya saja dan tidak memiliki akses yang banyak tentang ads.txt.

Nah, sekarang kamu sudah mengertikan "apa itu ads.txt" dan bagaimana cara menggunakan-nya? Demikian penjelasan saya mengenai "apa yang dimaksud dengan ads.txt dan cara meng-aktifkan ads.txt pada platform blogger", lebih dan kurang saya mohon maaf dan semoga ini menambah pengetahuan kita dalam mengelola situs blog dan adsense, good luck for you...!

Meta Tag Theme Color - Tutorial kali ini akan membahas sebuah cara menyesuaikan warna theme browser (Chrome, Firefox & Opera) dengan theme website. Metode yang kita gunakan untuk merubah atau menyesuaikan warna theme address bar browser adalah dengan menggunakan meta tag theme color. Di-era android browser modern sudah mendukung untuk penyesuaian warna thema address bar dengan theme situs web termasuk situs blogger.

Mungkin kamu juga telah memperhatikan hal ini ketika membuka situs-situs raksasa seperti facebook, youtube dan lain-nya ketika di akses melaui browser chrome secara otomatis akan merubah warna address bar sesuai dengan warna template mereka. Penyesuaian itu tentu tidak terjadi begitu saja melainkan sebuah meta tag theme-color yang mengaturnya.

Praktek Terbaik:
  • Sebelum menambahkan meta tag theme-color kedalam html template, cari tahu terlebih dahulu kode warna template situs web anda, sebagai contoh jika header situs berwarna hijau (#003c30) maka tambahkan juga kode warna tersebut kedalam meta theme-color agar warna theme address bar browser dapat mengikuti warna template situs, atau
  • Kombinasikan warna yang sesuai agar tampilan situs di mobile browser terlihat mengagumkan, contoh; template situs gigi pages di dominasi dengan warna putih di bagian header, maka untuk mendapatkan kombinasi warna yang tidak canggung saya menambahkan warna hitam (#0e0e0e) ke meta theme-color.
Gambar diatas adalah contoh tampilan address bar browser sebelum menggunakan meta theme color dan sesudah menggunakan meta theme color, situs web yang dipasangi meta tag theme color akan meminta browser menyesuaikan warna address bar dengan warna yang minta oleh meta theme-color sehingga situs web akan terlihat lebih mengagumkan.

Cara Memasang Meta Theme Color

Tambahkan meta tag theme color berikut ini kedalam html template situs web anda tepat berada diatara tag pembuka <head> dan penutup </head>.
[code type="HTML"]<meta content='#color-code' name='theme-color'/>[/code]
[code type="Contoh"]<meta content='#d32f2f' name='theme-color'/>[/code]
Perhatikan kode "#d32f2f " dan ganti kode warna tersebut sesuai dengan kode warna yang anda inginkan atau gunakan kode template situs web agar theme address bar menyatu dengan warna theme situs web.

Info: Meta theme color tersebut support pada browser Google Chrome, Firefox & Opera "perangkat android", silahkan lihat hasilnya dengan membuka situs melalui browser di smartphone anda.

Catatan: Jika kamu ingin menerapkan <meta> theme-color yang support di banyak jenis perangkat dan browser silahkan gunakan meta theme color di bawah ini:
[code type="Meta Theme Color"]<!-- Support Google Chrome, Firefox & Opera -->
<meta content='#d32f2f' name='theme-color'/>
<!-- Support Windows Phone & Safari iOS -->
<meta content='#d32f2f' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#d32f2f' name='apple-mobile-web-app-status-bar-style'/>[/code]
Meta tag theme color diatas support untuk penyesuaian warna theme pada browser Google Chrome, Firefox & Opera pada perangkat Android, browser Windows Phone dan Safari iOS. Untuk mendukung kinerja meta tag sebaiknya gunakan kode warna "color hexadecimal".

Demikian penjelasan tentang meta theme color serta panduan cara penerapan meta tag theme color untuk mengatur atau menyesuaikan warna address bar browser dengan warna theme situs web. Semoga bermanfaat dan sampai jumpa kembali, jangan lupa follow dan subscribe ya.

Cara Membuat Tombol Follow Blog - Tombol follow merupakan salah satu widget penting untuk di pasang pada situs blog, tombol follow blogger sering disebut juga sebagai tombol join us (join this site) berfungsi sebagai navigasi yang memudahkan pengunjung untuk mengikuti situs yang mereka sukai. Pada tutorial ini saya akan membagikan cara membuat tombol follow blogger yang dapat ditempatkan di berbagai tata letak seperti di atas kolom komentar, sidebar, menu navigasi dan tombol follow di dalam postingan.
Cara Membuat Tombol Follow Blog
Metode yang saya gunakan untuk membuat tombol follow adalah dengan memanfaatkan link follow yang ada pada widget followers (join this site), dengan demikian maka tombol follow yang dihasilkan akan lebih ramah dan mudah di aplikasikan. Langsung saja ke tutorial membuat tombol follow blogger dan yang pertama harus dilakukan adalah menyiapkan link follow + id situs blog, lihat contoh dibawah ini;
[code type="URL"]https://www.blogger.com/follow.g?blogID=6093713042691745392[/code]
Nomor id yang ditandai dengan huruf tebal adalah nomor id situs blog saya, silahkan ganti dengan "id" situs blog masing-masing, untuk mendapatkan atau melihat "id" situs blog silahkan login ke blogger, pilih salah satu situs jika kamu memiliki banyak situs blog kemudian lihat pada addres bar id situs blog anda.
ID Situs Blog
ID Situs Blog
Setelah link follow situs disiapkan selanjutnya adalah memasang link follow tersebut ke tata letak atau tempat yang diinginkan dan menampilkan nya sebagai tombol follow (join us).

Memasang Tombol Follow di Atas Kolom Komentar

  1. Login ke blogger > Template > Edit HTML
  2. Cari kode penutup css yaitu ]]></b:skin>
  3. Tambahkah kode css berikut ini tepat di atas kode ]]></b:skin>
[code type="CSS"].comments .rightx{font-size:12px;position:absolute;$endSide:0;top:0;line-height:22px;max-height:22px;padding:4px 0 0 4px;margin-$endSide:0;background-color:#333333;overflow:hidden;display:block;} .comments .rightx a{display:inline-block;min-width:75px;margin-$endSide:0;background-color:#333333;text-align:center;color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-decoration:none;text-transform: uppercase;}[/code]
Ganti text "Join Us" dengan Follow First atau Subscribe sesuai dengan selera masing-masing dan ganti juga nomor id "6093713042691745392" dengan id situs blog kamu sendiri. Save template dan lihat hasilnya, tombol follow akan muncul di atas kolom komentar seperti terlihat pada contoh dibawah ini.
Cara Membuat Tombol Follow di Atas Kolom Blog
Cara Membuat Tombol Follow di Atas Kolom Blog
Catatan: Kode <h4 id='comment-post-message'><data:postCommentMsg/></h4> adalah kode "comment message" single comment box dan merupakan kode default kolom komentar bawaan blogger. Jika sebelumnya pada template situs blog kamu sudah dimodifikasi atau menggunakan 3 comment system (blogger-facebook-disqus) silahkan lihat pada contoh gambar berikut;
Contoh membuat atau menambahkan tombol follow blog di atas kolom komentar (3 sistem komentar)
Contoh membuat atau menambahkan tombol follow blog di atas kolom komentar (3 sistem komentar)

Menambahkan Tombol Follow Pada Menu Navigasi

[code type="HTML"]<nav class='naviy' id='nav'>
<ul class='sf-menu' id='menunav'>
<li><a href='add_url'>About</a></li>
<li><a href='add_url'>Contact</a></li>
//contoh menambahkan tombol follow blogger dengan link follow di menu navigasi
<li><a href='https://www.blogger.com/follow.g?blogID=6093713042691745392'>Join This Site</a></li>
//end
</ul>
</nav>[/code]

Membuat Tombol Follow di Sidebar

  1. Login ke Blogger > Tata Letak > Add Widget HTML
  2. Tambahkan kode berikut ini kemudian save
[code type="HTML"]<button onclick="window.location='https://www.blogger.com/follow.g?blogID=6093713042691745392'" style="background-color: orange; color: white; height: 30px; width: 201px;"><b>Follow Us</b></button>[/code]
Ganti id blog dan warna tombol sesuai dengan yang di inginkan.

Menambahkan Tombol Follow di Dalam Postingan

Untuk menambahkan tombol follow di dalam post (artikel) sebenarnya metode yang digunakan sama dengan metode membuat tombol follow di sidebar, yaitu dengan menambahkan element button pada link follow blog. Kamu bisa mencoba variasi tombol yang berbeda seperti contoh berikut ini.
[code type="HTML"]<a href="https://www.blogger.com/follow.g?blogID=6093713042691745392" target="_blank"><button><b>Subscribe Me</b></button></a>[/code]
Nah, itulah beberapa cara membuat tombol follow di blog (situs blogger) yang dapat di sesesuaikan dan di tempatkan di beberapa tata letak. Silahkan di garap atau cobalah ber experiment sendiri dengan link follow blogger. Metode ini juga dapat diterapkan pada situs blog yang sudah menghapus bundle css blogger, umumnya menghapus bundle css blogger akan menyebabkan beberapa widget blogger tidak berfungsi termasuk widget followers dan tentu saja ini satu-satunya cara terbaik untuk membuat atau menggantikan tombol follow blogger yang rusak.

Kelebihan:
  • Mengganti widget followers (join this site) dengan tombol follow, tidak membebani loading situs web sama sekali.
  • Tombol follow dapat diletakkan di banyak tempat yaitu, di atas kolom komentar, sidebar, menu navigasi, di dalam post blogger dan lain-lain.
  • Menghindari blocked rendering paruh atas situs
  • Dan dapat di variasikan dengan banyak style css button.
Demikian tutorial cara membuat tombol follow (subscribe button) blogger dan siap-siap untuk mendapatkan banyak followers situs blog kamu. Jika ingin melihat demonya silahkan gulir ke kolom komentar dan Subscribe situs blog tukang listrik batam. Anggap saja subscribe anda sebagai bonus untuk saya, akhir kata saya ucapkan terimakasih telah berkunjung dan semoga tuorial ini bermanfaat.