Sudah lama sekali saya tidak update kategori Blogger di Website RahmanCyber ini, kali ini kita akan update pembahasan tentang Menambahkan Widget Font Resizer di Postingan Blogger pada beberapa kasus menjadi agak rumit ketika tiap template blog pengaturan dan penamaannya berbeda beda dan tidak seragam, sehingga disini nanti kita berikan saja gambarannya dan bagaimana alurnya secara gampang.
Fungsi dari font resizer ini adalah untuk memberikan opsi custom bagi reader / pembaca tulisan di blog. Contoh secara langsung anda bisa lihat di postingan ini, karena ini juga yang kita terapkan di website ini yang masih menggunakan blogger. Kenapa? tujuan tak lain untuk efisiensi sementara ini, karena untuk langganan hosting dengan batasan bandwith dan kapasitas besar itu juga membutuhkan biaya sewa yang tidak murah. Saya memang juga berlangganan hosting, tetapi untuk website yang memang disitu untuk kunjungan terbatas atau bukan untuk semata - mata adsense yang terkadang memerlukan traffic tinggi, sehingga disitu juga saya tidak perlu optimasi dan lainnya karena saya memilih paket langganan yang murah saja, kisaran 26 ribu perbulan lah dengan storage terbatas hanya 5GB dan bandwith juga sama ada Fair Usage... tapi overall no problem. Untuk hosting saya biasanya langganan di Sini jika anda tertarik juga misalnya cari alternatif untuk hosting. (Tapi jika anda langsung order lewat tautan disitu, saya mendapat sedikit komisi dari itu, karena itu link affiliate) BTW, Selama ini sih aman bagi saya dan jika ada masalah, CS nya aktif bahkan kadang malam hari dan pas waktu itu tidak bot ya.. bot ai, jadi benar benar manusia... karena kadang menjengkelkan juga ketika kita berhadapan dengan CS tapi itu ai, walau untuk beberapa penanganan dasar itu membantu ya dengan template yang ada, tapi kadang saya sendiri juga sebel dengan layanan yang dia itu full CS pakai AI. haha
Lanjut, kita masuk lagi ke Font Resizernya. Di sini untuk yang kita gunakan itu kita tidak memakai link eksternal atau yang dia itu load dari website lainnya ya teman-teman tetapi di sini ini langsung semuanya berada di EDIT HTML Blogger kita. jadi saya harap kalian sudah paham dulu Edit HTML sebelum mengikuti pembahasan ini. Karena saya tidak bertanggung jawab jika terjadi error... :)
Tenang saja disini kita tidak obfuscate codenya, semuanya full kok, dan tak ada embel embel untuk menaikkan Domain Authority Web ini :) , anda bisa langsung terapkan secara clean.
1. Masuk ke Dasbor Blogger Anda dan ke EDIT HTML
Caranya -> Pilihlah Bagian "Tema" untuk bahasa Indonesia atau "Theme" jika anda memakai bahasa inggris. Lalu klik saja panah bawah tepat disamping tombol "Sesuaikan", setelah itu anda akan ada beberapa pilihan! Disitu pilihlah "Edit HTML". Tetapi anda bisa juga secara rutin "Cadangkan" jika anda takut kalo terjadi apa apa :) tapi kalo anda sudah terbiasa utak utik saya rasa itu udah gak perlu sering, ya cukup ketika anda melakukan perubahan besar saja, itu juga bisa jadi catatan atau portofolio anda di bidang per BLOGGAN. Kurang lebihnya seperti ini visualisasinya.
2. Tambahkan Kode CSS ke ]]></b:skin>
Silahkan anda cari dengan klik sembarang tempat di Edit HTML tersebut, lalu CTRL + F , dan masukkan
]]></b:skin>
kira kira visualnya seperti ini ya
itu setelah kita mengaktifkan pencarian, lalu enter saja, nanti berhentilah ketika sudah menemukan, tapi disini untuk kode bskin itu hanya ada 2 sih, dan itu yang kita masukkan adalah bskin penutup, jadi biasanya langsung. Anda bisa menerapkan teknik ini untuk mempercepat pencarian anda.
setelah itu masukkan kode ini tepat diatas ]]></b:skin> , kenapa? ini biasanya mempermudah pembuat tutorial dalam meminimalisir error yang dialami oleh pembaca yang menerapkan... kalo anda sudah lihai, bebas anda meletakkannya dimana, yang penting berada di dalam b:skin saja
.textresize {padding-left:20px;padding-top:5px;}
kira kira nanti jadinya seperti ini, saya coba visualkan ya, agar anda nantinya terbiasa.
3. Tambahkan Kode Javascript untuk Resize Text ini diatas tag </head>
Sebenarnya anda bisa juga meletakkannya dibawah ]]></b:skin> , kalau tadi kan diatas ya, kalo ini dibawahnya, tetapi agar lebih rapi, dan mudah dicari untuk javascript customnya, disini saya biasa menyarankannya di atas tag penutup "head" atau biasanya kayak gini </head>
Kodenya sebagai berikut
<script language='JavaScript' type='text/javascript'>function changeFontSize(inc){var p = document.getElementsByTagName('p');for(n=0; n<p.length; n++) {if(p[n].style.fontSize) {var size = parseInt(p[n].style.fontSize.replace("px", ""));} else {var size = 12;}p[n].style.fontSize = size+inc + 'px';}}</script>
kira kira visualya nanti adalah seperti ini
4. Ini kita tambahkan kode untuk visualnya, letaknya diantara TAG <body> ...... </body>
Walau demikian tetapi secara spesifik kita mencari peletakannya agar berada di atas artikel kita. Jadi tidak bisa sembarangan karena peletakan ini kalo salah menempatkan kadang jadi tidak tampil karna kita meletakkkannya di tempat tersembunyi.
Jadi sebagai referensi biasanya beberapa template mereka memakai penamaan <div class='post-header-line'/> untuk menunjukkan bagian header artikel. anda pun juga bisa mencarinya dengan inspect element untuk mengetahui nama spesifik untuk blog anda.
Kalo di web saya ini, peletakkannya di atas <div class='post-body entry-content' id='post-body'> , lebih tepatnya di sekitaran <!-- Post Body Entry Content--> , disitu sudah dikasih komen untuk mempermudah. Nanti jadinya seperti ini
anda bisa memasukkan kode ini
<span align='center' class='textresize' style='font-weight: bold; background-color: yellow; border:3px solid red'>Ubah Ukuran Font :<a href='javascript:changeFontSize(1)'> [ Tambahkan + ]</a> atau <a href='javascript:changeFontSize(-1)'> [ Kurangkan - ]</a></span>
disitu memakai span dengan beberapa tambahan style dan pengaturan agar user lebih enak dalam menekan tombol dalam bentuk teks tersebut.
Kurang lebihnya visual seperti ini untuk memberikan gambaran kepada anda.
Langkah akhirnya adalah menyimpan , klik ikon disket yang letaknya dekat pojok kanan atas.
Mungkin bisa saja UI/UX blogger berubah seiring berkembangnya waktu, tapi setidaknya ketika kita posting ini ya seperti itu. Intinya carilah tombol simpan dan setelah itu silahkan cek hasilnya.
Semoga Bermanfaat!
Tags
Blogger