GoSEO - IDNTIME.NET

Cara Menggunakan Public DNS Google dan Cloudflare di Windows

noreply@blogger.com (GoSEO.id) — Sun, 02 May 2021 23:04:00 +0000

Cara Menggunakan Public DNS Google dan Cloudflare di Windows

GoSEO.id - Pada kesempatan kali ini kita akan membahas bagaimana "Cara Menggunakan Public DNS Google dan Cloudflare di Windows". Yang mana kita pernah membahas sekilas guna cloudflare untuk meningkatkan kecepatan blog.

Table of Content

Pentingnya DNS!
Public DNS
1. Google Public DNS
2. Cloudflare Public DNS
Cara Menggunakan YogaDNS
Penutup

Pentingnya DNS!

Domain Name System atau yang disebut DNS adalah dasar dari komponen internet. Ketika kamu mengunjungi sebuah situs, maka device yang digunakan baik komputer maupun smartphone yang digunakan akan melakukan pencarian DNS untuk menerjemahkan alamat situs serta dapat diakses melalui jaringan internet. Singkatnya DNS berperan untuk meringkas pekerjaan kamu yang kini hanya perlu mengingat nama domain dan memasukkannya kedalam address bar.

Sebagai contoh, jika kamu ingin mengakses, kamu tidak perlu mengetik IP Address 172.217.0.142 kedalam address bar melainkan cukup memasukkan alamat google.com.

Public DNS

Public DNS adalah layanan DNS yang digunakan oleh semua orang untuk mengganti DNS awal ke Internet Service Protocol atau yang disebut ISP sehingga penjelajahan internet pun menjadi lebih cepat dan aman.

Sebenarnya yang ingin saya bahas merupakan sebuah aplikasi yang akan memudahkanmu menggunakan Public DNS. Yang seharusnya kamu menyetingnya pada Network Connection, akan tetapi cukup menggunakan aplikasi bantuan yaitu YogaDNS.

Dengan menggunakan YogaDNS, kamu dapat mengolektif beberapa Public DNS kedalam 1 (satu) tempat serta memilih DNS yang akan digunakan dengan mudah.

YogaDNS dapat digunakan pada Windows 7,8,10 baik 32 bit maupun 64 bit. Untuk mengunduh YogaDNS silahkan klik button dibawah ini :

Google Public DNS

8.8.8.8
8.8.4.4

Cloudflare Public DNS

1.1.1.1
1.0.0.1

Cara Menggunakan YogaDNS

Silahkan unduh YogaDNS dengan mengklik button unduh diatas lalu install.
Setelah selesai menginstall, jalankan aplikasi YogaDNS.
Kemudian klik pada DNS Server
Lalu klik Add dan isikan DNS Google dan Cloudflare seperti gambar dibawah :

YogaDNS

Input User Friendly Name, misalnya : Google
Pilih type : DNS over HTTPS
IP Addres and Optional Port di isi dengan 8.8.8.8
Lalu centang DNSSEC Supported
Dan yang terakhir masukkan URL : https://dns.google/dns-query

Lakukan hal yang sama untuk IP Google 8.8.4.4
Untuk Cloudflare juga lakukan hal yang sama dengan IP Address 1.1.1.1 dan 1.0.0.1 dan URL DNS over HTTPS optionnya https://cloudflare-dns.com/dns-query
Setelah kamu selesai membuat 4 (empat) DNS Server, silahkan klik kembali pada DNS Server
Lalu klik Server Pools
Kemudian buat dengan nama Google dan drag 2 (dua) DNS Server Google yang sudah dibuat tadi kedalam Pool Google. Begitu juga untuk pool Cloudflare. Kegunaan pool ini adalah memberi kemudahan untuk menggunakan DNS Server secara random dan mudah.
Untuk membuat rules, silahkan klik rules dan klik button Add

Ketik dengan nama : Google
Ketik kedalam hostname tanda : *
Pilih proses untuk action
Setelah itu untuk pilihan DNS Server silahkan pilih Pool Google yang telah kita buat sebelumnya

Jangan lupa juga buat rules untuk Cloudflare.

Untuk menggunakannya, silahkan pilih rules dengan mencentang Google atau Cloudflare yang telah dibuat.
Selesai.

Penutup

Bagaimana? Cukup gampang bukan "Cara Menggunakan Public DNS Google dan Cloudflare di Windows", Yaph pastinya dengan menggunakan YogaDNS.

Semoga artikel ini bermanfaat. Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

Apakah kamu sudah membaca :
# Cara Bot Facebook Messenger Meningkatkan Bisnis Online
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Email Marketing
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Mengapa Teknis SEO & On-Site SEO Cukup Jarang
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense

# Membuat Tabel Responsive Valid AMP dan HTML5

# Pentingnya Membangun Backlink Serta Listing Dofollow Backlink 2021

Pentingnya Membangun Backlink Serta Listing Dofollow Backlink 2021

noreply@blogger.com (GoSEO.id) — Thu, 29 Apr 2021 22:01:00 +0000

Pentingnya Membangun Backlink Serta Listing Dofollow Backlink 2021

GoSEO.id - Saat ini kehadiran online digital sangat penting. Ketika kamu mengimprovisasi dan ingin meningkatkan pengunjung, membangun backlink merupakan bagian dari strategi tersebut. Strategi yang tepat dapat mendatangkan beberapa manfaat. Maka dari itu mari simak "Pentingnya Membangun Backlink Serta Listing Dofollow Backlink 2021".

Table of Content

Apa itu Backlink Building?
Listing Dofollow Backlink 2021
Penutup

Apa itu Backlink Building?

Proses membangun backlink sangatlah penting. Ketika kamu memanfaatkan backlink, kamu akan menempatkan link situs kamu ke situs yang lainnya. Ketika ini dilakukan dengan baik, berbagai keuntungan untuk situs dan bisnis kamu akan berdatangan.

Meningkatkan Pengunjung

Keuntungan utama dari membangun backlink ialah meningkatkan pengunjung ke situsmu. Saat link situsmu berada di situs lain, kamu memiliki potensi pengunjung melihat mengunjungi situsmu. Inilah dia backlink dapat meningkatkan pengunjung.

SEO Yang Disempurnakan

Selain dapat mendatangkan pengunjung secara langsung melalui link, backlink juga berguna untuk meningkatkan peringkatmu pada mesin pencari. Ketika kamu memiliki backlink yang berkualitas dan tingkat kunjungan pun baik pada situsmu, itulah yang mampu meningkatkan algoritma mesin pencari untuk situs yang kamu miliki. Dengan meningkatnya peringkat situsmu pada mesin pencarian, meningkatlah pula pengunjung karena situsmu berada pada halaman depan.

Meningkatnya Pendapatan

Dan pada akhirnya yang kita cari ialah penambahan pendapatan. Seiring meningkatnya pengunjung pada situsmu, maka kamu akan lebih dikenal dan mempunyai reputasi. Dengan adanya pengunjung yang baik dan mempunyai reputasi, pendapatan dapat berdatangan dari berbagai segi, seperti adsense, postingan berbayar, jualan atau bisnis pun berjalan dengan lancar.

Listing Dofollow Backlink 2021

Saya yakin ini yang kalian cari dan tunggu-tunggu, yaitu listing dofollow backlink. Saya mendapatkan listing ini dari membeli backlink. Untuk sobat GoSEO.id, kalian dapat menggunakan listing ini dan mengimprovenya ke situsmu. Tanpa basa-basi lagi, silahkan diunduh pada link berikut :

Penutup

Semoga artikel "Pentingnya Membangun Backlink Serta Listing Dofollow Backlink 2021" ini bermanfaat. Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

# Membuat Tabel Responsive Valid AMP dan HTML5

Membuat Tabel Responsive Valid AMP dan HTML5

noreply@blogger.com (GoSEO.id) — Wed, 28 Apr 2021 19:29:00 +0000

Membuat Tabel Responsive Valid AMP dan HTML5

GoSEO.id - Ada seorang sahabat kita yang menanyakan kepada saya tentang bagaimana membuat tabel responsive untuk postingan blog AMP HTML. Oleh karena itu saya mencoba untuk ber-ekperimen dan akhirnya berhasil. Oleh karena itu saya membagikan cara "Membuat Table Responsive Valid AMP dan HTML5".

Tabel ini tidak hanya digunakan khusus untuk blog AMP, namun juga dapat digunakan pada blog Non AMP. Berikut tabel dibawah sebagai contohnya.

Harga Pemasangan Iklan di GoSEO.id
Jenis Iklan	Ukuran Iklan	Harga Iklan Per Bulan	Slot
Iklan Horizontal (homepage & postpage)	responsive	Rp. 200.000,-/bulan	(√)
Iklan Sidebar (homepage & postpage)	300x250	Rp. 100.000,-/bulan	(√)
Iklan OnPost (postpage)	responsive	Rp. 70.000,-/bulan	(√)
Iklan Link (homepage & postpage)	Link	Rp. 50.000,-/bulan	(√)

Cara pembuatannya pun tergolong sangat gampang. Jika kamu memerlukan tabel seperti berikut, silahkan ikuti tahap-tahap berikut :

Table of Content

Tahapan Membuat Tabel Responsive Valid AMP dan HTML5
Penutup

Tahapan Membuat Tabel Responsive Valid AMP dan HTML5

Hal utama yang harus kamu lakukan adalah memasukkan CSS berikut pada STYLE template kamu atau cari kode ]]></b:skin> dan letakkan CSS tersebut diatasnya :


  .table-responsive {
  min-height: .01%;
  overflow-x: auto
}

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table td,
.table th {
  background-color: #aaf7eb;
  border: 1px #bbb solid;
  color: #333;
  font-family: sans-serif;
  font-size: 100%;
  padding: 10px;
  vertical-align: top;
}

.table tr:nth-child(even) td {
  background-color: #6ee2d0;
}

.table th {
  background-color: #41e1c9;
  color: #333;
  font-size: 110%;
  font-weight: bold;
}

.table tr:hover td,
.table tr.even:hover td {
  color: #222;
  background-color: #41e1c9;
}

.goseo-tebal {
  font-weight: bold;
}

.goseo-miring {
  font-style: italic;
}

.goseo-kiri {
  text-align: left;
}

.goseo-kanan {
  text-align: right;
}

.goseo-tengah {
  text-align: center;
}

@media screen and (max-width:767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive>.table {
    margin-bottom: 0
  }
  .table-responsive>.table>tbody>tr>td,
  .table-responsive>.table>tbody>tr>th,
  .table-responsive>.table>tfoot>tr>td,
  .table-responsive>.table>tfoot>tr>th,
  .table-responsive>.table>thead>tr>td,
  .table-responsive>.table>thead>tr>th {
    white-space: nowrap
  }
}

Setelah itu klik Simpan pada edit template blog kamu. Kemudian untuk menggunakan tabel responsive pada postingan, silahkan gunakan kode HTML tabel berikut dalam mode editor HTML :

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="goseo-tengah goseo-tebal">Harga Pemasangan Iklan di GoSEO.id</th>
    </tr>
    <tr>
      <td class="goseo-tengah goseo-tebal">Jenis Iklan</td>
      <td class="goseo-tengah goseo-tebal">Ukuran Iklan</td>
      <td class="goseo-tengah goseo-tebal">Harga Iklan Per Bulan</td>
      <td class="goseo-tengah goseo-tebal">Slot</td>
    </tr>
    <tr>
      <td>Iklan Horizontal (homepage & postpage)</td>
      <td>responsive</td>
      <td>Rp. 200.000,-/bulan</td>
      <td>(√)</td>
    </tr>
    <tr>
      <td>Iklan Sidebar (homepage & postpage)</td>
      <td>300x250</td>
      <td>Rp. 100.000,-/bulan</td>
      <td>(√)</td>
    </tr>
    <tr>
      <td>Iklan OnPost (postpage)</td>
      <td>responsive</td>
      <td>Rp. 70.000,-/bulan</td>
      <td>(√)</td>
    </tr>
    <tr>
      <td>Iklan Link (homepage & postpage)</td>
      <td>Link</td>
      <td>Rp. 50.000,-/bulan</td>
      <td>(√)</td>
    </tr>
  </table>
</div>

Selebihnya silahkan kamu ubah tabel berikut sesuai dengan kebutuhan.

Keterangan penggunaan kode class="" :

goseo-tebal agar huruf tabel menjadi tebal

goseo-miring agar huruf tabel menjadi tebal

goseo-kiri agar huruf tabel menjadi tebal

goseo-kanan agar huruf tabel menjadi tebal

goseo-tengah agar huruf tabel menjadi tebal

Penutup

Bagaimana? Saya rasa cukup gampang dan mudah dimengerti yaa..

Semoga tutorial "Membuat Tabel Responsive Valid AMP dan HTML5" ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak kamu mengerti.

Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

Pentingnya Zoom dan Responsive Blog

noreply@blogger.com (GoSEO.id) — Thu, 22 Apr 2021 18:49:00 +0000

Pentingnya Zoom dan Responsive Blog

GoSEO.id - Wah.. Lama nih GoSEO.id tidak menampakkan diri.. hehehe.. Yaaaa Biasalah... Kerja di pemerintahan dan banyak kerjaan yang harus dikerjakan dengan segera dan diharuskan selesai tepat pada waktunya.. to the point saja.. Pembahasan kita kali ini tidak kalah pentingnya seperti pembahasan kita yang lalu yaitu Mempercepat Blog Dengan Defer JS Google Analytics.

