Friday, February 25, 2011

Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot ( Part 7)

Posted by dav on 8:28 AM
Cara Membuat template sederhana Blogspot Part 7Cara Membuat template sederhana Blogspot Part 7 ini mau kasih tau bagaimana nambah kode khusus untuk menampilkan Judul dan Diskripsi pada Header Blog kita. Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4, Part 5, Part 6

Yuks kita mulai... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 6 sudah kita pasang template yang kita buat ke Blog kamu. Dan sekarang kita akan menambah kode-kode yang di gunakan untuk template Blogspot, kita tidak lagi menggunakan HTML Kit tapi langsung edit di blog kita. Ikuti langkah-langkah di bawah ini :
  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML jangan lupa beri tanda cek pada Expand Template Widget. Cari kode CSS di bawah ini :
    #header {
    ...........
    }

    Lalu Tambahkan di bawahnya kode html di bawah ini :

    #header h1 {
    margin:5px 5px 0 0;
    padding:15px 20px 5px 20px;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-family: Georgia, Serif;
    font-size:24px;
    font-weight:bold;
    }
    #header .description {
    color: #f3f2e8;
    margin-left: 0px;
    padding-left: 20px;
    font-family:Georgia, Times New Roman;
    font-size:14px;
    font-style:normal;
    font-weight:bold;
    }
  3. langkah berikutnya cari kode di bawah ini :
    <div id='header'>
    header
    </div>

    ganti tulisan heade yang di apit <div id='header'>... </div> ganti dengan kode dibawah ini :
    <b:section class='header' id='gadgetheader' preferred='yes'/>

    Kemudian klik tombol Simpan Template

  4. Selanjutnya uncheck pada Expand Template Widget
  5. Klik pada tab Element halaman, dan akan terlihat struktur dari template blog kamu. Pada posisi header terdapat tulisan Tambah Gadget,
    klik disana maka akan muncul jendela baru untuk memilih gadget pilih header halaman klik tanda (+)
    Cara Membuat template sederhana Blogspot Part 7
    Lalu isi judul blog maupun diskripsinya lalu klik simpan.
    untuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) taraa akan muncul seperti gambar di bawah ini :
    Cara Membuat template sederhana Blogspot Part 7Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

    di sana terdapat navbar, judul blog dan diskripsi blog... bagaimana serukan... ? makanya disimak terus... jangan lupa coment ya... tanya juga boleh...

ok sekian dulu ya artikel cara membuat template sederhana blogspot Part 7 tunggu tanggal mainya Part 8.. cauuuu

Part 8 - Membuat Top Menu Template Blogspot

Sunday, February 20, 2011

Merubah kode HTML menjadi XML ( Part 6)

Posted by dav on 7:45 AM
Part 6 kita akan merubah kode HTML template menjadi XML agar dapat di pasang pada blogspot, OK sudah siap lanjut? Jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4, Part 5

Let’s Go... Setelah semua urusan kode html dan kode css selesai kita buat, ini saatnya menambahkan kode khusus untuk Blogspot supaya dapat kita pasang template yang kita buat di Blogspot. OK.. ikuti langkah-langkah di bawah ini :

  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Muncul halaman yang kita buat kemarin. Cari kode :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    Yang ada di bagian paling atas, lalu ganti kode tersebut dengan kode di bawah ini :

    <?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 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'>


  3. Kemudian dibawah kode <head>tambahan kode di bawah ini :

    <b:include data='blog' name='all-head-content'/>

    Lalu pada kode :

    <title>Desain Template Blog</title>

    Tulisan Template Blog Sederhana ganti dengan kode dibawah ini :

    <data:blog.pageTitle/>

    Dan kode :

    <style type="text/css">
    diganti dengan kode
    <b:skin><![CDATA[

    Kode Lengkapnya seperti gambar dibawah ini :
    cara membuat template blogspot
    Kemudian cari kode
    </style>
    untuk mempermudah pencarian silahkan tekan tombol ctrl+f dan copas kode tadi. Kalau sudah ketemu ganti kode tersebut dengan kode
    ]]></b:skin>


  4. Nah kalau proses ini sudah selesai coba klik file> save as beri nama template diikuti .xml lalau klik save. Nah jadi sudah file template kita dan siap di upload di blog kamu. Untuk cara upload bisa baca artikel Cara Ganti Template Blogspot. setelah di upload klik kanan pada lihat blog lalu klik “Open Link in new Tab” bagaimana sudah muncul template hasil karya kamu sendiri? Untuk sementara seperti itu ya dan tampilannya seperti gambar di bawah ini :
    cara membuat template blogspot
    Kalau ada yang menemukan sidebar-kanannya masih di bawah sidebar-kiri masuk ke Edit HTML lalu cari #content. Untuk mempermudah silahkan tekan F3 pada keyboard untuk mencarinya. Kalau sudah ketemu ubah width nya menjadi 492px, lalu klik tombol Simpan Template.
    Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

