Kang Wira

Mudahnya Membuat Custom Subdomain untuk Blogger

2025-01-16T14:18:00.004+07:00

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.

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.

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

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.

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.

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

2024-11-28T13:49:00.008+07:00

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.

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.

Memasang Web Push Notification di Blog Memanfaatkan Layanan Gratis dari OneSignal

2018-07-21T04:14:00.003+07:00

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.

Pengertian Web Push Notification

Pertama-tama saya akan jelaskan secara singkat tentang pengertian Web Push Notification kepada teman-teman. Web Push Notification adalah pesan pendek yang muncul secara otomatis di layar smartphone, anggap saja seperti SMS.

Kita sebagai pemilik Web dapat mengirimkan pesan setiap saat kepada Pengunjung Setia web kita, meskipun Pengunjung tidak sedang membuka Web kita menggunakan Browser. Ini juga berlaku untuk Pengguna Smartphone lho teman-teman.

Banyak informasi yang dapat dikirimkan menggunakan Web Push Notification, misalnya informasi hasil pertandingan olah raga, atau meminta pengguna untuk melakukan sesuatu seperti merekomendasikan software yang dapat di donwload atau bisa juga memberikan informasi mengenai Promo menarik seperti Diskon Harga, dll.

Cara Memasang Web Push Notification

Ternyata banyak sekali manfaat yang dapat kita rasakan saat menggunakan Web Push Notification didalam Blog kita ini yah teman-teman. Biasanya Web Push Notification ini digunakan oleh beberapa web-web besar. Ada juga Plugin Premium yang berfungsi untuk menampilkan Push Notification pada blog-blog Wordpress juga.

Lalu bagaimana jika kita menggunakan Blogger? Dan apakah bisa memasang Web Push Notification didalam blog?

Nah disini kita akan memanfaatkan Web Pihak Ketiga yang memberikan semua fungsi Web Push Notification pada blog kita secara gratis. Bagaimana langkah-langkahnya menggunakan Push Notification gratis ini untuk blog kita?

Pertama-tama, silahkan teman-teman melakukan pendaftaran terlebih dulu pada web OneSignal. Disini teman-teman dapat melakukan pendaftaran menggunakan Facebook dan Google Mail.
Pilih Add New App, dan buat nama App misalnya Kang Wira atau Notif Blog.
Setelah itu akan tampil beberapa pilihan yang dapat anda gunakan seperti Apple IOS, Google Android, Web Push, Windows dan lainnya. Pada pilihan ini, silahkan teman-teman memilih Web Push lalu tombol next.
Setelah itu teman-teman akan melihat 3 pilihan, karena disini teman-teman ingin memasang pada platform CMS blogger, jadi teman-teman bisa memilih pada pilihan yang kedua yaitu Wordpress Plugin or Website Builder lalu pilih Blogger.
Pada langkah selanjutnya, silahkan kamu isi data-data pada setiap kolom agar sesuai dengan keperluan teman-teman seperti site name, site url, default icon, dll.

Note:
Untuk option terakhir yang berisi hooks dan lainnya kamu lewati saja. lalu tekan tombol save.

Setelah itu kamu akan diberikan kode Javascript yang dapat kamu simpan kedalam template. Biasanya kode yang diberikan akan terlihat seperti dibawah ini.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "05de33e4-d0ee-4116-a4ec-c9be0f1c23b4",
    });
  });
</script>

Kode yang saya tandai diatas adalah appID yang sudah saya buat, jadi teman-teman hanya perlu ganti appID yang saya tandai dengan appID milik teman-teman. Tapi apabila teman-teman tidak mendapati kode seperti diatas, teman-teman bisa dapatkan appID pada halaman Setting dan pilih Keys & IDs dan ambil kode pada kolom ONESIGNAL APP ID.

Ohya hampir saja lupa, kode diatas, bisa teman-teman sisipkan pada template blog, tepatnya setelah kode <head> yah teman-teman. Save template lalu teman-teman bisa coba lihat hasilnya di homepage.

Saya sengaja tidak menyertakan gambar sebagai pendukung tutorial kali ini, agar teman-teman melakukan langkah-langkahnya lebih teliti. Nah untuk settingan pada Web Push Notification akan saya lanjutkan pada artikel selanjutnya yah teman-teman. Sekian dulu artikel kali ini, semoga bermanfaat untuk teman-teman.

Di Hari Ulang Tahun ke 15 Google Adsense Membongkar Rahasia untuk Sukses Menghasilkan Uang

2018-07-05T19:03:00.001+07:00

Awalnya Saya sendiri belum tahu kapan tepatnya Google Adsense ini terlahir di Dunia Internet. Nah kebetulan hari ini saya baru membuka Dashboard pada akun adsense saya nih teman-teman, disana saya melihat ada sedikit perubahan tampilan logo dari Google Adsense.

Saya coba mengarahkan pointer mouse pada Logo tersebut, dan ternyata pointer saya tiba-tiba berubah yang artinya logo ini seharusnya bisa saya klik dan pastinya ada link yang mengarahkan saya pada suatu halaman.

Karena semakin penasaran dengan logo tersebut, akhirnya saya coba klik dan taraaa......

Saya tidak diantar kehalaman baru, tapi muncul popup berupa Video yang sengaja diberikan agar ditonton oleh Pengguna Google Adsense.

Nah dari situ, saya sadar bahwa Adsense Sedang Merayakan Ulang Tahun yang ke 15 Tahun, tapi saya masih belum tahu kapan Adsense Berulang Tahun. Akhirnya saya coba membuka video tersebut pada tab baru dan melihat kapan Video tersebut di Upload oleh team Google Adsense.

Ternyata Team Google Adsense sengaja mengupload Video tersebut 3 hari yang lalu tepatnya tanggal 01 Juli 2018. Jadi kesimpulan sementara yang Saya buat saat ini adalah Google Adsense merayakan ulang tahun di tanggal 01 Juli setiap tahunnya.

Mungkin teman-teman ada yang tahu kapan tepatnya Google Adsense Berulang Tahun? Silahkan berikan Informasi tambahan yang kamu tahu melalui kolom komentar dibawah yah.

Ulang Tahun ke 15, Adsense Bongkar Rahasia !!

Yupt... sesuai dengan judul yang saya buat nih teman-teman bahwa ternyata tanpa kita sadari, Google Adsense sengaja membongkar Rahasia Terbesar agar semua pengguna Adsense seperti kita baik itu Blogger ataupun Youtuber dapat lebih mudah mendapatkan penghasilan dari Google Adsense.

Sebelum saya lanjutkan, ada baiknya teman-teman lihat dulu deh Video yang sudah diupload oleh team Adsense dibawah ini.

Setelah kamu lihat Video diatas, kira-kira kamu sudah tau belum apa saja Rahasia yang dibongkar Adsense untuk kita sebagai pengguna layanan Google Periklanan ini? Saya bahas singkat saja yah teman-teman..

1. Konten

Yups.. semua Blogger pastinya sudah tahu tentang Konten adalah Jantung dari sebuah Web/blog. Tanpa adanya konten, maka dipastikan tidak akan ada visitor yang mau berlama-lama berada didalam web atau blog kita. Pernah dengar istilah Konten adalah Raja.

2. Penayang

Tanpa adanya kita sebagai Blogger yang bertugas menayangkan dan menyajikan Konten-konten berkualitas, maka web atau blog kita tidak akan ramai oleh pengunjung. Logis banget kan ?

Teman-teman yang masih baru di dunia Blogging, bisa baca artikel saya tentang Ketentuan Menulis agar dapat membuat konten-konten yang cukup diminati oleh pengunjung.

3. Iklan

Nah.. kalau yang ini, Saya yakin semua sahabat kangwira lebih paham nih. Disini kita hanya ditugaskan untuk selalu melakukan promosi terhadap artikel yang sudah kita buat menggunakan layanan periklanan seperti Iklan Baris ataupun Google Adwords (Google Ads).

4. Tujuan

Semua orang pasti punya tujuan, seperti apa tujuan teman-teman belajar HTML, apa tujuan teman-teman belajar bisnis online, dan apa tujuan teman-teman bergabung dengan layanan Google Adsense.

Tentukan tujuan teman-teman dalam memilih calon visitor, agar hasilnya lebih maksimal mendapatkan visitor yang sesuai dengan harapan kita.

Semua tujuan inilah yang selalu membangkitkan semangat seorang blogger untuk mengejar target menulis.

5. Kenangan

Yups.. biasanya seorang blogger yang hobby menulis, belum tentu bisa sebagai sebuah kenangan. Nah ini bisa jadi sebuah ide dalam penulisan kita, agar artikel kita bisa menjadi sebuah kenangan pada saat moment-moment penting.

Misalnya saja, pada artikel blog VersiGue yang membahas tentang Sharing Session Bersama Blogger Jakarta.

Sayangnya blog VersiGue ini tidak diperpanjang dengan beberapa alasan yang tidak bisa disebutkan.

6. Komunitas

Sebuah Komunitas yang ramai menjadi sarana tepat buat kita mempromosikan konten-konten yang ada didalam web / blog. Dengan cara sharing dan open discuss didalam forum, biasanya akan membangun dan memperluas ide maupun sosialisasi terhadap sesama blogger lain.

Beberapa Komunitas Online yang bisa kamu ikuti diantaranya Ads.id dan Bersosial.com ada juga Komunitas Blogger Indonesia di WhatsApp, teman bisa langsung kirim Nomor WA teman-teman melalui Halaman Contact atau melalui Facebook saya.

7. Memulai

Ups... Untuk Hal yang satu ini, teman-teman pasti sudah lebih awal untuk memulai dalam mendaftarkan blog kamu untuk dilakukan review oleh team Google Adsense bukan? Padahal 6 ketentuan diatas belum kita capai sampai saat ini.

Jadi pada point inlah langkah pertama kita sebagai blogger untuk mendulang pundi-pundi uang dari Adsense setelah melewati 6 fase diatas. Untuk teman-teman yang belum bisa mencapai point ke-6, coba lebih sabar dalam membangun jaringannya yah.

8. Hari ini

Ada yang paham dengan Point ke-8 ini?

Menurut logika yang saya fikirkan, Team Google Adsense menjelaskan bahwa "Lakukan Hari Ini Juga" apabila web / blog kita sudah mengglobal, artinya ketika blog teman-teman sudah memiliki ranking yang baik dan visitor yang cukup memadai, tugas kita selanjutnya adalah kembangkan branding dari web yang sudah kita bangun ke berbagai negara agar lebih banyak visitor yang mengenal branding blog kita.

Apabila teman-teman menargetkan Local Visitor diawal membangun sebuah blog, cobalah mulai menargetkan International Visitor hari ini juga.

9. Perubahan

Nah pada point ini dijelaskan bahwa kita harus berani mengambil keputusan untuk melakukan sedikit perubahan pada salah satu unsur didalam blog kita nih teman-teman.

Contohnya apabila teman-teman fokus membahas tentang Bisnis Online saat awal-awal menjalankan blogging, cobalah membuat atau menambahkan topik baru sesuai kebutuhan visitor yang datang kedalam web / blog kita.

Pada point ini, kita bisa memahami Google Analytics untuk mendapatkan informasi secara detail dari aktifitas visitor di blog kita.

10. Pengalaman

Cobalah mengikuti perkembangan jaman dimana saat ini sudah banyak sekali template blog yang memanfaatkan AMP agar mempermudah visitor untuk mengakses halaman kita dengan sangat cepat.

Selain Optimasi Kecepatan, ada baiknya memperbaharui tampilan web kita agar tidak monoton dan visitor mendapatkan pengalaman baru saat beraktifitas didalam blog kita. Kamu dapat menentukan posisi Iklan pada template yang baru sesuai pengalaman kamu ketika menggunakan template blog yang lama.

11. Kontrol

Pada point ini, kamu hanya perlu menentukan Tipe Iklan seperti apa yang sering muncul di halaman blog kita. Apabila dirasa tidak cocok dengan topik pembahasan pada blog, teman-teman dapat melakukan kontrol iklan didalam dashboard Adsense pada menu Pusat Peninjauan Iklan.

Saring beberapa iklan yang dirasa tidak relevan dengan topik pembahasan blog kita. Tapi jangan sembarangan yah teman-teman, Penyaringan iklan yang asal-asalan juga dapat berdampak pada menurunnya BPK (Biaya Per Klik) Adsense lho.

12. Platform

Mulailah beralih ke platform yang lebih user friendly dan pastinya dapat mengembangkan branding blog yang sedang kita bangun seperti Wordpress, Youtube dan Aplikasi Smartphone.

Dengan begitu teman-teman bisa mendapatkan penghasilan lebih banyak dengan menambahkan platform lain untuk menyebarkan konten-konten original yang kamu buat. Karena layanan Google Adsense saat ini sudah mencangkup ke Admob (periklanan khusus aplikasi smartphone)

13. Waktu