Salah satu faktor penting agar pengunjung betah berlama-lama berada di blog kita ialah faktor tampilan dan aksebilitas. Bilah samping, keberadaan menu navigasi serta perpaduan warna yang nyaman untuk mata, hal semacam inilah yang patut untuk diperhitungkan pada blog kita. Oleh karena itu, pengurus blog harus pandai dalam mengakali tampilan dan aksebilitas blog, terutama saat pengguna mempunyai ponsel dengan layar yang lebih kecil sehingga diperlukannya zoom. Maka dari itulah kita membahas Pentingnya Zoom dan Responsive Blog.

Table of Content

Pentingnya Zoom
Cara Memperbaikinya
Penutup

Pentingnya Zoom

Zoom juga berpengaruh terhadap user experience. Permasalahan yang terjadi biasanya saat pengguna mengalami penglihatan rendah (mata minus atau silindris dan hal lainnya) yang menyebabkan dan mengharuskannya pengguna menggunakan tampilan zoom agar web dapat terlihat.

Pada situs web.dev, kamu dapat menguji dan membuktikan bahwa dengan menonaktifkan fasilitas zoom berpengaruh besar terhadap aksebilitas.

Cara Memperbaikinya

Saat ini hampir seluruh blog mempunyai template dengan pengaturan Viewport yang benar. Namun untuk berjaga-jaga jika ternyata pada template blog kamu tidak memiliki setingan ini, silahkan letakkan code dibawah ini tepat dibawah <head> :

<meta content='width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=5.0' name='viewport'/>

Penutup

Bagaimana? mudah bukan memahami dan memperbaiki kemampuan browser melakukan zoom? Beginilah artikel singkat kita hari ini tentang "Pentingnya Zoom dan Responsive Blog". Semoga artikel singkat ini bermanfaat bagi kita semua.

Mempercepat Blog Dengan Defer JS Google Analytics

noreply@blogger.com (GoSEO.id) — Wed, 24 Jun 2020 04:22:00 +0000

Mempercepat Blog Dengan Defer JS Google Analytics

GoSEO.id - Kita pernah membahas bahwa kecepatan sebuah blog merupakan unsur penting dalam SEO dan faktor dalam perangkingan pada mesin pencari di artikel "Cara Ampuh Meningkatkan Trafik Blog". Para blogger saat ini saling berlomba dan bersaing untuk meningkatkan kecepatan blognya.

Dalam optimasi blog, terkadang kita mengalami kendala pada load javascript seperti JS Google Analytics dan Google Adsense. Sehingga loading atau kecepatan blog kita menjadi lambat. Sementara Google analytics merupakan unsur SEO sebagai tools statistik blog. Oleh karena itu, pada kesempatan kali ini kita akan membahas "Mempercepat Blog Dengan Defer JS Google Analytics".

Table of Content

Mempercepat Blog Dengan Defer JS Google Analytics
- Men-defer JS Google Analytics
Akhir Kata

Mempercepat Blog Dengan Defer JS Google Analytics

Apakah sobat GoSEO.id sudah tau apa itu Defer?

Defer merupakan penundaan pemuatan file sebelum halaman ditampilkan. Jadi, jika kita men-defer file js, pemanggilan file js tersebut akan ditunda dan ternyata mampu mempercepat loading blog namun file js tersebut pun tetap berfungsi dan bekerja seperti biasanya.

Untuk men-defer JS Google Analytics, kamu dapat mengikuti langkah berikut ini :

Men-defer JS Google Analytics

Seperti yang kamu ketahui, bahwa kode Google Analytics seperti ini :

<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X'/>
<script>
//<![CDATA[
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXX-X');
//]]>
</script>

Untuk men-defer JS tersebut, silahkan gantikan kode tersebut dengan kode seperti dibawah ini :

<!-- GoSEO.id Defer JS Google Analytics -->
<script>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXX-X');
//]]>
</script>

Note : Silahkan ganti kode ID UA-XXXXXXX-X yang ditandai dengan ID Google Analytics milik kamu.

Akhir Kata

Saya rasa cukup mudah dimengerti dan dipraktekan bukan? Beginilah tutorial "Mempercepat Blog Dengan Defer JS Google Analytics". Yang mana semoga artikel ini bermanfaat dan berguna. Silahkan tinggalkan komentar jika ada hal atau bagian yang tidak kamu mengerti.

Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

Check Plagiarisme Konten Blog Menggunakan Searchenginereports

noreply@blogger.com (GoSEO.id) — Fri, 05 Jun 2020 09:04:00 +0000

Check Plagiarisme Konten Blog Menggunakan Searchenginereports

GoSEO.id - Pada kesempatan kali ini kami akan memberikan tips tentang "Check Plagiarisme Konten Blog Menggunakan Searchenginereports". Yang mana pada kali ini kamu tidak hanya mempelajari trik dan tips penting, melainkan juga membantu kamu untuk menyingkirkan plagiarisme.

Plagiarisme bukanlah suatu hal yang dapat kamu hindari karena dengan adanya plagiarisme walaupun hanya sebesar 1 (satu) persen dapat merusak kepribadian serta bisnis kamu. Bahkan beberapa tahun terakhir ini aturan dan peraturan plagiarisme sudah menjadi sangat ketat.

Salah satu hal yang dapat memicunya plagiarisme adalah seiring bertambahnya konten-konten serta blog/web baru dan pada niche yang sama. Oleh karena itu aturan dan peraturan plagiarisme ini dibuat.

Table of Content

Tips dan Trik Check Plagiarisme Konten Blog
Kata Akhir

Tips dan Trik Check Plagiarisme Konten Blog

Untuk menghindari terjadinya plagiarisme pada konten yang kamu miliki, berikut kami berikan tips dan triknya :

Menempatkan Ide Menggunakan Kata Sendiri

Menempatkan ide yang tertuang dan menggunakan kata sendiri serta mengulang konten yang disajikan merupakan sebuah prafase.

Prafase yang sempurna adalah dengan memastikan dan membaca serta melakukan pekerjaan dengan mengulangnya berulang kali dan berkonsentrasi.

Sebelum menulis, kamu sudah seharusnya memahami ide utama yang akan tertuang dalam konten sebelum menulisnya dengan kata-kata sendiri. Terlebih lagi janganlah meletakkan karya tulis asli milik orang lain, dikarenakan hal itulah yang membuat konten milikmu menjadi plagiarisme atau konten berganda.

Kembali ke List TOC

Membuat Perencanaan Konten

Dengan membuat perencanaan, konten yang tertuang akan lebih sempurna dan terhindar dari plagiarisme. Apalagi saat kamu akan menulis sebuah konten yang sudah diletiti dan diterbitkan.

Dengan adanya perencanaan pun, sudah seharusnya kamu mempunyai konten asli yang mana kamu telah menyiapkan poin-poin permasalahan serta dapat menjawab pertanyaan yang akan diberikan oleh para pengunjung.

Kembali ke List TOC

Membuat Kutipan Sumber

Hal yang terpenting adalah kamu harus melampirkan referensi kutipan sumber dari artikel yang sedang kamu buat. Anggaplah hal itu sebagai kredit ketika kamu mengutip karya tulis orang lain.

Dan hal ini yang harus kamu tahu bahwa walaupun kamu hanya mengambil kutipan, hal tersebut dapat terdeteksi sebagai plagiarisme. Dan ketika kamu menyematkan penulis dari kutipan yang kamu ambil, kamu telah menyelamatkan diri dari konsekuensi negatif dan legalitas konten maupun kutipan.

Kembali ke List TOC

Menggunakan Alat Pemeriksa Plagiarisme Searchenginereports

Dengan menggunakan alat pemeriksa plagiarisme, kamu dapat menghindari plagiarisme dan membantu kamu dalam mendeteksi duplikasi dalam pekerjaan. Salah satu alat pemeriksa plagiarisme terbaik yang kami sarankan adalah Searchenginereports yang merupakan program perangkat lunak online yang mampu mendeteksi serta menghapus plagiarisme sehingga dapat membantu mempermudah pekerjaan kamu.

Alat ini sangat mudah digunakan. Silahkan gunakan URL berikut untuk menuju dan menggunakannya :

https://searchenginereports.net/id/plagiarism-checker

Kembali ke List TOC

Kata Akhir

Beginilah tips dan trik yang dapat kami sampaikan hari ini. Semoga artikel ini bermanfaat, berguna dan dapat dengan mudah kamu mengerti.

Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi serta update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

Membuat Widget Feature Post Slider Otomatis Di Blogger

noreply@blogger.com (GoSEO.id) — Mon, 11 May 2020 07:11:00 +0000

Membuat Widget Feature Post Slider Otomatis Di Blogger

GoSEO.id - Seperti yang kamu ketahui bahwa widget dapat memberikan informasi kepada pengunjung fitur penting yang tersedia pada blog, seperti label, postingan terbaru dan lainnya. Pada kesempatan kali ini, GoSEO akan memberikan tutorial "Membuat Widget Feature Post Slider Otomatis Di Blogger" yang mana fitur ini menggunakan Owl Carousel yang pastinya membuat blog kamu semakin keren.

Nah kita langsung saja masuk ke tahapan tutorialnya. Yuk disimak dan dicoba pemaktrekannya :

Membuat Widget Feature Post Slider Otomatis Di Blogger

1. Pertama sekali silahkan login ke blogger.com menggunakan akunmu.
2. Setelah itu masuk ke menu TEMA ⇨ lalu klik tombol Edit HTML.
3. Kemudian COPY kode javascript jquery.min.js dibawah ini dan letakkan di atas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

4. Selanjutnya COPY lagi kode dibawah ini dan letakkan juga tepat diatas kode </head>.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

5. Tahapan selanjutnya cari kode ]]></b:skin> atau </style> dan letakkan kode dibawah ini diatas kode tersebut.

<b:if cond="data:blog.url == data:blog.homepageUrl">
<style id='owl-carousel' type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto}
#featured-slider h2.title,#featured_slider .widget h2.title{display:none}
#featured_slider{margin:0 0 30px}
.slider-wrappper{max-width:970px;margin:0 auto;padding:0}
.owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em}
.slider-item{position:relative;height:100%}
.slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:.7;z-index:1;background-image:linear-gradient(to bottom,transparent,rgb(0, 0, 0));transition:opacity 0.25s ease;}
a.slider-image{height:100%}
.thumb.overlay{height:200px}
@media screen and (max-width: 800px){
  .thumb.overlay{height:280px;}
}
.post-descript{position:absolute;bottom:20px;left:-5%;right:8%;z-index:99;padding:25px;border-radius:6px;transition:all .3s}
.slider-item:hover .post-descript{}
.slider-wrapp .post-inner{padding:0 40px;margin:auto}
.slider-item h2.post-title{font-size:24px;margin:0;padding:0;}
@media screen and (max-width: 480px){
  .slider-item h2.post-title a{
  font-size:16px!important;
  }
}

.slider-item h2.post-title a{color:#fff;transition:all .3s;font-size:24px;}
.slider-item h2.post-title a:hover{color:#fff}
.slider-item .post-date{display:inline-block;color:#ddd;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
.slider-item .post-tag a{display:inline-block;background:#0081ff;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.slider-item .post-tag a:hover{background:#000;color:#fff}
.feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff}
.featured-posts{display:inline-block;width:100%}
.feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0}
.feature-item:last-child{margin:0}
.feature-item .thumb.overlay{height:150px;width:100%;position:static}
.feature-item .thumb.overlay a.slider-image{}
.feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s}
.feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden}
.feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)}
.feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400}
.feature-item h2.post-title a{color:#000}
.feature-item:hover h2.post-title a{color:#aaa}
.feature-item .post-meta{margin:0}
.feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.feature-item .post-tag a:hover{background:#000;color:#fff}
.feat-home{height:320px;margin:0 0 50px;position:relative}
.feat-home:before,.slider-item:before{content:&quot;&quot;;right:0}
.feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1}
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0);overflow:hidden;border-radius:8px;}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:3px;width:60px;padding:3px;background:#e2e2e2;border:none;border-radius:7px;outline:none;}button.owl-dot.active{background:#1a73e8;padding:3px;border:none;border-radius:7px;outline:none;}

@media screen and (max-width: 480px){
  .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{

  }
  .owl-dots{
  bottom:0px!important;
  }
}

.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#1a73e8;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)}
.owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)}
.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s;outline:none;}
.owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}
.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}
#HTML33 .widget-content{overflow:visible}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@media screen and (max-width: 768px){
.feature-item{width:50%;margin:0 auto 15px auto}}
@media screen and (max-width: 640px){
.owl-prev,.owl-next{top:18%}
.owl-carousel .owl-item{height:auto}
.post-descript{padding:15px 10px;left:-2%;right:5%;bottom:10%;}
.slider-wrapp .post-inner{padding:0 10px}
.slider-item h2.post-title{font-size:16px;padding:0;display:flex;}
.feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}}
@media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}}
.content-wrapper{overflow:hidden;max-width:1000px;margin:0 auto;margin-top:60px;margin-bottom:-85px;}

.owl-dots{
  position:absolute;
  bottom:0;
  width:100%;
  margin:0 auto;
  padding:20px 0 15px 0;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  flex-direction:row;
  text-align:center;

}

