Cara Membuat Sitemap Blogspot Keren dan Responsive

Cara Membuat Sitemap Blogspot - Sitemap atau daftar isi blog adalah halaman yang berisi seluruh postingan blog yang biasanya dikemas dengan perlabel. Dengan memiliki sitemap blog maka pengunjung bisa dengan mudah mencari artikel yang diinginkan.

Sitemap yang akan saya bagikan kali ini memiliki fitur yang sangat komplit dan merupakan update terbaru support fitur HTTPS Blogger custom domain (Baca: Cara Memasang HTTPS (SSL) di Blogger Custom Domain ). Fitur sitemap blogspot ini sebagai berikut:
  1. Responsive : Sitemap ini sudah didesain responsive sehingga tetap bisa diakses melalui perangkat mobile dengan tampilan yang keren.
  2. Sederhana dan Keren: Memiliki tampilan yang sedap dipandang mata dengan warna yang segar namun tetap elegan.
  3. Fast loading : server script js terbaik sehingga loading ringan.
  4. Otomatis : Sitemap ini akan update otomatis jika ada artikel atau postingan baru yang dipublikasikan dengan tanda New!!! artinya artikel baru.
Screenshot:
Tampilan Desktop (Komputer atau Laptop)
cara membuat sitemap blogspot blogger

Tampilan Mobile (Responsive) 
Cara Membuat Sitemap Blogspot Responsive

Bagaimana lengkap dan keren bukan? dengan sitemap ini tentu blog akan terlihat sangat keren, untuk demo dan tampilan nanti saya jelaskan dibawah. Saya selaku admin mengucapkan banyak terima kasih kepada Mas Taufik Nurrohman admin dte.web.id yang sudah membuat sitemap keren ini.

Sitemap ini menampilkan sebuah susunan label blog, jika nanti di klik pada label maka akan muncul semua artikel yang ada pada label tersebut. Berikut langkah-langkah untuk memasang sitemap di blogspot.

Cara Membuat Sitemap SEO Otomatis di Blogspot

  1. Buka akun Blogger > Pilih Blog yang ingin dipasang sitemap> Masuk Menu Halaman > Halaman Baru
    memasang sitemap otomatis blogspot
  2. Buat Judul dengan "Sitemap" atau "Daftar Isi" lalu masukkan kode berikut pada mode HTML, Jangan lupa ganti URL https://www.bloggerjepara.net/ dengan URL blog kamu.
    <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;
    height:41px;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;height: 40px;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: "https://www.bloggerjepara.net/", // 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="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>
  3. Kurang lebihnya seperti gambar berikut:
    memasang sitemap keren di blogspot
  4. Publikasikan dan lihat hasilnya.
Sampai disini kamu sudah berhasil memasang sitemap blogspot keren, responsive dan otomatis. Jika ada kendala silahkan tanyakan melalui kotak komentar atau langsung menghubungi admin melalui kontak yang sudah tersedia.


Semoga bermanfaat dan selamat mencoba. Salam Blogger Jepara

Cara Setting Robots.txt di Blogger agar Postingan Cepat Terindex

Cara Agar Postingan Cepat Terindex - Banyak cara yang dapat dilakukan untuk optimasi SEO onpage agar postingan lebih ramah dengan mesin pencari salah satunya adalah dengan setting robot.txt dengan benar.

Dengan menerapkan trik ini maka blog akan lebih SEO friendly, postingan akan mudah terindex oleh serp Google. Melakukan setting robot.txt yang benar maka akan terhindar bahaya tidak terindek untuk perkembangan blog kedepannya.

Baca Juga: Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

Cara Setting Robots.txt di Blogger

Berikut langkah-langkah yang dapat dilakukan untuk memasang robot.txt di blogspot blogger. Silahkan buka menu Setelan > Preferensi penelusuran > Perayap dan Pengindekan lalu masukkan kode berikut: 


User-agent: Mediapartners-Google
Disallow:

