RadarURL

Artikel Terbaru

Membuat Template Sendiri

Jika tertarik ingin membuat template sendiri di blogspot, berikut tutorialnya bagaimana dasar dari membuat template. Yang diperlukan pertama kali adalah kita wajib memiliki pola atau gambaran seperti apa template yang nantinya akan kita buat.
Pada dasarnya sebuah template memiliki Header, Sidebar 1 dan sidebar 2, Main-wrapper dan Footer.

Berikut ini merupakan contoh dari struktur dasar template:
   
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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'>

      <head>
        <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
        <b:include data='blog' name='all-head-content'/>
        <title><data:blog.pageTitle/></title>  <!-- ini title blog -->

        <b:skin><![CDATA[/*  <<---- ini awal kode CSS/Skin
    -----------------------------------------------
    Blogger Template Style
    Name:     Project1
    Designer: AnakBaik
    URL:      http://mdiery.blogspot.com/
    ----------------------------------------------- */
    /* AREA KODE CSS */
    body { /* disini nanti kode CSS untuk body */

    }

    #outer-wrapper { /* disini nanti kode css untuk outer wrapper */

    }


    /* Awal untuk kode css header wrapper
    ======================================================== */

    #header-wrapper {

    }

    /* Awal kode css untuk block sidebar1 dan block sidebar2
    ======================================================== */
     #sidebar1 {
    }
    #sidebar2 {

    }

    /* awal kode css untuk main wrapper dan posting
    ======================================================== */
    #main-wrapper {

    }

    /* Awal kode css untuk footer wrapper
    ======================================================== */
    #footer {

    }

    ]]></b:skin>  <!-- ini batas akhir css / skin -->

       <!-- Disini bisa diletakkan kode javascripts -->
      </head>
      <body>
       <div id='outer-wrapper'> <!-- Awal dari Outer Wrapper -->

           <div id='header-wrapper'>
                   <!-- Ini untuk Wadah Judul dan keterangan Blog -->
            </div>

            <div id='sidebar1'>
                   <!-- Ini untuk Wadah widget blog sidebar1 -->
            </div>

            <div id='main-wrapper'>
                      <!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
            </div>

           <div id='sidebar2'>
                        <!-- Ini untuk Wadah widget blog sidebar2 -->
           </div>

            <div class='clear'>&#160;</div>

    <div class='clear'/><!-- batas ruang dari outer: JANGAN DIHAPUS!!! -->

           <div id='footer'>
                          <!-- Ini untuk Wadah isi dari footer -->
           </div>

        </div> <!-- Akhir dari Outer Wrapper -->

      </body>
    </html>


    Sobat anak baik, dalam setiap menambahkan element harus disertai kode CSS supaya bisa mengkonfigurasi tampilannya, jadi ketika kita akan menambahkan widget harus ada pasangannya masing masing antara widget HTML dan CSS. Untuk lebih jelasnya sobat anak baik perhatikan kode :

<div id='header-wrapper'> pada contoh diatas merupakan pasangan dari kode CSS #header-wrapper { }

* Begitu juga dengan yang lainnya.

id ini harus bersifat unik maksudnya harus beda atau tidak sama, karena jika tidak beda maka template tidak akan bekerja dengan baik, malahan tidak akan berpengaruh pada perubahan  template.
Seperti itulah kira kira dari isi kerangka sebuah template blogger, sobat tinggal menambahkan wigdet HTML ataupun kode Css sesuai keinginan sobat.

Semoga membantu.

Salam Blogger

26 komentar:

  1. wachh.. mantap neh,
    belajar Membuat Template Sendiri

    BalasHapus
    Balasan
    1. tapi masih sederhana sob maklum taraf belajar

      Hapus
  2. Balasan
    1. masih bentuk konsep sob belum mengisinya css dan html sob

      Hapus
    2. simpen dulu kapan kapan buat kreasi :)

      Hapus
    3. silahkan sob, bisa bahan praktekan juga

      Hapus
  3. Wah mantap neh sob,,bisa untuk latihan membuat template sendiri,,,

    BalasHapus
    Balasan
    1. iya sob itu juga hasil belajar otodidak, jadi ada yang kurang mohon maklum

      Hapus
  4. sy simpan..dulu sob... :)
    nanti ta coba..trima kasih ya sdh berbagi :)

    BalasHapus
  5. waw.... hebat hebat sobb.. udah tau sekarang struktur themplete .. hebat dehh pokoknya

    BalasHapus
    Balasan
    1. hasil dari belajar otodidak sob, kalau ada yang salah dimaklumi ya sob

      Hapus
    2. saya juga masihh belajar kok sobbb

      Hapus
    3. sepertinya senior jauh lebih hebat ilmunya deh dari pada saya;)

      Hapus
  6. keren keren.... jadi tau sekarang ..
    makasi Infonya Sobb

    BalasHapus

Sebelum berkomentar baca dulu aturannya :

1. Jangan melakukan spam. Seperti mencantumkan link tertentu, baik link hidup atau link mati
2. Berkomentarlah dengan sopan,
3. Jangan menyinggung masalah SARA.


Jika ternyata melakukan tersebut diatas Admin berhak menghapus komentar tersebut. Harap dijadikan maklum

Silahkan mengisi komentar anda.

Terimakasih

 
AnakBaik © 2012 Enjoy Share With Us. |Tim Kreatif AnakBaik | Indahnya Berbagi AnakBaik