@media screen and (max-width: 480px){
  .slider-wrappper{
  padding:15px;
  }
  .content-wrapper{margin-top: 35px;}
}

@media screen and (max-width: 800px){
  .content-wrapper{margin-top: 35px;}
  .slider-wrappper{
  padding:15px;
  }
}
.owl-dots .owl-dot{
  width:50px;
}
</style>
</b:if>

6. Kemudian masukkan kode javascript OwlCarousel2.js dibawah ini dan letakkan kode tersebut dibagian atas </body>.

<script src='https://cdn.statically.io/gh/Aslori/file/master/OwlCarousel2.js' type='text/javascript'/>

7. Jika telah selesai klik tombol Simpan dan sekarang pindah atau masuk ke menu TATA LETAK.
8. Pada tahap ini silahkan klik Tambahkan Gadget ⇨ lalu klik/pilih HTML/Javascript.
9. Setelah itu akan tampil Form Pop Up Widget dan masukkan kode dibawah ini pada Form tersebut.

<script>
document.write("<script src=\"/feeds/posts/default/-/TUTORIAL?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>");
</script>

Silahkan ganti tulisan yang saya tandai dengan Label yang ingin kamu tampilkan pada blog.

10. Terakhir klik tombol Simpan dan Selesai.

Saya rasa cukup mudah dimengerti dan dipraktekan bukan? Beginilah tutorial "Membuat Widget Feature Post Slider Otomatis Di Blogger". Yang mana semoga artikel ini bermanfaat dan berguna.
Silahkan tinggalkan komentar jika ada hal atau bagian yang tidak kamu mengerti.

Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

Cara Membuat Sticky Share Button Blogger Theme Viomagz

noreply@blogger.com (GoSEO.id) — Thu, 23 Apr 2020 09:32:00 +0000

Cara Membuat Sticky Share Button Blogger Theme Viomagz

GoSEO.id - Jika kita membahas tentang viomagz, pada dasarnya theme ini sudah mempunyai default button share yang terletak dibawah artikel. Seperti yang kamu ketahui, button share merupakan item penting yang harus digunakan pada blog untuk mempermudah pengunjung menyimpan atau ingin membagikan artikel tersebut ke berbagai sosial media.

Nah, pada kesempatan kali ini kita menggunakan theme Viomagz untuk membahas "Cara Membuat Sticky Share Button Blogger Theme Viomagz". Bagi kamu pengguna theme Viomagz silahkan ikuti tutorial ini jika ingin membuat button sticky share. Pada postingan sebelumnya pun kami telah "Membuat Menu Navigasi Keren Di Viomagz" jika kamu juga ingin mencobanya.

Berikut tahapan-tahapan cara membuat sticky share button blogger theme viomagz :

Cara Membuat Sticky Share Button Blogger Theme Viomagz

Pertama, silahkan login di blogger.com dengan menggunakan akun GMail kamu.
Setelah itu masuk ke menu TEMA ⇨ klik tombol Edit HTML.

Lalu cari kode yang seperti dibawah ini pada bagian CSS :

#wrapper {
background: #ffffff;
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: hidden;
}

Kemudian rubah kode overflow: hidden; menjadi overflow: unset; sehingga tampak seperti dibawah ini :

#wrapper {
background: #ffffff;
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}

Selanjutnya cari lagi kode seperti dibawah ini :

#share-container {
margin: 20px auto 30px;
overflow: hidden;
}

Kemudian hapuslah kode tersebut dan gantikan dengan kode seperti dibawah ini :

#share-container {
background: #fff;
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
position: -webkit-sticky;
position:sticky;
bottom: 0px;
z-index: 1;
}

Selanjutnya cari lagi kode berikut :

<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
<div id='share'>

Lalu hapuslah kode tersebut dan gantikan dengan kode seperti dibawah ini :

<div class='label-line-c'>
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
<div id='share-container'>
<div id='share'>

Terakhir klik tombol Simpan dan Selesai.

Akhir Kata

Begitulah "Cara Membuat Sticky Share Button Blogger Theme Viomagz" pada kesempatan hari ini. Bagaimana, cukup mudah bukan?

Semoga postingan ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak kamu pahami. Jangan lupa untuk share dan subcribe kami pada kolom Newsletter agar tak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih sudah hadir dan membaca artikel ini.

Menampilkan Tanggal Postingan Pada Label Tertentu

noreply@blogger.com (GoSEO.id) — Fri, 17 Apr 2020 09:16:00 +0000

Menampilkan Tanggal Postingan Pada Label Tertentu

GoSEO.id - Kemarin kita telah membahas bagaimana "Membuat Menu Navigasi Keren Di Viomagz". Yang mana menu navigasi tersebut terinspirasi dari blognya mbak igniel. Menu navigasi pada tutorial yang telah kami buat tersebut hanya akan terlihat saat kita browse menggunakan smartphone atau mode mobile.

Pada kesempatan hari ini GoSEO.id akan membahas bagaimana caranya kita "Menampilkan Tanggal Postingan Pada Label Tertentu". Yang mana tanggal cara ini bisa kita lakukan dengan mudah dengan menggunakan tag conditional khusus.

Nah, jika kamu mempunyai beberapa artikel dengan label atau tag yang berbeda dan ingin tanggal postingannya tampil pada postingan atau hasil pencarian tertentu, coba dan silahkan ikuti langkah yang kami berikan ini :

Menampilkan Tanggal Postingan Pada Label Tertentu

Pertama silahkan login menggunakan akun blogger.com milikmu.
Setelah itu klik menu Tema ⇨ lalu klik tombol Edit HTML.

Berhubung setiap theme yang kita miliki menggunakan struktur HTML dan tag yang berbeda, maka akan kami tunjukkan bagaimana cara input dan callernya serta peletakannya pada gadget versi 1 dan gadget versi 2.

Silahkan sesuaikan selector dan tag dengan theme masing-masing

# Gadget Versi 1

<b:includable id='customTimestamp' var='post'>
<b:loop index='num' values='data:post.labels' var='label'>
 <b:if cond='data:post.labels any (label =&gt; label.name == &quot;Label1&quot; or label.name == &quot;Label2&quot; or label.name == &quot;Label3&quot;)'>
  <b:if cond='data:num == 0'>
   <span class='byline post-timestamp'>
        <b:if cond='data:post.url'>
          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
  Updated <a class='timestamp-link' expr:href='data:post.url' title='permanent link'>
   <time class='published updated' expr:datetime='data:post.date.iso8601.jsonEscaped' expr:title='data:post.date.iso8601.jsonEscaped'><b:eval expr='data:post.date'/></time></a>
        </b:if>
   </span>
  </b:if>
 </b:if>
</b:loop>
    </b:includable>

Penerapan :

Edit yang ditandai dengan nama label yang ingin ditampilkan tanggal postingannya.
Cari kode <b:includable id='main' var='top'>...</b:includable> , lalu letakkan kode diatas setelah kode ini.

# Gadget Versi 2

<b:includable id='customTimestamp' var='post'>
<b:loop index='num' values='data:post.labels' var='label'>
 <b:if cond='data:post.labels any (label =&gt; label.name == &quot;Label1&quot; or label.name == &quot;Label2&quot; or label.name == &quot;Label3&quot;)'>
  <b:if cond='data:num == 0'>
   <span class='byline post-timestamp'>
          <meta expr:content='data:post.url' itemprop='url'/>
  Updated <a class='timestamp-link' expr:href='data:post.url' title='permanent link'>
   <time class='published updated' expr:datetime='data:post.date.iso8601.jsonEscaped' expr:title='data:post.date.iso8601.jsonEscaped'><b:eval expr='data:post.date'/></time></a>  
   </span>
  </b:if>
 </b:if>
</b:loop>
    </b:includable>

Penerapan :

Edit yang ditandai dengan nama label yang ingin ditampilkan tanggal postingannya.
Cari kode <b:includable id='comments' var='post'>...</b:includable> atau <b:includable id='comments' var='post'/> , lalu letakkan kode diatas setelah kode ini.

Kemudian letakkan kode pemanggil dibawah dan boleh diletakkan di salah satu pada post-header atau post-footer (atau yang serupa lainnya) agar sejajar dengan post meta tag lainnya.
```
<b:include data='post' name='customTimestamp'/>
```
Setelah kamu melakukan hal yang diatas dengan benar, maka perlu tindakan tambahan agar tutorial yang satu ini dapat berjalan dengan baik. Pastikan kamu menghilangkan centang Show Timestamp post melalui Layout ⇨ Main. Seperti gambar berikut ini :
Klik Gambar Untuk Memperbesar

Akhir Kata

Tutorial "Menampilkan Tanggal Postingan Pada Label Tertentu" ini tidak akan mengganggu struktur schema.org dari theme kamu. Meskipun struktur schema.org yang diterapkan pada theme mengharuskan adanya post date pada setiap postingan.

Semoga postingan ini bermanfaat. Silahkan tinggalkan komentar jika kamu memiliki pertanyaan. Serta terima kasih telah hadir dan membaca artikel ini.

Membuat Menu Navigasi Keren Di Viomagz

noreply@blogger.com (GoSEO.id) — Thu, 16 Apr 2020 12:36:00 +0000

Membuat Menu Navigasi Keren Di Viomagz

GoSEO.id - Saya yakin bahwa Viomagz bukan theme yang tabu lagi bagi para blogger. Para blogger pasti sudah tau bahkan pernah menggunakan theme buatan Mas Sugeng yang satu ini, termasuk saya. Theme ini merupakan salah satu theme rekomendasi bagi saya untuk pengguna blogger pemula lainnya. Selain responsive, fast load, dan SEO. Theme ini juga mempunyai fitur lain seperti menggunakan breadcrumbs versi terbaru dan yang pastinya kamu tidak perlu membayar lagi setiap theme tersebut mempunyai update-an, alias sekali beli lifetime.

Eeeiiitttsss, ini bukan promosi. Tapi lebih ke rekomendasi.

Berhubung pada kesempatan kali ini kita menggunakan theme Viomagz sebagai uji coba redesign menu navigasi, maka GoSEO.id akan membagikan cara "Membuat Menu Navigasi Keren Di Viomagz". Sebelumnya GoSEO.id juga pernah membagikan tutorial menu navigasi yang tidak kalah keren dan mungkin kamu ingin mencobanya yaitu "Cara Membuat Mega Menu Responsive di Blogger".

Menu redesign ini terinspirasi dari blog mbak Igniel dan hanya berjalan pada versi mobile.

Yuk ikuti langkah-langkahnya berikut ini :

Table of Content

Membuat Menu Navigasi Keren Di Viomagz
Akhir Kata

Membuat Menu Navigasi Keren Di Viomagz

Yaph, seperti judul dan penjelasan saya diatas, kita akan membuat menu navigasi seperti blog Igniel pada theme Viomagz. Untuk itu ikuti langkah berikut :

1. Login Ke Akun Blogger

Jika ingin mencoba hasil redesign menu navigasi ini, yang harus kamu lakukan pertama kali adalah login ke akun Blogger.com dengan menggunakan akun Gmail kamu, bukan akun orang LAIN.

2. Menu Tema

Setelah itu silahkan masuk ke menu Tema yang terletak pada bilah kiri ⇨ dan klik tombol Edit HTML.

3. Cari Kode Navigation

Tahap selanjutnya silahkan cari kode <nav id='cssmenu'> ... </nav>, lalu hapus kode tersebut dan gantikan dengan kode dibawah ini :

<div class='darkshadow'/>
<nav class=';' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'>
<a href='/'>
<span itemprop='name'>
<svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'/>
</svg>Home</span></a></li>

<li><a class='nav-submenu' href='javascript:;' title='Navigasi'>
<span>
<svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z' fill='#000'/>
</svg>Menu<span class='new'>Hot</span>
</span>
<svg class='down' height='24' viewBox='0 0 24 24' width='24'>
<path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5ZZ'/>
</svg>
</a>
<ul class='nav-sub'>
<li><a href='#' itemprop='url'>
<span itemprop='name'>
<svg class='tekn1' viewBox='0 0 24 24'><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='#000'/>
</svg>Sub Menu</span></a></li>

<li><a href='#' itemprop='url'>
<span itemprop='name'>
<svg class='tekn1' viewBox='0 0 24 24'><path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' fill='#000'/></svg>Sub Menu</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg class='tekn1' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#000'/>
</svg>Sub Menu</span></a></li>
</ul>
</li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='#000'/>
</svg>Menu</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z' fill='#37474F'/>
</svg>Menu</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg height='24' viewBox='0 0 24 24' width='24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#000'/>
</svg>Menu</span></a></li>

<li class='subs'>
<a href='#' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
<svg viewBox='0 0 24 24'>
<path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/>
</svg>
<span>FOLLOW</span>
</a>
</li>
<li class='footer'>
<a href='#' itemprop='url' title='Sitemap'>
<span itemprop='name'> Sitemap</span>
</a>
      - 
      <a href='#' itemprop='url' title='Disclaimer'>
<span itemprop='name'>Disclaimer</span>
</a>
      - 
      <a href='#' itemprop='url' title='Privacy Policy'>
