Cara Menciptakan Template Blog Sendiri

Teknik Membuat Template Blog Sendiri

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

Header Ghani Blog :v

Siapa yang mau membuat template blog sendiri untuk di terapkan pada blog keakungannya hayo ?, apalagi template blognya itu keren, siapa hayo ? jawabanannya niscaya kita, kenapa kita ? soalnya saya juga masih berguru hehe, tpi setidaknya saya punya sedikit materi yang dapat saya share ke temen-temen terkena hal ini. Kalau ada yang salah tolong koreksi ya, saya juga masih newbie kok, kita saling mengembangkan aja hehe.. baiklah lanjut.

Penlampauan.

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

Tahap awal membuat template blog

Pada peluang kali ini kita akan coba membuat template blog yang simple terlebih lampau, diberikut layoutnya:

Karena postingan ini tidak kunjung di update Teknik Membuat Template Blog Sendiri

Layout yang akan kita buat

Saya jelaskan satu persatu terlebih lampau ya.

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

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

Menentukan kawasan untuk percobaan membuat template.

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

Udah pada dapat kan membuat 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 setelah membuat blog baru, kita masukan deskripsi blognya terlebih lampau, 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 Teknik membuat template blog sediri dengan gampang. Sekian.[/update]

Sesudah itu kita buat postingan, postingannya acak aja ya gan soalnya buat percobaan aja, di dalamnya mencakupkan teks yang biasanya meliputi lorem ipsum kolor melorot amit amit, yang kayak gitu deh pokoknya, kemudian beberapa foto yang rata nya tidak sama-beda, tidakboleh lupa untuk atribut title dan alt nya juga menambahkan, kemudian blockquote, list, header, dll tiruana bab yang ada pada postingan tiruana masukin gan, buatlah beberapa postingan, 5 atau secukupnya saja untuk percobaan. misalnya seperti https://duniainformasisemasa3410.blogspot.com//search?q=cara-menciptakan-template-blog

Langkah selanjutnya ...

Ngoding template blog sendiri.

sepertiyang yang kita tahu bahwa kalau kita ingin membuat sebuah template blog sendiri, kita harus tahu bahasa pemograman web, ibarat html, css, dll, kita dapat mempelajarinya di internet dan atau membaca buku yang mengulas ihwal itu, mungkin disini saya akan sharing beberapa saja yang saya tahu terkena pemograman web, soalnya saya juga masih belajar, kita sama-sama berguru :D. baiklah lanjut...

Untuk bab ini kita masuk ke bab Template, kemudian pilih Edit HTML, kemudian tiruana instruksi yang ada disana kita blok kemudian kita hapus sampai membersihkan, kemudian copy paste tiruana instruksi 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 ibarat ini.

Masih berupa polosan, spesialuntuk 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 instruksi 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 membuktikan bahwa kita dapat menambahkan lebih dari 1 widget pada bab tersebut.

Untuk atribut yang warna biru (class='sidebar'), ialah 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 kalau isinya tidak jauh dari nama bab yang ingin kita buat, ibarat kita akan membuat sidebar maka isinya juga sidebar, teladan penerapannya :

Untuk yang bab warna hijau (id='sidebar-1'), sama saja ibarat class spesialuntuk saja selektor id spesialuntuk berlaku satu kali pada bab halaman web, dikala 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 instruksi css, untuk class di awali dengan titik (.sidebar), dan untuk id diawali dengan pagar (#outer-wrapper), perbedaan antara class dan id ialah dalam penerapannya, attribut class dapat di pakai banyak dengan isi atribut yang sama, sedangkan attribut id spesialuntuk dapat digunakan sekali dengan satu isi attribut.

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