Lihat kembali blog kamu bim salabimmmm... jadi seperti gambar diatas kan?... ok berhasil... berhasil... berhasil... ada yang kurang paham? komen aja ya atau contact us nanti kami jawabnya...
Untuk berikutnya Cara Membuat Template Sederhana Blogspot akan menambahkan kode khusus Blogspot untuk menampilkan judul Blog dan Diskripsi. Baiklah kawan Permak Blogs tunggu tutorial blog selanjutnya ya... cauuuuuuu....

Part7 - Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot

Monday, February 14, 2011

Mengatur Bagian Footer ( Part 5)

Posted by dav on 3:58 PM
Tuorial template Part 5 mengatur bagian Footer Blogspot, lanjutkan nyimaknya ya.. jangan lupa bagi yang ketinggalan baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4

Lansung kita mulai aja ya? Setelah kita mengatur sidebar dan kontent, kali ini kita akan bagian akhir dari suatu blog yaitu footer. Bagian footer biasanya diisi dengan copyright atau pembuat design. OK sudah siap? Jangan lupa sediakan minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :

  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan footer lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIVDIV_footer
    Setelah muncul boks TagsWizard ketik footer pada kotak isian di samping “id” kemudaian klik ok.
    DIv_Sidebar1
    Ganti tulisan footer dengan tulisan " (&#169;) 2011 Design by nama kamu ". Jangan lupa hapus kurung buka dan tutup yang menyertai &amp....copyright.png
  3. Langkah selanjutnya kita buat code CSS untuk bagian footer. scroll layar ke atas sampai terlihat #content {..... } copy paste code CSS dibawah ini untuk footer.
    #footer {
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    text-align: center;
    color: $footerTextColor;
    font: $footerTextFont;
    line-height: 1.2em;
    }

    Sudah dan haslinya seperti dibahah ini.. betul?CSS_footer.png
  4. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini
Tambahan :

Untuk menghilangkan efek float silahkan tambahkan kode ini

<br class="clear"/>

sebelum </div> sidebar dan <div id="footer"> seperti dibawah ini
Dan juga tambahkan kode CSS untuk clear di bawah ini di bawah kode CSS #footer{....} :
.clear {
clear: both;
text-align: center;
}
kemudian tekan tombol crtl+s.

Nah selesai sudah pembuatan template tahap awal, untuk artikel berikutnya kita akan memasukan kode khusus blogspot ke template agar dapat dipasang di blog kamu. lho kok tampilannya cuma begitu kalau mau nambah gambar, background dll bagaimana? Terus simak aja ya biar lebih jelas... kalau ada yang masih bingung comment aja ya... ok ciau

Part 6 - Merubah kode HTML menjadi XML

Saturday, February 12, 2011

Mengatur Sidebar dan Content ( Part 4)

Posted by dav on 7:59 PM
Yuhuuuu Part 4 mengatur bagian Sidebar dan Content Blogspot sudah hadir... silahkan di simak ya.. jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3

OK kita mulai setelah kita bermain di header dan top Menu, kaliini kita akan bermain air di sidebar dan content. Sudah siap? Ambil minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :
  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan ruang-sidebarkiri lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
    3. Setelah muncul boks TagsWizard ketik sidebar pada kotak isian di samping “id” kemudaian klik ok.Pindah </div> ke bawah tulisan sidebar-kiri .
  3. Lakukan langkah-langkah pada poin ke 2 untuk bagian sidebar–kanan dan kontent. Untuk id sidebar kanan tulis sidebar dan id kontent isi dengan content. Hapus tulisan ruang-sidebarkiri, kontent, dan ruang-sidebarkanan . dan hasilnya seperti di bawah ini :
  4. Langkah selanjutnya kita buat code CSS masing masing bagian . scroll layar ke atas sampai terlihat #top-menu {..... } copy paste code CSS dibawah ini untuk sidebar.
    #sidebar {
    margin:2px;
    padding:3px;
    width:200px;
    border:1px solid #000;background:#abc;
    float:left;
    Overflow:hidden;
    }
    Dan juga copy paste kode CSS di bawah ini untuk content.
    #content {
    Overflow:hidden;
    margin:2px;
    padding:3px;
    width:500px;
    border:1px solid #000;
    background:#eee;
    float:left;text-align: left;
    }
    Sudah dan haslinya seperti dibahah ini.. betul?

  5. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini

OK sekian dulu ya untuk pengaturan sidebar dan content, untuk artikel berikutnya kita akan mengatur bagian footer(Part 5). Terus simak ya biar tuntas... kalau ada yang masih bingung comenta aja ya... ok ciau

