Cara Membuat Template Blog Sendiri

Cara Membuat Template Blog Sendiri

[update]UPDATE: Karena postingan ini tidak kunjung di update, maka postingan ini dialihkan ke postingan yang berjudul Cara membuat template blog sediri dengan mudah. Sekian.[/update]
Assalamu'alaikum wr wb

Header Ghani Blog :v

  Siapa yang mau membuat template blog sendiri untuk di terapkan pada blog kesayangannya hayo ?, apalagi template blognya itu keren, siapa hayo ? jawabannya pasti kita, kenapa kita ? soalnya saya juga masih belajar hehe, tpi setidaknya saya punya sedikit materi yang bisa saya share ke temen-temen mengenai hal ini. Kalau ada yang salah tolong koreksi ya, saya juga masih newbie kok, kita saling berbagi aja hehe.. oke lanjut.

Pendahuluan.

  Untuk membuat template blog sendiri kita harus menyiapkan susu, cemilan, kreatifitas, dan juga jangan lupa skill pemograman web nya juga perlu, seperti html, css, jquery, dll, kalau belum paham masalah itu, kita bisa belajar di situs w3, soalnya saya juga belajar css, dll disana dan lumayan lengkap, hanya saja berbahasa inggris hehe, itung-itung sambil belajar bahasa inggris aja :D. Oke langsung saja ya.

Tahap awal membuat template blog

  Pada kesempatan kali ini kita akan coba membuat template blog yang simple terlebih dahulu, berikut layoutnya:

Layout yang akan kita buat

  Saya jelaskan satu persatu terlebih dahulu ya.

• outer-wrapper : tempat/ wadah untuk meletakkan semua elemen, seperti header, sidebar, footer, konten, dll.
• main-wrapper : biasanya tempat untuk menyimpan isi dari konten dari blog, seperti judul artikel, isi artikel, komentar, dll.
• sidebar : biasanya di isi dengan widget-widget untuk memantapkan blog.
• footer: biasanya sama seperti sidebar tetapi posisinya berada di bawah.

  Ketika kita sudah menentukan layoutnya kita bisa mulai untuk mendesain terlebih dahulu bagaimana bentuk, warna, jenis font yang akan digunakan pada blog kita menggunakan aplikasi seperti photoshop, gimp, dll, jika sudah mendesain bagaimana bentuk dan lainnya, kita bisa langsung ke tahap selanjutnya.

Menentukan tempat untuk percobaan membuat template.

  Pertama-tama saya biasanya membuat terlebih dahulu sebuah blog baru untuk dibuat percobaan membuat template blog, jadi sekarang kita buat terlebih dahulu blog baru untuk percobaan kita.

  Udah pada bisa kan membuat blog baru di blogger, caranya pergi ke dasbor lalu pilih blog baru lalu masukan judul, alamat blog, lalu pilih sembarang template, lalu pilih buat blog.

Buat blog percobaan dulu bro.

  Lalu setelah membuat blog baru, kita masukan deskripsi blognya terlebih dahulu, masuk ke setelan > pilih edit dalam deskripsi > masukan deskripsi > simpan perubahan. Sekarang pilih preferensi penelusuran > aktifkan deskripsi > masukan deskripsi > simpan perubahan.

[update]UPDATE: Karena postingan ini tidak kunjung di update, maka postingan ini dialihkan ke postingan yang berjudul Cara membuat template blog sediri dengan mudah. Sekian.[/update]

  Setelah itu kita buat postingan, postingannya acak aja ya gan soalnya buat percobaan aja, di dalamnya berisikan teks yang biasanya berisi lorem ipsum kolor melorot amit amit, yang kayak gitu deh pokoknya, lalu beberapa foto yang rata nya berbeda-beda, jangan lupa untuk atribut title dan alt nya juga tambahkan, lalu blockquote, list, header, dll semua bagian yang ada pada postingan semua masukin gan, buatlah beberapa postingan, 5 atau secukupnya saja untuk percobaan. contohnya seperti http://ghaniproject.blogspot.com/2015/06/lorem-ipsum.html

  Langkah selanjutnya ...

