SEO Off Page menjadi salah satu langkah seorang blogger agar blog atau website mereka bisa bersaing di halaman pertaman google, salah satu dari SEO Off Page adalah dengan membuat artikel berkualitas. Artikel berkualitas secara tidak langsung akan membantu menaikkan peringkat blog atau website di mesin pencari dalam jangka panjang. Bagaimana ciri-ciri artikel berkualitas? Secara lengkap kamu bisa membaca di artikel saya tentang Artikel Berkualitas.

Cara Pertama Membuat Daftar Isi atau Table Of Content

• Masuk ke setting > Edit Html
• Cari kode ]]></b:skin>
• Pastekan kode dibawah sebelum kode atau tepat di atas kode  ]]></b:skin>

 .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

• Stelah itu, simpan template.

• Selanjutnya, Edit artikel yang ingin ditambahkan daftar isi
• Edit artikel > Ubah tampilan compose menjadi Html
• Pastekan kode dibawah dibagian paling atas artikel kamu, atau dimanapun, tapi yang terbaik adalah dibagian paling atas artikel.

 Kode

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

• Ganti Link1, Link2, link 3 dan seterusnya dengan Sub Pembahasan artikel kamu. Ganti juga # dengan #subhead1 dan seterusnya. Jika di artikel terdapat lebih dari 3 sub pembahasan, tinggal tambahkan kode    <a href=”#”>Link 4</a>  dan seterusnya.

• Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kode id=”subhead1”setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.

 /* Versi Kedua */
.daftarisi {
    width:100%;
    border:1px solid #d3d3d3;
}
.daftarisi div {
    width:100%;
}
.daftarisi .daftar {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.daftarisi .content {
    display: none;
    padding : 5px;
}

 <script>
$(".daftar").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Tutup" : "Daftar Isi";
        });
    });

});
</script>

 <div class="daftarisi">
    <div class="daftar"><span>Daftar Isi</span>

    </div>
    <div class="content">
        <ul>
            <li><a href="#subhead1">This is just some random content.</a></li>
            <li><a href="#subhead2">This is just some random content.</a></li>
        </ul>
    </div>
</div>

Bahkan google pun menyarankan agar setiap blog memiliki menu navigasi yang tidak ribet. jika kamu punya sebuah blog yang tidak ada menu navigasinya, atau ada menu navigasi tapi sangat ribet, ketika kamu mendaftarkan ke google adsense kemungkinan besar blog kamu akan ditolak adsense, ga percaya? coba aja sendiri.

Mempercantik menu navigasi juga sangat disarankan lho, karena pengunjung akan tertarik untuk membuka menu tersebut, jadi kamu punya peluang lebih banyak agar pengunjung tidak stay di satu artikel saja. salah satu cara mempercantik tampilannya adalah dengan mengedit gaya dari menu tersebut.

Nah, yang lagi trending di tahun 2019 adalah menu navigasi yang melayang atau sticky nav, sebenarnya bukan menunya saya yang melayang tetapi juga header blognya melayang. ada banyak cara untuk membuat sticky nav, dan berikut albabbarrosa kasih beberapa cara dan style membuat menu melayang.

Menambahkan Javascript Sticky Nav

Hampir semua template blog pasti memliki header dan menu navigasi ya, namun tidak semuanya memiliki hedaer dan menu navigasi yang melayang, mungkin karena developernya kurang suka dengan hal tersebut.

Tapi kamu tak perlu kawatir, kamu masih bisa mengikuti trend menu melayang hanya dengan menambahkna javascript saja. pemasangan kodenya pun sangat simpel sekali tinggal kopi paste saja.

Pertama, cari terlebih dahulu kode hedaer menu kamu di pengaturan > edit html. Caranya cukup simpel, cari salah satu menu yang ada di menu navigasi. Contoh menu : documentation, cari tulisan tersebut maka hasilnya seperti dibawah.

Setiap template mempunyai kode header menu yang berbeda-beda. ada yang dituliskan ; nav-menu, head-menu, menu, menu nav.

