Kupas Tuntas Template Blogspot
BloggerIndonesia.net - Materi Kupas Tuntas Template Blogspot ini adalah materi presentasi seperti yang telah dipaparkan oleh Arizal Firmansyah (pendiri Komunitas Blogger Indonesia) pada Webinar 11 tahun KBI (Komunitas Blogger Indonesia) kemarin, Jum'at, 27 Mei 2022. Yuk, selamat belajar:
Template Blogspot
Template blog (blogger template) atau tema blog adalah desain tampilan blog berupa file ekstensi XML (Extensible Markup Language).
Kode-kode template blog Blogger (Blogspot) terdiri dari CSS (Cascading Style Sheets), HTML (Hypertext Markup Language), dan JavaScript (JS).
- Kode CSS diawali dengan kode <b:skin> dan diakhiri dengan </b:skin>
- Kode HTML dibungkus dengan tag <div> dan </div>. Kode JS dibungkus oleh kode <script> dan </script>
- Kode JS dibungkus dengan <script> dan </script>
Analogi HTML, CSS, JS
HTML
HTML (Hypertext Markup Language) adalah bahasa (teks dan simbol) yang digunakan untuk membuat halaman website. Bahasa HTML akan diterjemahkan dan ditampilkan di layar komputer/gadget dalam sebuah halaman sehingga bisa dipahami pengguna internet.
Sejak ditemukan di tahun 1991 oleh Tim Berners-Lee, kini sejak tahun 2014, versi terbaru HTML ada di HTML-5.
Bagian HTML (Tag, Elemen, Atribut)
Tag adalah awalan dan akhiran dalam perintah HTML. Tag dibuat dengan kurung siku <...> dimana didalamnya berisi nama tag. Ada lebih dari 250 nama tag yang bisa digunakan, seperti <html>, <head>, <body>, <title>, <p>, dll.
Elemen adalah keseluruhan kode HTML mulai dari tag pembuka hingga penutup. Sebuah elemen HTML kadang dibuka dengan tanda <..> dan ditutup dengan tanda </…>, namun ada juga elemen yang merupakan satu bagian saja, seperti <..../>
Atribut adalah perintah tambahan dalam elemen HTML. Contohnya :<img src=”url-gambar.jpg” alt=”keterangan-gambar”/> Dalam elemen gambar tersebut memiliki tag “img” dan atribut “src” untuk memuat alamat sumber gambar, dan atribut “alt” untuk menampilkan keterangan gambar.
CSS
CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur tampilan website secara visual.
CSS tidak dapat dipisahkan dari HTML, apalagi dengan tuntutan tampilan website yang semakin menarik.
Contoh penerapan CSS, misalnya pada elemen “p”
<style>
p {
text-align: center;
font-size: 18px;
color: blue;
}
</style>
JavaScript
JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif.
Saat ini JavaScript tidak hanya digunakan di sisi client (browser) saja lho. Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu kamu bisa mengembangkan back-end (server), console, program desktop, mobile, IoT, game, dan lainnya menggunakan JavaScript.
Umumnya JavaScript berisi banyak logika dalam penulisannya agar berfungsi atau berjalan seperti yang diinginkan oleh pemrogramnya.
JavaScript dalam blogspot biasanya berada di berbagai fungsi yang dinamis, seperti untuk foto slide, atau yang ikut bergerak/berubah saat cursor digerakkan atau saat ada perintah klik.
Pada template blogspot JavaScript dibungkus dengan kode <script>..... </script>
Trik agar Template Responsive
Cari dan Ganti kode:.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }dengan kode:.post-body img, .post-body .tr-caption-container { padding: 0; width:auto; max-width:100%; height:auto; }Cari dan Ganti kode: <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>dengan:<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>Simpan kode berikut ini di atas kode </head><style>@media only screen and (max-width:568px){.post{height:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}.main-inner .column-right-outer{width:100%!important;padding-bottom:50px!important;padding-top:50px}}@media only screen and (max-width:800px){.main-inner .column-center-inner {padding: 0px;}.main-inner .columns{padding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important}.main-inner .column-right-outer{width:310px!important;margin-right:0!important;position:relative;right:10px!important}.main-inner .column-right-outer{padding-top:50px!important;padding-bottom 50px!important}}@media only screen and (max-width:1010px){body .navbar {height: 0px !important;}body{min-width:0!important;width:100%!important;padding:0!important}.content{width:100%!important;min-width:0!important;overflow:hidden!important}.header-outer{width:100%}.fauxborder-left{width:100%!important}html body .region-inner{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:0}.header-inner .section{margin:0;width:100%!important}.footer-outer{width:100%!important}.content-outer,.content-fauxcolumn-outer,.region-inner{min-width:0!important;max-width:100%!important}#sidebar-right-1{width:100%!important}.main-inner .column-right-outer{width:45%!important;margin-right:-310px;position:relative;right:10px!important}.main-inner .columns{padding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important}#sidebar-right-1 a img{max-width:100%!important}.post-body img, .post-body .tr-caption-container {max-width: 100%;height: auto;}}</style>