Ngoding template blog sendiri.

  Sebagaimana yang kita tahu bahwa jika kita ingin membuat sebuah template blog sendiri, kita harus tahu bahasa pemograman web, seperti html, css, dll, kita bisa mempelajarinya di internet dan atau membaca buku yang membahas tentang itu, mungkin disini saya akan sharing beberapa saja yang saya tahu mengenai pemograman web, soalnya saya juga masih belajar, kita sama-sama belajar :D. oke lanjut...

  Untuk bagian ini kita masuk ke bagian Template, lalu pilih Edit HTML, lalu semua kode yang ada disana kita blok lalu kita hapus hingga bersih, lalu copy paste semua kode dibawah ini kedalamnya.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
 <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
 <meta content='keyword anda disini' name='keywords'/><!--keyword blog-->
    <b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title><!--judul blog-->
    <b:skin><![CDATA[
/*-----------------------------------------------
Pembuat
Name:     Test
Designer: Irfan Muhammad Ghani/ nama pacar
URL:      http://irfanmghani.blogspot.com/
----------------------------------------------- */
/*tempat meletakan css disini*/
]]></b:skin>
  </head>
  <body>
   <div id='outer-wrapper'><!--bagian outer wrapper start-->
  <div id='header-wrapper'><!--bagian header start-->
  <b:section class='header' id='header' maxwidgets='1'>
          <b:widget id='Header1' locked='true' title='Irfan Muhammad Ghani (Header)' type='Header'/>
  </b:section>
        </div><!--akhir bagian header-->
        <div id='main-wrapper'><!--main wrapper start-->
                <b:section class='main' id='main'>
                  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
                </b:section>
        </div><!--main wrapper enddd-->
        <div class='clear'>&#160;</div>
  <div class='clear'/>
  <div id='sidebar-wrapper'><!--sidebar mulai-->
   <b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
  </div><!--sidebarr end-->
       <div id='footer-wrapper'><!--bagian footer mulai-->
   <b:section class='footer' id='footer-1' showaddelement='yes'/>
       </div><!--bagian footer end-->
    </div><!--outer wrapper end-->
  </body>
</html>

  Lalu Simpan template, dan silahkan lihat blognya, kurang lebih akan menjadi seperti ini.

  Masih berupa polosan, hanya berupa text dan background putih saja. Sekarang kita coba untuk memaparkan beberapa elemen yang ada pada template tersebut.

<meta content='keyword anda disini' name='keywords'/>

  Adalah tag meta untuk keyword, ganti text yang berwarna merah dengan keyword blog kita, sekarang kita perhatikan pada kode sidebar.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
</div>

  Atribut yang di tandai dengan warna merah (showaddelement='yes') pada bagian sidebar tersebut menandakan bahwa kita bisa menambahkan lebih dari 1 widget pada bagian tersebut.

  Untuk atribut yang warna biru (class='sidebar'), adalah atribut yang berfungsi sebagai selektor yang nantinya pada bagian tersebut kita bisa memanggil style css untuk mempercantik tampilan pada bagian tersebut, untuk isi atributnya terserah, tpi alangkah lebih baik jika isinya tidak jauh dari nama bagian yang ingin kita buat, seperti kita akan membuat sidebar maka isinya juga sidebar, contoh penerapannya :



  Untuk yang bagian warna hijau (id='sidebar-1'), sama saja seperti class hanya saja selektor id hanya berlaku satu kali pada bagian halaman web, ketika ada 2 maka yang pertamalah yang akan aktif, memang pada style css nya bisa diterapkan pada keduanya, tapi tidak untuk javascript, contoh: (klik result)

  Mungkin sekarang sudah sedikit mengerti kan, kesimpulannya class dan id kegunaannya sama yaitu sebagai selektor dan juga sebagai pemanggil kode css, untuk class di awali dengan titik (.sidebar), dan untuk id diawali dengan pagar (#outer-wrapper), perbedaan antara class dan id adalah dalam penggunaannya, attribut class bisa di pakai banyak dengan isi atribut yang sama, sedangkan attribut id hanya bisa dipakai sekali dengan satu isi attribut.

  Sekarang kita lanjut ke bagian dekorasi dengan menggunakan css klik cara membuat template blog sendiri - bagian 2  (coming soon).