<span itemprop='name'>Privacy</span>
</a>
<span class='social'>
<a class='fb' href='#' rel='nofollow noopener' target='_blank' title='Facebook'>
<svg viewBox='0 0 24 24'>
<path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/>
</svg>
</a>
<a class='instagram' href='#' rel='nofollow noopener' target='_blank' title='Instagram'>
<svg viewBox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/>
</svg>
</a>
<a class='codepen' href='#' rel='nofollow noopener' target='_blank' title='Codepen'>
<svg viewBox='0 0 24 24'>
<path d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z'/>
</svg>
</a><a class='ccontact' href='#' rel='nofollow noopener' target='_blank' title='Contact'>
<svg viewBox='0 0 24 24'>
<path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/>
</svg>
</a>
</span>
<span class='credit'>Copyright &#169; 2018 - 2020</span>
<span class='developer'>Theme by <cite>
<b>GoSEO.id</b>
</cite>
</span>
</li>
</ul>
</nav>
<!-- GoSEO.id Nav Mobile End -->
<!-- GoSEO.id Button -->
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
<svg class='teknbtn' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/>
</svg>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</a>
</div>
<!-- GoSEO.id Button End -->
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<!-- GoSEO.id Nav Dekstop -->
<ul><li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/>
</svg> Menu </a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/>
</svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>
</ul>
<!-- GoSEO.id Nav Dekstop end -->
</nav>

4. Menempatkan Kode CSS

Setelah itu, silahkan kamu cari kode ]]></b:skin> atau </style>. Kemudian pastekan kode dibawah ini tepat diatas kode tersebut.

/* GoSEO.id Navigasi */
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all .4s ease-in-out}.darkshadow.open{visibility:visible;opacity:1}#nav-wrapper{font-size:13px;width:265px;position:fixed;z-index:5;top:0;overflow:hidden;left:0;background:#fff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;bottom:0;padding-top:15px;-webkit-transform:translateX(-290px);-ms-transform:translateX(-290px);transform:translateX(-290px);transition:all .5s ease}
#nav-wrapper:hover{overflow-y:auto} #nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#nav-wrapper ul{margin:0;padding:0;list-style:none}#nav-wrapper li{display:block;list-style:none;position:relative} #nav-wrapper li.first{background:#e1f5fe;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition: all .5s ease;} #nav-wrapper>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px 0 10px 24px;color:#333333;font-size:13px}
#nav-wrapper li a.nav-submenu{padding:10px 24px}
#nav-wrapper li ul.nav-sub{display:none}#nav-wrapper li li a{display:block;position:relative;padding-left:5em;line-height:40px;color: #000;}#nav-wrapper a:hover{color:#00B8FF;}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}
#nav-wrapper li.open svg.down{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg)
} #nav-wrapper svg{height:24px;width:24px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#nav-wrapper>ul>li:not(.colormode)>a>span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1}#nav-wrapper>ul>li>a>span>span.new{background:#e1f5fe;color:#004c88;line-height:normal;margin-left:10px;font-size:8px;padding:3px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}
.tekn1{width:22px;height:22px;vertical-align:middle;margin-right:4px}@media only screen and (max-width:480px){#nav-wrapper .profile img{width:24px;height:24px;margin-right:15px;margin-left:1px;border-radius:20px}}@media screen and (max-width:600px){#nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:5px 10px;margin-top:0;background-color:#28afdc;color:#fff;border-radius:20px}#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px}#nav-wrapper .footer .social{display:flex;margin:7px 0}#nav-wrapper .footer .credit{display:block;color:#657786}#nav-wrapper .footer .developer{color:#657786}}@media screen and (max-width:800px){#nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px}.Profile .widget-content{margin:0;max-width:100%}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#a1362a;color:#fff;border-radius:20px}#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px}#nav-wrapper .footer .social{display:flex;margin:7px 0}#nav-wrapper .footer .credit{display:block;color:#657786}#nav-wrapper .footer .developer{color:#657786}}.teknbtn{fill:#fff;margin-top:-4px;display:none}@media screen and (max-width:800px){.teknbtn{fill:#fff;margin-top:-4px;display:block}}

5. Menempatkan Kode Javascript

Agar navigasi dapat berjalan dengan semestinya, kamu diharuskan untuk meng-copy javascript dibawah ini dan letakkan kode tersebut diatas kode </body>.

<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('w f=["\i\l\h\j","\q\i\s\s\n\h\F\n\g\o\o","\C\j\g\t\u\r\k\g\l\l\h\k\G\L\v\m\g\k\A\o\D\g\m\i\r","\H\n\x\H\A","\v\B\h\j\y\u\q\i\s\s\n\h","\k\h\B\i\t\h\F\n\g\o\o","\C\j\g\t\u\r\k\g\l\l\h\k\G\v\m\g\k\A\o\D\g\m\i\r","\v\m\g\k\A\o\D\g\m\i\r","\h\n","\B\y\n\q\x\l\n\h","\v\j\g\t\u\o\y\I\B\h\j\y","\M\x\j\m","\m\k\i\l\m\i\r\j","\i\j","\l\k\i\q\i\q\J\l\h","\m\g\q\g","\j\h\N\q","\o\n\x\m\h\O\i\s\s\n\h","\l\g\k\h\j\q","\o\n\x\m\h\P\l","\j\i\q","\v\j\g\t\u\o\y\I","\C\j\g\t\u\r\k\g\l\l\h\k","\k\h\g\m\J"];$(Q)[f[R]](z(){$(f[4])[f[3]](z(){$(f[2])[f[1]](f[0])});$(f[7])[f[3]](z(){$(f[6])[f[5]](f[0])});w d=z(a,b){p[f[8]]=a||{};p[f[9]]=b||K;w c=p[f[8]][f[11]](f[10]);c[f[13]](f[3],{S:p[f[8]],T:p[f[9]]},p[f[12]])};d[f[14]][f[12]]=z(a){w b=a[f[15]][f[8]];$p=$(p),$E=$p[f[16]]();$E[f[17]]();$p[f[18]]()[f[1]](f[0]);U(!a[f[15]][f[9]]){b[f[11]](f[V])[f[W]]($E)[f[X]]()[f[18]]()[f[5]](f[0])}};w e=Y d($(f[Z]),K)})',62,71,'|||||||||||||||_0x8991|x61|x65|x6F|x6E|x72|x70|x64|x6C|x73|this|x74|x77|x67|x76|x2D|x2E|var|x69|x75|function|x6B|x6D|x23|x68|next|x43|x2C|x63|x62|x79|false|x20|x66|x78|x54|x55|document|23|el|multiple|if|21|20|19|new|22|||||||||'.split('|'),0,{}))
//]]></script>

6. Cari Kode

Tahap selanjutnya yaitu cari kode CSS seperti dibawah ini dan beri display: none; pada setiap tag. Berikut contohnya :

.mline1, .mline2, .mline3 {
     position: absolute;
     left: 0;
     display: none;
     height: 2px;
     width: 18px;
     background: #ffffff;
     content: '';
     transition: all 0.2s;
 }
 .mline1 {
  top: 1px;
 }
 .mline2 {
  top: 7px;
 }
 .mline3 {
  top: 13px;
 }
 .button.menu-opened .mline1 {
     background: #ffffff;
     top: 3px;
     display: none;
     border: 0;
     width: 13px;
     -webkit-transform: rotate(-45deg);
     -o-transform: rotate(45deg);
     -o-transform: rotate(-45deg);
     -o-transform: rotate(45deg);
     transform: rotate(-45deg);
 }
 .button.menu-opened .mline2 {
 top: 7px;
     display: none;
     left: 2px;
     width: 19px;
 }
 .button.menu-opened .mline3 {
     top: 11px;
     display: none;
     height: 2px;
     width: 13px;
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
    }

7. Simpan

Dan ini merupakan yang terakhir, yaitu klik tombol Simpan dan kamu telah mempunyai menu navigasi baru seperti Igniel dan hanya dapat dilihat pada versi Mobile.

Akhir Kata

Bagaimana, apa ada yang tidak kamu pahami? Silahkan tinggalkan pertanyaanmu itu pada kolom komentar biar gak ubanan hehehe. Beginilah tips "Membuat Menu Navigasi Keren Di Viomagz" pada hari ini. Semoga artikel ini bermanfaat.

Jangan lupa pula untuk share dan subcribe GoSEO.id pada kolom Newsletter untuk selalu mendapatkan update-an dari kami. Terima kasih sudah hadir dan membaca artikel ini.

SEO : 3 Tips Menaikkan Peringkat

noreply@blogger.com (GoSEO.id) — Thu, 16 Apr 2020 09:40:00 +0000

SEO : 3 Tips Menaikkan Peringkat

GoSEO.id - Pada kesempatan kali ini, GoSEO.id akan memberikan pembahasan "SEO : 3 Tips Menaikkan Peringkat" di Google dan mesin pencari lainnya. Yuk simak tips yang akan kami berikan jika blog/website yang kamu miliki masih belum muncul pada pencarian karena masih kurangnya optimasi.

Dalam seminar online yang akan diadakan oleh InternetWorld pada tanggal 22 April 2020 tentang "Tindakan dan Alat SEO : Pengoptimalan Konten dan Meningkatkan Peringkat", mereka akan membahas bagaimana cara kita mengoptimalkan blog/website dan kriteria peringkat sehingga muncul pada hasil pencarian.

Berikut telah kami rangkum sebagian kecil dari tips utamanya.

Table of Content

3 Tips SEO Menaikkan Peringkat
Akhir Kata

3 Tips SEO Menaikkan Peringkat

Sebagian kecil dari tips utama yang telah kami rangkum, terdapat 3 inti penting yaitu :

1. Memberi Tahu Mesin Pencari Tentang Blog/Website Kamu

Saat mesin pencari hendak mengindeks situs yang kamu miliki, mereka akan membaca metadata terlebih dahulu tentang informasi apa yang disediakan oleh blog/website kamu. Oleh karena itu, kamu harus tau dan ingat bahwa gambar, video, serta tombol juga memiliki metadata.

2. Menunjukkan Menu Utama Bagi Pengguna dan Mesin Pencari

Menu utama merupakan penawaran yang penting bagi pengguna. Oleh karena itu, buatlah menu utama yang paling penting bagi pengguna dari apa yang blog kamu tawarkan. Dan buatlah menu tersebut terlihat dari sisi pengguna dan mesin pencari.

3. Memberi Penjelasan/Uraian

Setiap judul, teks ataupun topik pada setiap halaman blog/website yang kamu miliki harus diuraikan sehingga dapat dikenali. Semakin detail penjelasan kamu, maka semakin berpeluang blog/website untuk dapat muncul pada navigasi atau teks pada mesin pencari.

Akhir Kata

Begitulah penjelasan "SEO : 3 Tips Menaikkan Peringkat" yang dapat kami rangkum dari seminar online yang akan diadakan oleh InternetWorld. Semoga rangkuman ini dapat berguna oleh kamu. Jika kamu masih penasaran dan ingin mengetahuinya lebih jelas, kamu dapat mengikuti seminar tersebut dengan klik pada link diatas atau klik DISINI.

Terima kasih sudah hadir dan membaca postingan ini. Jangan lupa untuk share dan subcribe blog kami pada kolom Newsletter untuk selalu mendapatkan update-an terbaru.

Situs Penyedia Gambar Gratis

noreply@blogger.com (GoSEO.id) — Wed, 08 Apr 2020 06:36:00 +0000

Situs Penyedia Gambar Gratis

GoSEO.id - Bagi para blogger mencari gambar yang bebas digunakan merupakan suatu yang penting sebagai penunjang artikel yang akan dibuat. Gambar yang diambil secara acak pada Google untuk dibuat sebagai postingan memiliki potensi resiko yang tinggi terhadap Copyright.

Agar dapat menggunakan gambar dengan bebas pada postingan yang akan dibuat, maka pada kesempatan kali ini kami akan membagikan "Situs Penyedia Gambar Gratis". Yang mana kamu dapat dengan leluasa mengunduh gambar dengan gratis dan memiliki kualitas yang tinggi.

Yuk simak 5 situs penyedia gambar gratis berikut :

Table of Content

Situs Penyedia Gambar Gratis

Pixabay
Pexels
Flickr
Unsplash
Gratisography

Akhir Kata

Situs Penyedia Gambar Gratis

Bagi kamu yang ingin menggunakan gambar sebagai postingan dan memiliki kualitas tinggi secara gratis, berikut kami berikan 5 situs penyedia gambar secara gratis :

1. Pixabay

Situs Penyedia Gambar Gratis - Pixabay

Dengan menggunakan situs dari Pixabay, kamu dapat dengan leluasa mengunduh gambar berkualitas tinggi tanpa perlu izin dan membayar atribusi. Setiap gambar dan video yang berada pada Pixabay memiliki lisensi Pixabay. Kamu dapat menggunakan setiap konten yang ada dan memodifikasi sesuka hatimu.

Kembali ke List TOC

2. Pexels

Situs Penyedia Gambar Gratis - Pexels

Pexels juga merupakan salah satu situs yang menyediakan gambar berkualitas tinggi yang berlisensi dibawah naungan Pexels serta sepenuhnya gratis jika ingin digunakan. Semua gambar yang disediakan pada Pexels dapat dengan mudah kamu cari dengan menggunakan tag.

Kembali ke List TOC

3. Flickr

Situs Penyedia Gambar Gratis - Flickr

