Cara Pasang Https (SSL) Sampai Hijau di Blogger Custom Domain

Berikut Tutorial Cara Memasang Https atau SSL Pada Blogger.com / Blogspot



Memasang Https memunyai beberapa kelebihan dan tetntunya akan lebih enak dilihat ketika https berwarna hijau, itu menandakan bahwa interaksi antara pengakses / pengunjung web menjadi aman
serta https terlihat lebih profesional

dan saya pernah membaca suatu artikel 

apalagi untuk website toko online yang melakukan pembayaran kartu kredit atau credit card seperti Visa, mastercard ataupun yang lainnya yang berhubungan informasi sensitif

fungsi https lainya adalah search engine seperti google, bing, yahoo dll akan mengutamakan atau menilai bagus untuk yang menggunakan https
karena disni tutorial menggunakan https menggunakan cloudflare dan cloudflare sendiri menggunakan teknologi CDN dimana CDN ini membuat loading website menjadi cepat, untuk selebihnya mengenai teknologi CDN bisa dibaca di google
intinya CDN mempunyai server di beberapa tempat dan menyesuaikan dengan lokasi kita berada dan membuat loading website lebih cepat 
disini saya menggunakan cloudflare yang versi gratis 

selebihnya mengenai keuntungan dan kelebihan https maupun CDN bisa di cari lagi di google


catatan: 

dan yang harus diperhatikan sebelum memutusakan memasang https adalah ketika dalam proses perubahan dari http ke https trafik website akan berkurang 
sampai google webmaster meng crawl kembali web kita

dan ketika web kita sudah terindeks google dengan https apabila menggantinya lagi ke http maka web kita akan kehilangan trafik dan https mungkin tidak bisa di redirect ke http di blogger, 

berikut langkah langkahnya 


#1. Daftar Cloudflare 

dan setelah daftar kita diharuskan memasukan domain untuk di scan, setelah di scan kita dihadapkan dengan pengaturan Name Server maupun DNS. intinya pada tahap ini kita mengarahkan Name Server kita ke cloudflare


#2. Setting DNS Di Cloudflare

Blog kita harus sudah menggunakan Custom Domain 
jadi sudah tidak menggunakan .blogspot.com lagi
dan settingan DNS seperti Cname dan lain lainnya harus di pindahkan ke cloudflare berikut penampakannya


di bagian langkah #1 dan #2 ini pada intinya sama saja dengan custom domain blogger pada umumnya, dan di cloudflare juga bisa membuat subdomain jika mau, sebagai contoh diatas saya membuat subdomain "store"


#3. Langkah ke tiga ini mengaktifkan SSL atau HTTPS Pada Cloudflare

pada langkah ketiga ini membutuhkan waktu untuk mengaktifkan SSL ini, bisa dilihat di gambar berikut ini, pertama pilih Crypto dan pilih Flexible.

sambil menunggu SSL ini aktif kita setting pengaturan yang lainnya lanjut ke langkah #4

#4. Langkah Selanjutnya Purge

pada langkah ini mudah tinggal pilih Purge dan klik pilihan Purge Everything

#5. Langkah Ke lima ini bisa dibilang penting yaitu Page Rule

Pada bagian ini kita mengatur alamat web kita di arahkan ke https, lanngkah lagkahnya kita klik Page Rule ---> lalu pilih Create Page Rule ---> setelah ini akan menemukan tampilan seperti dibawah ini
ikuti petunjuk gambar untuk mengisiya
contoh dibawah ini saya mengisi http://*resistor.id/*   dan bagian bawah pilih "Always Use Https"

masih di bagian Page Rule berikut settingan kedua dari Page Rule
Isikan seperti contoh berikut http://resistor/* ---> pilih Forrwarding Url ---> pili 301 Permanent Redirect ---> dibawahnya ketikan domain kalian  https://www.resistor.id/$1


Selanjutnya Masukan https://resistor.id ---> Forwarding URL ---> pilih 301 Permanent Redirect ---> 
dibawahnya ketikan domain kalian ketikan https://www.resistor.id/$1



#6. Langkah ke enam ini langkah Setting Firewall di cloudflare

langkah ini mudah tinggal cari firewall dan pilih Low seperti pada gambar dibawah


langkah ini langkah terakhir dalam menyeting pengaturan di cloudflare selebihnya pengaturan di blogger

#7. Setelah langkah langkah diatas selesai, Langkah Selanjutnya Menambahkan Script

berikut ini script pelengkap, langkah langkhnya Buka Blog Template edit Html lalu cari  </head>
dan letakan script berikut diatas kode  </head> dan jangan luapa ganti domain dengan domain anda