Wednesday, February 9, 2011

Mengatur Header dan Top Menu (Part 3)

Posted by dav on 1:36 AM
Mengatur Header dan Top Menu (Part 3)Sudah Part 3 ya...hmmm ok kita akan melanjutkan dengan menata bagian header dan top menu, bagi yang ketinggalan kereta baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2

Sudah ? Mari kita mulai bermain di header dan top Menu. Di dalam header akan kita letakan Judul Blog dan Diskripsi. Dan top menu berisi menu-menu untuk memudahkan pengunjung blog menemukan artikel yang mereka cari. Ok langsung ikuti langkah-langkah di bawah ini :
  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan kotakblog lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
    Setelah muncul boks TagsWizard ketik kotakblog pada kotak isian di samping “id” kemudaian klik ok. Makan akan muncul kode <div id="kotakblog">kotakblog</div>,pindah </div> ke posisi dibawah footer dan hapus tulisan kotakblog yang berwarna hitam.
  3. Setelah itu blok tulisan header, lalu ulangi langkah sebelumnya dengan mengklik “HTML TagsWizard” pada toolbar atas, pilih DIV. Dan pada kotak isian disamping id tulis header lalu klik ok.
    Maka akan muncul kode header pindah ke bawah diskripsi blog lalu hapus tulisan header yang diluar <> tara... jadilah seperti dibawah ini :
  4. Lakukan hal yang sama dengan tulisan top-menu, blog tulisan tersebut klik “HTML TagsWizard” , tulis top-menu di kotak isian disamping id klik ok. Akan muncul tags <div id="top-menu">top-menu</div> lalu hapus tulisan top-menu dan pindah </div> kebawah Contact Us. Hasilnya seperti dibawah ini :
  5. Nah sudah selesai membuat tag header dan top menu, sekarang saatnya mengatur letak masing – masing content dengan CSS.
  6. Scroll lembar halaman sampai ketemu <style type="text/css"><!-- // --> </style> nah disini kita tulis CSS nya. Input_Style_CSSb
  7. Langkah pertama copy paste kode dibawah ini diantara <!-- // --> :
    body {
    padding:3px;
    background:#fff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    margin:2px; }
    #kotakblog {
    margin:2px;
    padding:3px;
    width:930px;
    border:1px solid #000;
    background:#0ff;
    margin:0 auto;
    }
    Akan jadi seperti di bawah ini :Kemudian copy paste kode dibawah ini di bawahnya :
    #header {
    margin:2px;
    padding:3px;
    width:920px;
    height:100px;
    border:1px solid #000;
    background:#0f0;text-align: left;
    }
    #top-menu {
    margin:2px;
    padding:3px;
    width:920px;
    height:30px;
    border:1px solid #000;
    background:#ccc;text-align: left;
    }
    Akan jadi seperti di bawah ini :cara mengatur CSS top menu
  8. Save dengan menekan ctrl+s, nah selesai sudah tahap 3 mengaturan header dan top menu. Bila klik preview seharusnya hasilnya seperti dibawah ini :

Sekarang kita sudah membuat struktur ruangan untuk header dan top menu.Bagaimana mudah bukan? ok sampai disini dulu ya... :) di artikel berikutnya saya akan membagi ilmu lanjutan Bagaimana Mengatur bagian Sidebar dan Kontent.

Sunday, February 6, 2011

Cara Membuat Template Sederhana Blogspot (Part 2 )

Posted by dav on 6:43 AM
Template_BlogspotHalo ketemu lagi, apa kabarnya? Artikel kali ini melanjutkan artikel cara membuat template sederhana blogspot part 1, sudah pada baca belum ? yang belum baca dulu ya :

Cara Membuat Template Sederhana Blogspot (Part 1 )

Kalau yang sudah bisa langsung nich ke langkah selanjutnya, yaitu penulisan kode HTML dan Kode CSS. Untuk Part 2 ini kita akan membuat kode HTML standart, penulisan bagian-bagian yang akan di tampilkan pada template. Oh ya sudah download HTML Kit belum? Kalau belum nich download di sini Download HTML Kit , jangan lupa di instal ya. Kalau sudah mari kita memulai menulis kode HTML.