Siapa yang tidak kenal dengan situs terkenal yang satu ini? Yaph Flickr merupakan situs yang berbagi foto serta situs komunitas daring yang terkenal dan populer dikalangannya. Sebagai situs untuk berbagi foto pribadi, banyak dari para blogger memanfaatkan situs ini sebagai wadah menyimpan gambar/foto mereka.

Kembali ke List TOC

4. Unsplash

Situs Penyedia Gambar Gratis - Unsplash

Situs yang satu ini merupakan sebuah platform yang merevolusi bisnis industri fotografi. Dengan adanya Unsplash, para pekerja kreatif dapat mengkreasikan berbagai presentasi mockup dengan bagus dan baik.

Kamu dapat menggunakan dan mengunduh berbagai gambar dari situs ini dengan gratis. Semua gambar yang tersedia pada situs Unsplash berada dibawah lisensi Unsplash.

Kembali ke List TOC

5. Gratisography

Situs Penyedia Gambar Gratis - Unsplash

Gratisography juga merupakan sebuah situs yang menyediakan berbagai gambar gratis yang dapat kamu gunakan dengan sesuka hati. Setiap gambar yang tersedia pada situs ini diperbaharui setiap minggunya. Berbagai gambar yang tersedia pada situs ini meliputi kategori animals, bussines, fashion, food, nature, object, people, urban, serta whimsical.

Kembali ke List TOC

Akhir Kata

Begitulah beberapa situs yang menyediakan gambar berkualitas tinggi secara gratis. Semoga pembahasan "Situs Penyedia Gambar Gratis" ini dapat bermanfaat. Silahkan tinggalkan komentar jika kamu memiliki beberapa pertanyaan. Terima kasih telah hadir dan membaca artikel ini. Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter untuk selalu mendapatkan update-an artikel terbaru kami.

Tips Bekerja Dari Rumah

noreply@blogger.com (GoSEO.id) — Fri, 03 Apr 2020 12:51:00 +0000

Tips Bekerja Dari Rumah

GoSEO.id - Pada tahun 2020 saat ini, dalam lingkup global telah terjadi eksperimen besar-besaran untuk bisnis. Ini merupakan sebuah revolusi Work-From-Home yang membuat aturan jarak dan isolasi diri dari Virus Corona. Seperti jutaan orang lainnya, GoSEO.id juga mengumpulkan beberapa kiat dan gagasan tentang "Tips Bekerja Dari Rumah".

Yuk simak tips bekerja dari rumah (WFH) berikut :

Table of Content

Tips Bekerja Dari Rumah

Tetap sosial
Mengatur Jadwal
Menerima Bahwa Tim Tidak Akan Bekerja Pada Jam Normal
Jauhkan makanan, minuman, anak-anak, dan hewan peliharaan dari laptop Anda!
Lebih komunikatif dari biasanya
Pilih Strategi Kerja Kamu
Hormati Pasangan Kamu
Lakukan Segala Jenis Aktivitas Kebugaran

Akhir Kata

Tips Bekerja Dari Rumah

Berikut telah kami siapkan beberapa tips untuk kamu agar dapat bekerja secara efisien dari rumah.

1. Tetap sosial

Bekerja dari rumah jauh lebih sulit dibandingkan berada di kantor. Pastikan untuk menjaga interaksi sosial secara teratur sebanyak mungkin. Ganti pendingin air / mesin kopi dengan kelompok Slack, coffee break virtual, dan check-in sosial. Pikirkan hal-hal menyenangkan yang dapat Kamu lakukan sebagai sebuah tim.

Kembali ke List TOC

2. Mengatur Jadwal

Apakah kamu memiliki jadwal pertemuan rutin? Jika iya jangan dibatalkan. Cobalah untuk menjaga tim agar tetap sinkron meskipun setiap orang memiliki tanggung jawab dan jadwal yang berbeda di rumah. Ini juga berlaku untuk pertemuan antarmuka. Tetap produktif dengan jadwal regulermu sebanyak mungkin.

Kembali ke List TOC

3. Menerima Bahwa Tim Tidak Akan Bekerja Pada Jam Normal

Ini merupakan keadaan yang cukup rumit. WFH dan Lockdown merupakan keadaan yang bisa disebut New Normal. Maksudnya adalah keadaan yang tidak terduga akan tetapi harus disikapi secara normal. Lebih fleksibel dan rilekslah sedikit. Dan percayalah pada kolega dan tim kamu bahwa mereka akan menyelesaikan pekerjaan. Entah jam berapapun mereka akan mengerjakannya.

Kembali ke List TOC

4. Jauhkan makanan, minuman, anak-anak, dan hewan peliharaan dari laptop Anda!

Saat ini, setiap masalah teknis atau peralatan lebih sulit untuk diatasi. Jika ada sesuatu yang tumpah di laptop kamu atau jika anak kamu yang baru berumur 2 tahun menjatuhkannya, maka kamu akan membutuhkan lebih banyak waktu agar para teknisi dapat memperbaikinya. Jadi tetap berhati-hati dan jaga gadget yang kamu miliki agar tetap aman.

Kembali ke List TOC

5. Lebih komunikatif dari biasanya

Di kantor, kamu hanya perlu mengangkat kepala untuk terhubung dengan rekan kerja. Obrolan ringan, interaksi cepat ketika melewati lorong-lorong kantor. Akan tetapi kondisi saat ini membuat semuanya berbeda. Buatlah lebih komunikatif secara online daripada yang seharusnya. Tetap terhubung dengan pembaruan kinerja, berita perusahaan dan berita industri. Periksa dan ajukan pertanyaan tentang apa yang sedang mereka lakukan, baik itu melalui telepon, aplikasi Zoom, dan lain-lain sesuai dengan apa yang kamu inginkan.

Kembali ke List TOC

6. Pilih Strategi Kerja Kamu

Tergantung pada kepribadian kamu, situasi di rumah, dan komitmen kerja. Kamu mungkin ingin mengadopsi strategi kerja yang lebih nyaman. Lakukan eksperimen dan lihat apa yang terbaik untuk Kamu.

Kembali ke List TOC

7. Hormati Pasangan Kamu

Jika kamu hidup dengan pasangan atau teman serumah, mereka mungkin juga dalam mode WFH. Itu berarti kamu perlu menemukan sesuatu yang tepat, seperti ruang kerja, waktu tenang, waktu makan. Pastikan untuk berkoordinasi ketika masing-masing dari kamu memiliki jadwal pekerjaan.

Kembali ke List TOC

8. Lakukan Segala Jenis Aktivitas Kebugaran

Ketika bekerja di kantor mungkin kamu memiliki kesempatan bergerak dari rumah ke kantor, dari rumah ke stasiun, keluar makan siang atau lainnya. Tapi ketika kamu bekerja dari rumah, jarak bergerak kamu menjadi lebih sedikit. Sisihkan juga waktu kamu untuk dapat berolahraga agar badan tetap fit dan bugar.

Kembali ke List TOC

Akhir Kata

Semoga beberapa "Tips Bekerja Dari Rumah" ini dapat bermanfaat dan membuat kamu lebih efisien dalam melakukan pekerjaan jarak jauh. Terima kasih telah hadir dan membaca artikel ini. Jangan lupa pula untuk share dan subcribe blog kami pada kolom Newsletter agar dapat menerima update-an artikel terbaru kami.

Menggunakan Image Lightbox Dengan CSS Dan Javascript

noreply@blogger.com (GoSEO.id) — Fri, 03 Apr 2020 11:21:00 +0000

Menggunakan Image Lightbox Dengan CSS Dan Javascript

GoSEO.id - Makin hari semakin jarang update!! Yaaa ini disebabkan oleh kondisi yang menimpa kita saat ini. Sehingga terjadinya keterbatasan waktu antara pekerjaan kantor dan waktu untuk memposting.

Berhubung saat ini saya sedang mempunyai kesempatan untuk membuat tutor sederhana, dan atas permintaan seorang teman, Maka pada kesempatan kali ini kita akan membahas tips "Menggunakan Image Lightbox Dengan CSS Dan Javascript".

Tanpa perlu basa basi dan memikirkan SEO dalam postingan lagi, hehehe...
Yuk simak tips berikut..

Menggunakan Image Lightbox Dengan CSS Dan Javascript

1. Login pada akun blogger.com milikmu.

2. Kemudian masuk ke menu TEMA ➔ lalu klik tombol Edit HTML.

3. Setelah itu letakkan kode dibawah ini pada Style blog kamu.

