Tampilkan postingan dengan label tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial. Tampilkan semua postingan

Kamis, 16 Januari 2025

Mudahnya Membuat Custom Subdomain untuk Blogger

Mudahnya Membuat Custom Subdomain untuk Blogger

Sampai hari ini masih banyak blogger di beberapa group blogger di Facebook yang bertanya soal Cara Membuat Sub-Domain di blogger. Kali ini saya akan coba sedikit menjabarkan beberapa cara yang pernah saya lakukan untuk membuat sebuah Sub-Domain.

Membuat Custom Subdomain untuk Blogger

Sebelum melanjutkan artikel ini, saya ingin memastikan bahwa kawan-kawan sudah membaca artikel tentang Membangun Blog yang Profesional Menggunakan Layanan Terbaik dari Hostinger yang berisi tentang informasi seputar Domain dan Hosting.

Apa itu Sub-Domain

Sub-Domain itu bagian dari nama domain utama yang berfungsi untuk memisahkan bagian situs web. Dapat dengan mudah dilihat karena biasanya Sub-Domain terletak di depan domain utama dan dipisahkan dengan titik (dot), contohnya contoh.kangwira.com.

Sub-Domain juga biasa digunakan untuk banyak kebutuhan, diantaranya adalah Blog, Produk, Topik, Tampilan, Fungsi, Bahasa, dan masih banyak lagi kebutuhan dan keperluan yang bisa kita manfaatkan dalam menggunakan sub-domain.

Sebagai contoh saja, saya memiliki blog dari platform blogger.com dengan domain kangwira.com ini menawarkan produk affiliasi dari Heo Link secara terpisah dengan domain utama menggunakan halaman baru dan memanfaatkan sub-domain, maka hasilnya akan seperti ini heolink.kangwira.com. Ada beberapa cara yang bisa saya lakukan untuk mencapai tujuan ini dengan mudah.

Membuat Sub-Domain dari Domain Hosting

Beberapa blogger yang tidak ingin repot menggunakan layanan pihak ketiga seperti cloudflare biasanya hanya membutuhkan beberapa langkah saja untuk membuat Sub-Domain.

  • Login ke layanan Domain lalu masuk ke Domain Management.
  • Cari menu DNS Record atau Name Server pada bagian dashboard.
  • Jika sudah masuk ke DNS Record atau Name Server, buat record baru.
  • Type nya pilih CNAME, lalu isi nama sub-domain pada Name, dan isi content nya dengan ghs.google.com.

    Type Name Content TTL
    Name heolink ghs.google.com Auto

  • Selanjutnya pada dashboard blogger masuk ke halaman Setelan > Publikasi.
  • Masukkan subdomain pada Domain Kostum.
  • Selesai.
  • Pada pilihan Alihkan Domain, biarkan tanpa centang ya teman-teman.

Selanjutnya teman-teman tinggal tunggu propagasi saja, kira-kira 5 menit sampai 30 menit biasanya saya tunggu lalu sub-domain siap digunakan.

Cukup mudah bukan cara buat subdomain dari Domain Hosting ini? Nah tapi gimana kalau ternyata teman-teman blogger menggunakan layanan pihak ketiga seperti Cloudflare untuk memfasilitasi domain blogger teman-teman?

Membuat Sub-Domain menggunakan Cloudflare

Nah masih banyak blogger yang merasa kebingungan menggunakan layanan dari Cloudflare, padahal caranya sama saja seperti Cara Membuat Sub-Domain dari Domain Hosting.

Namun di dashboard cloudflare memiliki 1 fungsi yang mungkin sedikit membingungkan kita, yaitu Proxy Status. Ketika teman-teman sudah melakukan settingan untuk menambahkan subdomain dengan cara yang sama seperti diatas, selanjutnya teman-teman harus mematikan fungsi pada Proxy Status sehingga statusnya menjadi DNS Only bukan sebagai Proxied, ini tujuannya agar Subdomain bisa dibuat untuk blogger.