LANGKAH PERTAMA
  1. Buka Software HTML Kit , klik di Create a new file lalu klik ok
  2. Nah sekarang muncul halaman baru dengan beberapa kode HTML, ini kode standart yang ada di web . Ganti tulisan yang diapit <title>....</title> dengan judul blog yang kamu suka.Open_new_HTMLKit
  3. Setelah tag ...</title> klik enter, lalu tambahkan style. Caranya klik Action > Tools > HTML Tags Wizard > STYLE dan klik ok.Input_Style_CSSMaka pada halaman akan muncul tulisan <style type=”text/css”>....</style> , nah disinilah nanti kita akan meletakan kode CSS untuk mengatur letak komponen dari template.Input_Style_CSSb
  4. Langkah selanjutnya, pindah crusor ke antara <body>.... </body>. Di posisi ini digunakan untuk menempatkan isi dari bagian-bagian template blog. Sekarang siapkan struktur yang sudah di buat di kertas pada artikel Cara Membuat Template Sederhana Blogspot (Part 1 ) dan tulis seperti gambar di bawah ini :struktur-html Keterangan :
    Kotakblog – kotak dimana kita meletakan semua komponen yang akan kita tampilkan di template blog seperti header, sidebar, kontent dan footer.
    Header - Tempat diletakannya judul blog dan diskripsi
    Top menu - Tempat diletakannya menu-menu yang membantu pengunjung menemukan yang mereka cari dalam blog kamu
    Kotak-content - kotak dimana kita meletakan sidebar kiri, konten (postingan), dan sidebar kanan.
    Ruang-sidebarkiri - ruang dimana kita meletakan sidebar kiri
    Kontent – ruang dimana kita meletakan judul artikel, isi artikel, metatag komentar maupun form komentar
    Ruang-sidebarkanan - ruang dimana kita meletakan sidebar kanan
    Footer – biasanya sich digunakan untuk meletakan tahun pembuatan blog dan identitas pembuat.
  5. Sementara di simpan dulu ya, tekan ctrl+s dan beri nama desain template blogspot.
OK sudah mulai jelas ya ? kalau belum kontak kami aja atau tinggalkan komentar :). Untuk sementara segitu dulu ya karena sudah mulai ngatuk, mau tidur dulu... untuk part 3 kita akan membahas penulisan kode HTML dan CSS untuk bagian Header maupun Top Menu. Jadi jangan lupa ya mampir lagi di mari ... coming soon Mengatur Header dan Top Menu (Part 3 )

Friday, February 4, 2011

Cara membuat Template Sederhana Blogspot ( Part 1)

Posted by dav on 6:53 AM
cara membuat Template Blogspot sederhanaHalo apakabar nich lama ndak besua ya? Permak Blogs mau bagi-bagi ilmu lagi nich cara membuat template blogspot sederhana. Dalam artikel ini akan di bahas cara membuat template sederhana blogspot, dan topik ini akan dibagi bebrapa part atau seri.Pada part 1 ini Permak Blogs memberikan petunjuk bagaimana persiapan pembuatan template. Ok apa aja sich yang harus dipersiapkan ? Berikut ini yang mesti disiapkan :
  1. Yang pertama pensil dan kertas untuk membuat sketsa tampilan dan letak komponen template kamu.
  2. Yang kedua tentu saja komputer atau laptop, jangan pake mesin ketik ya...
  3. Yang ketiga software HTML KIT untuk membantu menulis kode html dan css. Sebenernya bisa juga pake alat sederhana menggunakan notepad tapi mending pake HTML-Kit aja ya.. hehe... kalau yang belum punya download aja di sini “ DOWNLOAD HTML-Kit”
  4. Yang keempat koneksi internet, ini terakhir bila template sudah siap di pasang pada blog kamu.
  5. Dan terakhir yang kelima adalah berdoa biar lancar buatnya :)

Nah jadi itu yang perlu disiapkan, bagaimana apa kamu dah siap? kalau belum tak tunggu dech... tak tidur dulu ya.. zzzzzz...zzzzz.....zzzz.... brrrrrrrr...
OK kita anggap sudah ya, kalau sudah ikuti langkah - langkah di bawah ini :

LANGKAH PERTAMA

Ambil pensil dan kertas kosong, lalu gambar sketsa tempalte yang mau kamu rencanakan. Nah kalau di artikel ini seketsanya seperti di bawah ini ngikutin aja ya biar ngerti dulu kalau udah berhasil silahkan buat sendiri sketsanya sesuai keingann kamu :Kalau dalam bahasa tulisan bisa di tulis sebagai berikut :
  1. Header
    2. Judul Blog
    Diskripsi Blog

  2. Top Menu
    3. Home
    About Me
    Contact Us

  3. Sidebar Kiri

  4. Kontent
    5. Judul Artikel
    Isi Posting
    Meta Artikel
    Kolom Komentar
    Form Komentar

  5. Sidebar Kanan
  6. Footer
Nah bagaimana sudah ada gambaran kan buat templatenya, kalau begitu sampai disini dulu ya? Ane mau istirahat dulu, besok baru dilanjutin. Langkah selanjutnya di artikel berikutnya : Cara membuat Template Sederhana Blogspot ( Part 2)
Tongkrongin terus ya... cauuuu...
Subscribe to: Posts (Atom)