.zoomclick.active{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999999;background:#000;}
.zoomclick.active img{height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.flow{overflow:hidden;position:relative;}
.zoomclick.active:after{content:"";cursor:pointer;width:40px;height:40px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23cccccc' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:top right;-webkit-background-size:40px 40px;background-size:40px 40px;position:absolute;top:10px;right:10px;z-index:2;opacity:0;transition:all .4s ease-in-out}
.zoomclick.active:hover:after{opacity:.8}
@media screen and (max-width:800px){.zoomclick.active img{width:100%;height:auto;}}

4. Lalu copy dan pastekan juga kode dibawah ini dan letakkan diatas kode </body>.

function wrap(t, e, r) {
  for (var i = document.querySelectorAll(e), o = 0; o < i.length; o++) {
    var a = t + i[o].outerHTML + r;
    i[o].outerHTML = a
  }
}
wrap("<div class='zoomclick'>", ".post-body img", "</div>");


var container = document.getElementsByClassName("zoomclick");


for (var i = 0; i < container.length; i++) {
  //For each element in the container array, add an onclick event.
  container[i].onclick = function(event) {
    this.classList.toggle('active');
    var element = document.body;
    element.classList.toggle('flow');
  }
}

5. Terakhir klik tombol Simpan dan Selesai.

Bagaimana? sangat mudah bukan?

Beginilah tutor sederhana untuk tips "Menggunakan Image Lightbox Dengan CSS Dan Javascript". Semoga tutorial ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak dimengerti. Terima kasih sudah hadir dan membaca artikel ini. Jangan lupa pula untuk share dan subcribe pada kolom Newsletter untuk tetap mendapatkan update-an postingan terbaru kami.

Cara Ampuh Meningkatkan Trafik Blog

noreply@blogger.com (GoSEO.id) — Mon, 30 Mar 2020 08:20:00 +0000

Cara Ampuh Meningkatkan Trafik Blog

GoSEO.id - Blog merupakan aplikasi web yang memuat tulisan sebagai bentuk postingan pada sebuah halaman web. Pada era digital saat ini, blog dimanfaatkan untuk menghasilkan uang. Pendapatan dari blog dapat dimulai dari Adsense, Bisnis Online (Menjual Produk atau Jasa), Affiliasi, dan lain-lain.

Untuk mendapatkan penghasilan dari blog tidak semudah yang kita pikirkan. Karena kita perlu mendatangkan trafik agar penghasilan dapat berjalan dengan lancar. Oleh karena itu pada kesempatan kali ini GoSEO.id akan membagikan "Cara Ampuh Meningkatkan Trafik Blog" yang semoga dapat membantu kamu dalam dunia blogging.

Yuk simak pembahasan berikut :

Table of Content

Cara Ampuh Meningkatkan Trafik Blog
Akhir Kata

Cara Ampuh Meningkatkan Trafik Blog

Trafik merupakan faktor penting yang menentukan penghasilan Blog. Bila trafik yang masuk ke blog sedikit, maka sedikit pula penghasilan yang kita miliki. Bila trafik yang masuk ke blog banyak, maka bertambah banyak pula penghasilan yang akan kita dapatkan. Oleh karena itu, banyak dari para blogger melakukan berbagai cara untuk meningkatkan trafik blog yang mereka kelola.

Yuk simak beberapa cara ampuh meningkatkan trafik blog.

Kembali ke List TOC

1. Riset Kata Kunci

Sebelum kamu akan memulai menulis sebuah artikel, biasakanlah untuk melakukan riset kata kunci terlebih dahulu. Riset kata kunci merupakan hal yang penting dilakukan. Seringkali para blogger melakukan kesalahan dengan tidak melakukan riset sebelum menulis.

Setiap user yang sedang mencari sesuatu menggunakan mesin pencari pasti akan memasukkan kata kunci tertentu. Riset kata kunci sangat penting dilakukan agar artikel yang akan kita tulis masuk dalam pencarian. Ada beberapa tools yang dapat kamu gunakan untuk melakukan riset kata kunci yaitu UberSuggest atau Google Keyword Planner

Kembali ke List TOC

2. Gunakan Kata Kunci Persaingan Rendah

Ketika kamu melakukan riset menggunakan tools, biasanya kamu akan menemukan dua jenis kata kunci yaitu Long Tail dan Short Tail.

Short Tail merupakan kata kunci singkat yang biasanya hanya memiliki satu atau dua kata dan mempunyai tingkat persaingan (kompetitor) yang tinggi pada volume pencarian.

Klik Gambar Untuk Memperbesar - Contoh Short Tail

Sedangkan Long Tail merupakan kata kunci turunan dari Short Tail. Long Tail merupakan kata kunci yang lebih tertarget, spesifik, dan memiliki persaingan yang rendah pada mesin pencari.

Klik Gambar Untuk Memperbesar - Contoh Long Tail

Oleh karena itu kamu lebih disarankan menggunakan Long Tail daripada Short Tail. Dikarenakan Long Tail membawa kamu ke persaingan yang lebih sempit (rendah).

Kembali ke List TOC

3. Posting Artikel Yang Bermanfaat

Artikel bermanfaat merupakan tulisan-tulisan yang memberikan informasi serta solusi yang dibutuhkan oleh pembaca. Artikel bermanfaat juga mempengaruhi peringkat blog pada mesin pencari. Isi artikel yang dibuat harus singkat, padat dan jelas sehingga dapat dipahami dengan mudah oleh pembaca.

Kembali ke List TOC

4. Membangun Backlink Berkualitas

Backlink merupakan hyperlink yang menghubungkan web. Backlink sendiri biasanya merupakan kata kunci yang berisi hyperlink dan mengarah ke halaman website / blog tertentu.

Backlink mempunyai manfaat dan faktor penting untuk blog. Semakin banyak backlink berkualitas yang mengarah ke blog, semakin tinggi pula kesempatan untuk menempati halaman pertama pada mesin pencari.

Untuk mendapatkan backlink berkualitas, ada beberapa cara yang dapat kamu lakukan seperti mencari Guest Post hingga membeli backlink dari penyedia jasa.

Kembali ke List TOC

5. Melakukan Optimasi Blog

Ada beberapa cara untuk mengoptimasi blog, seperti meningkatkan kecepatan loading blog, menggunakan H1, H2, H3 yang tepat pada isi artikel, menggunakan theme yang tepat dan tidak membosankan.

Mengoptimasi blog juga merupakan unsur penting dalam Search Engine Optimization (SEO). Apalagi Google saat ini sering melakukan update algoritmanya. Apalagi saat ini User Experience merupakan hal yang didahulukan oleh Google, yang artinya kenyamanan dalam blogging untuk pengguna yang menjadi penilainya.

Kembali ke List TOC

Akhir Kata

Semoga pembahasan "Cara Ampuh Meningkatkan Trafik Blog" ini dapat bermanfaat untuk kamu. Jika kamu melakukan tahapannya secara konsisten maka dapat dipastikan trafik yang akan ke blog akan bertambah setiap harinya.

Terima kasih sudah hadir dan membaca artikel ini. Jangan lupa juga untuk share dan subscribe kami pada kolom Newsletter untuk selalu mendapatkan update-an artikel kami.

Apa Yang Berubah Pada SEO 2020?

noreply@blogger.com (GoSEO.id) — Tue, 24 Mar 2020 09:20:00 +0000

Apa Yang Berubah Pada SEO 2020?

GoSEO.id - Bagaimana peringkat pada mesin pencari pada tahun 2020? Dan apa yang berubah pada SEO 2020?

Untuk menjawab pertanyaan tersebut disajikan pada pembahasan berikut :

Table of Content

Yang Berubah Pada SEO tahun 2020
Akhir Kata

Apa Yang Berubah Pada SEO 2020?

1. Kecerdasan Buatan Baru dari Google

Kembali pada tahun 2015 lalu, Google mengumumkan bahwa mereka akan menggunakan AI untuk mempelajari perilaku atau hal-hal baru setiap saat. Pengalaman pengguna memiliki peran khusus pada tahun 2018. Begitu pula pada tahun 2020 saat ini maupun kedepannya bahwa pengalaman pengguna adalah yang terpenting.

Apa yang ingin dilihat oleh pengguna adalah hal yang sangat penting. Dalam peringkat baru pada mesin pencari, apa yang dilihat oleh pengguna, berapa lama waktu yang Ia habiskan dan kesan apa yang Ia tinggalkan merupakan penilaian dalam peringkat baru tersebut.

Kembali ke List TOC

2. Konten Tetap Menjadi Raja

Gelar "Content First" tidak kehilangan arti penting pada tahun 2020 saat ini. Tidak hanya parameter konten masing-masing yang diperiksa, melainkan evaluasi kriteria keterbacaan teks juga dinilai. Jadi saat ini bukan hanya tentang optimasi untuk mesin pencari, tetapi juga tentang kepuasan nyata yang dirasakan oleh pengguna.

Pengoptimalan konten pada tahun 2020 adalah pertanyaan yang harus berorientasi yang harus dimiliki oleh pelanggan dan bagaimana pertanyaan tersebut dapat dijawab dengan sebaik mungkin.

Kembali ke List TOC

3. Pencarian Suara

Revolusi pencarian terjadi saat hadirnya pencarian suara atau voice search. Pencarian tersebut diwakili oleh asisten digital seperti Google Asisten, Siri, Alexa atau Cortana dan sebagainya.

Menurut hasil survei, setidaknya sekali dalam sehari dan lebih dari 40% orang dewasa sudah menggunakan kontrol suara dan bahkan lebih dari 50% pengguna adalah anak muda. Dan diperkirakan pada tahun 2020 ini 50% dari seluruh permintaan pencarian akan dilakukan melalui pencarian suara atau voice search.

Kembali ke List TOC

Akhir Kata

Seringkali kita lihat terkadang konten yang berperingkat memiliki teks yang panjang. Ini menunjukkan bahwa teks yang panjang dinilai sebagai kualitas karakteristik oleh Google. Dan dimasa yang akan datang konten akan diadaptasi sedemikian rupa sehingga mendekati kata yang diucapkan dan masuk diakal.

Semoga artikel "Apa Yang Berubah Pada SEO 2020?" ini bermanfaat untuk kamu. Jangan lupa share dan Subscribe pada Newsletter untuk terus mendapatkan update-an terbaru dari kami.

Cara Membuat Slot Iklan Link Seperti Adsense

noreply@blogger.com (GoSEO.id) — Fri, 20 Mar 2020 12:14:00 +0000

Cara Membuat Slot Iklan Link Seperti Adsense

GoSEO.id - Slot iklan berfungsi untuk memberitahu kepada calon pelangganmu bahwa pada blog kamu masih memiliki ruang untuk dipasangi iklan produk atau jasa oleh calon konsumen.

Slot iklan yang akan kita buat kali ini mirip sekali dengan iklan yang dimiliki oleh Google Adsense yaitu Iklan Link. Kamu bisa memanfaatkan slot ini untuk membuka jasa periklanan dan dapat ditempatkan dimana saja pada blog, baik di main page ataupun dalam artikel.

Table of Content

Cara Membuat Slot Iklan Link Seperti Adsense
- Memasang Slot Iklan Diatas Postingan Blog
- Memasang Slot Iklan Pada Widget Blog
Penutup

Oleh karena itu, pada kesempatan kali ini GoSEO.id akan membagikan tutorial singkat tentang "Cara Membuat Slot Iklan Link Seperti Adsense". Dan bagi kamu yang ingin menerapkannya pada blog, maka silahkan ikuti tahapan berikut.

Cara Membuat Slot Iklan Link Seperti Adsense

1. Pertama, silahkan login pada akun blogger.com milikmu.

2. Selanjutnya masuk ke menu Tema ⇨ kemudian klik tombol Edit HTML.

3. Lalu copy kode dibawah ini dan pastekan tepat diatas ]]></b:skin>.

/*CSS Slot Iklan Link*/
.link-btn{width:100%;position:relative;padding-top:15px}
.link-btn:after{clear:both;content:"";display:block}
.label-link-btn{font-size:12px;color:#333;position:absolute;top:0;left:0;line-height:1}
.label-link-btn svg{width:15px;height:15px;vertical-align:-3px}
.label-link-btn svg path{fill:#00aecd}
.link-btn-left,.link-btn-right{width:calc(50% - 10px);float:left}
.link-btn-left{margin-right:10px}
.link-btn-right{margin-left:10px}
.tombol-link{width:100%;height:41px;display:block;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;text-align:center;line-height:41px;box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3);align-items:center;justify-content:center;background-color:#119af5;border:1px solid #ffffff;border-radius:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:#ffffff;font-weight:normal;font-family:arial,sans-serif;font-size:16px;margin:5px auto}
.tombol-link:hover{background-color:#fff;color:#333}
@media screen and (max-width:640px){.link-btn-left,.link-btn-right{width:100%;float:none;margin:0 auto}}

4. Kemudian klik Simpan.

Kembali ke List TOC

➽ Memasang Slot Iklan Diatas Postingan Blog

Untuk memasang slot iklan diatas pada setiap postingan blog, silahkan cari kode <data:post.body/> dan pastekan kode dibawah ini tepat diatasnya.

<div class='link-btn'>
<div class='link-btn-left'>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
</div>
<div class='link-btn-right'>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
</div>
<a href='https://www.goseo.id' target='blank_' title='Ads By GoSEO.id'>
<div class='label-link-btn'>
<svg x='0px'>
<path d='M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z'/>
</svg>
Ads By GoSEO.id
</div></a>
</div>

Sesuaikan kode diatas menurut kebutuhan blogmu.

Setelah selesai dan menyesuaikannya kode tersebut, silahkan Simpan Tema blogmu.

Kembali ke List TOC

➽ Memasang Slot Iklan Pada Widget Blog

Untuk memasang slot iklan pada widget blog sebenarnya sama saja. Kamu hanya perlu menyalin kode tersebut dan memasangnya pada bagian atau tata letak yang tersedia pada tema blog kamu atau ikuti tahapan berikut :
1. Masuk ke menu Tata Letak ⇨ klik Tambahkan Gadget

Klik Gambar Untuk Memperbesar

2. Lalu klik pada HTML/Javascript.

Klik Gambar Untuk Memperbesar

3. Kemudian masukkan kode dibawah ini dan letakkan pada kolom Konten.

<div class='link-btn'>
<div class='link-btn-left'>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
</div>
<div class='link-btn-right'>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='blank_'>Pasang Iklan Link Disini</a>
</div>
<a href='https://www.goseo.id' target='blank_' title='Ads By GoSEO.id'>
<div class='label-link-btn'>
<svg x='0px'>
<path d='M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z'/>
</svg>
Ads By GoSEO.id
</div></a>
</div>

Sesuaikan kode diatas menurut kebutuhan blogmu.

4. Terakhir klik Simpan dan Selesai.

Kembali ke List TOC

Penutup

Begitulah tutorial "Cara Membuat Slot Iklan Link Seperti Adsense" yang dapat saya sampaikan. Semoga artikel ini bermanfaat untuk kamu. Silahkan tinggalkan komentar jika ada bagian yang tidak kamu mengerti. Jangan lupa pula untuk share dan subscribe GoSEO.id pada kolom Newsletter untuk selalu mendapatkan update-an artikel terbaru kami. Terima kasih telah hadir dan membaca artikel ini.

Apakah kamu sudah membaca :
# Pentingnya Penggunaan Email Profesional Dalam Bisnis
# Cara Daftar Google News Untuk Blogger
# Memasang Widget Recent Post Blogger
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense

Memasang LazyLoad Adsense Dengan Auto Ads 2020

noreply@blogger.com (GoSEO.id) — Wed, 18 Mar 2020 06:03:00 +0000

Memasang LazyLoad Adsense Dengan Auto Ads 2020

GoSEO.id - LazyLoad merupakan plugin yang berguna untuk mempercepat loading blog/website. Jika lazyload dipasangkan pada adsense maka otomatis akan lebih meringankan load blog atau website yang kita miliki.

Adsense saat ini telah merubah kode auto ads yang mereka miliki menjadi lebih simple dan telah disatukan pada JS Adsense seperti kode berikut :

<script data-ad-client="ca-pub-xxxxxxxxxxx" async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Maka pada kesempatan kali ini, GoSEO.id akan membagikan tips "Memasang LazyLoad Adsense Dengan Auto Ads 2020" yang mana berguna mempercepat load blog. Bagi kamu yang ingin menggunakannya pada blog yang kamu miliki silahkan ikuti tahapan berikut :

Memasang LazyLoad Adsense Dengan Auto Ads 2020

Untuk memasang LazyLoad Adsense pada blog sangatlah mudah. Kamu hanya perlu merubah kode penulisan scriptnya menjadi dinamik seperti berikut :

(function() {
    var ad = document.createElement('script');
    ad.setAttribute('data-ad-client', 'ca-pub-xxxxxxxxxxx');
    ad.async = true;
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
})();

Sehingga kode yang kamu hasilkan akan menjadi seperti ini :

<script>
//<![CDATA[
var lazyadsense2 = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {
(function() {
     var ad = document.createElement('script');
     ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxx');
     ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
     var sc = document.getElementsByTagName('script')[0];
     sc.parentNode.insertBefore(ad, sc);
})();
lazyadsense2 = true;
  }
}, true);
//]]>
</script>

Sesuaikan kode id publisher yang ditandai tersebut dengan punyamu.

Simpan kode tersebut dan Selesai.

Semoga tips "Memasang LazyLoad Adsense Dengan Auto Ads 2020" bisa bermanfaat untuk kamu. Silahkan tinggalkan komentar jika ada hal atau bagian yang tidak kamu mengerti. Jangan lupa pula untuk share dan subscribe kami pada bagian Newsletter untuk mengikuti update-an artikel kami selanjutnya. Terima kasih sudah hadir dan membaca artikel kami.

Membuat Tombol Back To Top Dengan SVG

noreply@blogger.com (GoSEO.id) — Mon, 16 Mar 2020 05:45:00 +0000

Membuat Tombol Back To Top Dengan SVG

GoSEO.id - Apa kabar sobat setia GoSEO.id? Semoga kita semua diberi kesehatan dan terhindar dari wabah penyakit yang saat ini sedang menimpa secara global di berbagai negara termasuk Indonesia. Saya pun mulai jarang mengupdate artikel dikarenakan beberapa hari belakang mempunyai aktivitas lain yang wajib saya kerjakan.

Oleh karena itu, berhubung saya juga sedang punya kesempatan. Maka GoSEO.id pada kali ini akan membagikan tips "Membuat Tombol Back To Top Dengan SVG". Yang mana mungkin sobat sudah pada yang tahu bahwa fungsi Back To Top adalah memudahkan pengunjung untuk kembali ke halaman paling atas secara instan tanpa perlu melakukan scroll halaman secara manual.

Bagi sobat yang ingin menggunakan Back To Top dengan SVG, mari ikuti tahapan berikut ini :

Membuat Tombol Back To Top Dengan SVG

Pertama, silahkan buka akun blogger.com milikkmu.
Kemudian masuk ke menu Tema ➠ lalu klik tombol Edit HTML.

Selanjutnya tambahkan kode dibawah ini dan letakkan tepat diatas </head>.

<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

Kemudian copy kode dibawah ini dan pastekan diatas </body>.

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Terakhir klik tombol Simpan dan Selesai.

Sekian dulu tips hari ini tentang "Membuat Tombol Back To Top Dengan SVG". Semoga artikel ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak kamu mengerti. Jangan lupa pula untuk share dan masukkan email kamu pada kolom Newsletter untuk mendapatkan update-an / informasi artikel kami. Terima kasih sudah hadir dan membaca artikel ini.

Cara Membuat Fixed Related Post OnScroll di Blogger

noreply@blogger.com (GoSEO.id) — Thu, 12 Mar 2020 04:49:00 +0000

Cara Membuat Fixed Related Post OnScroll di Blogger

GoSEO.id - Pada kesempatan kali ini GoSEO.id akan membagikan "Cara Membuat Fixed Related Post OnScroll di Blogger". Seperti judulnya, Fixed Related Post akan muncul setelah halaman di scroll pada ketinggian yang sudah ditentukan.

Untuk contohnya, silahkan scroll saja halaman pada postingan ini dan lihat fixed related post pada kanan bawah.

Oke langsung to the point saja. Jika kamu ingin membuat Fixed Related Post seperti ini. yuk simak caranya :

Table of Content

Cara Membuat Fixed Related Post OnScroll di Blogger
Penutup

Cara Membuat Fixed Related Post OnScroll di Blogger

1. Silahkan login pada akun blogger.com milikmu.

2. Kemudian masuk ke menu Tema ⇨ lalu klik tombol Edit HTML.

3. Setelah itu cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatasnya.

#fixed-related{position:fixed;bottom:50px;right:-350px;padding:0 10px 10px;width:300px;height:auto;font-family:Arial;background:#fff;z-index:9999;-webkit-box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);-moz-box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);transition:all .4s ease-in-out}
#fixed-related h4{font-size:16px;font-weight:bold;background:#333;color:#fff;padding:8px 10px;line-height:1;margin:0 -10px}
#fixed-related .fixed-related-close{position:absolute;top:6px;right:6px;cursor:pointer;}
#fixed-related .fixed-related-close svg{width:20px;height:20px;vertical-align:middle}
#fixed-related .fixed-related-close svg path{fill:#fff;}
#fixed-related iframe{border:0;display:block;width:100%;height:176px}
#fixed-related.flow{right:0}

4. Selanjutnya pastekan juga kode dibawah ini dan letakkan diatas </body>.

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script>
//<![CDATA[
function scrollFunction(){if(document.body.scrollTop>500||document.documentElement.scrollTop>500){var e,n,l;e=document.getElementById("fixed-related"),n="flow",l=e.className.split(" "),-1==l.indexOf(n)&&(e.className+=" "+n)}else{var e=document.getElementById("fixed-related");e.className=e.className.replace(" flow","")}}window.onscroll=function(){scrollFunction()},setTimeout(function(){!function(){var e=document.getElementById("fixed-related");e.innerHTML=e.innerHTML.replace("<!--","").replace("-->","")}()},3e3);
//]]>
</script>
</b:if>

5. Kemudian cari kode yang seperti berikut :

<b:includable id='main' var='top'>
..........
..........
..........
</b:includable>

Jika sudah ketemu, copy kode dibawah ini :

<b:includable id='fixedRelatedposts' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<div id='fixed-related'>
<h4>Artikel Menarik Lainnya:</h4>
&lt;!-- <iframe expr:src='&quot;https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&amp;color=01579B&amp;url=&quot; + data:blog.canonicalHomepageUrl + &quot;&amp;label=&quot; + data:label.name' scrolling='no' title='Related Posts'>
</iframe> --&gt;
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display=&quot;none&quot;'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' role='button' tabindex='0'/></svg></span>
</div>
   </b:if>
 </b:loop>
</b:if>
</b:if>
</b:includable>

Dan pastekan kode tersebut dibawah kode tadi sehingga menjadi seperti ini :

<b:includable id='main' var='top'>
..........
..........
..........
</b:includable>
<b:includable id='fixedRelatedposts' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<div id='fixed-related'>
<h4>Artikel Menarik Lainnya:</h4>
&lt;!-- <iframe expr:src='&quot;https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&amp;color=01579B&amp;url=&quot; + data:blog.canonicalHomepageUrl + &quot;&amp;label=&quot; + data:label.name' scrolling='no' title='Related Posts'>
</iframe> --&gt;
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display=&quot;none&quot;'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' role='button' tabindex='0'/></svg></span>
</div>
   </b:if>
 </b:loop>
</b:if>
</b:if>
</b:includable>

6. Dan yang terakhir cari kode seperti dibawah ini :

<b:includable id='post' var='post'>
..........
..........
..........
</b:includable>

Lalu copy kode berikut ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>

Dan pastekan kode tersebut sehingga menjadi seperti ini :

<b:includable id='post' var='post'>
..........
..........
..........
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>
</b:includable>

7. Tekan tombol Simpan Tema dan Selesai.

Penutup

Sekian tutorial "Cara Membuat Fixed Related Post OnScroll di Blogger". Semoga artikel ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak kamu mengerti.

Jangan lupa untuk share dan isikan email kamu pada Newsletter untuk mengikuti update-an terbaru kami. Terima kasih sudah mampir dan membaca artikel ini.

Cara Mengatasi PIN Adsense Yang Tidak Kunjung Datang

noreply@blogger.com (GoSEO.id) — Mon, 09 Mar 2020 07:52:00 +0000

Cara Mengatasi PIN Adsense Yang Tidak Kunjung Datang

GoSEO.id - Sudah seminggu lebih Admin tidak bisa meng-update dikarenakan melakukan persiapan dan mengikuti ujian CPNS di Kemenag Aceh, dan Alhamdulillah lulus passing grade dengan nilai memuaskan setelah mempelajarinya dari "Ebook Soal CPNS".

Nah berhubung lagi ada kesempatan, maka Admin GoSEO.id membagikan "Cara Mengatasi PIN Adsense Yang Tidak Kunjung Datang". Yuk mari simak pembahasannya berikut ini.

Ketika penghasilan adsense kamu mencapai ambang batas yang sudah ditentukan untuk verifikasi yaitu sekitar $10, maka Google Adsense akan secara otomatis mengirimkan nomor PIN ke alamat pembayaran kamu.

PIN atau Personal Identification Number merupakan kode rahasia yang dikirimkan oleh Pihak Google untuk melindungi keamanan akun dengan cara memverifikasi alamat sebelum Google mengirimkan pembayaran penghasilan Adsense.

Pengiriman PIN biasanya memakan waktu 2 - 4 Minggu untuk sampai ke alamat pembayaran. Akan tetapi bisa saja lebih lama jika alamat yang dituju lebih jauh atau terpelosok.

Ketika kamu telah menerima PIN, maka kamu hanya perlu memasukkan kode yang terdapat dalam amplop kedalam adsense untuk memverifikasi alamat pembayaran.

Nah bagaimana jika PIN tidak kunjung datang?

Cara Mengatasi PIN Adsense Yang Tidak Kunjung Datang

Ketika PIN tidak kunjung datang, maka kamu akan diberi waktu selama 4 minggu dari tanggal PIN pertama kali dikirimkan. Dan jika kamu belum memasukkan PIN selama 4 Bulan, maka adsense akan secara otomatis memberhentikan iklan pada blog kamu.

Dalam hal ini, kamu diberi 3 (tiga) kali kesempatan untuk merequest PIN. Dan jika ternyata dalam 4 Minggu pertama kamu belum menerima PIN, maka kamu dapat merequest ulang pengiriman PIN kedua. Begitu pula jika dalam 4 minggu setelah merequest ulang pengiriman PIN Kedua juga belum kamu terima, maka kamu dapat merequest kembali pengiriman PIN Ketiga.

Dan ternyata, banyak dari publiher kita belum juga menerima PIN setelah request Ketiga. Dan yang menjadi permasalahan adalah setelah itu. tombol request PIN tidak muncul lagi seperti sebelumnya karena kamu sudah melakukan 3 kali request PIN.

Tentu hal ini yang membuat kita panik dan linglung. Tetapi santai saja, karena ada cara untuk mengatasi hal ini.

Untuk mengatasi hal ini, biasanya adsense yang belum diverifikasi akan ada link "Pelajari Lebih Lanjut" yang berada pada kotak notifikasi berwarna merah. Silahkan klik link tersebut.

Setelah itu kamu akan masuk ke halaman bantuan adsense. Kemudian klik link "masalah dengan PIN".

Lalu temukan tombol "Mengatasi Masalah PIN" dan silahkan jawab pertanyaan yang ada pada halaman selanjutnya. Selanjutnya silahkan klik link "Hubungi Kami" yang berada pada bagian bawah.

Setelah itu silahkan masukkan data-data yang diminta sesuai dengan akun adsense yang kamu miliki. Dihalaman tersebut kamu juga diharuskan meng-upload Identitas (KTP). Setelah selesai klik "Kirim".

Akhir Kata

Begitulah "Cara Mengatasi PIN Adsense Yang Tidak Kunjung Datang". Setelah itu kamu silahkan menunggu minimal selama 24 Jam, dan pihak Google Adsense akan segera menghubungi kamu melalui email.

Jika pada saat itu saldo Adsense kamu sudah mencapai batas minimum pembayaran sekitar $100 atau jika dalam rupiah sekitar Rp. 1.300.000,- maka kamu akan menerima pembayaran dari Googel Adsense dengan segera.

Semoga artikel ini bermanfaat. Jangan lupa untuk share dan masukkan email kamu pada kolom Newsletter untuk menerima update-an terbaru dari kami.

Apa Pengaruh Duplikat Keyword?

noreply@blogger.com (GoSEO.id) — Fri, 28 Feb 2020 05:24:00 +0000

Apa Pengaruh Duplikat Keyword?

GoSEO.id - Apa sih pengaruh duplikat keyword terhadap ranking website? Nah.. yuk simak pembahasan kita pada postingan kali ini.

Kamu masuk ke artikel ini pasti ingin tau pengaruh duplikat keyword untuk kesehatan blog atau situs yang kamu miliki. Saat ini banyak praktisi Search Engine Optimization atau yang disebut SEO dibuat linglung oleh algoritma Google. Situs - situs yang biasanya mempunyai ranking tinggi tiba-tiba saja anjlok menjadi buruk. Yang biasanya trafiknya rame, tiba-tiba saja down menjadi sedikit.

Tentu ada sebab yang membuat hal ini terjadi.

Yaph benar sekali, penyebabnya adalah duplikat keyword.

Table of Content

Ranking Website Turun Akibat Duplikat Keyword
Bagaimana Upaya Mengatasi Duplikat Ranking?
Kesimpulan

Ranking Website Turun Akibat Duplikat Keyword

Duplikat keyword berbeda dengan stuffing keyword maupun kepadatan kata kunci didalam artikel.

Duplikat keyword yang dimaksud disini adalah penggunaan kata kunci yang sama pada setiap halaman atau postingan.

Sebagai contoh :

Kamu memiliki beberapa postingan dengan judul yang hampir sama, seperti :

Tutorial Design Website Dengan Photoshop
Tutorial Design Website Cepat dan Keren
Tutorial Design Website Menggunakan CSS

Inilah upaya kamu menaikkan ranking website dengan target keyword "Tutorial Design Website" yang tanpa kamu sadari merupakan "Duplikat Keyword".

Resiko duplikat keyword adalah Google hanya akan memilih satu dari beberapa halaman dengan tingkat relevansi yang ditentukan. Dan dampak buruk lainnya adalah tidak ada satupun postingan yang masuk karena Google menganggap adanya upaya mengejar ranking sehingga website yang kamu miliki mengalami penurunan ranking yang sangat drastis.

Bagaimana Upaya Mengatasi Duplikat Ranking?

Untuk menghindari terjadinya duplikat keyword, simak pembahasan upaya yang harus dilakukan berikut ini :

1. Hindari Penggunaan Judul Yang Sama

Judul merupakan peranan penting. Perhatikan selalu judul sebelum membuat artikel dan buat judul tersebut berbeda atau tidak sama persis walaupun pembahasan pada artikel tersebut hampir sama atau mempunyai kemiripan.

Jika kamu ingin memperkaya keyword dalam judul, alangkah baiknya kamu membuat satu judul untuk banyak kata kunci.

2. Hindari Juga Penggunaan Tag Yang Berlebihan

Tag sangat bagus jika digunakan dengan sebijak mungkin, akan tetapi akan jadi pedang bermata dua jika kamu menggunakannya secara berlebihan.

3. Jangan Memposting Artikel Yang Monoton

Artikel yang monoton merupakan konten yang satu dengan konten yang lain atau beberapa konten yang isinya itu-itu saja.

Artikel seperti ini bukan hanya jadi duplikat konten saja, melainkan menjadikan website kamu juga mengalami duplikat keyword.

4. Gunakan Deskripsi Yang Berbeda Pada Setiap Artikel

Penggunaan deskripsi merupakah hal yang sangat penting dan mempengaruhi peringkat website. Penggunaan deskripsi yang baik dan SEO akan menjadikan website kamu memiliki ranking yang tinggi.

Akan tetapi jika kamu menggunakan deskripsi yang sama, maka hal itu akan memberitahu Google Search Console tentang duplikat meta deskripsi. Deskripsi yang sama menentukan penggunaan keyword yang sama pula alias duplikat keyword.

5. Perhatikan Setiap Permalink

Pastikan kamu menggunakan permalink yang rapi dan berbeda agar terhindar dari duplikat keyword. Permalink terkadang juga memiliki unsur keyword dengan yang kita targetkan.

Kesimpulan

Jika kamu mengikuti arahan pada pembahasan diatas, maka saya yakin blog atau website yang kamu miliki akan baik-baik saja terhadap algoritma Google yang baru. Dan jika tadinya kamu memiliki otoritas yang buruk maka akan kembali normal dan mendapatkan kepercayaan Google untuk melenjit ke ranking teratas.

Semoga pembahasan yang GoSEO.id bagikan kali ini bermanfaat. Terima kasih sudah hadir dan membaca artikel ini. Jangan lupa pula untuk share dan subscribe dengan mencantumkan emailmu pada Newsletter untuk mendapatkan update postingan terbaru kami.

Apa Itu Google Display Network (GDN)?

noreply@blogger.com (GoSEO.id) — Wed, 26 Feb 2020 10:54:00 +0000

GoSEO.id - Google Display Network (GDN) merupakan cara lain untuk mengiklankan produk di Google AdWords. GDN bukan hanya menampilkan iklan di Search Network, melainkan dapat menampilkan iklan di seluruh jaringan internet.

Apa itu Google Display Network (GDN)?

Table of Content

Apa Itu Google Display Network (GDN)?
Keuntungan Google Display Network
Google Search Network Vs. Google Display Network
Kesimpulan

Apa Itu Google Display Network (GDN)?

Google Display Network atau yang disebut dengan GDN adalah iklan yang ditampilkan dalam bentuk display ads. Display Ads sendiri dapat berbentuk text, maupun bentuk visual seperti gambar, video, hingga GIF sekalipun.

Iklan GDN tidak hanya sebatas website saja, tetapi juga tampil pada aplikasi dan mobile games.

Keuntungan Google Display Network

Trus jika kita menggunakan GDN, apa saja sih keuntungannya?

Yuk simak keuntungan yang akan kamu dapatkan jika menggunakan GDN.

1. Meningkatkan Brand Awareness

Dengan menggunakan GDN, kamu dapat meningkatkan Brand Awareness dengan menjangkau lebih dari 2 (dua) juta pengguna internet dan iklan muncul dimana - mana dimulai dari website, aplikasi dan mobile games sehingga orang-orang lebih mengenal produk yang kamu miliki.

2. Menarik Target Pasar dengan Visual

Seperti yang dijelaskan sebelumnya, Google Display Network dapat berbentuk iklan visual. Menurut penelitian bahwa iklan visual mampu menarik lebih banyak pengunjung dibandingkan iklan text biasa.

3. Berbagai Jenis Targeting

Banyaknya jenis targeting yang disediakan GDN membuat kamu dapat lebih leluasa menerapkan target strategi. Jenis targeting yang disediakan oleh GDN dimulai dari kebiasaan dan ketertarikan audiens, targeting umur dan gender, hingga menentukan situs mana saja yang akan menampilkan iklan.

4. Remarketing

Remarketing adalah proses menampilkan iklan kepada audiens yang pernah mengklik iklan akan tetapi belum audiens tersebut belum pernah melakukan pembelian. Remarketing ini berguna untuk mempertahankan buying intent calon pelanggan. Dan mungkin ini yang paling menarik untuk saya dalam keuntungan GDN.

Google Search Network Vs. Google Display Network

Seperti yang kamu ketahui, Google Ads memiliki 2 cara untuk mengiklankan produk atau bisnis kamu, yaitu Google Search Network yang beriklan di hasil pencarian dan Google Display Network (GDN) yang beriklan diseluruh jaringan internet.

Jika kamu kebingungan untuk menentukan cara beriklan pada Google Ads, maka simak 3 (tiga) hal berikut ini :

1. Budget

Jika kamu memiliki budget yang terbatas, kami menyarankan kamu untuk menggunakan Search Network. Mengapa? Karena iklan hasil pencarian terbukti lebih menghasilkan konfersi dari pada display ads.

Klik Gambar Untuk Memperbesar

Seperti yang kamu lihat pada gambar diatas, Conversion rate dari search network lebih besar 2.70% dari pada display network yang sebesar 0.89% saja. Oleh karena itu Search Network jauh lebih cepat menghasilkan keuntungan bagi kamu sebelum kehabisan budget.

2. Jenis Produk

Jika kamu menjual produk yang dibutuhkan orang dengan segera, seperti hotel, dokter, tambal ban, obat dan lainnya sebagainya, maka memasang iklan di search network juga menjadi pilihan terbaik. Mengapa? Karena orang-orang tersebut memang sedang dan sangat membutuhkan produk tersebut. Jika mereka berniat, maka mereka berkemungkinan akan membeli dan menggunakan produk tersebut dengan segera, sehingga jika menggunakan search network maka kemungkinan terbesar orang-orang akan mengklik pada bagian teratas dan itu merupakan pilihan tercepat untuk mendapatkan informasi produk tersebut.

Sehingga GDN lebih cocok untuk produk yang tidak perlu digunakan secepatnya. Seperti handphone, laptop, mesin cuci dan lain sebagainya.

GDN sendiri lebih cocok untuk produk yang mempunyai tampilan menarik yang bisa menjual tampilan visual, seperti Villa tempat rekreasi, pakaian, properti dekorasi dan lain sebagainya.

3. Brand Awareness

Seperti yang dijelaskan sebelumnya, Google Display Network (GDN) merupakan cara terbaik untuk meningkatkan brand awareness. Karena iklan GDN dapat menjangkau pengguna internet dengan sangat luas.

Pengguna GDN tidak sebatas pada hasil pencarian saja. GDN dapat menjangkau website / situs-situs terkenal, hingga aplikasi dan mobile games.

Dengan menggunakan GDN, brand kamu akan jadi lebih familiar oleh pengguna internet / calon konsumen. Mereka akan tetap melihat iklan kamu walaupun belum pernah mendengar atau mencari tau mengenai brand tersebut di google.

Kesimpulan

Demikian pembahasan kita hari ini mengenai Google Display Network (GDN). Semoga artikel ini bermanfaat. Jika kamu memiliki pertanyaan, jangan sungkan untuk meninggalkan komentar dibawah ini. Jangan lupa pula untuk mengikuti kami dengan submit pada Newsletter untuk mendapatkan informasi dan tutorial bermanfaat seperti ini langsung ke email kamu.

Buat Link Embed Google Drive Tidak Bisa Diklik

noreply@blogger.com (GoSEO.id) — Tue, 25 Feb 2020 02:59:00 +0000

Buat Link Embed Google Drive Tidak Bisa Diklik

GoSEO.id - Pada video yang di embed dari Google Drive biasanya terdapat sebuah ikon pop-out yang terletak di sebelah kanan atas yang apabila diklik akan menuju ke Google Drive Preview.

Ternyata, ada beberapa pengguna yang tidak menginginkan ikon embed tersebut muncul dikarenakan menyebabkan pentalan pengunjung.

Sebenarnya tidak ada cara untuk menghapus embed pop-out pada Video Google Drive. Namun disini saya akan membuat sebuah penghalang agar ikon tersebut tidak bisa diklik.

Oleh karena itu, pada kesempatan kali ini saya akan "Buat Link Embed Google Drive Tidak Bisa Diklik" dengan cara membuat penghalangnya.

Silahkan arahkan kursor ke Pop-Out sudut kanan atas pada video berikut untuk melihat contoh:

Jika kamu tertarik dan ingin mencobanya, silahkan ikuti tahapan berikut :

Buat Link Embed Google Drive Tidak Bisa Diklik

Login dengan menggunakan akun blogger.com milikmu.
Kemudian masuk ke menu Tema ⇨ lalu klik tombol Edit HTML.

Copy kode dibawah ini dan pastekan tepat di atas kode ]]></b:skin>.

