CARA MEMANFAATKAN TOOL CSS DAN HTML DI DALAM TEMPLATE BLOGGER

Murni CSS

Kalian sering mendengar bahasa program web dan akrab dengan CSS, HTML dan JavaScript? Jika demikian kalian beruntung karena telah Ngeblog karena Template Blogger itu adalah template berbasis HTML. Template blogger berbeda dengan template Wordpress yang di tulis berbasis PHP namun walaupun demikian template Wordpress juga dibentuk oleh HTML, JavaScript dan CSS.

Bukan hanya sekedar menulis postingan tapi memahami bagaimana sebuah platform blogger berjalan secara teknis terutama template nya adalah sangat menarik dan berguna. Ada tiga hal yang akan kita kupas perihal templat blogger yakni: Tool CSS, Tool HTML dan opsi Edit HTML.

Gunakan Tool CSS di Blogger Theme Designer
Tidak banyak yang memanfaatkan CSS dan meletakannya dengan benar di dalam template blogger, biasanya kita akan langsung masuk ke halaman editor HTML dan mencari kode ]]></b:skin>  atau </style> dan meletakan kode CSS diatasnya. Contoh:

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pada pengaturan template terbaru klik titik tiga ⋮
4. Akan muncul menu seperti pada gambar:
   
5. Klik atau pilih "Edit HTML" 
6. Pada halaman editor HTML yang telah terbuka cari kode ]]></b:skin> (kalian bisa menggunakan CTRL+F untuk menampilkan kotak pencarian)

/*Murni CSS tanpa JavaScript */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}.editblog {
background-color:transparent;
width:100%;margin:0 auto;
height: auto%;
padding: 5px;
box-shadow: none;
z-index:99;
}

]]></b:skin> 

Atau kalian bisa meletakannya diatas </head> dengan menambahkan tag <style>....dan menutupnya dengan </style> seperti contoh:

/*Murni CSS tanpa JavaScript */
<style>.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}.editblog {
background-color:transparent;
width:100%;margin:0 auto;
height: auto%;
padding: 5px;
box-shadow: none;
z-index:99;
}</style>

</head>
Perhatikan kode tag <style> dan </style> ya.

Kedua cara diatas menghasilkan tindakan yang sama terhadap HTML. 

Tetapi tahukah kalian ada cara yang lebih mudah menambahkan kode CSS di atas tanpa harus melalui opsi "Edit HTML"?

Caranya:

1. Masuk ke pengaturan Blogger atau Dasbor blogger.
2. Pilih Tema
   
3. Pada menu Blogger Theme Designer yang muncul dengan beberapa pilihan, scroll keatas hingga bagian paling bawah yakni menu "Add CSS" atau "Tambahkan CSS" klik dan setelah itu akan muncul kotak CSS.
   
4. Copy kode CSS yang di inginkan untuk membentuk HTML, pastekan ke dalam kotak tadi. Kalian harus tahu dengan mempastekan kode CSS ke dalam kotak CSS, sama saja kalian menempatkan kode CSS di atas ]]></b:skin> melalui Edit HTML.

Melalui cara paling akhir yang saya tunjukan, kalian dengan mudah dan tepat menempatkan kode CSS pada template blog kalian. Jadi kini kalian dapat menyimpulkan apabila ingin menambahkan elemen baru ke dalam blogger menggunakan HTML, CSS dan Javascript, kalian bisa terlebih dahulu memasukan CSS dengan cara diatas. Sisanya adalah HML dan JavaScript yang harus kalian masukan melalui opsi "Edit HTML"

Next time saya akan membagikan trik menggunakan "compose" dan "HTML" untuk mendapatkan efek yang bagus pada halaman konten tertentu

www.editblogtema.net