Posisi iklan yang tepat bagi visitor khususnya pembaca setia, akan sangat menghemat waktu ketika teman-teman menggunakan fasilitas automatic ads yang ada pada layanan Google Adsense baru-baru ini.

Ketika teman-teman sudah menghemat banyak waktu tanpa harus melakukan eksperimen penempatan iklan dan gaya iklan, teman-teman justru bisa lebih fokus dalam menciptakan konten yang berkualitas agar sesuai dengan harapan pembaca yang setia.

14. Kemudahan

Point ini juga termasuk Rahasia yang di Bongkar oleh Google Adsense lho teman-teman. Menurut logika yang saya terima, Kemudahan yang harus kita jalani selanjutnya adalah Memudahkan orang lain menemukan Konten / Web kita pada mesin pencarian.

Nah kita bisa memanfaatkan Google Adwords yang rencananya akan diubah menjadi Google Ads. Teman-teman bisa menggunakan jasa Periklanan Adword agar Web / Konten kamu dapat mudah muncul pada mesin pencarian ketika orang lain mencari sesuatu yang relevan dengan konten yang kamu sajikan.

15. Merayakan

Yups.. sebagai point terakhir ini, saya menggambarkan bahwa setelah teman-teman melakukan berbagai aktifitas dari fase pada point pertama sampai point 14 diatas, seharusnya teman-teman sudah bisa merasakan dampak positif dari kerja keras.

Disitulah kita harus memanjakan blog kita untuk merayakan sebuah kesuksesan terhadap pencapaian sebuah target. Contohnya Gunakan SSL Berbayar seperti Comodo SSL atau lainnya. Upgrade SSL gratisan dari Google ke SSL Premium juga biasanya akan menambah semangat dan profesionalisme kita untuk melayani dan tetap menulis didalam blog.

Nah itulah Rahasia yang dibongkar Team Google Adsense yang saya terima dari video yang mereka Upload ke Youtube akhir-akhir ini.

Jika teman-teman memiliki logika sendiri tentang video Anniversary yang sudah kamu lihat diatas, silahkan berikan pendapat kamu pada kolom komentar dibawah ini.

Cara Melihat Kode Template Yang Digunakan Blogger Lain

2018-06-17T05:28:00.000+07:00

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.

Saya yakin teman-teman pun sudah paham betul bahwa melakukan aktifitas Re-Design template blog, kita akan merasa lebih nyaman saat ngoding menggunakan PC / Laptop bukan?

Karena selain Luas Layar pada Monitor yang cukup memadai, di PC (Personal Computer) maupun di Laptop itu kita bisa dengan mudah melakukan Multi Tasking.

Karena keterbatasan saya beraktifitas diluar rumah.. sampai-sampai pada akhirnya saya membuka jasa untuk Remote Maintenance menggunakan Team Viewers lho teman-teman. Eits.. saya bukan bermaksud untuk mempromosikan jasa saya nih teman-teman.

Nah untuk Melihat Kode pada Template Orang lain menggunakan PC itu caranya sangatlah mudah. Teman-teman bisa menggunakan 2 cara yang cukup sering dilakukan oleh teman-teman Modifikator lain, yaitu :

Melihat Kode Template Menggunakan View Page Source
Melihat Kode Template Menggunakan Inspect Code

Melihat Kode Template dengan View Page Source

Yups.. Kita bisa melihat kode pada template yang sedang digunakan oleh blogger lain hanya dengan menggunakan Menu View Page Source atau Melihat Sumber Halaman jika teman-teman menggunakan chrome berbahasa Indonesia.

Page Source pada PC dapat kita jalankan menggunakan 2 cara yaitu dengan menggunakan klik kanan pada template yang akan dilihat kodenya, lalu pilih View Page Source yang biasanya berada pada posisi ke-2 dari urutan bawah, atau bisa juga menggunakan Shortcut Keyboard dengan cara menekan tombol CTRL+U pada keyboard.

Maka Otomatis teman-teman akan membuka tab baru pada chrome dan membuka URL view-source seperti pada gambar dibawah ini.

Klik Untuk Perbesar Gambar

Pada halaman View-Source, teman-teman bisa melihat hampir seluruh kode yang ada pada template tersebut, meskipun ada beberapa kode seperti tag kondisional dan javascript yang tidak akan muncul pada halaman tersebut.

Bagi teman-teman yang mau mencoba intip Kode Template yang digunakan oleh blogger lain melalui SmartPhone, silahakn salin kode kode dibawah ini pada browser chrome di smartphone teman-teman.

view-source:https://www.kangwira.com

Silahkan teman-teman ganti url kangwira dengan url blog target.

Melihat Kode Template Menggunakan Inspect Element

Nah sekarang kita menuju Tools yang paling sering dipakai oleh teman-teman Modifikator untuk melihat dan merubah tampilan blog secara instant menggunakan Inspect Element.

Kenapa saya bilang instant?

Karena ketika kita melakukan perubahan pada kode-kode yang ada didalam template kita, pada saat itu juga kita dapat melihat hasilnya tanpa harus reload halaman. Tapi fungsi ini hanya untuk sementara lho teman-teman, jadi ketika kita melakukan refresh halaman, maka tampilan yang sudah kita modifikasi tadi akan kembali seperti awal lagi.

Untuk dapat menggunakan Inspect Element pada Browser Google Chrome, teman-teman bisa memanggil fungsi ini menggunakan 2 cara juga nih teman-teman, yaitu dengan cara klik kanan lalu pilih menu Inspect atau bisa juga menggunakan Shortcut Keyboard dengan menekan tombol CTRL+SHIFT+I pada keyboard.

Maka teman-teman akan melihat dan memulai pekerjaan teman-teman menggunakan Inspect Element ini seperti contoh pada gambar dibawah ini.

Melihat contoh gambar Inspect Element diatas, teman-teman bisa melihat banyaknya Menu yang menurut saya sudah cukup lengkap nih untuk melakukan berbagai maintenance terhadap blog kita nih teman-teman.

Tapi sepertinya tidak dalam postingan ini saya membahas tentang fungsi-fungsi menu yang disediakan didalam Inspect Element pada Google Chrome ya teman-teman.

Tapi sayangnya saya masih belum menemukan cara agar kita bisa menjalankan Inspect Element menggunakan SmartPhone nih teman-teman, mungkin teman-teman ada yang sudah tahu cara menjalankan Inspect Element dari Smartphone?

Jangan sungkan untuk berbagi pengalaman modifikasi template pada kolom komentar yah.

Menurut pendapat Saya bahwa melakukan Modifikasi template tanpa menggunakan Inspect Element, rasanya seperti Makan Nasi tanpa Piring

Sekian dulu pembahasan kita tentang Cara Melihat Kode Template Blog yang Digunakan oleh Blogger lain nih. Kembangkan Kreatifitas kamu ya teman-teman.

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

2018-06-14T01:02:00.001+07:00

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.

Bandung saat itu terasa sangat dingin karena hujan yang tak ada hentinya sejak pagi hingga sore hari. Disaat yang bersamaan itu pula saya bersama keluarga memang berencana untuk pulang ke daerah Puncak Bogor (Ceritanya sih Mau Mudik).

karena kondisi cuaca yang tidak memungkinkan untuk kami membawa kendaraan masing-masing, akhirnya saya dan keluarga berbondong-bondong sengaja menggunakan kendaraan umum agar sampai tujuan dengan selamat.

Naah disinilah awal dari rasa kekecewaan saya nih teman-teman.

#JadiBaik di Bulan Baik

Sejak dari Bandung pun sebenarnya saya sudah memepersiapkan segala keperluan, seperti PowerBank, Pulsa, Minyak Angin bahkan sampai Kantong Plastik (kalau yang ini, teman-teman pasti paham lah keperluannya untuk apa).

Tapi ternyata perjalanan saya itu tidak sesuai dengan ekspektasi lho teman-teman.

Dipertengahan jalan, saya mendapatkan pesan dari sahabat KangWira bahwa Blog KangWira tiba-tiba tidak bisa di akses. Ini mungkin karena keteledoran saya saat edit template semalam.

Karena alasan itulah saya harus membuka Laptop untuk perbaikan coding pada template KangWira karena saat itu mengalami sedikit masalah yang tidak disengaja sampai blog kangwira tidak dapat diakses.

Teman-teman pernah mengalami permasalahan seperti pada gambar diatas? Simak terus ya sampai akhir.

Disini, saya harus menggunakan kuota lebih karena harus tethering dari Handphone Pribadi agar Laptop bisa Online untuk melakukan maintenance dadakan.

Tapi karena posisi saya sedang dijalan dan tidak bisa turun untuk sekedar membeli kuota, akhirnya saya coba isi kuota internet Telkomsel saya menggunakan Internet Banking BCA, tapi lagi-lagi saya lupa membawa Key BCA untuk dapat melakukan transaksi i-banking.

Ada saja kendala yang saat itu membuat saya semakin bertambah panik.

Saya berusaha untuk tetap sabar sambil mencari solusi, sampai akhirnya saya teringat dengan Aplikasi TCASH Wallet yang selalu saya gunakan untuk mempermudah transaksi-transaksi berbelanja di Banyak Merchant TCASH.

#pakeTCASH Merupakan Solusi yang Tepat

Rasanya kepanikan saya saat itu #jadiBaik karena adanya Saldo TCASH yang kebetulan mencukupi untuk menambahkan Kuota Internet Dadakan.

Untuk teman-teman yang belum menggunakan TCASH, teman-teman bisa membeli Stiker TCASH TAP lalu mengaktifkannya menggunakan Aplikasi TCASH WALLET. Bahkan cara menggunakan TCASH pun sangat User Friendly lho teman-teman.

Sesaat setelah aktifnya paket internet itu, saya kembali memperbaiki Coding Template KangWira. Kesalnya lagi, ternyata hanya 1 kode kesalahan yang membuat saya uring-uringan di tengah perjalanan itu.

Kode inilah yang menyebabkan Blog KangWira mengalami unAccess saat itu.

<b:if cond='datas:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>

Hanya kelebihan huruf S pada struktur data:blog.searchLabel, bisa berakibat fatal terhadap blog kita lho teman-teman. Kesalahan kecil ini memang tidak menampilkan notifikasi "Error" didalam HTML Editor Blog, maka dari itu kita harus tetap teliti terhadap kode-kode yang kita edit yah teman-teman.

KESIMPULAN

Disaat-saat terdesak, selalu saja ada TCASH yang membantu Kesulitan kita. Apalagi di Bulan yang Baik ini kita harus berlajar meningkatkan kesabaran.

#JadiBaik di Bulan Baik #pakeTCASH

Untuk Teman-teman yang ingin #JadiBaik di Bulan Baik, bisa mencoba #pakeTCASH sebagai layanan keuangan digital dari Telkomsel yang berupa uang elektronik. Karena TCASH berfungsi sebagai rekening bank yang fleksibel dan tentunya tanpa adanya bunga lho teman-teman.

Tips Mengatur Jadwal Auto Posting dengan Fungsi Schedule Post yang ada di dalam Blog

2018-06-09T18:09:00.000+07:00

Beberapa minggu yang lalu ada sahabat Kang Wira yang menanyakan bagaimana cara melakukan posting secara otomatis dihari tertentu tanpa harus login kedalam akun blognya.

Saat itu saya menjawab dengan sangat singkat yaitu bisa dengan menggunakan Schedule Post yang sudah disediakan dalam pengaturan Blog. Bagi teman-teman yang masih baru di dunia blogging mungkin belum tahu adanya fungsi Schedule Post yang saya maksud kali ini, jadi baca terus sampai selesai yah teman-teman.

Sebenarnya untuk memposting artikel secara otomatis di waktu tertentu, teman-teman bisa menentukan waktu yang tepat dengan menggunakan Fungsi Schedule Post yang bisa kamu lihat didalam Post Editor tepatnya disebelah kanan layar monitor.
(lihat gambar dibawah)

Coba perhatikan gambar disamping ini, terlihat ada sebuah menu Jadwal yang dapat kita manfaatkan untuk melakukan Auto Posting artikel yang akan kita buat.

Mungkin teman-teman yang saat ini sedang baca artikel saya pun sudah sangat paham dengan fungsinya bukan?

Selanjutnya kita hanya perlu menentukan tanggal dan waktu yang kita inginkan agar fungsi jadwal ini berjalan sesuai harapan kita. Fungsi Schedule Post ini sebenarnya sudah lama ada pada system blogger, hanya saja masih belum di optimalkan penggunaannya.

Maka dari itu, di artikel kali ini saya tidak hanya memberikan tutorial menggunakan Fungsi Schedule Post didalam blogger, tapi saya juga akan memberikan sedikit tips agar Artikel yang akan kita posting secara otomatis nanti akan lebih optimal.

Tips Mengatur Schedule Post Blogger

Melanjutkan pembahasan pada paragraf sebelumnya, bahwa fungsi ini sudah bisa berjalan hanya dengan cara menentukan waktu dan tanggal nya saja maka artikel kita sudah bisa di publikasikan secara otomatis.