.drive-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.drive-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
.drive-responsive::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  opacity: 0;
  z-index: 2;
}

Setelah itu untuk menampilkan video pada postingan silahkan gunakan kode HTML berikut :

<div class="drive-responsive">
<iframe width="560" height="315" src="https://drive.google.com/file/d/ID_FILE_GOOGLE_DRIVE/preview" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Silahkan ganti ID_FILE_GOOGLE_DRIVE dengan ID file video Google Drive kamu.

Selesai.

Semoga artikel "Buat Link Embed Google Drive Tidak Bisa Diklik" ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak kamu mengerti. Terima kasih telah hadir dan membaca artikel ini.

Cara Membuat Marquee Dengan CSS

noreply@blogger.com (GoSEO.id) — Mon, 24 Feb 2020 05:13:00 +0000

Cara Membuat Marquee Dengan CSS

GoSEO.id - Marquee adalah elemen atau tag html yang berfungsi untuk membuat teks atau gambar berjalan secara vertikal ataupun horizontal pada halaman web.

Contoh:
GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.

Saat ini, tag marquee sudah jarang kita temui atau tidak tampak lagi walau pada kenyataannya tag ini masih berfungsi dengan baik. Kita tidak akan tau kedepannya mungkin tag ini benar-benar akan hilang dan tidak disupport lagi pada browser.

