Tuesday, January 29, 2019

Cara Membuat Atau Mendesign Template Blog Sendiri

Hallo sahabat blog..
Pada kesempatan kali ini, Sundaku akan membahas bagaimana cara Membuat / Mendesign template blog sendiri? pasti ribet ya sobat!! sebenarnya template blog dengan platform Blogger sudah tersedia banyak sekali di internet. Kalau sobat tidak percaya, silahkan sobat searcing di google.

Sobat akan menemukan ribuan bahkan jutaan template blog yang tersedia dengan berbagai variasi dan gratis. Adapun untuk yang versi premium, sobat harus mengeluarkan sedikit uang jajan sobat untuk membeli.

Sebelum kita membahas lebih dalam tentang cara membuat design template blog sendiri, saya ingin bercerita tentang saya sendiri.

Pada awal mengenal Blogger, saya juga hanya bisa menggunakan template blog buatan orang lain dan saat ini pun saya masih menggunakan template mbak Arlina Design . Seiring berjalannya waktu, saya sangat senang melakukan modifikasi desain dan fitur template blog orang lain untuk memenuhi kriteria blog yang saya butuhkan.

Baiklah, tanpa basa basi lagi, kita langsung ke TKP.

Pertama-tama, sobat downlaod dulu software Notepad++, disinilah saya melakukan modifikasi template blog yang nantinya saya salin ke kolom edit html blogspot.

Pertama kita Membuat Struktur XML dan HTML....

Masukan kode dibawah ini pada notepad++ ....


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
</head>
<body>
</body>

</HTML>

Contoh, seperti gambar dibawah ini:



Pada gambar diatas, saya menggunakan backround hitam, sobat bisa atur sendiri. Agar kode yang kita masukan berwarna seperti yang di atas, sobat harus save dulu dengan extation html.

Lanjut ke langkah selanjutnya, yaitu manambahkan CSS..

Coba sobat letakkan CSS berikut pada bagian head,,,


<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}
]]></b:skin>

Contoh seperti gambar dibawah ini: 


Pada gambar diatas, CSS hanya disimpan di dalam memori head, belum ditampilkan. Untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Memanggil fungsi salah satunya dilakukan menggunakan tag b:section. 




Baik, kita lanjut lagi kelangkah selanjutnya yaitu Memanggil Bagian Posting..

Contoh tag b:section untuk menampilkan bagian posting sebagai berikut :

<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

Sekarang masukkan tag b:section untuk postingan pada bagian body.

Contoh sebagai berikut:



Setelah itu, agar judul blog sobat muncul d tab browser, maka sobat harus menambahkan atau menyisipkan tag title berikut...

<title><data:blog.title/></title>

Masukkan tag title di atas ke bagian head, Contoh gambar berikut ini :



Setelah itu, langkah awal membuat design template blog sobat sudah selesai tahap 5%.  Baik, kita coba ya...

Masuk ke akun blogspot sobat, lalu klik tema - edit html - hapus semua kode pada kolom edit html lalu ganti dengan kode yang sobat buat tadi di software notepad++ - kemuadian sobat save tema dan lihat hasilnya pada view blog.

Berikut hasilnya seperti gambar dibawah ini:


Jika tampilannya seperti gambar diatas, itu artinya sobat baru saja menyelesaikan design template blog sendiri tahapan pertama 5% . Baiklah sobat, sampai disini, apakah sobat sudah siap untuk melanjutkan ke tahap selanjutnya?? Nantikan artikel selanjutnya tentang Cara design template sendiri versi ke 2 ya sobat.

Semoga artikel diatas bisa bermanfaat. Jangan lupa share artikel ini ke teman dan media sosial sobat ya. Berbagi informasi itu GRATIS.


Agar sobat tidak ketinggalan artikel terbaru dari Sundaku, sobat bisa langganan artikel yang langsung di kirim ke email sobat.

Selamat mencoba..

Terima kasih.

Related Posts

Cara Membuat Atau Mendesign Template Blog Sendiri
4/ 5
Oleh

Subscribe via email

Suka posting di atas? Silakan berlangganan posting terbaru langsung melalui email.