Cara Membuat Template Blog Responsive Dan Ringan

Gambar 318. Membuat sebuah template yang responsive dan loading cepat atau fast loading merupakan salah satu kunci yang amat penting bagi para blogger.

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.

Cara Membuat Blog Gratis

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>

Cara Membuat blog di Wordpress

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:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[
]]></b:skin>

Langkah kedua tambahkan tag style dibawahnya seperti berikut:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<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>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<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>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<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:

 

Post Terkait
Author

Administrator

21 Juli 2018

Hey..... Apa kabar? Semua artikel dan layanan yang kami sediakan di sini semata-mata untuk kepentingan pengguna dan klien. Jadi jika Anda merasa membutuhkan pelayanan kami silahkan jangan ragu untuk menghubungi. Kami juga bersedia untuk melayani konsultasi online melalui media sosial, melalui komentar dan melalui halaman testimonial yang telah kami sediakan. Selain itu Anda juga dapat menggunakan kontak form yang tersedia.

Jika apa yang anda dapatkan dari situs ini bermanfaat, silahkan dukung dengan like dan share . Terimakasih telah berkunjung, silahkan kembali kapanpun anda merasa membutuhkan layanan yang kami sediakan.

Status Akun Iklan 11 Juni 2024

Saya sampaikan bahwa status akun iklan sudah saya cek dan saya kelola. Sehingga pagi ini siap untuk di jalankan.

Abaikan notifikasi/tanda yang ada; Dibatasi anggaran, merah, kuning, apapun itu mohon di abaikan. Saya sudah pertimbangkan dan sesuaikan di masing-masing akun. Pagi ini, pukul 04.45 WIB saya baru selesai periksa dan setting semua akun. Sehingga tidak ada lagi yang perlu di tanyakan. Silahkan jalankan iklan.
Ingin berbagi dengan multibisnisindo dan memberikan kontribusi....? Tulis pengalamanmu Di Sini

Terimakasih
JOPanda

1 Komentar

Linimasaade
Linimasaade

Terima kasih kak sangat membantu dan mudah banget diikutin step by stepnya Linimasaade jadi suka