Settingan Subdomain di Cloudflare

Namun pastikan teman-teman memang menggunakan layanan Cloudflare untuk domain utamanya juga yaah.

Setelah membaca semua langkah untuk membuat custom subdomain di blogger yang saya buat, semoga lebih memudahkan teman-teman dalam berekspresi dan membuat subdomain lebih mudah. Jangan lupa tinggalkan komentar apabila ada pertanyaan seputar Subdomain.

Kamis, 28 November 2024

Cara Menghapus Parameter ?m=1 pada Template Blogger Versi Mobile

Cara Menghapus Parameter ?m=1 pada Template Blogger Versi Mobile

Saat ini Saya masih banyak melihat blogger yang mencoba berbagai cara untuk menghapus parameter ?m=1 yang sering kita jumpai pada address bar browser pada versi Mobile. Karena kebetulan dari info statistik yang saya dapat bahwa orang-orang melakukan pencarian google search pada mobile device lebih banyak dibanding Desktop, jadi bagi Blogger-blogger yang sudah menggunakan Domain Custom pada blognya, parameter ?m=1 ini mungkin cukup mengganggu pandangan terhadap keprofessionalan seorang pemilik blogger tersebut.

Cara Menghapus Parameter ?m=1 pada Template Blogger Versi Mobile

Ketika kita memiliki domain custom misalnya domain kangwira.com ketika di akses melalui Mobile Device, tampilan domain tersebut pada address bar akan menjadi www.kangwira.com/?m=1, dan ini menjadi default dari CMS Blogger untuk membedakan mana Device Mobile dan Desktop. Untuk Tampilan Mobile Device biasanya akan disertakan parameter ?m=1 sedangkan untuk Desktop biasanya akan menampilkan parameter ?m=0 namun untuk tampilan versi desktop.

Banyak blogger termasuk Saya sendiri, mencoba mengakali Parameter ?m=1 ini agar tidak muncul ketika visitor masuk ke blog kita menggunakan Mobile Device. Beberapa tahun lalu saya pernah menemukan salah satu artikel yang membahas tentang teknik marketing affiliate pada blogger, yang akhirnya mendapatkan pencerahan terhadap Parameter ?m=1 ini.

Script dibawah ini adalah script yang saya dapat dari hasil diskusi singkat dengan penulis.


    var uri = window.location.toString();
    if (uri.indexOf("&m=1","&m=1") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
        window.history.replaceState({}, document.title, clean_uri);
    }
    var uri = window.location.toString();
    if (uri.indexOf("?m=1","?m=1") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
        window.history.replaceState({}, document.title, clean_uri);
    }

Namun setelah saya coba beberapa tahun sampai sekarang, saya menemukan sedikit update dari blogger sehingga script diatas memiliki sedikit kekurangan, yaitu mempengaruhi terhadap beberapa fungsi seperti pagination yang bermasalah dan hasil pencarian blog yang menjadi terganggu.

Akhirnya saya coba ulik dan melakukan percobaan beberapa kali kedalam Blog Kang Wira ini, dan saya berhasil menemukan solusinya dengan memodifikasi script diatas menjadi seperti dibawah ini.

function removeParam(param) {
  var uri = window.location.toString();
  var index = uri.indexOf(param);
  if (index > -1) {
    var cleanUri = uri.substring(0, index) + uri.substring(index + param.length);
    window.history.replaceState({}, document.title, cleanUri);
  }
}

removeParam("?m=1");
removeParam("&m=1");

Script diatas ini adalah hasil modifikasi yang saya lakukan untuk menyembunyikan parameter ?m=1 ketika halaman dan semua script bawaan template sudah selesai dimuat.Saya menyimpulkan bahwa dengan cara ini, kita akan tetap bisa melihat domain yang lebih profesional di versi mobile nya tanpa harus kehilangan ataupun merusak fungsi default yang ada di blogger.

