1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[TUTORIAL] Cara membuat template blogspot

Discussion in 'Blogger/Blogspot' started by www.edikomputer.com, Jul 22, 2012.

Page 1 of 3
  1. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    [​IMG]
    ​
    disini ane nggak akan bercuap-cuap langsung ane kasih tutorialnya kalo mau tutorial lebih lengkap dan jelasnya lngsung share disini oke monggo nyimak n CTL+D dulu

    F.A.Q.:

    Q: apa tujuan di buatnya thread ini?
    A: kita saling belajar mungkin suatu saat bermanfaat?

    Q: mengapa bikin thread kayak gini? kan download banyak?
    A: memang banyak download template yang sudah jadi tapi apa kita nggak bangga menggunakan template buatan sendiri?

    Q: kan bisa pake software artister?
    A: saya ingin berbagi aja biar kita memahami bahasa html dan platform template yang digunakan blogger/blogspot


    INDEKS cara membuat template blogger/blogspot
    ​


    yang suka boleh pencet likenya



    ---------- Post added at 06:21 PM ---------- Previous post was at 06:19 PM ----------

    sebelum memulai gunakan template blank dulu gan biar kita belajar dari 0 download templatenya disini hxxp://www.media*fire..com/?j91ixm9ylvd6c5v

    atau copy paste kode berikut ini di html template agan :
    Code:

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html >

<head>

<meta charset='UTF-8'/>

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

<title><data:blog.title/></title>

<b:skin><=!=[=C=D=A=T=A=[

/*bagian ini untuk css*/

]=]=></b:skin>

</head>

<body>

<header id="headerwrap">

<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='judul blog (Header)' type='Header'/>

</b:section>

</header>

<section id="mainwrap">

<b:section class='main section' id='main'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

</section>

</body>