Pada artikel saya yang berjudul Apakah Seorang Blogger Harus Memiliki Target Pencapaian, saya sedikit menjelaskan bawha kita sebagai penulis blog, harus memiliki target banyaknya artikel yang akan kita buat.

Apabila teman-teman blogger yang membaca artikel ini ternyata belum memiliki Target, silahkan baca dulu artikel Target Seorang Blogger yang ada di blog ini.

Ketika kita sudah membuat target Pencapaian Artikel, maka seharusnya stok artikel yang sudah kamu siapkan sebelumnya, sudah bisa kita setting waktu dan tanggal nya agar sesuai dengan jadwal yang kita inginkan.

Kapan Waktu yang Tepat untuk Publish Artikel?

Menentukan waktu yang tepat untuk Publish Artikel itu memang tidak mudah lho teman-teman karena ternyata kita juga perlu melakukan research untuk target pembaca terlebih dulu.

Pastikan semua artikel yang akan kita siapkan sudah sesuai dengan Target Pembaca Blog kita yah teman-teman.

Menurut Research yang saya buat beberapa minggu lalu, ternyata kita sebagai penulis perlu menentukan waktu yang tepat untuk Posting Artikel pada jam-jam berikut ini

No.	Waktu	Jam (WIB)
1.	Pagi	08.00 - 10.00
2.	Siang	14.00 - 15.00
3.	Sore	16.30 - 18.00
4.	Malam	20.30 - 22.00

Melihat pada tabel yang saya buat diatas, kamu juga bisa mencoba untuk melakukan research time demi menentukan Kapan Waktu yang Tepat untuk Posting Artikel. Lalu perlahan kamu praktekkan sendiri ya teman-teman.

Ingat 1 hal yang wajib kamu perhatikan, yaitu Konsistensi untuk Tetap Menulis.
Karena masih banyak sekali blogger yang selalu mengeluh soal Konsistensi.

Semoga Bermanfaat.

Memasang Widget Tombol Like FansPage Melayang

2018-04-29T06:49:00.001+07:00

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.

Pada artikel sebelumnya saya sudah bahas tutorial Cara Memasang Facebook Messanger kedalam blog, jadi buat teman-teman yang mau mempermudah pengunjung untuk menggunakan fasilitas chat via blog, bisa kamu ikuti tutorial pada artikel sebelumnya.

Bagi teman-teman yang mau melihat contoh demo nya, silahkan tekan tombol dibawah ini.

Nah untuk Memasang Widget Tombol Like FansPage Melayang ini kamu bisa ikuti beberapa langkah mudah dibawah ini.

Masuk kedalam Dashboard Blogger teman-teman dan masuk Tema dan pilih Edit HTML.
Letakkan kode dibawah ini tepat sebelum kode </head>.

<style type="text/css">
#fbLikeBox{
background-color: #FFFFFF;
border: 4px solid rgb(210,210,210);
bottom: 0;
float: left;
height: auto;
margin-bottom: 10px;
margin-right: 100px;
position: fixed;
padding-bottom: 6px;
right: 0;
width: auto;
z-index: 999;
}
.fbLikeBox-close{
color:#333!important;
position:absolute;
top:1px;
right:1px;
width:20px;
height:20px;
line-height:20px;
text-align:center;
font-size:11px;
}
.slideUpfbLikeBox{
animation-name:slideUpfbLikeBox;
-webkit-animation-name:slideUpfbLikeBox;
animation-duration:1s;
-webkit-animation-duration:1s;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
visibility:visible!important;
}
@keyframes slideUpfbLikeBox{
0%{transform:translateY(100%)}
50%{transform:translateY(-8%)}
65%{transform:translateY(4%)}
80%{transform:translateY(-4%)}
95%{transform:translateY(2%)}
100%{transform:translateY(0%)}
}
@-webkit-keyframes slideUpfbLikeBox{
0%{-webkit-transform:translateY(100%)}
50%{-webkit-transform:translateY(-8%)}
65%{-webkit-transform:translateY(4%)}
80%{-webkit-transform:translateY(-4%)}
95%{-webkit-transform:translateY(2%)}
100%{-webkit-transform:translateY(0%)}
}
</style>

Selanjutnya salin kode Widget Tombol Like FansPage Melayang dibawah ini sebelum kode </body>

<div class='slideUpfbLikeBox' id='fbLikeBox'>
    <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times' /></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/blogkangwira' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogkangwira&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div>
</div>
<script type='text/javascript'>
function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>

PERHATIAN

Jangan lupa ganti id fanspage yang saya tandai pada kolom JavaScript diatas terlebih dulu.

Setelah itu, simpan template.

Sekian dulu tutorial Memasang Widget Tombol Like FansPage Melayang. Semoga mudah dipahami dan di praktekkan yah teman-teman. Jangan lupa berikan pendapat teman-teman pada kolom komentar dibawah ini.

Solusi Menghilangkan Spasi atau Ruang Kosong dibawah Gambar

2018-04-23T11:42:00.000+07:00

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.

Teman-teman biasanya akan mengalami hal ini ketika kamu menempelkan gambar pada bagian sidebar. Karena biasanya pada section sidebar selalu diberikan background berwarna, misalnya Putih atau Abu-abu.

Jika teman-teman perhatikan contoh yang sudah saya sisipkan berikut ini, teman-teman akan melihat background putih tepat dibawah gambar pada sidebar sebuah blog.

(perhatikan pada kotak berwarna merah)

Mengesalkan bukan apabila melihat ruang putih tersebut muncul dibawah gambar seperti pada contoh yang sudah kamu lihat tadi?

Hal kecil ini sebenernya sangat berpengaruh terhadap nilai kebersihan dari sebuah blog. Hal ini tentunya akan berdampak baik pada first impression para pengunjung blog.

Nah untuk teman-teman yang pernah mengalami hal ini, teman-teman bisa ikuti beberapa langkah dibawah ini untuk mengatasi adanya Spasi atau Ruang Kosong dibawah Gambar.

Cara Hapus Background Putih dibawah Gambar

Masuk kedalam akun Blog kamu terlebih dulu.
Masuk kedalam Menu Edit HTML yang ada didalam Dashboard blog kamu.
Setelah itu cari kode CSS img{ dan tambahkan kode display: block; didalam kode CSS img tadi.

Teman-teman bisa lihat contoh kodenya dibawah ini.

img {
     width: 200px;
     height: 200px;
     display: block;
}

Kode diatas hanya sebuah contoh saja yah teman-teman. Mungkin ada banyak perbedaan kode pada setiap css yang digunakan dalam setiap templatenya, jadi teman-teman hanya perlu lakukan langkah ketiga saja.

Selesai.

Cara Upload Javascript dan CSS ke Github itu Mudah Banget

2018-03-27T05:16:00.000+07:00

Github dikenal sebagai layanan penginangan web bersama untuk proyek pengembangan perangkat lunak yang menggunakan sistem pengontrol versi Git dan layanan hosting internet. Pengertian tentang Github ini saya dapat dari Wikipedia.

Github sendiri sering digunakan oleh banyak developer untuk menghosting file-file pendukung seorang pengembang (Developer). Banyak sekali project yang bisa kita temui disini, misalnya saja Bootstrap, JQuery, NodeJS, Microsoft, bahkan Google pun menggunakan Github lho teman-teman.

Banyak Template Creator yang menggunakan Github sebagai media hosting JQuery, JavaScript, CSS, dan lainnya untuk menjalankan perintah yang dibuat, salah satunya adalah Owner dari KompiAjaib dan Owner dari ArlinaDzgn yang cukup dikenal dari hasil template-templatenya.

Kamu yang punya hobi sebagai Template Modifikator juga perlu memiliki akun Github untuk menghosting file-file JS, CSS dan lainnya.

Beberapa waktu yang lalu, teman-teman blogger bisa mengupload file-file Javascript dan CSS melalui Google Drive. Tapi berita buruknya bahwa google tidak lagi mengizinkan File JS dan CSS yang di hosting untuk dipanggil kedalam sebuah project.

Maka dari itu, saya sendiri menggunakan Github sebagai tempat hosting JS dan CSS untuk beberapa Project yang sedang saya kembangkan.

Nah buat teman-teman yang masih merasa bingung dengan cara upload file JS dan CSS ke Github, bisa kamu perhatikan beberapa langkah mudah dibawah ini.

Cara Daftar Github

Langkah pertama yang harus kamu lakukan adalah Mendaftar Github disini. Tapi jika kamu sudah punya akun Github, teman-teman bisa langsung melanjutkan langkah kedua dibawah ini.

Cara Upload JS dan CSS ke Github

Sebenarnya simple banget kok cara uploadnya, sama seperti Upload Foto ke akun sosial media kamu. Coba kamu perhatikan tanda + (plus) disamping thumbnail profile kamu didalam dashboard github, lalu pilih New Repository. (lihat contoh)

Setelah itu, teman-teman akan diantar untuk menampilkan halaman seperti pada contoh gambar dibawah ini.

Isi beberapa kolom berikut sesuai contoh pada gambar diatas yah teman-teman

Judul untuk Repository (Project)
Isi Deskripsi Repository (Project)
Pilih Public
Centang pada kotak Initialize this repository with a README
Klik Tombol Create repository

Nah setelah klik tombol Create Repository, teman-teman akan diantar pada halaman selanjutnya untuk mengupload atau membuat file baru di github. Untuk Upload JS, teman-teman bisa pilih tombol upload file. Lihat contoh gambar dibawah ini.

Setelah itu, upload file JS dan CSS yang kamu butuhkan lalu tekan tombol commit changes.

Cara Membuat File JS Di Github

Jika teman-teman tidak memiliki file JS eksternal dan mau membuat file JS baru di Github, teman-teman bisa langsung tekan tombol Create New File.

Setelah itu, teman-teman hanya tinggal masukkan judul repository dan isi JavaScript nya saja pada kolom yang saya tandai pada gambar dibawah ini.

Setelah kamu buat file nya, jangan lupa untuk klik tombol Commit New File yang lokasinya sama seperti tombol Commit Changes pada saat kamu mencoba untuk upload file ke Github.

Jika sudah, sekarang saatnya kamu menyalin url file yang kamu upload tadi dengan cara klik kanan pada file yang sudah kamu buat tadi, lalu pilih copy link address.

Setelah itu, kita tinggal melakukan langkah akhir yaitu melakukan Raw Link File dari Github ke RawGit.

Dan letakkan link file JS yang sudah kamu copy tadi pada kolom yang tersedia, lalu pilih URL yang sudah di Raw pada kolom Use This URL in production.

Setelah itu, kamu bisa memanggil file JS yang kamu upload tadi kedalam template blog kamu menggunakan perintah seperti dibawah ini sebelum kode <body>.

<script src="Letakkan LINK RawGit Disini"></script>

Selesai... Selamat bereksperimen ya teman-teman.

Jangan lupa berikan pendapat kamu pada kolom komentar dibawah ini. Jangan lupa untuk berlangganan artikel KangWira, agar selalu mendapatkan notifikasi langsung melalui email kamu apabila saya update artikel terbaru disini. Semoga Bermanfaat

10 Alasan Mengapa DomaiNesia Menjadi Penyedia Layanan Hosting Terbaik di Indonesia

2018-03-13T22:45:00.000+07:00

Domain dan hosting sangatlah erat kaitannya dengan dunia internet. Siapa yang belum tahu apa itu domain, hosting dan website? Jika diibaratakan sebuah rumah, website merupakan rumah tersebut.

Rumah harus memiliki wilayah agar dapat ditinggali. Wilayah tersebut dapat berupa perumahan bukan? Nah, coba bayangkan kita memiliki sebidang tanah (kapling) pada perumahan tertentu.

Kapling tersebut diibaratkan sebagai Hosting. Hosting merupakan suatu bagian tanah yang sudah dipetak-petak dengan ukuran tertentu yang akan dijadikan tempat untuk mendirikan bangunan. Setelah kita mendirikan rumah (website) di atas kapling tanah (Hosting), maka kita membutuhkan alamat rumah.

Alamat rumah tersebut dinamakan domain. Domain merupakan sebuah alamat yang akan menuntun pengunjung menuju ke lokasi kapling atau bangunan. Biasanya domain dalam dibuat dalam bentuk websitesaya(dot)com.

Untuk mendapatkan hosting murah dan domain murah bukanlah perkara mudah. Kita harus memperhatikan beberapa fitur, harga, lokasi server dan kualitas yang ditawarkan dari penyedia jasa layanan domain murah dan hosting murah.

Di Indonesia, banyak penyedia jasa layanan domain dan hosting yang berlomba-lomba untuk memberikan harga murah, tapi...

Bagaimana dengan kualitasnya?
Bagaimana fitur yang ditawarkan?
Apakah sesuai dengan kebutuhan website?
Apakah server sering down?
Apakah pihak penyedia jasa memberikan garansi uptime server?
Beberapa pertanyaan tersebut sering terlontar di benak kita bukan?

Maka dari itu, kenali dahulu sebelum membeli.

Salah satu penyedia hosting murah Indonesia yang sudah berdiri sejak tahun 2009 yaitu DomaiNesia. DomaiNesia merupakan perusahaan rintisan dengan layanan registrasi nama domain, web hosting, dan layanan web yang berfokus terhadap kualitas layanan tanpa mengesampingkan efisiensi biaya.

Hingga saat ini, DomaiNesia terus berupaya memberikan pengalaman layanan terbaik serta membangun sistem automasi yang efektif dan efisien.

Tidak tanggung- tanggung, DomaiNesia telah melayani lebih dari 45.000 customer dari seluruh penjuru Indonesia dan mancanegara. DomaiNesia memiliki beberapa produk hosting terbaik, domain murah, SSL, VPS serta Instant Deploy Web Apps.

Mengapa harus DomaiNesia?

Ada beberapa alasan mengapa harus memilih DomaiNesia sebagai partner bisnis yang baik.

1. 100% Enterprise SSD Paling Mutakhir

DomaiNesia menggunakan teknologi SSD (Solid State Drive) sebagai media penyimpanan. Sehingga akan membuat performa website kita secepat kilat.

Hal ini dikarenakan teknologi SSD sangat jauh lebih baik dibanding media penyimpanan seperti HDD (Hard Disk Drive).

2. Terdapat Cloud Backup dan Data Restore

Jangan takut data kita hilang ketika salah melakukan konfigurasi atau apapun. DomaiNesia menjamin data website para pelanggan karena telah menggunakan teknologi backup data ke cloud.

Sehingga kita akan lebih tenang dalam mengelola website kita nantinya.

3. Unlimited Bandwidth

Unlimited bandwidth untuk semua hosting di DomaiNesia. Hosting terbaik akan menyediakan bandwidth tanpa batas agar menjamin kelancaran website pelanggannya.

Dengan bandwidth yang unlimited, sebanyak apapun pengunjung yang mengakses webiste kita nanti akan tetap cepat.

4. Memiliki 4 Lokasi Server

Dibandingkan dengan penyedia hosting lainnya, DomaiNesia memiliki beragam lokasi server yang bisa kita pilih, yaitu US (Dallas), JP (Tokyo), SG (Singapura), dan ID (Jakarta).

Para pelanggan diberikan kebebasan dalam memilih lokasi server yang diinginkan tanpa adanya perbedaan harga.

5. Transparansi Status Server

DomaiNesia merupakan salah satu penyedia layanan hosting terbaik yang berani secara transparan menampilkan status server secara real time. Sehingga nantinya para pelanggan dapat memonitor server dengan melihat halaman status server yang disediakan DomaiNesia.

Tidak semua penyedia layanan hosting menampilkan atau menginformasikan status servernya secara real time.

6. Garansi 99,99% Uptime dan Garansi Uang Kembali

DomaiNesia memberikan garansi 99.99% server uptime yang dapat kita lihat di halaman status server.

Selain itu, DomaiNesia juga memberikan garansi uang kembali selama 10 hari tanpa syarat apapun. Sehingga apabila kurang puas dengan layanan hosting yang diberikan, kita bisa mengajukan klaim garansi uang kembali.

7. Sudah Terintegrasi dengan CloudFlare dan Gratis SSL

Dari segi keamanan, DomaiNesia telah terintegrasi dengan CloudFlare, dan sebagai pelengkap, para pelanggan akan mendapatkan SSL secara GRATIS.

Tentu hal ini akan membuat kita menjadi lebih hemat dalam mengeluarkan biaya dalam membangun website yang bagus dan murah.

8. Fitur Instant Deploy

Masih awam dalam membuat website? Tenang saja, para pelanggan DomaiNesia dapat membuat website berbasis CMS hanya dengan sekali klik menggunakan fitur Instant Deploy DomaiNesia.

Banyak CMS yang bisa kita pilih seperti WordPress, OpenCart, Prestashop dan sebagainya. Nantinya kita hanya akan diminta memilih CMS apa yang ingin digunakan dan memasukan username dan password. Setelah hosting aktif, webiste sudah terinstall.

9. Support PHP, Node.js, Ruby dan Python

Banyak penyedia jasa lainnya yang hanya support website yang dibuat dengan bahasa pemrograman PHP saja. Tapi tidak di DomaiNesia, kita dapat membangun website berbasis Ruby dan Python.

Oleh karena itu, DomaiNesia juga cocok untuk para developer website yang sudah ahli.

10. Pelayanan 24 jam dan Full Panduan

DomaiNesia hadir untuk melayani customer selama 7/24 non stop. Para pelanggan bebas bertanya seputar layanan domain dan hosting melalui support tiket, live chat di website, kirim email maupun melalui telepon.

Selain itu, DomaiNesia juga menyediakan beragam panduan yang bisa kita ikuti. Panduan ini dirancang khusus untuk pelanggan DomaiNesia dengan bahasa yang mudah dipahami dan dijelaskan step by step secara detail.

KESIMPULAN

DomaiNesia merupakan penyedia layanan hosting murah Indonesia yang terbukti mampu mempertahankan kualitas layanan dengan harga yang terjangkau.

Layanan web hosting yang ditawarkan memiliki beragam fitur-fitur esensial yang dapat diandalkan. Apabila kamu belum menentukan layanan hosting dan domain untuk membangun website, DomaiNesia adalah jawaban yang tepat.

Modifikasi List Label Menjadi 2 Kolom

2018-03-10T13:47:00.000+07:00

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.

Baik, kita langsung saja praktekkan yah teman-teman.

Langkah pertama yang harus teman-teman jalankan yaitu membuat sebuah widget label pada menu tata letak. Sesuaikan Lokasi penyimpanannya terlebih dulu yah. Lalu ikuti configurasi labelnya seperti gambar dibawah ini.

Perhatikan kotak merahnya pada gambar diatas yah teman-teman.

Setelah itu, teman-teman buka menu tema lalu pilih Edit HTML.
Salin kode CSS dibawah ini, dan letakkan sebelum kode ]]></b:skin>.

