Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana kah caranya mengubah tampilan text user online di blogger, pada sebelumnya pula admin telah membahas bagaimana caranya membuat user online di blogger jika kamu ingin mempelajari nya silahkan bisa baca disini
Info: Oke sobat icloudZer jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
User Online
Pada artikel sebelumnya admin sudah pernah membahas mengenai user online di blogger, mulai dari menjelaskan mengenai apa itu user online, kemudian bagaimana cara membuat nya dan sebagainya jika kamu ingin mengetahui kebih detail kamu bisa membacanya disini
Hasil Script
Dalam pembuatan pengguna online alias user online di blogger tercipta dari sebuah script, yang apabila Script tersebut di letakkan pada source template blogger maka setiap pengunjung akan di hitung dalam tampilan Script user online tersebut secara otomatis
Hanya Text
Didalam Script user online tersebut akan menampilkan pengguna online di blogger hanya menggunakan text selebihnya kamu bisa mengkreasikan sendiri tampilan dari user online di blogger tersebut sesuai selera kamu entah itu menabahkan svg, animasi ataupun yang lainnya
Link credits
Jika kamu memasang dan mengunakan user online di blogger maka tampilan text dari jumlah user online jika di klik akan megarahkan si pengklik ke halaman website original pembuat user online di blogger tersebut untuk mengubahnya tidak bisa dilakukan pada kode Script nya langsung, tetapi bisa di setting menggunakan kode CSS tambahan
Custom user online
Apa saja sih hal yang bisa kita ubah dari sebuah tampilan script user online di blogger tersebut, langsung aja kita bahas bersama sama
Mengubah ukuran
Yang pertama kita bisa membuat custom user online di blogger dengan mengubah ukuran text dari user online ataupun pengguna online tersebut caranya buat nama class baru semisal .rahsize kemudian gunakan properti font-size untuk mulai mengubah ukuran text dari tampilan user online di blogger, atau penggunaan kode CSS nya seperti contoh dibawah ini
.rahsize a{
font-size:12px;
}
Info: Mengapa admin menggunakan tambahan dari tag kode a setelah class.rahsize karena memang text utama user online di dalam Script tersebut di bungkus didalam tag a
Penerapan Pada Script
Untuk benar benar bisa menjalankan fungsi class CSS yang kita sudah Buat sebelumnya tambahkan class CSS tersebut dengan membungkus Script User online tersebut ke dalam class rahsize, menjadi
<div class="rahsize">
<!-- script nya letakkan disini -->
</div>Mengubah Warna
Selanjutnya hal yang bisa kamu lakukan untuk membuat tampilan custom dari user online tersebut adalah dengan mengubah element warna text pada tampilan user online di blogger tersebut
Caranya adalah dengan membuat nama class css baru semisal .rahcolor kemudian gunakan properti color untuk mengubah element warna dari tampilan user online tersebut, atau seperti contoh di bawah ini
.rahcolor a{
color:red;
}Info: Mengapa admin menggunakan tambahan dari tag kode a setelah class.rahsize karena memang text utama user online di dalam Script tersebut di bungkus didalam tag a
Penerapan pada Script
Selanjutnya bungkus Script user online tersebut dengan class rahwarna yang sudah kita buat sebelumnya menjadi
<div class="rahwarna">
<!-- script nya letakkan disini -->
</div>Tambahkan Icon
Creatifitas lainnya yang bisa di gunakan untuk membuat tampilan custom dari user online diblogger adalah dengan menambahkan icon entah itu svg, fontawesome, atau juga yang lainnya, kita bisa memulai untuk membuat class name css sesemisal .rahCount, atau kode lengkapnya menjadi
.rahCount a{
font-size:12px;
color:red;
font-weight:bold;
}
.rahCount svg{
width:12px;
height:12px;
margin-right:5px;
fill:red;
}
Info: Mengapa admin menggunakan tambahan dati tag kode a setelah class.rahsize karena memang text utama user online di dalam Script tersebut di bungkus didalam tag a
Penerapan pada Script
Untuk menerapkan nya pada Script User online tersebut adalah dengan membungkus kode Script di dalam class rahCount yang sudah kita buat sebelumnya, menjadi
<div class="rahCount">
<!-- letakkan icon svg di sini -->
<!-- script nya letakkan disini -->
</div>Contoh Tampilan
Berikut ini adalah contoh tampilan dari user online dengan penggunaan svg
Info: Bagaimana sobat icloudZer keren kan tampilan nya