</html>
     
    Last edited: Aug 15, 2012
    www.edikomputer.com, Jul 22, 2012
    #1
    apaaja, fackih, unlock and 14 others like this.
  2. fajarnet

    fajarnet N/A

    Joined:
    Jan 20, 2012
    Messages:
    979
    Likes Received:
    185
    Location:
    fb.com/fjrnug
    ijin nunggu kelanjutanya gan :)
     
    fajarnet, Jul 22, 2012
    #2
  3. asthree

    asthree SIBUK, Email Aja Y?

    Joined:
    Apr 20, 2012
    Messages:
    1,332
    Likes Received:
    578
    Location:
    [email protected]
    menarik nih...... Ditunggu terusannya b :)
     
    asthree, Jul 22, 2012
    #3
  4. abdul_azis

    abdul_azis █--★★KILLER★DESIGNER★★--█

    Joined:
    Apr 14, 2012
    Messages:
    1,196
    Likes Received:
    133
    mantep juga sharingnya om
    lanjutkan ........
    smoga amal baiknya dibalas berlipat2 ganda di bulan suci ini
    amiiiin
     
    abdul_azis, Jul 22, 2012
    #4
  5. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    Membuat style author

    cari kode ini



    Code:
    /*bagian ini untuk css*/

    hapus kode diatas lalu copy dengan kode ini

    Code:
        /*-----------------

    Blogger Template Style

    Name: theme style (Ganti dengan nama template kamu)

Url : hxxp://urlblogkamu.com ( Ganti Dengan url blog kamu)

    author : edi prasetiyo ( Ganti Dengan Nama kamu)

    design : edikomputer tm (ganti dengan siapa yang membut desain template ini)

    version : 1.0 (versi pertama yang kamu buat)

    ------------------------*/
    kemudian save dan template kamu sudah memiliki nama sendiri, teks warna merah bisa kamu ganti sesuai selera
     
    www.edikomputer.com, Jul 22, 2012
    #5
  6. CIVILIAN

    CIVILIAN Super Hero

    Joined:
    Feb 27, 2012
    Messages:
    2,671
    Likes Received:
    166
    wah mastah nih turun tangan..ilmu yg brmanfaat thnks bgt :kembang:
     
    CIVILIAN, Jul 22, 2012
    #6
  7. wedhos

    wedhos Ads.id Fan

    Joined:
    May 27, 2012
    Messages:
    106
    Likes Received:
    7
    Location:
    surabaya
    gelar tikar dulu ah....!
    ijin nyimak mastah....
     
    wedhos, Jul 22, 2012
    #7
  8. ranup

    ranup Hero

    Joined:
    Sep 20, 2011
    Messages:
    572
    Likes Received:
    45
    sik asik nih thread... bookmark dolo :D
     
    ranup, Jul 22, 2012
    #8
  9. facebox

    facebox Ads.id Fan

    Joined:
    Sep 4, 2011
    Messages:
    141
    Likes Received:
    0
    Mantap nih bro :)
     
    facebox, Jul 22, 2012
    #9
  10. naruto45

    naruto45 123

    Joined:
    Nov 2, 2010
    Messages:
    691
    Likes Received:
    65
    mantap om. menunggu kelanjutannya :)
    terima kasih om atas sharenya. bookmark dulu biar enak kalo cari :)
     
    naruto45, Jul 22, 2012
    #10
  11. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    membuat Style Body

    cari kode :


    Code:
    ]]></b:skin>
    kemudian copy paste kode ini tepat diatasnya

    Code:
    body {

     background: #fff;

     font-family: verdana;

     color: #000;

     }
     
    www.edikomputer.com, Jul 22, 2012
    #11
  12. herculesx

    herculesx Super Hero

    Joined:
    Apr 18, 2010
    Messages:
    3,208
    Likes Received:
    97
    Ikut nyimak,, ditunggu kelanjutannya..
     
    herculesx, Jul 22, 2012
    #12
  13. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    [h=2]membuat header dan logo[/h]
    wuoke mari kita lanjutkan gan
    Header berfungsi untuk menampilkan judul blog atau logo dan sekarang sudah berkembang untuk di buat space adsense namun kita belajar dasarnya dulu biar nanti bisa di kembangkan lagi

    oke sekarang tambahkan kode css ini di bawah kode wrapper
    Code:
    #headerwrap {

    background:#000;

    height:90px;

    width:900px;

    }



    .logo{

    margin:0 auto;

    text-align: left;

    float:left;

    color:#fff;

    height:90px;

    width:300px;

    }
    headerwrap berfungsi untuk membatasi semua yang ada pada header seperti logo, adsense dan kalo agan mau nambahin widget juga bisa yang penting jngn melebihi kapasitas headerwrap ini

    keterangan :
    #headerwrap
    background:#000 : berarti background yg kita buat berwarna hitam kamu bisa ganti sesuai selera
    height dan width : adalah tinggi dan lebar area header

    .logo
    text-align: left; : format tulisan logo adalah rata kiri jika kamu tidak ingin menggunakan logo bitmap dengan warna teks putih
    float:left : letak logo berada di sebelah kiri
    width:300px;
    : nah dengan lebar 300 berarti kita msh punya space 600 dan itulah space ads yang nanti kita kembangkan tapi nanti aja ya,,


    apakah sudah cukup sekian? oh tentu saja belum karena kita baru buat cssnya nanti kita panggil kode css tadi ke html untuk di tampilkan di blog oke sekarng cari kode :

    Code:
     <div id='wrapper'>
    kemudian copy code ini di bawahnya :
    Code:
    <div id='headerwrap'>

    <div class='logo'>

    <b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='Theme Style (Header)' type='Header'/>

    </b:section>

    </div>

    </div>
    lo gan itu yg logo kok pake class nggak pake id?nah itu dia perbedaan class sama id kalo klass css di tandai dengan tanda (.) (lihat kode css di atas) sedangkan kalo id itu di tandai dengan tanda (#)
    (lihat kode css di atas) nah sekarang kita akan memasang logonya silahkan klik menu * Page Elements nah disana akan ada 1 widget (header) klik edit kemudian upload logo kamu kalo belum punya pake logo ini aja nggak papa
    View attachment 22297
    kalo udah save dan lihat hasilnya
    oke sampai disini dulu ya nanti kita lanjut lagi

    kalo mau liat demonya gan hxxp://themestyle.blogspot.com
     
    www.edikomputer.com, Jul 22, 2012
    #13
  14. Asime.Teriz

    Asime.Teriz Super Hero

    Joined:
    Jan 24, 2012
    Messages:
    1,447
    Likes Received:
    36
    Numpang gelar tikar dolo, sambil nyimak dan nunggu klanjutan..:-B
    Skalian nunggu saur... :coffee:
     
    Asime.Teriz, Jul 24, 2012
    #14
  15. Rifqi Azhar Nugraha

    Rifqi Azhar Nugraha Ads.id Fan

    Joined:
    Oct 5, 2011
    Messages:
    194
    Likes Received:
    4
    Location:
    Bandung
    ijin belajar gan.. hehehe...
     
    Rifqi Azhar Nugraha, Jul 24, 2012
    #15
  16. maswaone

    maswaone Ads.id Fan

    Joined:
    Jul 13, 2012
    Messages:
    165
    Likes Received:
    13
    Location:
    bekasi
    ikut gan. ane juga pake blogcepot ni
     
    maswaone, Jul 24, 2012
    #16
  17. layar

    layar Newbie

    Joined:
    Jan 13, 2012
    Messages:
    30
    Likes Received:
    0
    Location:
    surakarta
    siapin bantal untuk nyimak om ;p
     
    layar, Jul 24, 2012
    #17
  18. s3mprulbaru

    s3mprulbaru Ads.id Fan

    Joined:
    Jun 20, 2012
    Messages:
    130
    Likes Received:
    0
    Location:
    DJOMBANG INDONESIA
    ikutan bok mark lah.........tak konsentrasi ya bacanya.he...he....:D
     
    s3mprulbaru, Jul 24, 2012
    #18
  19. jawsplanet

    jawsplanet Super Hero

    Joined:
    Apr 12, 2011
    Messages:
    1,776
    Likes Received:
    104
    Location:
    Tangerang
    mantep nih ky'y,nanti ane coba praktekin kalo mau terjun ke blogcepot
     
    jawsplanet, Jul 24, 2012
    #19
  20. jeehan

    jeehan Super Hero

    Joined:
    Aug 16, 2011
    Messages:
    968
    Likes Received:
    132
    mantap gan... sekalian nitip pertanyaan...
    1. themes cepot kan xml. nah kita bikinnya di notepad dulu, atau lsg di program xml nya.. apa namanya..
    2. kalo mau pasang adsense di bawah judul post dan bawah post, jangan lupa dibahas ya..

    like pencetttteeddd...
     
    jeehan, Jul 25, 2012
    #20
Page 1 of 3

Share This Page