<script>
        $(document).ready(function() {
          $("a").each(function() {
            var i = $(this).attr("href");
            var n = i.replace(http://www.DomainAnda.com, "https://www.DomainAnda.com");
                              $(this).attr("href", function() {
              return n
            })
          })
        });
      </script>

Setelah itu langkah selanjutnya masih tentang mengedit Kode
temukan Script dibawah ini

<b:include data='blog' name='all-head-content'/>

lalu apabila sudah ketemu hapuslah script tersebut, dan setelah dihapus , jika tidak ketemu coba cari dengan memasukan sebagian kodenya saja gunakan CTRL + F   -head-content'/>
dan apabila masih tidak ditemukan kode diatas maka lewati saja dan langsung ke  tutorial selanjutnya


Pastekan Kode Berikut di bawah kode <head>
dan jangan lupa ganti  domain, blog ID, dan bologtitle  dengan milik anda

<link href='https://www.DomainAnda.com/favicon.ico' rel='icon' type='image/x-icon'/>
      <meta content='blogger' name='generator'/>
      <link href='https://www.DomainAnda.com/feeds/posts/default' rel='alternate' title='BLOGTITLE - Atom' type='application/atom+xml'/>
      <link href='https://www.DomainAnda.com/feeds/posts/default?alt=rss' rel='alternate' title='BLOGTITLE - RSS' type='application/rss+xml'/>
      <link href='https://www.blogger.com/feeds/BLOGID/posts/default' rel='service.post' title='BLOGTITLE- Atom' type='application/atom+xml'/>
      <!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/2591933621-ieretrofit.js"></script>
<![endif]-->
      <meta expr:content='data:blog.url' name='og:url:domain'/>
      <!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->



setelah mengikuti langkah langkah diatas Save template tersebut

#8. Menganalisa Mixed Content Agar Https / SSL Menjadi Hijau

Pada langkah ini sangat penting, karena menentukan Hijau tidaknya https kita, biasanya di browser chrome sangat sensitif diharuskan benar benar tidak ada mixed content,
berikut langkah untuk mengatasi Mixed Content
1. Pertama ubah semua http:// dengan https:// pada edit template, pada langkah ini utamakan yang di ubah menjadi https adalah link gambar, kode java script, dan tempat kode java script maupun tempat menyimpan gambar tersebut harus sudah support https

2. Jika langkah pertama sudah dilaksanakan dan masih belum hijau, buka web anda dan tekan tekan tombol ini pada keyboard " CTRL + Shift + J  "  maka disana akan terlihat jika ada yang masih Mixed Content, lalu perbaiki mixed content yang ditemukan tersebut contoh:

“Mixed Content: The page at ‘https://<blog-anda>.com/’ was loaded over HTTPS, but requested an insecure script ‘http://<some-url>/script.js’. This request has been blocked; the content must be served over HTTPS.”
disana bisa kita lihat link kode JS tidak menggunakan https maka editlah pada template kita

hal hal lain yang penting jika https masih belum hijau
1. Terkadang jika blog kita menggunakan favicon bukan bawaan maka favicon tersebut akan terdeteksi tidak https dan menyebabkan Mixed Content, maka yang harus kita lakukan adalah meremove favicon tersebut lalu mengUpload nya lagi,

dan jangan lupa bersihkan dulu browser cookie dan yang lainya lalu buka kembali blog kita

2. Beberapa kasus pada mixed content

Mixed Content: The page at ‘http://www.resistor.id/‘ was loaded over a secure connection, but contains a form which targets an insecure endpoint ‘http://www.resistor.id/search’. This endpoint should be made available over a secure connection.

cara mengatasi masalah diatas kita harus edit template html kita, cari kode dibawah ini gunakan CTRL + F kalau tidak ditemukan gunakan kombinasi search sebagian kode tersebut seperti  blog.searchUrl'> 

<form expr:action='data:blog.searchUrl'>
lalu jika sudah ditemukan ganti kode tersebut dengan kode berikut ini :

<form expr:action='data:blog.searchUrl.https'>
Lalu save template

3. Kasus Mixed Content Lainnya
kasus Mixed Content pada blogger lainnya adalah berikut mixed karena navbar (navigasi bar)

www.blogger.com/navbar.g?targetBlogID=

dalam mengatasi mixed content ini saya mengatasinya dengan cara menghapus kode yang berkaitan dengan link tersebut, cara menghapusnya kita harus menghapus dari awal kode dari blogger navbar tersebut

#9. Langkah terakhir Setting Robots.txt dan Submit kembali ke Google webmaster

langkah terakhir ini untuk mengoptimalkan SEO setelah migrasi dari http ke https
1. buka dashboard blogger ---> pergi ke setting ----> dan cari Search Preference ---> cari  Crawlers and indexing ----> Custom Robots.txr ----> piliih enable lalu pastekan text berikut
jangan lupa ganti dengan domain anda lalu save

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.DomainAnda.com/sitemap.xml
2. langkah kedua seperti biasa kita men submit web kita ke google webmaster tools
masuk ke www.google.com/webmasters/
+ di google search console, add new property
masukan domain anda
https://www,DomainAnda.com/
lalu cari crawl sitemap dan submit sitemap kita https://www,DomainAnda.com/sitemap.xml
pada langkah ini pada intinya sama dengan mensubmit ke webmaster


Catatan : semua template blogger mempunyai kendala yang berbeda beda


Akhir Kata:

Akhir kata saya menuliskan ini untuk mendokumentasikan yang menurut saya penting maupun bermanfaat karena jika ilmu atau yang kita pelajari tidak dituliskan dan tidak di amalkan mungkin ilmu yang kita pelajari akan lupa lagi, olehkarena itu ilmu atau apapun yang kita pelajari akan tersimpan jika dituliskan dan di amalkan

Sekian

0 Response to "Cara Pasang Https (SSL) Sampai Hijau di Blogger Custom Domain"

Post a Comment

adv

About

www.Resistor.ID sebelumnya bernama 0sbr0.blogspot.com

 www.Resistor.ID adalah  web tempat berbagi informasi, elektronika, teknologi dan lain - lain yang sekiranya memberi manfaat.

Seperti yang sudah banyak orang ketahui atau mungkin ada yang belum mengetahui apa itu Resistor dan kenapa memilih Resistor sebagai nama web ini ?

baca lebih lanjut