Perkembangan UI designer di jagat Blogger makin hari makin berkembang dengan beragam tampilan yang lebih banyak memanjakan mata. Banyak sekali talenta - talenta berbakat ke arah User Interface, User Experience...
{getToc} $title={Table of Contents}
Oke, singkat cerita.. kemaren saya membeli sebuah template bernama Median UI v 1.5, kenapa saya tertarik membeli, jawabnya simple banget :
- Tampilan Adaptive :) jadi penasaran nih seperti apa, karena biasanya
responsive
- Tampilan Mobilenya menarik, jujur.. saya masih kesulitan untuk
optimasi mobile, apalagi adanya desas desus bahwa siapa cepat, dia akan
mendapatkan rangking di SERP dan menggeser situs yang memiliki load yang lebih
lambat - tetapi jujur saja yang aku takutin itu "Mobile First" karena kalo
saya cek pun tampilan website desktop milik saya masih aman, kecuali halaman
utama
- Memakai Flex CSS juga ternyata, biasanya kan cuman grid, Konon katanya Flex
itu bagus dalam mengatur perataan tiap elemen. Digunakan dalam memposisikan
elemen yang lebih kecil atau detail, sehingga ketika dilihat di tampilan
mobile, ini bisa 2 kolom dan kecil bagus banget dan perataannya lumayan rapi.
- Adanya Bonus Template versi AMP, nah ini sih nilai plusnya.. karena saya
sendiri masih begitu awam dengan AMP.. yang merupakan teknologi perangkat
lunak yang dikembangkan oleh Google. Google AMP merupakan proyek idealis dari
Google. Pengembangannya memiliki tujuan untuk meningkatkan kecepatan akses
sebuah situs web, khusus dalam meningkatkan kecepatan akses melalui perangkat
ponsel pintar. Makannya, saya agak was - was dengan "Mobile First" itu karena
ini nih... sepertinya memang betul.. Walau sebenarnya saya rasa lebih ribet
ketika AMP di Blogger, entahlah.. makannya saya penasaran seperti apa sih..
- Clean, Minimalist dan terkesan Modern
- Saya pun akhirnya membeli deh "dari Developernya langsung" kenapa? saya pengen Hak dari si developer sampai... terlebih saya ada kelonggaran rejeki, jadi ya.. don't worry.. Buy it..
Apakah akan di pasang di RahmanCyber.NET?
Saya rasa, belum memikirkan ke arah sana, saya mau trial dulu di website saya yang sepi pengunjung, apakah kira - kira dapat meningkatkan Posisi di SERP dengan tanda bisa dilihat di Query yang ada di Google Search Console, atau sama aja sebenarnya...
Karena setelah saya pasang sih memang cukup ringan sob, dan yang terpenting buat saya adalah tampilan Mobilenya.
Tetapi, sepertinya agak berat, saya akan bertahan dengan ini di web utama
saya ini.. karena memang ada sejarahnya sendiri..:) - saya coba optimalkan
supaya lebih ringan lah setidaknya..
Pemasangan Template Median UI
Untuk pemasangannya sih, jujur aja saya tidak ngerasa kesulitan, bahkan sebenarnya tanpa adanya komentar disetiap kodingan di edit html pun, saya lumayan paham :) tapi butuh waktu...wkwkwkwk, dengan dokumentasinya yang lumayan lengkap menurut saya... ini sangat mempermudah dan mempercepat pengerjaan buat saya.. tinggal copas Stylenya beres.
Tetapi kan, memang pengguna template itu bermacam - macam, mungkin bagi yang sudah terbiasa otak atik template, modifikasi template dan udah lengket ama blogger sih, adanya dokumentasi tersebut menjadi lebih mempercepat pekerjaan..
Tetapi untuk sobat blogger yang baru, kan tidak bisa demikian ya, sehingga dengan adanya komen di tiap - tiap elemen kode yang ada di edit html akan memberi edukasi tersendiri untuk Blogger baru.. :)
Saya membutuhkan waktu 1 jam'an untuk 1 website :) memasang template ini....
Ketika selesai, ternyata saya sadar... kode Anti Copas yang pernah saya share di Tutorial Memasang Script Anti Copas di Blog, benar benar tidak bekerja..
Hehe, saya langsung berpikiran nih.. wah ini CSSnya memiliki penamaan yang tidak familiar.. :)
Lalu, langkah yang saya lakukan apa untuk mengatasi hal ini?
Script Anti Copy Paste untuk Template Median UI Blogger
Inspect Element dulu buat Mengetahui letak dengan Cepat...
Yup! Tentulah Inspect Element di Browser menjadi andalannya :) Saya inspect bagian body untuk mecari nama CSS untuk Post, ternyata
ketemu... namanya postEntry! - berikut ini saya paparkan kepada anda cara saya memecahkan masalah ini.
Berikut Caranya memasang Script Anti Copas
1. Anda buka dulu Postingan Halaman ( bukan halaman utama, tapi halaman postingan ) di Browser
2. Lalu anda bisa klik kanan pada bagian Teks Postingan -> Lalu pilihlah Inspect Element
3. Lalu saya mendapati ternyata nama kelasnya seperti ini...
anda bisa melihat yang saya lingkari disamping... itulah kunci nya... kalo udah dapet kuncinya.. tinggal kita rubah penamaan bagian kode anti copy paste CSS yang sudah saya buat untuk tidak bekerja pada kode Pre, sehingga jika anda buat tutorial yang memakai <pre>, maka si user akan tetap bisa melakukan Copy Code.
4. Silahkan Copy kode berikut ini yang merupakan modifikasi dari Kode CSS Anti Copy Paste yang standard...
<!--[ Body cegah copas RahmanCyber.Net]-->
.postEntry {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none
}
.postEntry
pre code {
user-select:text;
-moz-user-select:text;
-ms-user-select:text;
-khtml-user-select:text;
-webkit-user-select:text
}
Silahkan di Copy..
<!--[ Body cegah copas RahmanCyber.Net]--> .postEntry { user-select:none; -moz-user-select:none; -ms-user-select:none; -khtml-user-select:none; -webkit-user-select:none } .postEntry pre code { user-select:text; -moz-user-select:text; -ms-user-select:text; -khtml-user-select:text; -webkit-user-select:text }
Sudah saya ganti postEntry ya.. :) , jika anda ingin melihat perubahannya, silahkan lihat kode anti copas postingan blog yang asli Tetapi, perlu perhatian, walau anda memasang kode ini, tidak bisa menjamin aman dari copas ya. tetapi setidaknya ini lebih efektif dibanding dengan code anti copas menggunakan javascript, karena javascript bisa dinonaktifkan di browser khan..
Oh iya, jangan lupa menambah juga proteksi lagi, agar postingan sobat tidak dicuri melalui Feed, Cara agar postingan Blog tidak dicuri melalui Feed dengan Software pencari artikel Otomatis ( Anda sudah susah susah buat konten bukan? ingat, membuat artikel yang padat itu membuatuhkan waktu bukan untuk mempelajarinya, supaya dalam penyampaian menjadi lebih mudah dipahami, dan kalau kita tengok, harga jasa pembuatan artikel professional sesuai niche atau bahkan dengan keyword tertarget itu dengan riset yang mendalam tidak murah, bayangkan 1 artikel dengan 1000 kata seharga 100ribu, maka 10 artikel sudah 1 juta, 100 artikel, sudah 10 Juta, 1000 artikel 100juta! lihat berapa banyak? :) )
5. Setelah anda copy Code CSS diatas, silahkan cari /b:skin, anda masuk dulu ke Edit Html ( Cara Masuk ke Edit HTML terbaru )
6. Anda bisa meletakkannya diatas kode bskin penutup tersebut ya.. kenapa? agar lebih mudah dan minim error, emang tidak bisa diletakkan ditempat lain? bisa, anda bisa juga meletakkannya di atas kode penutup head, terapi anda perlu menambahkan <style>
<style>
<!--[ Body cegah copas RahmanCyber.Net]-->
.postEntry {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none
}
.postEntry pre code {
user-select:text;
-moz-user-select:text;
-ms-user-select:text;
-khtml-user-select:text;
-webkit-user-select:text
}
</style>
asalkan saja tidak diletakkan di b:if kondisi tertentu.. hehe, misal b:if selain post... :)
Tentu ini tidak ngefek.. atau misal b:if mobile... jadi yang kena effect cuma ketika tampilan mobile saja.
7. Setelah anda selesai memasang kodenya... silahkan langsung SAVE
8. Silahkan lihat hasilnya, ini hanya berlaku di Postingan Blog saja ya, untuk Title dan berbagai teks diluar Postingan Blog, saya buat agar bisa di Copy.
Penutup Pembahasan
Sekian untuk kasus kali ini, semoga bermanfaat, khususnya buat sobat yang pake template Blog Median UI versi 1.5 ini untuk blog sobat.. :), kalo versi sebelumnya sih kemungkinan sama jika nama kelas CSSnya tidak diganti, tapi pada case ini, karena saya belinya pas versi 1.5, YA BEGITYU LAH... :)