Cara Menciptakan 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 menciptakan template blog sediri dengan mudah. Sekian.[/update]
Assalamu'alaikum wr wb

Header Ghani Blog :v

  Siapa yang mau menciptakan template blog sendiri untuk di terapkan pada blog kesayangannya hayo ?, apalagi template blognya itu keren, siapa hayo ? jawabannya niscaya kita, kenapa kita ? soalnya saya juga masih mencar ilmu hehe, tpi setidaknya saya punya sedikit materi yang dapat saya share ke temen-temen mengenai hal ini. Kalau ada yang salah tolong koreksi ya, saya juga masih newbie kok, kita saling membuatkan aja hehe.. sepakat lanjut.

Pendahuluan.

  Untuk menciptakan template blog sendiri kita harus menyiapkan susu, cemilan, kreatifitas, dan juga jangan lupa skill pemograman web nya juga perlu, menyerupai html, css, jquery, dll, kalau belum paham duduk kasus itu, kita dapat mencar ilmu di situs w3, soalnya saya juga mencar ilmu css, dll disana dan tidak mengecewakan lengkap, hanya saja berbahasa inggris hehe, itung-itung sambil mencar ilmu bahasa inggris aja :D. Oke eksklusif saja ya.

Tahap awal menciptakan template blog

  Pada kesempatan kali ini kita akan coba menciptakan 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, menyerupai header, sidebar, footer, konten, dll.
• main-wrapper : biasanya daerah untuk menyimpan isi dari konten dari blog, menyerupai judul artikel, isi artikel, komentar, dll.
• sidebar : biasanya di isi dengan widget-widget untuk memantapkan blog.
• footer: biasanya sama menyerupai sidebar tetapi posisinya berada di bawah.

  Ketika kita sudah memilih layoutnya kita dapat mulai untuk mendesain terlebih dahulu bagaimana bentuk, warna, jenis font yang akan digunakan pada blog kita memakai aplikasi menyerupai photoshop, gimp, dll, jikalau sudah mendesain bagaimana bentuk dan lainnya, kita dapat eksklusif ke tahap selanjutnya.

Menentukan daerah untuk percobaan menciptakan template.

  Pertama-tama saya biasanya menciptakan terlebih dahulu sebuah blog gres untuk dibentuk percobaan menciptakan template blog, jadi kini kita buat terlebih dahulu blog gres untuk percobaan kita.

  Udah pada dapat kan menciptakan blog gres di blogger, caranya pergi ke dasbor kemudian pilih blog gres kemudian masukan judul, alamat blog, kemudian pilih sembarang template, kemudian pilih buat blog.

Buat blog percobaan dulu bro.

  Lalu sehabis menciptakan 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 menciptakan 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, kemudian beberapa foto yang rata nya berbeda-beda, jangan lupa untuk atribut title dan alt nya juga tambahkan, kemudian blockquote, list, header, dll semua bab yang ada pada postingan semua masukin gan, buatlah beberapa postingan, 5 atau secukupnya saja untuk percobaan. misalnya seperti https://msglitterazzi.blogspot.com//search?q=cara-membuat-template-blog

  Langkah selanjutnya ...

Ngoding template blog sendiri.

  Sebagaimana yang kita tahu bahwa jikalau kita ingin menciptakan sebuah template blog sendiri, kita harus tahu bahasa pemograman web, menyerupai html, css, dll, kita dapat mempelajarinya di internet dan atau membaca buku yang membahas perihal itu, mungkin disini saya akan sharing beberapa saja yang saya tahu mengenai pemograman web, soalnya saya juga masih belajar, kita sama-sama mencar ilmu :D. sepakat lanjut...

  Untuk bab ini kita masuk ke bab Template, kemudian pilih Edit HTML, kemudian semua aba-aba yang ada disana kita blok kemudian kita hapus sampai bersih, kemudian copy paste semua aba-aba 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 bab 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 menyerupai 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, kini kita perhatikan pada aba-aba 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 bab sidebar tersebut menunjukan bahwa kita dapat menambahkan lebih dari 1 widget pada bab tersebut.

  Untuk atribut yang warna biru (class='sidebar'), yaitu atribut yang berfungsi sebagai selektor yang nantinya pada bab tersebut kita dapat memanggil style css untuk mempercantik tampilan pada bab tersebut, untuk isi atributnya terserah, tpi alangkah lebih baik jikalau isinya tidak jauh dari nama bab yang ingin kita buat, menyerupai kita akan menciptakan sidebar maka isinya juga sidebar, pola penerapannya :



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

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

  Sekarang kita lanjut ke bab dekorasi dengan memakai css klik cara menciptakan template blog sendiri - bab 2  (coming soon).

Share this post