Namun, kita tetap akan bisa membuat teks atau gambar berjalan tanpa menggunakan tag marquee, yaitu menggunakan CSS Animation. Maka dari itu, pembahasan kita hari ini adalah "Cara Membuat Marquee Dengan CSS".

Mari simak tahapan berikut untuk membuat marquee dengan CSS :

Cara Membuat Marquee Dengan CSS

Bila kamu ingin membuat text marquee sederhana dengan CSS, silahkan gunakan kode berikut ini :
Kode CSS :

.marquee-text {
  height: 30px;
  display: block;
  line-height: 30px;
  overflow: hidden;
  position: relative;
}

.marquee-text:before,
.marquee-text:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  z-index: 2;
}

.marquee-text:before {
  left: 0;
}

.marquee-text:after {
  right: 0;
}

.marquee-text div {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  white-space: nowrap;
  color: #555;
  z-index: 1;
  animation: marquee 15s linear infinite;
}

.marquee-text:hover div {
  animation-play-state: paused
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

Kode HTML :

<div class="marquee-text">
  <div>GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
  </div>
</div>

Maka hasilnya :
GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.

Dan jika kamu ingin membuat kalimat bersambung dengan jarak kalimat yang tidak terlalu jauh, bisa gunakan kode berikut :
Kode CSS :

.marquee-text {
  height: 30px;
  display: block;
  line-height: 30px;
  overflow: hidden;
  position: relative;
}
.marquee-text:before,
.marquee-text:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  z-index: 2;
}
.marquee-text:before {
  left: 0;
}
.marquee-text:after {
  right: 0;
}
.marquee-text div {
  display: block;
  width: 200%;
  height: 30px;
  line-height: 30px;
  position: absolute;
  overflow: hidden;
  font-size: 16px;
  color: #555;
  z-index: 1;
  animation: marquee 15s linear infinite;
}
.marquee-text span {
  float: left;
  width: 50%;
}
.marquee-text:hover div {
  animation-play-state: paused
}
@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.on-768px,.on-425px {
  display: none;
}
@media screen and (max-width: 1024px) {
  .marquee-text div {
    animation: marquee 10s linear infinite;
  }
}
@media screen and (max-width: 768px) {
  .marquee-text div {
    animation: marquee 8s linear infinite;
  }
  .on-768px {
  display: block;
  }
  .on-425px,.on-1440px {
  display: none;
  }
}
@media screen and (max-width: 425px) {
  .marquee-text div {
    animation: marquee 5s linear infinite;
  }
  .on-425px {
  display: block;
  }
  .on-768px,.on-1440px {
  display: none;
  }
}

Kode HTML :

<div class="marquee-text on-1440px">
  <div>
  <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
  <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
  </div>
</div>

<div class="marquee-text on-768px">
  <div>
  <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
  <span>Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.</span>
  </div>
</div>

<div class="marquee-text on-425px">
  <div>
  <span>Selamat Datang di GoSEO.id</span>
  <span>Selamat Datang di GoSEO.id</span>
  </div>
</div>

Maka hasilnya :
Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
Selamat Datang di GoSEO.id - GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
Selamat Datang di GoSEO.id
Selamat Datang di GoSEO.id

Begitulah pembahasan kita hari ini tentang "Cara Membuat Marquee Dengan CSS". Selamat Berkreasi dan semoga postingan ini bermanfaat. Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar dibawah ini.