Cara Membuat Template Blog Responsive Dan Ringan
- Administrator
- Template adsense, Template blog, Tema blogspot, Theme, Web Design, UX Design, UI Design, Blogspot, Trik blogspot, Trik blogger
- 4765 Kali Dilihat
- 1 Komentar
Materi Cara Membuat Template Blog Responsive Dan Ringan 1
Sebuah blog dengan template yang responsive dan fast loading adalah dambaan dan impian setiap blogger. Dan oleh karena itu Cara Membuat Template Blog Responsive Dan Ringan akan menjadi salah satu jawaban dari apa yang di dambakan para blogger. Karena selain template yang responsive dan fast loading, penggunaan template dari hasil karya sendiri memiliki nilai kebangaan dan kesan berbeda. Cara Membuat Template Blog Responsive Dan Ringan akan memberikan tutorial mulai dari dasar kerangka dokumen HTML, dan penambahan-penambahan definisi, fungsi, dan elemen, sehingga akan sangat mudah untuk di terima para blogger yang sedang membutuhkan tutorial Cara Membuat Template Blog Responsive Dan Ringan. Berawal dari artikel inilah saya berharap akan terlahir para blogger yang akhirnya mampu berkreasi dalam pembuatan dan desain template blog, yang nantinya dapat didistribusikan baik secara gratis ataupun premium. Bagi pembaca yang memang sedang mencari artikel untuk belajar Cara Membuat Template Blog Responsive Dan Ringan sehingga disukai mesin telusur.
Struktur dasar template blogspot
Sebelum melangkah lebih jauh membahas tentang cara membuat blog keren, saya berharap para pembaca mempersiapkan text editor N++(notepad plus-plus) untuk mempermudah dalam praktik pembelajaran Cara Membuat Template Blog. Sebagai awal untuk memulai dalam pembuatan template, buatlah sebuah file melalui N++ dan simpan dalam format xml(Contoh: mytemplate.xml).Selanjutnya silahkan salin setiap kode script dalam tahap-tahap yang saya berikan kedalam file tersebut. Sehingga jika anda tidak dapat menyelesaikan tutorial ini sekaligus, maka anda tidak akan kehilangan dari setiap langkah yang sudah anda pelajari. Jangan lupa untuk selalu menyimpan perubahan pada setiap penambahan kode. Saat anda bekerja dengan kode buatlah jari tangan anda latah untuk menekan CTRL+S dari setiap perubahan. Agar jika tiba-tiba listrik padam dan komputer anda mati, setidaknya sampai perubahan terakhir sudah tersimpan.
Membuat dokumen HTML sebagai kerangka atau wadah
Secara garis besar, template blogspot memiiki kerangka seperti dibawah ini(Silahkan salin dan tempel pada file xml yang sudah anda buat):
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
</head>
<body>
</body>
</HTML>Berdasarkan kerangka diatas kita akan mendeklarasikan tag, meta, javascript, css, serta fungsi-fungsi yang lain. Dimulai dari bagian header atau kepala blog, kita akan mendeklarasikan css pada bagian ini.
Cascading Style Sheets
Banyak diantara kita selama ini menyebut bahwa css merupakan salah satu bahasa pemrograman, namun kenyataan yang sesungguhya membuktikan bahwa css adalah sebuah bahasa desain. Melalui css(Cascading Style Sheets) sebuah halaman atau antar muka situs diberi warna background, diatur tataletaknya, lebar halaman, jenis font yang digunkan, dan lain-lain. Pada template blogspot kode css di deklarasikan dengan b:skin, penulisan sebenarnya adalah <b:skin><![CDATA[ dan ditutup dengan ]]></b:skin> sehingga disusun seperti berikut:
<b:skin><![CDATA[
/*....Kode css disini....*/
]]></b:skin>Namun pada praktik materi belajar cara membuat template blog kali ini kita tidak akan menggunakan <b:skin> untuk mendeklarasikan css. Akan tetapi menggantikanya dengan tag yang lebih umum dan akurat yaitu style, yang ditulis lengkap seperti berikut:
<style type='text/css'>
/* .......Kode css disini...... */
</style>Pertama kita akan menonaktifkan <b:skin>, maka salin dan tempel yang telah dinonaktifkan berikut:
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>Langkah kedua tambahkan tag style dibawahnya seperti berikut:
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/* .......Kode css disini...... */
</style>Sehingga saat ini kita memiliki kode atau dokumen html seperti dibawah:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/* .......Di sinilah kode css akan ditambahkan...... */
</style>
</head>
<body>
</body>
</HTML>Tambahkan deklarasi untuk body melalui css seperti berikut(Salin dan tempel didalam <style>....</style>):
body {background-color: #fff;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}Maka akan kita miliki dokumen HTML seperti berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/* .......Di sinilah kode css akan ditambahkan...... */
body {background-color: #fff;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}
</style>
</head>
<body>
</body>
</HTML>Materi bagian pertama kita hanya sampai disini, kita akan melanjutkan pada materi bagian 2 yaitu Memanggil fungsi yang telah dideklarasikan pada tag <head>....</head>
Anda telah menyelesaikan Materi langkah pertama dari 5 langkah Cara Membuat Template Blog Responsive Dan Ringan:
- Materi 1 Cara Membuat Template Blog Responsive dan Ringan
- Materi 2 Cara Membuat Template Blog Responsive dan Ringan 2
- Materi 3 Cara desain Main Content Blog dan Sidebar
- Materi 4 Cara membuat Header 2 kolom dalam 2 Langkah Praktis
- Materi 5 Cara membuat Footer 3 kolom dalam 3 langkah Praktis
Linimasaade
Terima kasih kak sangat membantu dan mudah banget diikutin step by stepnya Linimasaade jadi suka