Untuk mencoba dan menganalisa script diatas, silahkan pasang script diatas kedalam template teman-teman dan letakkan pada <head> , lalu lihat hasilnya pada Smartphone teman-teman ya. Jika ditemukan fungsi yang berpengaruh atau tidak berfungsi, mari kita diskusi di kolom komentar dibawah.

Jangan lupa untuk parsing script diatas terlebih dulu di halaman HTML Parse sebelum memasang script diatas kedalam template kamu ya teman-teman.

Demikian artikel ini dibuat seadanya sebagai pembelajaran dan sarana berdiskusi yang asik dalam membahas "Cara Menghapus Parameter ?m=1 pada Template Blogger Versi Mobile" Jangan lupa berlangganan artikel Kang Wira juga ya teman-teman, agar tidak ketinggalan notifikasi ketika saya mengupdate artikel baru.

Sabtu, 21 Juli 2018

Memasang Web Push Notification di Blog Memanfaatkan Layanan Gratis dari OneSignal

Memasang Web Push Notification di Blog Memanfaatkan Layanan Gratis dari OneSignal

Kali ini saya akan membahas tutorial untuk memasang Web Push Notification dengan memanfaatkan Layanan Gratis dari OneSignal. Tapi sebelum melanjutkan, saya mau menerangkan terlebih dulu tentang fungsi Web Push Notification ini yah teman-teman.

Ohya, karena saya juga menggunakan Fungsi Web Push Notification ini, silahkan teman-teman tekan tombol alow pada popup yang muncul diatas atau dibawah browser teman-teman yah teman-teman.

Minggu, 17 Juni 2018

Cara Melihat Kode Template Yang Digunakan Blogger Lain

Cara Melihat Kode Template Yang Digunakan Blogger Lain

Sebelumnya saya selalu senang membantu teman-teman blogger lain yang hobby melakukan Modifikasi Template Blog dengan cara mengarahkan teman-teman melalui Facebook Chat ataupun Menggunakan Whatsapp Messenger.

Tapi kendala yang saya alami saat itu adalah sulitnya beraktifitas di luar rumah karena harus standby didepan PC untuk melayani tanya-jawab bersama sahabat kangwira mengenai Koding HTML dan CSS.

Kamis, 14 Juni 2018

Kesalahan Kecil ini Bisa Menyebabkan Blog Tidak Dapat di Akses #JadiBaik di Bulan Baik

Kesalahan Kecil ini Bisa Menyebabkan Blog Tidak Dapat di Akses #JadiBaik di Bulan Baik

Pada kesempatan kali ini, KangWira hanya mau menceritakan sedikit kekecewaan yang pernah saya alami di Bulan Ramadhan 2018 ini. Yups.. Kekecewaan itu akhirnya saya tumpahkan kedalam artikel ini.

Pasti Sahabat KangWira penasaran yah ceritanya? Simak Terus deh cerita singkat saya ini sampai selesai. Di akhir artikel ini, teman-teman bisa memberikan pendapat tentang cerita pengalaman saya ini.

Minggu, 29 April 2018

Memasang Widget Tombol Like FansPage Melayang

Memasang Widget Tombol Like FansPage Melayang

Ada sahabat Kang Wira yang bertanya melalui Whatsapp, Bagaimana Cara Memasang Widget Tombol Like FansPage Melayang di bagian bawah blog, seperti tombol Like FansPage pada blog SEOCIPS.

Tombol like fansPage ini memang sangat berguna untuk menambahkan fans atau followers didalam sebuah fanspage yang sudah kamu miliki dan sangat berguna juga untuk mendapatkan traffic langsung dari Facebook apabila followers kamu sudah cukup tinggi.

Senin, 23 April 2018

Solusi Menghilangkan Spasi atau Ruang Kosong dibawah Gambar