.Label{display:block;width:100%;background:#fff;margin:0 auto;padding:10px 0}
.Label .widget-content{padding:5px 0;margin:0}
.Label ul{list-style-type:none;margin:0 0;padding:0}
.Label ul li{float:left;width:42.5%;margin:0 7px 5px 0;color:#616060;text-decoration:none;padding:6px;display:block;text-align:left;text-indent:0;font-size:14px;background:#FFF;border:1px solid #EFEFEF;text-transform:capitalize;border-radius:1px;-moz-border-radius:1px;-webkit-border-radius:1px}
.Label a:link,.Label a:visited{color:#2b2b2b}

Simpan template lalu lihat hasilnya.

Setelah kamu lihat hasilnya, teman-teman bisa coba mengubah sedikit demi sedikit kode CSS yang ada agar mendapatkan hasil yang sesuai harapan kamu.

Sekian dulu tutorial modifikasi List Labelnya yah teman-teman. Kalau ada yang belum paham, silahkan bertanya melalui kolom komentar dibawah ini yah.

Ohya.. jangan lupa untuk berlangganan dan share apabila artikel ini bermanfaat untuk teman-teman.

Menambahkan Tombol Whatsapp Custom yang Melayang dalam sebuah Template Blog

2018-02-25T05:42:00.000+07:00

Melihat dari statistik harian diblog ini, saya melihat ada beberapa visitor yang mampir ke blog kangwira dengan mencari Query Floating Whatsapp Button atau Tombol Whatsapp Melayang.

Jadi di artikel ini saya coba untuk membantu teman-teman untuk mempercantik tampilan Blog nya dengan menggunakan Whatsapp Button Melayang ini.

Malam tadi saya menyempatkan diri untuk membuat sebuah Whatsapp floating button menggunakan Icon SVG setelah itu saya coba pasang di blog dummy saya, hasilnya pun sudah cukup memuaskan menurut saya.

Tapi setelah saya coba pasang di template blog kangwira ini, ternyata icon SVG nya tidak muncul sama sekali. Mungkin karena memang ada CSS yang konflik, saya kurang paham juga sih dan sampai sekarang masih saya cari tahu penyebabnya.

Kenapa saya menggunakan Icon SVG didalam Tombol Whatsapp Melayang?

Alasannya sangat singkat sih sebenarnya, karena SVG dibuat untuk dapat membantu meningkatkan kecepatan blog. Pada dasarnya, SVG tidak perlu memanggil CSS Ekternal seperti Font Awesome.

Tapi karena saya sendiri mengalami bahwa icon SVG Whatsapp ini tidak muncul di tempate kangwira. Jadi saya menyiapkan 2 script yang bisa kamu pakai salah satu yah teman-teman.

Oke kita langsung saja masuk ke codingannya.

Floating Whatsapp Button w/ SVG

Langkah pertama, pastikan teman-teman sudah login dan berada di dalam halaman edit HTML di dashboard masing-masing.

Setelah itu, coba salin kode HTML dibawah, lalu letakkan didalam elemen footer pada template yang kamu gunakan.

<a target='_blank' expr:href='&quot;https://api.whatsapp.com/send?phone=6282310856967&amp;text=Assalamualaikum%20Kang%20Wira..&quot;' class="float-whatsapp"><svg>
    <path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
</svg></a>

Setelah itu, salin juga CSS berikut ini, dan letakkan dibawah kode HTML diatas. Kenapa saya menyarankan untuk menyimpan CSS ini tepat dibawah Kode diatas, karena agar kode dibawah ini menimpah CSS yang ada di dalam template teman-teman secara paksa.

<style>.float-whatsapp svg{position:absolute;right:8px;top:11px;width:25px;height:24px}
.float-whatsapp svg path{fill:#fff}
.float-whatsapp {z-index:999;cursor:pointer;width:50px;height:50px;border-radius:50%;background:green;text-align:center;position:fixed;bottom:1.7rem;left:0.8rem;border:2.5px solid #fff;box-shadow:1px 1px 10px 1px #333}</style>

Simpan template yang sudah kamu edit tadi, lalu lihat hasilnya. Saya juga sudah menyiapkan demo Tombol Whatsapp Versi SVG ini di blog dummy saya.

beberapa kasus umum dalam penggunaan Icon SVG ini, adalah sulitnya menyesuaikan ukuran dan letak icon terhadap media yang disiapkan. Jadi apabila posisi Iconnya belum sesuai, teman-teman tinggal menyesuaikan class pada CSS berikut ini
.float-whatsapp svg yang ada pada kolom CSS diatas.

Floating Whatsapp Button w/ Font Awesome

Yaap.. pada dasarnya Font-Awesome memanggil CSS Ekternal dari CDN yang sebenarnya dapat mengurangi kecepatan blog. Tidak sedikit blogger yang mengeluhkan kecepatan loading blognya menurun karena menggunakan Font-Awesome.

Tapi saya sarankan teman-teman untuk menggunakan Tombol Whatsapp Melayang versi Font-Awesome ini sebagai alternatif saja apabila tidak dapat menggunakan Versi SVG diatas.

kelebihan menggunakan Versi Font Awesome ini, teman-teman bisa dengan mudah mengatur ukuran iconnya.

Nah, jika teman-teman menggunakan versi yang ini, maka teman-teman wajib memanggil CSS Font-Awesome dengan cara menyisipkan kode dibawah ini setelah kode <head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Oke.. kita lanjutkan memasang Tombol Whatsappnya yah teman-teman, agar bisa melayang di kiri bawah pada template kamu.

Salin kode HTML dibawah ini sama seperti cara diatas yah teman-teman.

<a target="_blank" expr:href='&quot;https://api.whatsapp.com/send?phone=6282310856967&amp;text=Assalamualaikum%20Kang%20Wira&quot;' class="float-whatsapp">
<i class="fa fa-whatsapp"></i></a>

Lalu sisipkan kode CSS ini dibawah kode HTML Versi Font-Awesome diatas.

<style>.float-whatsapp{cursor:pointer;width:50px;height:50px;border-radius:50%;background:green;text-align:center;position:fixed;bottom:1.7rem;left:1.8rem;border:2.5px solid #fff;box-shadow:1px 1px 10px 1px #333}
.float-whatsapp i{color:#fff;z-index:99;line-height:50px;font-size:150%}</style>

Simpan template, maka hasilnya harusnya menjadi seperti tombol dibawah ini.

Untuk pengaturan kata-kata didalam widget Whatsapp nya, teman-teman bisa modifikasi kalimat yang sudah saya tandai diatas.

Nah teman-teman bisa coba salah satu versi diatas yah. Apabila masih belum bisa menampilkan sesuai dengan harapan teman-teman, silahkan berikan komentar di bawah ini yah.

Jangan lupa untuk berlangganan artikel Kang Wira agar selalu mendapatkan artikel terbaru lainnya yang saya rangkum agar lebih mudah di praktekkan.

Sekian dulu artikel kali ini, Semoga bermanfaat.

Senang Membuat / Modifikasi Template Blog Berarti Harus Mengenal CSS Specificity

2018-02-21T07:12:00.000+07:00

Ternyata bukan hanya untuk teman-teman yang berprofesi sebagai Template Creator, kamu yang punya hobby Memodifikasi Template Blog atau lebih dikenal sebagai Re-Design Template itu wajib mengenal apa itu CSS Specificity.

Kenapa saya mengatakan bahwa CSS Specificity itu wajib kamu ketahui? Di pertengahan paragraf dalam artikel ini sudah saya jelaskan alasannya, jadi simak terus ya.

Pertama-tama saya mau tanya ke teman-teman, pernah gak sih merasa kebingungan disaat mau modifikasi template blog nya? Sudah di edit marginnya lah atau edit font style nya lah, tapi tampilan templatenya gak mau berubah..

Yess... Akhirnya teman-teman ikut merasakan apa yang pernah saya alami beberapa bulan yang lalu.

Kenapa kali ini saya membahas tentang CSS Specificity? Alasannya sih karena saya mau teman-teman tidak merasakan kebingungan seperti apa yang saya rasakan pada saat itu.

Banyak template creator yang sudah senior sebenarnya tidak memerlukan CSS Specificity lagi untuk membangun sebuah template. Tapi akan ada saatnya nanti seorang Template Creator membutuhkan CSS Specificity agar memudahkan pekerjaannya.

Dari Tadi Bahas CSS Specificity, tapi saya rasa teman-teman masih belum paham yah?

Saya coba jelaskan dari Definisi nya dulu deh yah

Setiap Deklarasi CSS (Selector) memiliki berat yang berbeda-beda. Berat tersebut menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector.

Pada definisi diatas sudah dijelaskan bahwa ternyata masing-masing element yang kita buat nanti pasti memiliki berat yang berbeda-beda.

Misalnya element HTML yang ukuran beratnya bisa kita anggap 1 (satu), ada pula Class didalam sebuah CSS bisa kita anggap 10x lipat dari berat HTML, dan ID didalam CSS kita anggap 100x lebih berat dari HTML. Ukuran-ukuran inilah yang akan menentukan seberapa spesifik elemen yang kita buat.

Pastinya teman-teman masih bingung yah? Coba perhatikan tabel berikut ini deh.

Inline	CSS ID	CSS Class	Element
1000	100	10	1

Setelah kamu lihat tabel diatas, kamu harus coba salin kode pada syntax dibawah ini kedalam notepad lalu save dengan extensi HTML.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam illum voluptates maiores recusandae minima nulla quaerat modi debitis, nisi perferendis, eum, laborum deleniti earum voluptatem accusamus architecto nostrum quam ut!</p>

<style>
p {color: blue;}

p {color: red;}
</style>

Pertanyaanya adalah : Warna apa yang akan tampil pada paragraf yang sudah kamu simpan tadi setelah kamu lihat hasilnya pada browser kamu?

Yapp... Paragraf yang tampil di browser kita akan menjadi berwarna Merah. Lalu kenapa bukan Biru?
Karena jika saya menuliskan 2 elemen p pada syntax css, maka hasilnya browser akan menimpah selector yang pertama.

Nah ada lagi nih kasus kedua. Coba teman-teman perhatikan syntax berikut.

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam illum voluptates maiores recusandae minima nulla quaerat modi debitis, nisi perferendis, eum, laborum deleniti earum voluptatem accusamus architecto nostrum quam ut!</p>

<style>
#p1 {color: blue;}

p {color: red;}
</style>

Maka hasilnya yang benar adalah Paragraf kita akan menjadi berwarna biru. Alasannya karena id='P1' itu lebih spesifik dari element p.

Naah kita harus tau juga nih gimana sih cara ngitungnya? Coba perhatikan untuk CSS ID #P1.

Id P1 jika dihitung beratnya mencapai 100, sedangkan P hitungan beratnya hanya 1 karena p adalah suatu elemen html sedangkan id P1 ada didalam elemen P yang berarti bisa juga dianggap dengan kode CSS p#p1 yang nilai beratnya adalah 101. Berikut ini saya berikan Screenshotnya agar teman-teman bisa lebih paham.

Melihat hasil Screenshot diatas, teman-teman bisa membandingan mana yang lebih besar ukurannya ? Menurut perbandingan pada gambar diatas, kita bisa simpulkan bahwa CSS yang berisi p#p1 akan lebih besar nilainya dibandingkan #p1 saja.

Nah kalau teman-teman penasaran mau menghitung CSS Specificity, bisa coba kunjungi situsnya dengan klik tombol dibawah ini.

Untuk tabel inline, akan saya bahas pada artikel selanjutnya yah. Sampai disini saya harap teman-teman semua sudah paham dengan kegunaan CSS Specificity yah.

Apabila masih ada yang mau teman-teman tanyakan, bisa langsung tanya pada kolom komentar yah. Jangan lupa untuk Berlangganan artikel kangwira supaya kamu tidak ketinggalan tips dan trik menarik lainnya seputar Modifikasi Template Blog.

Apa Fungsi Hreflang dan Bagaimana Cara Memasang Hreflang Kedalam Template Blog

2018-02-18T02:48:00.000+07:00

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.

Nah sekarang kita lanjutkan pembahasan kali ini tentang Apa Fungsi Hreflang dulu yah teman-teman.

Apa itu Hreflang?

Hreflang adalah sebuah atibut html yang digunakan disetiap web/blog agar dapat melayani pengguna dari seluruh dunia, dengan alasan konten yang disajikan akan langsung diterjemahkan oleh system google karena ditunjukan bagi pengguna di semua wilayah.

System nya hampir sama dengan Google Translate sih sebenarnya, tapi dengan menggunakan hreflang ini kita tidak perlu memasang widget translate lagi didalam template blog.

Banyak situs web yang melayani pengguna dari seluruh dunia dengan konten yang diterjemahkan atau ditujukan bagi pengguna di wilayah tertentu. Google menggunakan atribut rel="alternate" hreflang="x" untuk menyediakan bahasa atau URL regional yang benar dalam hasil Penelusuran.

Memasang Hreflang Kedalam Template Blog

Pemasangan Hreflang ini sebenarnya tidak akan terasa efek nya oleh kita sendiri, itu sih sepengetahuan saya yah teman-teman. Jadi efek nya akan terlihat bagi ip-ip dari luar indonesia saja.

Paham kan maksud saya?

Oke.. kita langsung saja lihat kode nya dibawah ini.

<link expr:href='data:blog.url' hreflang='ar-ae' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en-ca' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en-au' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='id-US' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='id-HK' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='de-AE' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='de-ES' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en-GB' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='fr-be' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='nl-be' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='EN-id' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en-ie' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='id-UK' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='id-id' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='be' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='de' rel='alternate'/>

Kode HrefLang diatas bisa kamu sisipkan setelah kode <head> pada HTML Template, setelah itu lalu simpan template.

Selesai..

Untuk masalah valid dan tidak validnya kode-kode HrefLang diatas, akan saya share di artikel berikutnya yah.

Buat teman-teman yang masih bingung dengan penjelasan saya diatas, silahkan berikan pendapat dan komentar yang baik melalui kolom komentar dibawah ini.

Jangan lupa Share jika artikel ini bermanfaat ya.

Trik Membuat Halaman Sahabat ala Kang Wira

2018-02-12T00:55:00.001+07:00

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.

Apabila teman-teman mau lihat dulu tutorial saya sebelumnya, bisa langsung mengunjungi link dibawah ini yah

Buat teman-teman yang sudah pernah baca tutorialnya diatas silahkan abaikan dan mari kita lanjutkan tutorial Membuat Halaman Sahabat ala Kang Wira.

Ohya, buat teman-teman yang mau lihat terlebih dulu penampakannya, bisa langsung klik tombol DEMO di bawah ini yaa.

Cara Membuat Halaman Sahabat ala Kang Wira

Karena disini saya hanya menggunakan HTML dan CSS saja, jadi teman-teman tidak perlu edit pada template yang kamu gunakan saat ini yah.

Kamu cukup membuat halaman baru dengan judul Sahabat, lalu pilih Metode HTML yah jangan Compose seperti pada contoh gambar disamping.

Naah Setelah itu salin semua kode yang sudah saya sisipkan pada syntax dibawah ini dan letakkan langsung pada halaman yang baru saja kamu buat tadi.

Eh.. tunggu dulu..

Disini saya menyiapkan 2 Kode HTML yang bisa kamu gunakan sesuai dengan lebar template kamu.

Maksudnya kalau template yang kamu gunakan mendukung Full Width Page alias Halaman tanpa Sidebar seperti pada halaman Sahabat Kang Wira, teman-teman bisa coba Syntax yang pertama. Gunanya supaya Widgetnya terbagi menjadi 2 kolom.

Sedangkan untuk teman-teman yang template nya belum mendukung Full Width Page alias Halamannya masih menampilkan Sidebar, silahkan teman-teman menggunakan Kode pada Syntax yang kedua.

Paham kan maksud saya?
Kalau masih belum paham, bisa langsung tanyakan pada kolom komentar yah. Berikut ini langsung saja saya sisipkan Kode khusus Full Width Page

<div class="kolbod">
<div class="kolsah">

<!--kolom1 start-->
<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>

<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->

<!--kolom1 end-->

</div>
<div class="kolsah">

<!--kolom2 start-->
<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>

<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->

<!--kolom2 end-->

</div>
</div>

<!--CSS LINK PARTNER-->
<style type="text/css">
.kolbod {float:left; width:100%;}
.kolsah{float:left;width:50%;padding:10px;margin-bottom:20px;}
@media (max-width:728px){.kolsah{width:100%;padding:0;margin-bottom:20px;}}
.sahabat{max-height:120px;min-height:120px;background:#fff;padding:4px 20px 4px 4px;margin-left:35px;margin-bottom:10px;border-radius:50px 0 30px 50px;box-shadow:0 0 8px #888}
.sahabat img{margin-left:-35px;margin-top:6px;border: 5px solid #e74c3c;}
.sahabat hr{border-color: #e74c3c;display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: 79px;margin-right: auto;border-style: solid;border-width: 1px;}
.sahabat p1{display: block;white-space: nowrap;font-size: 130%;font-weight: 800;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;margin-left: 90px;margin-top: 10px;line-height: 25px;}
.sahabat p1 a{text-decoration:none}
.sahabat p1 a:link{color:#e74c3c}
.sahabat p1 a:visited{color:#e74c3c}
.sahabat p1 a:hover{color:#a81b0d}
.sahabat p2{display:block;max-height:53px;overflow:hidden;font-size:85%;margin-left:90px;word-spacing:3px;letter-spacing:1px;line-height:1.4}
.proff{float:left;position:static;width:100px;height:100px;border: 5px solid #e74c3c;border-radius:30px;box-shadow:0 0 10px #777;}
.sahabat img:hover{-webkit-animation:shake 0.4s;animation:shake 0.4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
</style>

Pada kode diatas, saya buat khusus untuk 2 kolom. Jadi untuk menambahkan widget nya, teman-teman bisa menggunakan kode dibawah ini dan letakkan pada tulisan tambahkan kode disini.

<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>

Jika sudah, langsung saja simpan halaman danklik tombol pratinjau untuk melihat hasil sementara. Apabila sudah cocok, langsung publikasikan halaman Sahabat yang baru kamu buat tadi. Maka hasilnya bisa kamu lihat pada gambar dibawah ini.

Sudah Paham ya ?

Naah berikut ini adalah Kode Khusus untuk Halaman yang masih menampilkan Sidebar pada halaman statis blognya. Jadi teman-teman yang belum paham edit HTML, bisa langsung menerapkan kode dibawah ini nih kedalam halaman Sahabat yang kamu buat.

<div class="kolbod">

<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>

<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->


<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->


</div>

<!--CSS LINK PARTNER-->
<style type="text/css">
.kolbod {float:left; width:100%;}
.sahabat{max-height:120px;min-height:120px;background:#fff;padding:4px 20px 4px 4px;margin-left:35px;margin-bottom:10px;border-radius:50px 0 30px 50px;box-shadow:0 0 8px #888}
.sahabat img{margin-left:-35px;margin-top:6px;border: 5px solid #e74c3c;}
.sahabat hr{border-color: #e74c3c;display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: 79px;margin-right: auto;border-style: solid;border-width: 1px;}
.sahabat p1{display: block;white-space: nowrap;font-size: 130%;font-weight: 800;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;margin-left: 90px;margin-top: 10px;line-height: 25px;}
.sahabat p1 a{text-decoration:none}
.sahabat p1 a:link{color:#e74c3c}
.sahabat p1 a:visited{color:#e74c3c}
.sahabat p1 a:hover{color:#a81b0d}
.sahabat p2{display:block;max-height:53px;overflow:hidden;font-size:85%;margin-left:90px;word-spacing:3px;letter-spacing:1px;line-height:1.4}
.proff{float:left;position:static;width:100px;height:100px;border: 5px solid #e74c3c;border-radius:30px;box-shadow:0 0 10px #777;}
.sahabat img:hover{-webkit-animation:shake 0.4s;animation:shake 0.4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
</style>

Simpan Postingan lalu pratinjau dulu, lihat hasilnya harusnya akan menjadi seperti dibawah ini.

Untuk menambahkan widgetnya sih sebenarnya sama saja seperti pada syntax kode tambahan diatas yah.

Saya anggap teman-teman bisa dengan mudah mempraktekkan tutorial kali ini. Jangan sungkan untuk meninggalkan komentar kamu apabila kamu merasa bingung dalam mempraktekkan tutorial Membuat Halaman Sahabat ala Kang Wira ini.

Silahkan berlangganan Artikel Kang Wira secara gratis dengan mengisi kolom Berlangganan Gratis dibawah ini ya. Supaya kamu gak ketinggalan tutoraial menarik lainnya seputar Modifikasi Template Blog.

Apa yang Harus Diketahui Sebelum Belajar Internet Marketing Untuk Pemula

2018-02-11T00:35:00.001+07:00

Belajar internet marketing secara gratis bisa menjadi salah satu jalan bagi teman-teman yang ingin mempelajari internet marketing dan ingin meraih kesuksesan dalam bisnis kamu.

Tidak pernah ada kata terlambat untuk belajar.

Apapun itu, saat teman-teman memiliki niat untuk belajar, maka lakukanlah tanpa perlu merasa terlambat. Lebih baik terlambat belajar daripada tidak belajar sama sekali.

Hal ini juga berlaku untuk mempelajari internet marketing. Belajar internet marketing memang sangat penting terlebih bagi kamu yang berada di bidang bisnis atau sedang ingin memulai fokus di bidang internet marketing ini.

Bila teman-teman adalah seorang pemula, ada baiknya kamu belajar banyak hal tentang internet marketing dari beragam sumber.

Belajar internet marketing gratis juga dapat menjadi cara bagi teman-teman dalam mengenal internet marketing serta mempelajarinya lebih dalam lagi.

Jadi, meskipun kamu memiliki keterbatasan, misalnya dari segi biaya, hal ini bukan menjadi alasan kamu untuk tidak mempelajarinya karena belajar bisa bersumber dari mana saja.

Bahkan seperti yang sudah dikatakan sebelumnya bahwa belajar secara gratis mengenai internet marketing bagi para pemula bisa dijadikan pilihan bagi teman-teman.

Ada banyak sumber serta banyak cara yang dapat kamu manfaatkan untuk memperoleh banyak ilmu mengenai internet marketing.

Info di bawah ini pun mungkin dapat menjadi referensi serta ide bagi teman-teman dalam mempelajari internet marketing.

Mengenal Internet Marketing

Sebelum teman-teman memulai Belajar internet marketing untuk pemula, ada baiknya mengenal dulu apa itu internet marketing. Dengan begitu kamu akan memperoleh gambaran jelas dan pasti mengenai apa itu internet marketing sebelum kamu mulai melangkah untuk belajar lebih banyak dan lebih dalam lagi.

Secara sederhana, internet marketing ialah strategi pemasaran atau marketing dengan memanfaatkan media atau teknologi internet. Secara singkat, internet marketing adalah promo secara online atau pemasaran secara online dengan media internet.

Jadi, jika teman-teman memasarkan suatu produk, jasa, maupun konten atau event secara online atau lewat internet, aktivitas tersebut sudah dapat dikatakan sebagai internet marketing.

Bagaimana dengan posting di sosial media seperti instagram, Facebook, dan sebagainya? Tentu saja termasuk dalam kategori promosi secara online atau internet marketing.

Jadi, sebenarnya internet marketing artinya cukup sederhana.

Jangan hanya membatasi internet marketing dengan sesuatu yang rumit dan sulit dipahami, karena sebetulnya internet marketing adalah hal yang sangat sederhana.

Beragam Cara Belajar Internet Marketing

Untuk belajar internet marketing secara mudah dan sederhana, ada beragam cara dan metode yang bisa digunakan. Tentu saja, jika teman-teman adalah seorang pemula, maka juga dapat Belajar internet marketing secara gratis.

Salah satu cara yang paling sering dilakukan ialah dengan cara otodidak atau mempelajarinya sendiri secara mandiri, yakni dengan cara membaca buku, artikel, belajar dari video-video di YouTube, dan sebagainya.

Kemudian biasanya dengan belajar secara mandiri teman-teman dapat memperoleh banyak sekali pengalaman. Mengamati orang-orang atau rekan yang juga sudah sukses lebih dulu di bidang ini juga bisa dilakukan.

Cara lainnya ialah kursus-kursus internet marketing yang banyak ditawarkan. Dengan begitu, teman-teman bisa langsung menggali ilmu dari ahlinya kemudian bisa juga langsung mempraktekkannya saat itu juga.

Untuk kursus pun ada dua macam, yakni kursus secara online maupun kursus secara offline. Tentu saja, setiap orang memiliki preferensi masing-masing dalam belajar.

Belajar Internet Marketing Gratis

Mempelajari internet marketing memang hal yang tidak sulit, namun teman-teman perlu memahaminya secara tepat.

Bahkan belajar internet marketing secara gratis bisa menjadi salah satu langkah awal untuk meraih kesuksesan dalam bidang ini bahkan untuk para pemula.

Kamu dapat mempelajarinya secara otodidak atau belajar pada orang-orang yang kamu kenal yang sudah sukses dalam bidang ini.

Jangan Lupa Verifikasi Blog ke Google Webmaster Tools

2018-02-06T16:07:00.000+07:00

Hari ini saya mendapat sebuah pesan via Whatsapp Messanger dari teman saya yang bertanya tentang cara Verifikasi Blog kedalam Webmaster Tools.

Saking keasikan modifikasi template, akrirnya seorang blogger lupa bahwa ternyata blog nya harus memiliki verifikasi dari Google WebMaster agar blognya bisa lebih cepat diindex pada mesin pencarian Google.

Meskipun sudah banyak tutorial nya di google, ternyata saya lupa membuat postingan ini untuk pengunjung setia Kang Wira. Maka dari itu hari ini akan saya ulas Cara Mudah Memverifikasi Blog ke Google Webmaster Tools.

Nah sebelum kita lanjutkan pembahasannya, saya mau tanya dulu nih sama teman-teman yang sudah membaca artikel singkat ini.

Apakah kamu sudah memiliki Property pada Google WebMaster Tools?

Property yang saya maksud ini adalah menambahkan URL/Link Blog kita ke dalam list webmaster pada akun kita. Kalau teman-teman belum menambahkan URL/Link Blog itu, silahkan buat sekarang juga.

Caranya cukup dengan mengunjungi link Google WebMaster Tools, lalu cari tombol Tambahkan Properti disebelah kanan layar kamu. Setelah itu masukkan URL blog teman-teman pada popup yang muncul di halaman itu.

Catatan : http:// atau https:// harus ditulis dengan benar

Saya anggap teman-teman sudah selesai membuat properti baru di google webmaster tools nya yah.

Langkah selanjutnya, teman-teman akan langsung dibawa pada halaman Verifikasi Kepemilikan. Disana teman-teman hanya perlu memilih Metode Alternatif lalu pilih Tag HTML dan salin Tag HTML yang sudah diberikan oleh WebMaster Tools, seperti contoh gambar dibawah ini.

Setelah itu buka menu EDIT HTML didalam Dashboard Blog, dan letakkan Tag yang sudah kamu salin tadi tepat setelah kode <head>

Ohya, bagi teman-teman yang sudah memasang All in One SEO Pack didalam template nya, silahkan cari tulisan google-site-verification pada template, lalu gantikan 1 baris HTML tersebut dengan Tag yang tadi kita dapat dari WebMaster.

Saya anggap teman-teman sudah selesai mempraktekkan langkah diatas yah. Maka langkah selanjutnya, kita cukup kembali pada halaman Webmaster yang tadi, lalu klik tombol verifikasi nya.

Selesai.

Jika teman-teman sudah menggunakan Custom Domain, teman-teman bisa juga memverifikasi blog menggunakan menu Penyedia Nama Domain. Tapi sejauh ini sebenarnya sudah cukup sih menurut saya.

Langkah selanjutnya teman-teman bisa membaca artikel saya tentang Cara Menambahkan Sitemap kedalam Google Webmaster

Cukup sekian dulu artikel singkat ini yah teman-teman. Semoga artikelnya mudah di mengerti.

Apabila masih banyak yang belum dipahami, silahkan tanyakan pada kolom komentar dibawah ini. Jangan lupa untuk Berlangganan Artikel Kang Wira dengan cara mengisikan alamat email kamu pada kolom Berlangganan dibawah ini.

Apabila bermanfaat, jangan lupa juga untuk share artikel ini ke facebook atau twitter kamu yaa.

Infinite AMP Responsive Blogger Template

2018-02-01T08:35:00.002+07:00

Sekarang ini lagi jamannya Blogger yang menggunakan Template AMP yaa? Maka dari itu, kali ini Kang Wira akan membagikan template AMP buatan Arlina Design yang cukup menggoda mata kita.

Tampilan yang simple, flat, elegan, responsive dan tentunya fast loading ini memang cukup dibanggakan oleh para Blogger (Termasuk saya)

Eit.. saya mau bagikan template ini ke teman-teman, tapi tolong jangan di akui yaa.. hargai Template Creator dengan tetap memasang Credit pada Footer nya.

Berikut ini adalah tombol untuk melihat contoh Template nya

Template AMP memang dikenal tidak valid dengan HTML5, maka dari itu teman-teman harus paham dulu cara menggunakan template AMP ini yah.

Features	Availability
Responsive	True Cek
Google Testing Tool Validator	True Cek
Mobile Friendly	True Cek
Dynamic Heading	True
Adsense	True
Valid Schema.org	True
High CTR	True
Personal Blog	True
2 Column Grid	True
Auto Read More with Thumbnail	True
Responsive Ad Slot	True
Breadcrumbs	True
Footer Link	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Back to Top Button	True
Shortcodes	True
Unlimited Page Numbered	True
Custom Contact Form Widget	True
Responsive Sitemap Widget	True

Berminat untuk menggunakan Template AMP Infinite ini secara gratis? Langsung saja download yah dengan menggunakan tombol Download di bawah ini

Download

Memasang Iklan Adsense Billboard dibawah Menu Navbar Blog

2018-01-26T23:10:00.001+07:00

Sebenarnya tidak terfikir sebelumnya untuk bikin tutorial Pasang Billboard Adsense didalam blog. Tapi karena sudah ada Sahabat KangWira yang request tadi pagi, jadi saya sempatkan untuk menulisnya saat ini.

Spot iklan Billboard ini memang dapat meningkatkan nilai BPK yang cukup bagus lho teman-teman. Hal ini saya buktikan sendiri saat pertama kali menggunakan Iklan Adsense Billboard dalam blog ini.

Bahkan menurut pendapat dari sahabat saya yang menjadi salah satu pakar Adsense menyarankan untuk memasang spot iklan Billboard ini didalam blog jika ingin meningkatkan pendapatan Adsense nya.

Tapi perlu diketahui bahwa meningkatnya BPK pada adsense itu harus seimbang dengan jumlah traffic yang baik yah teman-teman.

Blogger yang memiliki system open source ini sebenarnya memang lebih nyaman untuk modifikasi tampilan templatenya. Kita cukup memberikan sedikit sentuhan pada kode CSS yang sudah ada, maka tampilan blog kita akan menjadi lebih indah untuk dipandang oleh visitor.

Blog KompiAjaib milik Kang Adhy sebenarnya sudah pernah membahas tutorial untuk memasang slot iklan Billboard ini dengan menggunakan fungsi Show Hide, karena beliau menyarankan untuk memasang Iklan Billboard ini sebelum header blog.

Menurut pendapat Kang Adhy, Tidak semua orang menyukai iklan, jadi beliau menyisipkan fungsi Show Hide pada script yang dibagikan pada tutorialnya agar pengunjung dapat dengan mudah menyembunyikan Billboard jika dirasa mengganggu.

Bagaimana jika kita mau pasang Billboard Banner ini dibawah Menu Navigasi pada Blog seperti pada gambar dibawah ini?

Nah saat ini, Blog Kang Wira akan memberikan Tutorial Pasang Iklan Billboard Adsense tanpa fungsi Show Hide yang diletakkan dibawah menu navigasi.

Sebenarnya hanya tinggal dihapus saja script Show Hide pada Script yang dibuat oleh kang Adhy itu, jadi saya hanya sedikit memodifikasi script itu.

Bagaimana Cara Pasang Iklan Billboard di bawah Navbar Blog?

Karena ukuran Iklan Billboard ini memang cukup besar, maka kita akan menggunakan Unit Iklan berukuran 970x250 dan 300x250. Apakah ini tandanya kita memerlukan 2 unit iklan didalam billboard tersebut?

Tidak.. Adsense kan sudah menyediakan Unit iklan Responsive, jadi kita cukup membuat 1 unit iklan responsive pada dashboard adsense, lalu salin kode nya kedalam notepad dulu yah teman-teman.

Jika sudah dibuat unit iklannya, maka selanjutnya kita buka dashboard blog kita. Lalu buka Tema dan pilih Edit HTML.

Cari kode </head> pada template menggunakan CTRL+F agar lebih mudah.
Selanjutnya, salin kode CSS dibawah ini dan letakkan tepat diatas kode </head>.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<style type='text/css'>
/* Banner Billboard */
.banner_billboard{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.wiraresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.banner_billboard{max-width:320px;}
.wiraresponsive{width:300px;height:250px;}
}
</style>
</b:if>

Selanjutnya cari kode </nav> atau sejenisnya yang hampir sma seperti pada contoh gambar dibawah ini. Karena masing-masing template pasti berbeda struktur elemen HTML nya.
Klik untuk perbesar gambar
Jika sudah ketemu, salin HTML dibawah ini lalu letakkan setelah kode <div class='clear'/> yang sudah kamu masukkan kebawah Navigasi Menu template kamu sesuai Gambar.

<!-- TOP Banner -->
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<div class='banner_billboard'>
   <ins class='adsbygoogle wiraresponsive adsense' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' style='display:block'/>
   <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
</div>
</b:if>

Perhatikan kode yang saya tandai diatas. Wajib kamu ganti xxxxxxxxxx dengan data-ad-client dan data-ad-slot='' yang sudah kamu salin kedalam notepad tadi

Setelah itu coba save template, lalu periksa hasilnya.

Jika terlihat kurang sesuai dengan template yang kamu gunakan, bisa disesuaikan CSS nya agar cocok dengan keinginan teman-teman, seperti margin, padding, position dan lainnya.

Mungkin sekian dulu tutorial pasang iklan Billboard nya. Semoga tidak ada kendala saat praktek yah teman-teman.

Jika ada yang mau ditanyakan, bisa tanya di kolom komentar ya. Jangan lupa untuk tetap berlangganan di artikel blog ini untuk mendapatkan notifikasi ketika ada postingan terbaru dari blog ini melalui email kamu.

Teknik Dasar Menyisipkan Gambar dengan Benar Kedalam Artikel Blog

2018-01-24T03:39:00.001+07:00

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.

Teman-teman sudah selesai baca artikel yang saya rekomendasikan tadi? Cepat sekali teman-teman membacanya?

Baiklah saya anggap teman-teman sudah paham dengan teknik dasar menyisipkan link kedalam gambar itu yah.

Bagaimana Cara Unggah Gambar yang Baik kedalam Artikel Blog?

Sebenarnya dihalaman Editor Blog yang sering kamu gunakan untuk menulis, sudah disediakan tombol upload image yang dapat mempermudah kinerja kita sebagai penulis.

Tapi Apakah cara menyisipkan gambar kedalam artikel kamu itu sudah cukup benar?

Saya rasa sudah.
Hanya saja perlu ditambahkan sedikit ramuan ajaib agar sesuai dengan ketentuan WebMaster.

Pada Gambar diatas, bisa kamu lihat betapa mudahnya untuk jatuh cinta.

Upss.. Maksud saya, betapa mudahnya kita menyisipkan sebuah gambar kedalam artikel blog. Masing-masing Link yang sudah saya tandai diatas bisa kamu gunakan untuk menyisipkan Gambar kedalam editor postingan kamu yah.

Upload : Untuk Mengunggah Gambar dari Komputer kita kedalam artikel blog.
From This Blog : Mengambil Gambar yang sudah pernah diunggah kedalam blog.
From Google Album Archive : Menyisipkan Gambar yang akan diunggah dan tersimpan di Album Google Drive.
From Your Phone : Menyisipkan Gambar dari Gambar yang pernah diunggah menggunakan Hanphone.
From Your WebCam : Sepertinya tidak perlu dijelaskan, teman-teman sudah paham yaah.
From a URL : Menyisipkan Gambar Menggunakan URL yang sudah ada.

Dari ke-6 list diatas, saya akan membahas cara yang pertama saja yah teman-teman yaitu Upload. Naah untuk langkah selanjutnya kamu bisa perhatikan langkah-langkahnya pada gambar dibawah ini.

Pada gambar diatas, saya memilih None pada Image Alignment alasannya saya tidak mau membebankan loading artikel karena adanya inline CSS.

Saya memilih Original pada Image Size dengan alasan agar ukuran gambar yang tampil di dalam artikel kita memiliki resolusi yang cukup baik untuk dipandang oleh visitor.

Inline CSS

Inline CSS adalah metode penambahan kode CSS kedalam HTML menggunakan atribut style. Inline CSS ini tidak disarankan oleh beberapa Developer karena dapat merusak salah satu elemen pada beberapa halaman HTML. Berikut ini adalah contoh Inline CSS:

<div style="clear: both; text-align: center;"></div>

Nah sampai sini, apakah ada kalimat penyampaian saya yang sulit dipahami oleh teman-teman?

Berarti sudah paham dengan Teknik Dasar ini yah?

Kalau begitu, cukup sampai disini dulu pembahasan kita tentang Teknik Dasar Menyisipkan Gambar dengan Benar Kedalam Artikel Blog. Semoga mudah dipahami yah.

Ohya, jangan lupa untuk berlangganan artikel KangWira yah supaya kamu tidak ketinggalan postingan terbaru dari saya.

Apabila teman-teman masih merasa bingung untuk memahami pembahasan diatas, jangan sungkan untuk bertanya pada kolom komentar dibawah ini. Jangan lupa berikan kritik dan saran untuk saya, supaya menambah semangat saya untuk menulis di blog ini.

Tips Menarik dalam Memilih Template Gratis Untuk Blogger

2018-01-20T23:18:00.003+07:00

Template merupakan salah satu faktor pendukung untuk mendongkrak kualitas dan performa dari sebuah blog. Template yang menarik biasanya akan langsung mencuri perhatian pengunjung, tapi bukan hanya dari segi designnya saja yaa teman-teman.

Bagus atau Tidak-nya Design dari sebuah template, sebenarnya belum tentu baik untuk digunakan pada blog kita. Karena kita juga harus bisa menilai dan mencocokan topik pembahasan yang ada didalam blog agar sesuai dengan template pilihan kita.

Nah lhooo.. Bingung kan teman-teman? Coba simak terus yaah..

Saya akui, sudah banyak sekali Template Creator menciptakan Template Blog yang keren baik versi gratis maupun versi premiumnya. Ssttt.. bahkan ada juga lho ~~clonner~~ tukang foto copy yang membajak template - template keren mereka.

Pada dasarnya blogger yang baru saja terjun bebas didunia blogging akan sangat agresif dalam mencari template keren dan eye catchy untuk memanjakan pengunjung yang datang.

Termasuk Saya Sendiri !

Saking agresifnya, sampai bingung harus pilih yang mana bukan? Itu karena terlalu banyak template Ganteng dan Cantik yang diciptakan untuk memenuhi kebutuhan teman-teman blogger.

Sayangnya setelah mendapatkan template yang keren, bukannya fokus membuat konten yang menarik juga berbobot tapi malah menyibukkan diri dengan aktifitas re-design agar template yang digunakan dapat terlihat unik dari template lain yang sejenis.

Dan hal itu jugalah yang saya rasakan sejak pertama kali terjun didunia ini. Sampai akhirnya saya menemukan template invision yang masih saya gunakan sampai saat ini dan saya baru sadar bahwa Template yang saya gunakan ini sebenarnya sudah Keren banget meskipun tidak di modifikasi lagi.

Bicara soal Modifikasi atau Re-Design Template, saya rasa kita sudah terlalu banyak membuang banyak waktu saat memilih template. Jadi jangan habiskan banyak waktu untuk modifikasi template yah.

Manfaatkan waktu yang kita punya untuk membuat artikel yang menarik dimata pengunjung.

Maka dari itulah, kali ini saya akan membahas Tips Menarik dalam Memilih Template Gratis Untuk Blogger khususnya bagi yang baru terjun kedunia blogging.

Template yang Mobile Friendly atau lebih dikenal Responsive bisa dibuka di desktop ataupun Smartphone. Bahkan saya masih sering melihat sampai saat ini masih banyak web/blog yang memiliki template keren tapi belum mendukung Mobile Friendly.
Pada umumnya, kita akan memilih Template Blog yang SEO Friendly atau Mendukung Optimasi SEO, adanya optimisasi Meta Tags dan Heading Tags justru akan sangat memudahkan teman-teman untukk fokus dalam sktifitas menulisnya bukan?
Jangan ketinggalan nih, Template yang User Friendly juga akan membuat nyaman mata pembaca, tidak menyilaukan dan juga tidak membuat bingung pembaca dengan navigasi tersembunyi atau apalah-apalah.

Tips Memilih Template Gratis untuk Blogger

Naah akhirnya kita sampai juga pada point utama didalam artikel ini nih teman-teman. Untuk teman-teman yang langsung membaca pada point utama ini, saya sarankan untuk membaca point sebelumnya diatas yah.

Perhatikan Versi Mobile-nya

Yupt.. Point pertama ini memang patut dipertimbankan nih teman-teman. Karena setiap kali menemukan template yang nikmat dipandang, biasanya kita akan melihat dari segi desainnya terlebih dulu kan?

Kalau desain templatenya Keren yaa langsung download, nah kalau desain templatenya biasa aja paling di skip dulu terus buka tab baru buat cari template lagi.

Saking banyaknya template keren yang kita download, mungkin bisa bikin folder download di komputer kita kepenuhan sama Template Gratisan nih teman-teman.

Ada yang mengalami fase seperti ini? Yaaa.. saya juga mengalami hal yang sama kok teman-teman.

Tapi terkadang kita terlalu nyaman melihat struktur template pada versi desktop saja lho teman-teman.

Padahal versi mobile nya masih banyak yang harus di revisi agar nyaman dipandang oleh visitor.

Misalnya begini, ada beberapa template yang saya lihat ternyata sengaja menampilkan widget / banner / iklan di sidebarnya pada versi mobile.

Padahal sebenarnya widget itu tidak terlalu penting untuk ditampilkan pada versi mobile, bahkan parahnya lagi bisa membuat tampilan blog versi mobile kita menjadi berantakan lho.

Atau misalnya begini, pada versi desktopnya, semua tampilannya sudah sangat cocok dengan yang kita harapkan. Tapi ternyata container (jarak tepi layar ke body template) pada versi Mobilenya terlalu besar, sehingga akhirnya seorang blogger akan mulai disibukkan dengan modifikasi template.

Buang-buang waktu kan jadinya?

Jadi mulai sekarang, kita harus perhatikan juga desain versi desktopnya nih teman-teman. Supaya blog kita akan tetap nyaman dilihat oleh pengunjung dari mana saja.

Bandingkan dengan Template Sejenis

Ini juga tidak kalah menariknya nih teman-teman, karena biasanya beberapa template yang kita dapat langsung dari template creator, biasanya memang harus di modifikasi lagi sehingga mendapatkan hasil yang maksimal.

Tapi jika teman-teman mendapatkan template dari para template modifikator, biasanya akan ada penambahan-penambahan widget dan script yang dapat membuat tampilan blog kita menjadi lebih ganteng dan cantik seperti adminnya.

Baik itu dilihat dari versi Desktop ataupun dari versi Mobile.

Bukankah melanggar hak cipta dari Template Creator?

Tenang saja, hal ini tidak akan melanggar Hak Cipta karena para template Modifikator akan tetap menyisipkan Link Credit pada footernya untuk memberikan Backlink kepada Template Creatornya.

Resiko seperti Loading Template yang semakin berat atau bahkan berkurangnya kinerja SEO pada template, tidak dapat kita hindari lho teman-teman.

Karena sebagian banyak Modifikator itu tugasnya hanya merubah dan merapihkan desain yang ada, juga mengurangi dan menambahkan feature yang ada pada template originalnya.

Lihat Feature Shortcodenya

Point ketiga ini menurut saya sangat dibutuhkan bagi teman-teman yang ingin fokus menulis, menulis, dan terus menulis.

Ada yang tahu alasannya?

Yapps... Shortcode ini sengaja dibuat oleh template creator untuk memudahkan semua blogger untuk bisa fokus menulis dan berkreasi.

Bahkan dengan adanya shortcode ini, seorang blogger tidak harus pusing menghafal puluhan bahkan ratusan tag HTML untuk mempercantik artikel yang ditulis.

Nah, biasanya akan selalu ada pertanyaan seperti ini bagaimana cara melihat adanya Shortcode pada template yang akan kita download nih kang?

Sebenarnya gampang saja sih.. teman-teman bisa lihat contoh artikel saya yang berjudul Download Template Blogger N Light Responsive 2016, pada artikel itu, teman-teman bisa melihat sebuah tabel ditengah artikel yang isinya adalah beberapa feature yang disiapkan oleh template tersebut.

Jika teman-teman melihat adanya ShortCode pada tabel itu, berarti teman-teman tidak perlu dipusingkan lagi untuk memahami tag html untuk mempercantik artikel yang kita tulis.

Cara menggunakan Shortcode pun sebenarnya relatif mudah kok teman-teman. Teman-teman bisa lihat beberapa Shortcode yang sering digunakan pada halaman Kamus HTML yang sudah saya sediakan.

Nah untuk menerapkannya di dalam artikel kita, teman-teman cukup membuka editor blog nya lalu pilih metode HTML seperti contoh gambar disamping ini.

Setelah itu, teman-teman bisa coba tuliskan kode berikut ini sebagai contoh.

<a href="https://www.kangwira.com">Kang Wira</a>

Jika kita ingin menampilkan kode yang sama seperti contoh diatas, biasanya kita harus melakukan Parse dulu bukan? Tapi jika pada template tersebut sudah disediakan feature shortcode, kita cukup menambahkan kode <xmp> saja.

Berikut ini saya contohkan penulisannya.

<xmp><a href="https://www.kangwira.com">Kang Wira</a></xmp>

Maka hasilnya akan sama seperti ini juga sih sebenarnya:

Lebih mudah lah pastinya dan gak ribet untuk parse kode dulu kan?

Nah itu hanya sebagai contoh saja yah teman-teman. Kita bisa kreasikan postingan kita agar menjadi artikel yang tidak bosan untuk dibaca oleh pengunjung.

Untuk saat ini, sekian dulu tips yang saya berikan dalam memilih template gratis. Semoga mudah dipahami yah teman-teman.

Jika ada pertanyaan, jangan sungkan untuk bertanya pada kolom komentar dibawah artikel ini yah teman-teman. Dan jangan lupa untuk tetap berlangganan artikel blog kang wira, agar tidak ketinggalan tips menarik lainnya.

Trik Membuat Halaman Khusus Color Picker Online yang Simple

2018-01-17T04:12:00.002+07:00

Kali ini saya kembali membagikan trik Simple dalam membuat Halaman Khusus Color Picker Online didalam sebuah Blog. Sebenarnya tutorial kali ini saya buat dengan tujuan untuk memodifikasi Template Blog.

Yaa.. lagi-lagi saya membahas trik modifikasi template blog nih ya.

Sssttt... sebenarnya masih banyak blogger yang masih menggunakan software editing sepert photoshop dan coreldraw untuk mencari hex color yang sesuai kebutuhan. Dan saya termasuk diantara blogger yang saya sebut barusan.

Selain Software Graphic Design, saya juga biasanya menggunakan Color Picker yang disediakan oleh Google kok.

Color Picker yang saya bagikan kali ini adalah kumpulan warna yang familiar dan biasa digunakan oleh teman-teman Web Design untuk memodifikasi tampilan web/blog agar sesuai dengan keinginannya.

Saya sendiripun terkadang menggunakan Halaman Color Picker ini setiap kali ingin memodifikasi widget dan template blog saya. Teman-teman bisa lihat contohnya pada halaman Color Picker di blog ini atau bisa langsung klik tombol Lihat Warna dibawah ini

Teman-teman sudah lihat Halamannya bukan? Menurut pendapat kamu bagaimana? Coba tuliskan pendapat kamu tentang halaman Color Picker yang sudah teman-teman lihat barusan di kolom komentar dibawah yah.

Nah bagi teman-teman yang mau memasang widget Color Picker ini di Halaman Blog kamu, caranya gak susah kok teman-teman. Ikuti langkahnya dibawah ini yah.

Pastikan Teman-teman sudah Login kedalam akun Bloggernya dulu yah
Setelah itu buka menu Halaman, lalu buatlah halaman baru dengan judul "Warna Pilihan" atau apa saja terserah teman-teman
Lalu pada mode Editor, pilih HTML, jangan pilih Compose yah, nanti tidak hasilnya malah bikin kamu gregetan
Salin semua kode dibawah ini, lalu letakkan pada Halaman Editor HTML tadi.

<div id="flatkangwira">
<ul class="wirflat">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
</li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
</li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
</li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
</li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
</li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
</li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
</li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
</li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
</li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
</li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
</li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
</li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
</li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
</li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
</li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
</li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
</li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
</li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
</li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
</li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
</li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
</li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
</li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
</li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
</li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
</li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
</li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
</li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
</li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
</li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
</li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
</li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
</li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
</li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
</li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
</li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
</li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
</li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
</li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
</li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
</li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
</li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
</li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
</li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
</li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
</li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
</li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
</li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
</li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
</li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
</li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
</li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
</li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
</li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
</li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
</li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
</li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
</li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
</li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
</li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
</li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
</li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
</li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
</li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
</li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
</li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
</li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
</li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
</li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
</li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
</li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
</li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
</li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
</li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
</li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
</li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
</li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
</li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
</li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
</li>
</ul>
<span class="getwidget"><a onclick="window.location.href='https://www.kangwira.com/2018/01/halaman-daftar-isi-blog-accordion-berdasarkan-bulan.html'">Dapatkan Widget ini</a></span>
</div>
<style scoped="" type="text/css">
/* Flat UI Color */
#flatkangwira ul.wirflat{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatkangwira ul.wirflat li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatkangwira ul.wirflat li:hover{z-index:4}
#flatkangwira ul.wirflat li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatkangwira ul.wirflat li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatkangwira .getwidget {float: right;font-size: 80%;font-weight: 600;cursor: pointer;font-style: italic;color: red;}
#flatkangwira ul.wirflat li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatkangwira ul.wirflat li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatkangwira ul.wirflat li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatkangwira ul.wirflat li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatkangwira ul.wirflat li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatkangwira ul.wirflat li{width:50%}}
@media screen and (max-width:480px){#flatkangwira ul.wirflat li{width:100%}}
</style>

Simpan Template, lalu lihat hasilnya

Ya sudah.. Selesai.. Apa lagi?

Ohya, kalau teman-teman mau menambahkan Warna Sendiri sebagai Koleksi Warna di Halaman itu, Teman-teman hanya perlu menambahkan Kode dibawah ini saya, dan letakkan tepat dibawah kode <ul class="wirflat"> diatas.

<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
</li>

PERHATIKAN

Rubah Kode Warna yang saya tandai pada kode diatas, dengan kode Warna yang sudah kamu tentukan.

Nah mungkin cukup sekian dulu Artikel saya kali ini. Cukup singkat, tapi cukup melelahkan juga sih bikin artikelnya.

Jangan lupa berikan tanggapan kamu mengenai hasil dari modifikasi template yang sudah kamu lakukan selama ini pada kolom komentar dibawah ini yah teman-teman.

Masukkan email kamu di kolom Berlangganan dibawah ini, agar kamu tidak ketinggalan postingan lain yang jauh lebih menarik lagi.

Membuat Halaman Daftar Isi Blog Berdasarkan Bulan dengan Fungsi Accordion

2018-01-15T09:20:00.007+07:00

Di beberapa artikel Kang Wira sebelumnya, saya sudah membahas Cara Membuat Halaman Daftar isi dengan berbagai Style. Nah kali ini, saya tidak akan terlalu banyak basa-basi yah teman-teman.

Yaa tapi setidaknya saya tetap harus menjelaskan dulu pengertian dari Accordion itu kepada teman-teman disini.

Style dari daftar isi yang sering kita jumpai di beberapa blog memang memiliki banyak sekali yah teman-teman. Beberapa diantaranya sudah saya buatkan tutorialnya. Jadi silahkan teman-teman praktekkan satu per satu pada link dibawah ini.

Apa itu Accordion didalam Bahasa CSS?

Beberapa blogger mungkin sudah paham dengan bahasa Accordion Styling ini, tapi bagi yang masih awam bisa coba perhatihan gambar dibawah ini yah.

Yaap... Accordion itu sebenarnya adalah sebuah Alat Musik Piano nih teman-teman. Karena melihat dari bentuk nya itulah para pakar CSS akhirnya mencoba memanipulasi Style Accordion kedalam sebuah CSS.

Menarik bukan jika menggunakan Style ini kedalam halaman Daftar isi?

Buat teman-teman yang masih belum paham dengan Tampilan Daftar Isi Blog yang berdasarkan Bulan dengan menggunakan Fungsi Accordion, silahkan teman-teman klik tombol DEMO dibawah ini dulu deh yaa..

Tertarik Memasang Daftar Isi Accordion Style ini?

Nah jika tertarik, silahkan teman-teman ikuti langkah-langkah di bawah ini ya.

Buka Dashboard Blog teman-teman, lalu pilih menu Halaman.
Jika teman-teman sudah pernah membuat Halaman Daftar Isi sebelumnya, silahakn Abaikan Langkah ketiga ini.
Buat Halaman Baru dengan Judul Daftar Isi
Didalam Editor itu silahkan pilih Tab HTML terlebih dulu yah, jangan pilih Compose

Setelah itu Salin semua kode dibawah ini dan letakkan kedalam editor kamu.

<div id="toc-kw-container">
  <div id="toc"></div>
</div>
<script>
  function fetchBlogPosts() {
    const script = document.createElement('script');
    script.src = 'https://www.kangwira.com/feeds/posts/default?alt=json-in-script&max-results=500&callback=displayToCByMonth';
    document.body.appendChild(script);
  }
  fetchBlogPosts();
</script>
<script src="https://ardiduker.github.io/toc/tocByMonth.js"></script>
<style>
#toc-kw-container{margin-bottom:30px}
.toc-kw-acc-bulan{background:linear-gradient(to bottom,#b73120,#E74C3C);color:white;font-weight:bold;cursor:pointer;padding:10px;border:none;text-align:left;outline:none;width:100%;font-size:18px;transition:background-color 0.3s ease;position:relative}
.toc-kw-acc-bulan.active,.toc-kw-acc-bulan:hover{background-color:#ccc}
.toc-kw-acc-bulan::after{content:"\25BC";position:absolute;right:20px;font-size:14px;transition:transform 0.3s ease}
.toc-kw-acc-bulan.active::after{transform:rotate(180deg)}
.toc-kw-acc-content{padding:0 18px;max-height:0;overflow:hidden;background-color:#f9f9f9;transition:max-height 0.3s ease,padding 0.3s ease}
.toc-kw-acc-content ul{list-style-type:none;padding:0;margin:0}
.toc-kw-acc-content li{padding:5px 0;display:flex;justify-content:space-between;align-items:center}
.toc-kw-acc-content .info{display:flex;width:100%}
.toc-kw-acc-content .tanggal{font-size:14px;color:gray;text-align:left;flex:0 0 90px;margin-right:10px;padding:5px 0}
.toc-kw-acc-content .judul{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:22px}
</style>

Simpan Template, dan Lihat Hasilnya Terlebih Dulu
Jika Fungsi Accordionnya tidak berjalan dengan baik, silahkan teman-teman tambahkan link Jquery ini tepat dibawah kode yang tadi
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Simpan kembali Halaman Daftar isinya, lalu lihat hasilnya lagi.

PERHATIAN

Perhatikan pada tulisan yang ditandai pada Kolom JavaScript diatas. Silahkan Ganti dengan URL Blog kamu. Lalu untuk mengganti warna, silahkan kamu sesuaikan CSS yang ada diatas.

Goomshop AMP Blogger Template

2018-01-11T10:27:00.000+07:00

Hallo teman-teman kali ini saya akan memberikan informasi seputar template lagi buat teman-teman semua.

Template GoomShop ini pas banget buat teman-teman yang mau berjualan online nih melalui blog gratisan seperti blogspot.

Iyaaa karena ini memang template blogger bukan template platform wordpress yaah.

Sudah lihat gambar sample template GoomShop diatas kan? Kita tetap harus melihat feature nya terlebih dulu nih teman-teman, apa saja sih feature dari Template GoomShop ini?

Berikut ini adalah fitur lengkap template GoomShop yang bisa teman-teman perhatikan sebelum memilih template :

Features	Availability
Responsive	True Cek
Google Testing Tool Validator	True Cek
Mobile Friendly	True Cek
Dynamic Heading	True
Adsense	True
Valid Schema.org	True
High CTR	True
Personal Blog	True
2 Column Grid	True
Auto Read More with Thumbnail	True
Responsive Ad Slot	True
Breadcrumbs	True
Footer Link	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Back to Top Button	True
Shortcodes	True
Unlimited Page Numbered	True
Custom Contact Form Widget	True
Responsive Sitemap Widget	True

Apakah teman-teman tertarik dengan template ini? Atau mau lihat demonya terlebih dulu?

Live Preview

Sayangnya template ini tidak disediakan versi gratisnya, jadi buat teman-teman yang mau langsung beli template premiumnya silahkan Langsung mengunjungi situs nya dibawah ini nih yaah.

Support Template Update
With Blogger Comments
Remove Footer Credits
For Unlimited Domains
No Encrypted Scripts
And Many More...

Visit $13 - Buy Now