User-agent: *
Allow: /

Sitemap: https://www.bloggerjepara.net/feeds/posts/default?orderby=UPDATED

Keterangan:
Ganti URL yang berwarna merah dengan URL blog Kamu.
Kurang lebihnya seperti gambar dibawah ini:
Cara Setting Robots.txt di Blogger

Cara Setting Tag Tajuk Robot di Blogspot

Caranya sama seperti yang diatas yaitu melalui menu Setelan > Preferensi penelusuran > Perayap dan Pengindekan tepat dibawah robot.txt. Silahkan melakukan setting seperti gambar berikut:
Cara Setting Tag Tajuk Robot di Blogspot


Dengan melakukan setiing robot diatas, maka postingan blog akan semakin mudah terindek. Dan jangan lupa selalu membuat konten yang berkualitas dan bermanfaat untuk para pembaca setia.

Baca Juga: Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

Semoga bermanfaat dan selamat mencoba. Salam blogger Jepara.

Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

Cara Membuat Gambar di Blog Lebih SEO Friendly - Gambar merupakan salah satu komponen penting sebagai pelengkap artikel postingan agar lebih SEO. Terlebih sebuah blog atau website tutorial, gambar akan menjadi pilihan terbaik untuk menjelaskan tutorial tersebut agar mudah untuk dipahami.

Dalam pencarian Google, gambar juga harus di optimasi agar mampu bersaing dengan kata kunci yang dibidik. Dengan optimasi gambar postingan maka akan banyak mendatangkan visitor dari Google image.

Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

Selain gambar yang dioptimasi, kamu juga harus melakukan optimasi pencarian dengan membuat deskripsi penelusuran pada blog dan postingan agar lebih mudah dikenal search engine. Tutorialnya sudah saya buat, silahkan baca: Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

Cara Membuat Gambar Artikel Menjadi SEO

  1. Masuk postingan dan silahkan tambahkan gambar.
  2. Kemudian klik pada gambar lalu pilih "Properties"
    Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly
  3. Setelah itu masukkan title text dan alt text (title: sesuaikan dengan keyword artikel, alt text: isi dengan deskripsi gambar) Kalau saya pribadi antara title dan alt saya samakan.
    optimasi gambar postingan agar lebih seo friendly
  4. Selesai.
Sekian tutorial optimasi gambar postingan agar lebih seo friendly, gunakan cara diatas untuk semua gambar yang dimasukkan pada postingan. 

Selamat mencoba dan semoga pengunjung blog semakin banyak. Salam Blogger Jepara

Cara Memasang HTTPS (SSL) di Blogger Custom Domain

Cara Memasang HTTPS (SSL) di Blogger Custom Domain - Platform Blogger (blogspot) kini kembali lagi berinovasi di awal tahun 2018 dengan memunculkan fitur HTTPS untuk blogger custom domain. Seperti yang diketahui sebelumnya, custom domain di blogger tidak bisa dipasang dan aktifkan fitur SSL tapi sekarang sudah bisa dilakukan.

Apa itu Blogger Custom Domain?

Blogger custom domain adalah blog dari platform blogger yang sudah dipasang domain TLD (seperti domain .com, .net, .org dll) lebih jelasnya seperti dibawah:

https://www.bloggerjepara.net/ (domain TLD menggunakan .net)
https://bloggerjepara.blogspot.co.id/ (default domain blogger yaitu blogspot.co.id)

Saya sediri lebih suka dengan SSL (Secure Socket Layer) karena sesuai yang direkomendasikan google untuk membuat sambungan aman dengan browser web pengguna. Dengan memasang SSL (HTTPS) kita bisa mendapatkan banyak manfaat diantaranya yang paling penting adalah sangat disukai oleh mesin pencari google (diprioritaskan dalam pencarian).