Solusi Menghilangkan Spasi atau Ruang Kosong dibawah Gambar

Bagi teman-teman yang pernah melihat adanya Spasi atau Ruang Kosong dibawah gambar itu biasanya disebut Gap, akan terasa sangat menjengkelkan bukan apalagi jika kita mau tampilan pada template blog kita terlihat rapi.

Mungkin ada sebagian dari teman-teman kangwira yang bertanya kepada saya bagaimana solusinya menghilangkan Spasi atau Ruang Kosong dibawah gambar agar tidak terlihat background dari section yang sudah dibuat pada masing-masing template.

Sabtu, 10 Maret 2018

Modifikasi List Label Menjadi 2 Kolom

Modifikasi List Label Menjadi 2 Kolom

Beberapa waktu lalu, sempat ada seorang sahabat meminta tutorial untuk membagi list label menjadi 2 kolom. Karena kesibukan saya di luar rumah, jadi baru hari ini bisa posting 1 tutorial modifikasi lagi.

Buat teman-teman yang masih belum berlangganan, silahkan berlangganan artikel kangwira dengan cara mendaftarkan alamat email teman-teman di kolom berlangganan gratis dibawah.

Minggu, 25 Februari 2018

Minggu, 18 Februari 2018

Apa Fungsi Hreflang dan Bagaimana Cara Memasang Hreflang Kedalam Template Blog

Apa Fungsi Hreflang dan Bagaimana Cara Memasang Hreflang Kedalam Template Blog

Dikesempatan kali ini saya akan membahas tentang Pengertian Hreflang dan Cara Memasang Hreflang yang pernah ditanyakan oleh blogger lain disebuah group Whatsapp Blogger Indonesia.

Tapi sebelum kita melanjutkan pembahasan kali ini, saya mau teman-teman berlangganan di blog kang wira ini terlebih dulu nih. Supaya kamu tidak ketinggalan artikel yang akan saya posting selanjutnya.

Baik, saya anggap teman-teman sudah mendaftarkan email teman-teman di atas yah, dan jangan lupa verifikasi langganan melalui email kamu.

Senin, 12 Februari 2018

Trik Membuat Halaman Sahabat ala Kang Wira

Trik Membuat Halaman Sahabat ala Kang Wira

Sebelum saya menjelaskan Cara membuat Halaman Sahabat Ala KangWira ini, saya mau kasih tahu kepada teman-teman bahwa sebenarnya Halaman Sahabat itu sering disebut sebagai halaman Backlink atau Backlink Page.

Di artikel saya sebelumnya, pernah saya buat tutorial membuat halaman Sahabat yang unik dengan Jquery. Di tutorial kali ini, saya tidak menggunakan Jquery karena cukup menggunakan CSS dan HTML saja.

Rabu, 24 Januari 2018

Teknik Dasar Menyisipkan Gambar dengan Benar Kedalam Artikel Blog

Teknik Dasar Menyisipkan Gambar dengan Benar Kedalam Artikel Blog

Kali ini kita akan membahas Teknik Dasar lagi yah teman-teman. Artikel ini saya buat khusus untuk teman-teman yang baru belajar blogging nih.

Jadi buat teman-teman yang sudah paham Cara Upload Gambar kedalam Blog ini, saya harap bisa ikut memberikan pendapat dan memberikan kritik maupun saran agar teman-teman yang lain bisa paham dengan pembahasan kali ini.

Sebelum saya menjelaskan teknik dasar menyisipkan Gambar yang benar kedalam artikel, ada baiknya teman-teman membaca artikel saya sebelumnya yang berjudul Teknik Dasar Membuat Link HTML didalam Artikel Blog.

Karena pada artikel tersebut saya sudah menjelaskan secara singkat mengenai cara menyisipkan Link kedalam Gambar.

Rabu, 17 Januari 2018

Senin, 15 Januari 2018

