Ayo percantik blog kamu dengan mengubah tampilan widget bawaan default blogger menggunakan kode Css
Bosan dengan tampilan widget bawaan blogger yang sangat sederhana ? gampang. Kali ini Om akan berbagi cara mempercantik blog di blogger buat pemula. Cara ini sederhana dan tidak susah yang perlu kamu lakukan hanya dengan menambahkan sedikit css pada template mu.
Tapi sebelumnya kita wajib mengetahui apa itu css dan Pengertian Css
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi kode yang menentukan bagimana suatu script akan tampil di halaman web.
Kemudian kenali Apa yang dimaksud widget dan Fungsinya
Oke sudah mengerti bukan ?? sekarang kita lanjut dengan tutorial cara mempercantik tampilan blogspot.
Tidak di perlukan keahlian khusus untuk menerapkan cara ini kamu diminta hanya untuk memerhatikan apa yang om sampaikan supaya saat kamu menerapkannya tidak ada error atau langkah langkah yang salah.
Mengubah tampilan arsip blog supaya kelihatan lebih cantik
Langkah-langkah awal kamu pasang dulu widget arsip blog di blogspot kamu kemudian pilih hierarki untuk pilihan widget arsipnya, Tempatkan di sidebar kanan atau kiri.
Sekarang buka menu dashboard blogger lalu klik template kemudian pilih edit html
Cari kode ini, biar lebih mudah klik ctrl+f pada keybord blogger kemudian paste kode ini ]]> </ b: skin> dan enter
Setelah ketemu dengan kode itu sekarang tambahkan script css ini diatasnya
#ArchiveList ul > li > a.post-count-link{font-size:18px;width:100%;margin:0;padding:0 15px;line-height:38px;background-color:#f6f6f6;box-sizing:border-box;letter-spacing:1px}
#ArchiveList ul ul li a.post-count-link{width:auto;margin:0 5px;padding:8px 25px;background:transparent;text-transform:uppercase;font:12px merriweather sans;font-weight:700}
#ArchiveList .zippy{visibility:hidden}
#ArchiveList ul li a.toggle{position:absolute;top:0;left:0;width:100%;display:block;height:38px;z-index:5}
#ArchiveList ul ul li a.toggle{position:absolute;top:0;left:0;width:30px;height:24px;display:block;z-index:0}
#ArchiveList .toggle{position:relative}
#ArchiveList ul ul .zippy{color:#fff;visibility:visible;text-shadow:none}
#ArchiveList ul ul .zippy:before{content:’f105′;font-family:FontAwesome;position:absolute;top:3px;left:12px;padding:4px;line-height:1;font-size:12px;color:#8C8C8C}
#ArchiveList ul ul .toggle-open:before{content:’f107′;font-family:FontAwesome;position:absolute;top:3px;left:10px}
#ArchiveList ul li{padding:0!important;text-indent:0!important;margin:0!important;position:relative;background:none}
#ArchiveList ul .post-count-link{padding:10px 0;display:inline-block;margin:0 5px}
#ArchiveList ul ul .posts li{padding:0 5px 5px!important;margin:0 5px 5px 20px !important;text-transform:none;border-bottom:1px solid #f0f0f0;font-size:12px} #ArchiveList ul ul .posts li:before{content:’f0da’;font-family:FontAwesome;padding-right:5px;}
#ArchiveList ul{margin:0 0 2px!important}
span.post-count{position:absolute;right:7px;top:7px;color:#666;background:#fff;padding:5px 5px 0;width:24px;height:24px;border-radius:3px;border:1px solid #ffc1c1;font:10px arial;vertical-align:middle;text-align:center}
Untuk hasil Demonya kamu bisa lihat pada blog ini, widget arsipnya kelihatan rapi bukan ??
Nah… sekarang kita percantik widget lainnya
Mempercantik tampilan popular post pada blogger dengan css
Langkah-langkahnya sama, kamu hanya perlu menambahkan kode css popular post berikut ke atas kode ]]> </ b: skin>
Hasilnya
Kalau yang dibawah ini untuk mengubah tampilan follow by email bawaah defaul dari bloggger
Kode css untuk mempercantik tampilan follow by email pada blogger
Caranya masih sama dengan diatas, hanya menambahkan cara paling mudah yakni menambahkan kode css ini diatas kode ]]> </ b: skin>
Untuk hasil demonya kamu check sendiri supaya jadi kejutan yah 😀
Bagaimana, mudah bukan ?? bagaimana cara saya mempercantik tampilan blog selalu mengandalkan css saja, kenapa ? sebab css itu ringan tidak seperti java script.
Selain itu menggunakan java script proses penerapannya sulit jadi untuk kamu pemula pasti akan kesulitan membuat tampilan blog lebih menarik.
Masih ada banyak code css untuk mempercantik tampilan blogspot di blogger tentu akan saya share ke kamu, tapi tidak sekarang. Kapan kapan akan saya bagikan dan tentu dengan tutorial yang sedikit lebih berbeda dengan tutorial blogger lainnya.
Saya akan bagi dengan proses yang sangat mudah untuk diterapkan sehingga kamu yang sebagai pemula tidak akan merasa susah dalam mempercantik tampilan blog dengan css.
Oke ??..sekian dari om, rajin rajin berkunjung ke sini
Silahkan di share…
Pasti om gak disuruh rajin"pun saya hampir semua artkel pmblogging saya baca sampai ke akar"nya dimi mencari ilmu.trimakasih om sangat banyak ilmunya setisp hari selalu ada saja yg baru
Makasih yah udah jadi pengunjung setia omblogging