Untuk website saya yang sudah hosting sendiri di wordpress self hosting, semuanya sudah saya pasang SSL dan memiliki kemajuan yang sangat pesat dan untuk iklan adsense juga memiliki perkembangan yang baik. Jadi intinya memasang HTTPS di blog sangat diperlukan untuk perkembangan blog atau website.
cara memasang https di blogger

Cara Memasang HTTPS (SSL) di Blogger Custom Domain dengan Mudah

Berikut langkah-langkah yang harus dilakukan untuk mendapatkan SSL gratis dari blogger dan memasangnya di blogspot custom domain.
  1. Silahkan masuk terlebih dahulu di link berikut draft.blogger.com
  2. Setelah itu silahkan pilih menu "Setelan" lalu pilih "General" silahkan pilih "YA" pada pilihan ketersedian HTTPS (silahkan tunggu proses pengalihan ke https dengan waktu kurang lebih 1 menit, untuk cek reload aja browsernya, kalau sudah tidak ada peringatan berarti sudah berhasil)
    Cara Memasang HTTPS (SSL) di Blogger Custom Domain
  3. Selanjutnya jangan lupa untuk melakukan pengalihan HTTPS (redirect) dengan redirect ini akan mengarahkan otomatis dari http ke https. Caranya seperti diatas pada pengalihan HTTPS pilih "YA"
    redirect http ke https di blogger
  4. Selesai dan lihat hasilnya, contohnya seperti blog Komunitas Blogger Jepara ini.
    cara memasang https di blogger

Demikian cara cepat dan mudah untuk memasang SSL gratis dari blogger agar muncul HTTPS di blogger custom domain. 

Semoga dapat bermanfaat dan memberikan perkembangan positif dalam pencarian Google dan perkembangan iklan Google Adsense yang lebih baik. Selam Blogger Jepara.

Cara Mengubah Warna Link di Blog dengan Mudah

Cara Mengubah Warna Link di Blog dengan Mudah - Sebuah blog atau website tidak akan pernah meninggalkan link (link internal maupun eksternal). Hal ini bertujuan untuk memberikan informasi yang lebih lengkap. 

Warna link pada blogspot atau blogger bisa diganti dengan warna yang diinginkan, karena terkadang warna link pada template yang kita gunakan tidak sesuai yang kita inginkan. 

Yang perlu diperhatikan adalah warna link yang ingin kita ganti jangan sampai tidak sesuai dengan warna dasar template sehingga dapat mengganggu tampilan blog. untuk mengetahui kode warna HTML silahkan baca: Kode Warna HTML Lengkap untuk Blog dan Website

Cara Mengubah Warna Link di Blog

Berikut cara mengubah warna link pada blog yang harus diikuti langkah-langkahnya sampai selesai.
  1. Masuk akun blogger terlebih dahulu
  2. Kemudian pilih menu "Tema" lalu pilih "Edit HTML"
    Cara Mengubah Warna Link di Blog dengan Mudah
  3. Cari kode a:link untuk lebih cepatnya silahkan menggunakan tombol kombinasi Ctrl+F lalu masukkan code a:link kemudian tekan enter.
    Cara Mengubah Warna Link di Blog
  4.  Maka akan muncul kode HTML warna link seperti berikut, silahkan ganti warna sesuai yang diinginkan: 
a:link{color:#859ce6;text-decoration:none}
a:visited{color:#859ce6;text-decoration:none}
a:hover{color:#333;text-decoration:none}


Keterangan:
a:link : Warna link pada blog
a:visited : Warna link yang sudah diklik atau dikunjungi
a:hover : Warna link ketika kursor diarahkan pada link.

Jika sudah diganti warna linknya, jangan lupa simpan template dan lihat hasilnya.

Sekian tutorial cara mengganti warna link pada blog, semoga tampilan blog atau websitenya semakin menarik dan sedap dipandang mata. Jika Sahabat Blogger Jepara masih kesulitan, silahkan tinggalkan pesan melalui kolom komentar atau melalui halaman kontak yang sudah tersedia. Salam Sukses dari Komunitas Blogger Jepara.