Rabu, 10 Januari 2018

Modifikasi Tampilan Blockquote Menggunakan Stitched Style

Modifikasi Tampilan Blockquote Menggunakan Stitched Style

Blockquote mendefinisikan sebuah kutipan panjang yang ketika dilihat pada browser, maka teks akan tampil menjorok kedalam. Tampilan Blockquote yang ada didalam setiap postingan blog, secara default hanya memainkan margin pada bagian CSS nya saja.

Design Blockquote ini dikembangkan oleh teman-teman Template Creator dengan menambahkan background dan bumbu-bumbu lain agar lebih menarik untuk dilihat oleh pembaca.

Bumbu yang saya maksud disini berupa CSS Property yah teman-teman, jangan sampai salah mengartikan.

Selasa, 09 Januari 2018

Teknik Dasar Membuat Link HTML didalam Artikel Blog

Teknik Dasar Membuat Link HTML didalam Artikel Blog

Sebenarnya masih banyak blogger yang belum tahu Teknik Dasar dalam Membuat sebuah Link di halamannya. Karena biasanya kita hanya memanfaatkan fasilitas yang disediakan pada menu editor di masing-masing platform, seperti blogger dan wordpress pada umumnya.

Maka dari itu, kali ini saya akan membahas Teknik Dasar Membuat Link HTML agar mempermudah teman-teman yang mau belajar koding HTML didalam blog.

Untuk itu, silahkan teman-teman siapkan terlebih dulu notepad++ / program koding lain yang sesuai dengan kebutuhan teman-teman.

Senin, 01 Januari 2018

Cara Merubah Warna Address Bar Browser Smartphone Sesuai Warna Template Blog

Cara Merubah Warna Address Bar Browser Smartphone Sesuai Warna Template Blog

Setiap mengunjungi facebook melalui browser HP, saya melihat warna address bar pada browser HP yang saya gunakan ternyata berubah menjadi warna biru sesuai dengan warna dasar dari situs tersebut.

Saya sendiri sudah mencoba mengaplikasikan trik ini kedalam blog saya sampai sekarang.

Teman-teman bisa coba kunjungi blog kangwira melalui Browser Chrome pada Smartphone kamu lalu lihat perbedaannya ketika saya belum menggunakan trik ini pada Screenshot dibawah ini.

Cara Merubah Warna Address Bar Browser Smartphone Sesuai Warna Template Blog

Setelah kamu melihat contoh pada gambar diatas, menarik bukan jika dapat diaplikasikan kedalam blog pribadi kita?

Apa Fungsi Mengganti Warna Address Bar ini?

Menurut pendapat saya sendiri sebenarnya trik ini hanya untuk mempercantik blog saja karena tidak mengandung unsur optimasi terhadap blog yang kamu punya.

Address Bar Facebook Dari Browser Handphone
Nah ngomong-ngomong soal Mempercantik Blog berarti kan ada kaitannya dengan Re-Design atau Modifikasi Template yah teman-teman?

Ada banyak Blogger yang memberikan tips bahwa jika kita menggunakan terlalu banyak widget atau kode untuk mempercantik halaman blog kita itu dapat membebani Loading Halaman.

Coba kamu perhatikan screenshot disamping sebagai gambaran saja.

Tapi Tenang saja teman-teman, trik yang saya share kali ini hanya memanfaatkan meta content, jadi tidak membebankan loading page kok. Buktinya skor PageSpeed Insight Versi Mobile pada blog ini masih di angka 96% lho.

Skor Page Speed Insight Kang Wira

Skor dengan Angka 96% pada versi PageSpeed diatas sudah cukup lumayan bukan?

Nah jika teman-teman ingin mencoba mempercantik tampilan pada blog dengan mengganti Warna Address Bar Browser tanpa membebankan loading halaman, silahkan praktekkan beberapa langkah singkat dibawah ini.

  • Pastikan kamu sudah login kedalam akun blog kamu.
  • Pilih menu Tema, lalu klik tombol Edit HTML.
  • Salin Meta Tag dibawah ini, lalu letakkan setelah kode <head>