<!-- Sticky Nav -->
<script type='text/javascript'>
      $(document).ready(function() {
        var stickyNavTop = $('.header-menu').offset().top;
        var stickyNav = function(){
          var scrollTop = $(window).scrollTop();
          if (scrollTop > stickyNavTop) {
            $('.header-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
          } else {
            $('.header-menu').css({ 'position': 'relative' });
          }
        };
        stickyNav();
        $(window).scroll(function() {
          stickyNav();
        });
      });
    </script>
 <!-- End Sticky Nav -->

Sitemap merupakan sebuah navigasi yang memudahkan pengunjung blog untuk melihat daftar artikel yang sudah kita buat. Meski pengunjung bisa menggunakan menu navigasi untuk melihat daftar artikel kita, namun penggunaan sitemap dirasa masih penting karena bisa memperlihatkan daftar artikel secara utuh dan gamblang. Bisa kita lihat dengan masih banyaknya blogger professional ataupun website besar yang masih menyediakan fitur sitemap dengan gaya sitemap nya masing masing.

Google pun masih menganggap penting sitemap, buktinya ketika kita mendaftarkan situs kita ke adsense ada surun untuk melengkapi privacy, disclaimer dan sitemap. Hal tersebut karena google memang sangat peduli dengan pengunjung.

Keberadaan sitemap juga memperlihatkan bahwa kita benar benar serius membangun sebuah blog atau situs. Kalau mereka yang sudah pada sukses aja masih menggunakan sitemap, kenapa kita yang berjuang tidak mengikuti saja jejak mereka, benerkan?!.

Yaudah, prolognya ga usah terlalu lama, karena ga ada juga yang baca prolog, kita langsung masuk ke tutorialnya.

Cara membuat sitemap Style 1, Keren Responsive

• Pertama, kamu buat halaman baru pada blog kamu.
• Jangan lupa kasih nama sitemap.
• Ganti tampilan compose dengan tampilan html
• Kemudian masukkan script dibawah ini.

• Simpan halaman tersebut.
• Kamu bisa mengatur warna pada sitemap tersebut sesukamu, bisa kamu sesuaikan dengan warna blog kamu.
• Untuk mengatur warna judul label dan background label ganti pada code berikut;  .labl{color:#6edabd;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background: #6edabd;
• Code dengan blok warna merah untuk judul label, dan kode dengan blok warna hijau untuk background label.

Cara Membuat Sitemap Style 2, Simpel Responsive

 

• Save, dan kemudian lihat hasilnya.

Cara Membuat Sitemap Style 3, Keren Responsive

untuk style yang ke-3 ini sangat mudah sekali pemasangannya sama seperti pada style 1, hanya saja dengan tampilan yang agak berbeda.

<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Oke, kali ini saya akan memberikan tutorial cara membuat subdomain gratis. Apa sih itu subdomain?. Subdomain merupakan domain yang berada dibelakang domain utama, dan mengarah ke blog atau website lain. Contoh domain : .google.com, kemudian google membuat website lain tentang support kepada pengguna google, dan pihak google lebih memilih menggunakan subdomain. Maka jadilah support.google.com.

Biasanya subdomain itu digunakan untuk blog atau website yang masih ada kaitannya dengan website utama, atau domain utama seperti contoh di atas. Contoh lainnya adalah, misalnya kamu punya blog pribadi dengan domain : albabbarrosa.com, kemudian kamu ingin membuat website toko online, dan kebetulan produk dalam website tersebut merupakan hasil karyamu sendiri, maka kamu putuskan untuk membuat subdomain : store.albabbarrosa.com

Jika kamu menggunakan self hosting, maka blog atau website subdomain harus berada di hosting yang sama (menurut saya, saya kurang tahu CMIIW). Begitu juga jika kamu menggunakan blogspot, maka blog dengan subdomain harus berada di blog yang sama (email yg sama, satu email bisa membuat beberapa blog).

Kenapa harus dalam satu hosting? Karena nanti yang mengarah ke subdomain hanyalah alamat hostnya saja, kalau hosting blogspot maka “ghs.google.com” sesuaikan dengan alamat hostmu jika kamu menggunakan self hosting. Host atau ghs.google.com sendiri sebenarnya adalah WWW. Jadi jika menggunakan subdomain berarti kita mengganti WWW dengan alamat subdomain Store misalnya.

Saya rasa cukup ya penjelasan tentang subdomain, kalau ada kesalahan atau kekurangan mohon di koreksi di komentar. Langsung kita ke tutorialnya.

Tutorial ini saya peruntukkan untuk pengguna blogger saja.

Membuat Subdomain free Gratis Tanpa hosting

1. Pastikan kamu sudah mempunyai domain ya.
2. Kemudian kamu masuk ke penyedia domain kamu ( disini saya menggunakan Niagahoster).
3. Pada bagian domain, pilih dns management.
4. Dan pilih add new record.
5. Pada bagian record type, isi dengan Cname.
6. Pada bagian subdomainnya, kamu isi dengan subdomain kamu (tanpa domain utama).
7. Kemudian pada bagian Host Name kamu isi dengan “ghs.google.com”
8. Setelah itu save data tadi, dan lihat apakah sudah tersimpan atau belum, jika belum coba ulangi lagi.
9. Agar lebih jelas, lihat saja pada Screnshot dibawah.

• Nb. Setiap prenyedia domain mempunyai tampilan yang berbeda beda, namun secara umum penggunaannya sama.
• Tunggu sekitar 5 – 10 menit

Cara Mengaitkan Subdomain ke Blog

• Siapkan dulu blognya, disini saya membuat blog tentang chord gitar.
• Setelah blog dibuat, masuk ke setelan> Dasar > Pada bagian alamat blog pilih tambahkan url pihak ke tiga.
• Isikan dengan subdomain yang telah kamu buat tadi.
• Kemudian klik save. Lihat Gambar dibawah agar jelas

Sampai sini harusnya sudah bisa dihubungkan. Kalu belum bisa disave, berarti subdomain baru diproses. Tunggu sejenak sekitar 5 menit. Kemudian tekan save lagi sampai bisa.

Setelah berhasil disave. Reload dashboard blogger kamu.

Dan pastikan kamu tidak mencentang “alihkan domainutama.com ke subdomain.com” karena jika kamu centang, maka jika kada yg mengunjungi domain utama akan dialihkan ke subdomain.

Tunggu lagi sekiatr 5-10 menit, kemudian cobalah untuk mengakses subdomain kamu. Kalau kamu tamvan harusnya sudah bisa diakses.

Kelebihan Menggunakan Subdomain

• Hemat biaya, karena tak perlu beli domain lagi.
• Trafik blog subdomain bisa cepat meningkat jika domain utama kamusudah mempunyai banyak pengunjung, apalagi kalau pengunjung langganan.
• Dapat meningkatkan traffick blog utama. Jika ternyata blog subdomain memiliki pengunjung yang lebih banyak, kemungkinan besar mereka akan mengunjungi blog utama juga karena kepo.

Kekurangan

• Untuk kekurangannya saya kurang tahu, mungkin bagi kamu yang tahu silahkan tambahkan kekurangan di komentar ya.

Nah cukup sekian tutorial cara membuat subdomain gratis, semoga dapat membantu kamu dalam membuat subdomain. Dan semoga tutorialnya mudah dipahami, karena saya pemula dalam membuat tutorial. Sampai jumpa di tutorial berikutnya.