BREAKING NEWS
Loading...
Komunitas Blogger Indonesia

Sebuah komunitas yang mewadahi para blogger dari seluruh Indonesia.

"Kegiatan Positif"

Komunitas ini diisi oleh berbagai kegiatan positif dalam menjelang era digital 4.0.

Pelatihan

Kami sering mengadakan berbagai pelatihan-pelatihan, baik tatap muka maupun via online.

Pemberdayaan

Bagi Anggota yang berbakat dan aktif dalam komunikasi antar anggota akan mendapatkan pemberdayaan khusus.

Semuanya Belajar

Semua anggota dan pendiri terdiri dari kita yang masih dan akan terus belajar dari sesama.

Semangat Nasionalisme

Komunitas Blogger Indonesia memiliki misi memberdayakan SDM dan mempromosikan SDA yang ada di Indonesia.

Anggota Banyak

Anggota Resmi yang telah mendaftar merata dari ujung ke ujung pulau di Indonesia.

Menjalin kekerabatan

Menjalin kekerabatan sambil belajar antar Anggota di seluruh Indonesia.

Kabar Kami

Dunia Blogger

Tips Blogging

Tutorial Blogging

Anggota Resmi

Info Indonesia

Fakta


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>

Saatnya Berbagi :
Share on WhatsApp
«
Berikutnya
Ini artikel paling baru.
»
Sebelumnya
Posting Lama

Komentar Facebook :

Komentar dengan Akun Google :

Tidak ada komentar:


Top