<!-- Warna untuk Chrome, Firefox OS, Opera -->
<meta content='#2f303f' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#2f303f' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#2f303f' name='apple-mobile-web-app-status-bar-style'/>

Simpan Template dan lihat hasilnya pada Browser Google Chrome dalam Smartphone kamu.

Perhatikan kode warna yang saya tandai pada kode meta tag diatas dapat kamu sesuaikan dengan warna dominan pada template kamu saat ini.

Untuk Menyesuaikan warna, silahkan kamu lihat halaman Color Picker yang sudah saya siapkan di blog ini.

Yaa begitulah cara saya modifikasi template untuk mempercantik halaman blog tanpa memberatkan loading blog.

Ohya untuk teman-teman yang mau berkreasi dengan menampilkan atau menyembunyikan widget pada tampilan Smartphone, silahkan teman-teman baca artikel saya dibawah ini.

Baca juga: Cara Menampilkan dan Menyembunyikan Widget pada Smartphone


Cukup sekian dulu yah artikel saya kali ini, semoga teman-teman bisa lebih kreatif dalam memodifikasi tampilan blognya seperti Mengganti Warna Address Bar pada Browser Smartphone ini.

Jika ada pertanyaan atau kesulitan dalam mempraktekannya, silahkan teman-teman bertanya melalui kolom komentar dibawah ini dan jangan lupa untuk masukkan email kamu di kolom Berlangganan dibawah artikel ini untuk mendapatkan notifikasi setiap ada postingan terbaru.

Kamis, 28 Desember 2017

Cara Mencari Keyword Tanpa Harus Membuang Waktu

Cara Mencari Keyword Tanpa Harus Membuang Waktu

Membahas tentang Cara Mencari Keyword untuk membuat artikel blog yang bersaing agar bisa menduduki halaman pertama google itu memang cukup membuat kita pusing yah teman-teman.

Karena ada banyak sekali Tutorial Research Keyword yang bisa kita praktekkan dari pencarian Google.

Dari mulai cara A sampai cara Z semua sudah di terapkan, tapi hasilnya masih belum maksimal nih. Yang ada malahan Membuang Waktu kita untuk menulis artikel lho.

Dari mulai menggunakan Keyword Planner sampai Keywordtool.io sudah pernah dicoba, tapi hasilnya masih belum maksimal juga nih.

Rabu, 27 Desember 2017

Cara Membuat PopUp Box berisi Banner di Blog

Cara Membuat PopUp Box berisi Banner di Blog

Buat teman-teman yang suka menampilkan Banner menggunakan PopUp Box, boleh coba nih trik di artikel ini.

Sebenarnya ada beberapa spot yang bisa kita gunakan untuk menampilkan sebuah Banner didalam halaman blog diantaranya :

Header
Dibawah Navigasi Menu
Dibawah Judul Artikel
Ditengah Artikel
Bawah Artikel
Sidebar atas
Sticky Sidebar
Footer

Selasa, 19 Desember 2017

Menyapa Pengunjung Menggunakan Widget Welcome Note Dibawah Judul Artikel

Menyapa Pengunjung Menggunakan Widget Welcome Note Dibawah Judul Artikel

Menyapa kepada setiap pengunjung yang datang untuk membaca artikel kita adalah suatu hal yang sangat sopan menurut saya.

Apalagi jika kita menggunakan Widget Welcome Note yang bertugas untuk menyapa pengunjung diwaktu yang tepat, seperti mengucapkan Selamat Pagi, Selamat Siang, Selamat Datang dan lain sebagainya.

Teman-teman bisa lihat Contoh dari Widget Welcome Note yang saya gunakan diatas, posisinya tepat berada dibawah Judul artikel.