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

[Share] Caraku mendesain sendiri template blogger menggunakan EasyHtml

Discussion in 'Blogger/Blogspot' started by Cemonggaul, Jan 22, 2013.

Tags:
  1. Cemonggaul

    Cemonggaul Cemonggaul Network

    Joined:
    Nov 24, 2012
    Messages:
    632
    Likes Received:
    57
    Location:
    Cemonggaul Network
    Assalamualaikum wr.wb.
    Permisi Momod, mimin, om satgas, para mastah dan semua warga Ads-id semuanya. Ane cuma ingin share cara nubitol dalam mendesain template sendiri khususnya blogger dengan menggunakan aplikasi EasyHtml sekaligus cara mengaplikasikannya ke dalam blogger. Maaf kalo mungkin salah kamar atau nggak berguna, silahkan di hapus saja

    Langsung saja alat yang dibutuhkan disini adalah color picker dan easy html. Link download bisa lihat di trit iniCode:

    http://www.ads-id.com/forums/showthr...template-dasar

    Setelah terinstal aplikasi EasyHtml dan colorpicker, silahkan buka programnya. Dan klik “create new” letaknya ada disebelah atas kiri kaya lembaran kosong putih polos. Nanti akan terlihat seperti berikut ini

    [​IMG]


    Sebelum mulai ada baiknya buat gambar dulu mau seperti apa tampilan blog kita. Untuk tutorial kali ini kita buat yang simple saja ya seperti contoh gambar berikut.

    [​IMG]

    Habis itu kita buat dulu pemanggil bagiannya. Penempatan kodenya ada diantara <body>sampai dengan </body>. Kodenya seperti ini
    <div id=’……’> isi </div>
    Keterangan : setiap pemanggil baik script maupun html harus diawali dengan tanda “<” . “div” adalah pemanggil html. Dan “id” adalah bagian yang dipanggil. Dan bagian </div> adalah penutup pemanggil html. Dan “isi” adalah isi dari yang dipanggil itu sendiri. Jadi misalkan membuat pemanggil kepala, kodenya adalah <div id=’kepala’> isi kepala </div>.
    Catatan : “kepala” bisa dirubah sesuai keinginan agan, kalo template normalnya biasanya disebut “header”. yang penting jangan ada spasi, jadi missal mau gunakan dua kata seperti kepala botak maka penulisannya <div id=’kepala-botak’> atau <div id=’kepalabotak’>. Disinilah keunikan kalau kita membuat template sendiri. Kita bisa menggunakan pemanggil semau kita, jadi missal dilihat source kodenya pasti unik.​
    Tips : agar tidak lupa dalam manutup suatu pemanggil buatlah dulu pemanggil (<div id=…>) sekaligus penutupnya (</div>). Baru diisi tengahnya. Sebab kalau kita lupa memberi penutup, dijamin template-nya akan eror.​
    Contoh praktek-nya kalau menurut gambar diatas kode selengkapnya nya sebagai berikut;

    [​IMG]

    Sudah selesai pada bagian yang dipanggil. Sekarang lanjut ke pengaturan tampilan.
    Pengaturan tampilan disebut juga dengan CSS. CSS ini penempatannya ada diantara <head> sampai dengan </head>.
    Kode CSS pada dasarnya adalah width, height, margin, padding, background, color, dan border.
    Keterangan :
    Width : lebar Height : tinggi Margin : jarak luar
    Padding : jarak dalam background : latar (bisa warna dan bisa gambar)
    Color: warna teks border: garis sedangkan ukuran yang biasa digunakan adalah px dan em. Font-family:jenis font font-size: ukuran font
    Overflow:hidden (maksudnya bila ada kelebihan akan dipotong) float: posisi penempatan (ini digunakan bila dalam 1 wadah terdapat lebih dari satu bagian yang dipanggil​
    Contoh pengaplikasiannya adalah sebagai berikut:
    Disini saya ambil contoh satu saja yaitu bagian body dan header.
    <style type=’text/css’>
    Body{margin:0;padding:0;text-align:center;}
    #kotak-luar{width:906px;margin-right:auto;margin-left:auto;border:1px solid #000;font-family:Times Arial Helvetica;color:#333;font-size:13px;}
    #kepala{width:900px;height:120px;margin:3px;padding:3px;background:#00F;border:1px solid #000;}
    </style>
    Yang lainnya bisa dilihat di gambar berikut ini.

    [​IMG]

    Sudah selesai dan sudah kelihatan bentuknya sekarang. Anda bisa mendownload untuk mencontoh kode template yang saya buat diatas disini. Setelah diunduh silahkan buka dengan aplikasi EasyHtml Anda.

    Cara mengintegrasikan template hasil EasyHtml ke Blogger
    Untuk mengintegrasikan template karya Anda dari software EasyHtml saya sarankan Anda membuat dulu blog baru dengan nama terserah, tapi saya sarankan untuk membuat nama "bahanpercobaantemplate". Karena nama "bahanpercobaantemplate" sudah saya ambil, silahkan tambah dengan angka. Contoh "bahanpercobaantemplate1" kalau sudah diambil orang ganti angka "1" dengan angka berikutnya sampai dapat. Setelah blog baru terbuat, langkah selanjutnya;

    • Buka menu "Template"
    • Rubah dulu template default-nya menjadi "template sederhana". Letaknya dibagian bawah, silahkan pilih salah satu.
    • Klik "edit HTML"
    • Bagian berikut biarkan saja
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <html b:version='2' class='v2' 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
    <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*​

    • Pada bagian berikut silahkan ganti sesuai selera Anda
    -----------------------------------------------
    Blogger Template Style
    Name: Simple
    Designer: Josh Peterson
    URL: www. noastetic . com
    ----------------------------------------------- */ Seperti contoh berikut​
    [​IMG]



    • Bagian bawah setelah yang saya beri kotak merah seperti pada gambar, silahkan dihapus semua
    • Masukkan kode CSS-nya seperti berikut
    [​IMG]

    • Dibawah CSS tambahkan kode berikut
    ]]></b:skin>
    </head>
    <body>​

    • Kemudian copy semua pemanggil yang ada di EasyHtml setelah tag <BODY> sampai dengan </BODY> apa adanya, dan paste-kan tepat dibawah kode diatas
    • Bagian bawahnya tutup dengan penutup tag </body> dan tag </html>. seperti contoh berikut
    [​IMG]

    • Langkah senjutnya memasukkan bagian pemanggil widget blogger. Bagian yang pertama dirubah adalah kata "isi kepala" yang letaknya dibawah <div id='kepala'>. Ganti dengan kode berikut
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Percobaan Template (Header)' type='Header'/>
    </b:section>​

    • Selanjutnya langsung ke bagian kata "isi postingan", letaknya dibawah kode <div id='kotak-post'>. Ganti dengan kode berikut
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section> ​

    • Lanjut ke kata "tempat widget sidebar". Ganti dengan kode berikut
    <b:section class='sidebar' id='sidebar' preferred='yes'/>​

    • Kata "isi kaki" yang letaknya dibawah kode <div id='kaki'>. Anda bisa menggantinya dengan kode blogger berikut
    <b:section class='foot' id='footer-3' showaddelement='no'>
    <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
    </b:section>
    Atau bisa langsung menggunakan link blog Anda seperti contoh berikut
    Copyright ©<script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script><a href=’http:// bloganda .blogspot.com’>blog anda</a> ​



    • Sudah selesai dan silahkan simpan template Anda.
    • Kalau pada waktu penyimpanan ada yang eror, berarti ada kode yang salah dalam membuatnya. silahkan cek ulang
    Setelah semua selesai silahkan cek tampilan baru blog tersebut. lihat hasil karya Anda.
     
    Cemonggaul, Jan 22, 2013
    #1
    Der Fuhler, ahmad117, NeoHitakiMa and 7 others like this.
  2. Cemonggaul

    Cemonggaul Cemonggaul Network

    Joined:
    Nov 24, 2012
    Messages:
    632
    Likes Received:
    57
    Location:
    Cemonggaul Network
    Berhubung sepertinya kurang ada yang minat dalam mendesain template blogger sendiri, bila ada yang ingin mengetahui kelanjutannya bisa langsung menuju blog ane :D
    Code:
    http://bit.ly/13FsvE2
     
    Last edited: Jan 23, 2013
    Cemonggaul, Jan 22, 2013
    #2
    peeste likes this.
  3. rizky tian

    rizky tian Ads.id Pro

    Joined:
    Nov 17, 2011
    Messages:
    254
    Likes Received:
    6
    Location:
    BK SHE City of Mall
    tq mastash share`a, buat tambahan referensi bg ane yg lgi bljr. ijin bukmak y :senyum:
     
    rizky tian, Jan 22, 2013
    #3
  4. Cemonggaul

    Cemonggaul Cemonggaul Network

    Joined:
    Nov 24, 2012
    Messages:
    632
    Likes Received:
    57
    Location:
    Cemonggaul Network
    siip. tapi jangan panggil mastah donk, jadi malu ni. ane bukan mastah. cuman tau dikit tentang template blogger :)
     
    Cemonggaul, Jan 22, 2013
    #4
  5. blogger33

    blogger33 Super Hero

    Joined:
    Oct 12, 2012
    Messages:
    1,084
    Likes Received:
    54
    share yang bermanfaat...secara memang bagus template unik untuk...meningkatkan visitor
     
    blogger33, Jan 22, 2013
    #5
  6. pyurtube

    pyurtube Super Hero

    Joined:
    Feb 19, 2011
    Messages:
    1,804
    Likes Received:
    70
    Location:
    Senen Jakarta Poesat
    mantaf bgt , ini yg ku cari, thanks alot
     
    pyurtube, Jan 22, 2013
    #6
  7. auriel99

    auriel99 Super Hero

    Joined:
    Jun 7, 2010
    Messages:
    887
    Likes Received:
    14
    Location:
    Temon
    mulai praktek dengan tutorial ini, makasih gan
     
    auriel99, Jan 22, 2013
    #7
  8. Cemonggaul

    Cemonggaul Cemonggaul Network

    Joined:
    Nov 24, 2012
    Messages:
    632
    Likes Received:
    57
    Location:
    Cemonggaul Network
    ini baru dasarnya. nanti masih ada pengaturan CSS untuk isinya seperti H1, post body, kotak komentar, post meta, tanggal dll. Insyaallah kalo udah mood lagi tak sambung ke bagian dalemannya :)
     
    Cemonggaul, Jan 22, 2013
    #8
  9. biyanpasau

    biyanpasau Hero

    Joined:
    Mar 3, 2010
    Messages:
    598
    Likes Received:
    75
    Location:
    I've Got My Eyes On You!
    Bedanya dengan cara yang biasa opo?
     
    biyanpasau, Jan 23, 2013
    #9
  10. Cemonggaul

    Cemonggaul Cemonggaul Network

    Joined:
    Nov 24, 2012
    Messages:
    632
    Likes Received:
    57
    Location:
    Cemonggaul Network
    Perbedaannya kalau menggunakan EasyHtml, kita bisa langsung melihat perubahannya. kalu kita buat dari notepad kan kudu simpan dulu dan dibuka di browser untuk liat perubahannya. bagi newbie kayak ane, tool ini sangat membatu bila ingin mendesain template blog :) . ini kan cuman untuk desain awalnya saja om biar gak bolak-balik save trus buka browser :D
     
    Cemonggaul, Jan 23, 2013
    #10
  11. SenseiQui

    SenseiQui Newbie

    Joined:
    Aug 28, 2011
    Messages:
    41
    Likes Received:
    1
    Mantaaapp ini,..
    Ijin bokmark dolo Mastah,...
     
    SenseiQui, Apr 24, 2013
    #11
  12. SejutaMimpi

    SejutaMimpi Ads.id Pro

    Joined:
    Jul 11, 2012
    Messages:
    341
    Likes Received:
    3
    Location:
    Medan
    wah keren nih ijin nyimak gan..
     
    SejutaMimpi, May 7, 2013
    #12
  13. hardworker88

    hardworker88 Ads.id Fan

    Joined:
    Dec 27, 2015
    Messages:
    222
    Likes Received:
    1
    Bedanya dengan cara yang biasa opo?
     
    hardworker88, Jan 10, 2016
    #13
  14. sukerta

    sukerta Banned

    Joined:
    Dec 27, 2015
    Messages:
    227
    Likes Received:
    2
    Berhubung sepertinya kurang ada yang minat dalam mendesain template blogger sendiri, bila ada yang ingin mengetahui kelanjutannya bisa langsung menuju blog ane


    Code:
    http://bit.ly/13FsvE2
     
    sukerta, Jan 10, 2016
    #14
  15. peeste

    peeste Hero

    Joined:
    Apr 29, 2011
    Messages:
    534
    Likes Received:
    131
    Location:
    Sibolga
    Mantap bro sharenya jadi pengen membuatnya sendiri...
     
    peeste, Jan 10, 2016
    #15
  16. Bloggervin

    Bloggervin Newbie

    Joined:
    Jan 3, 2016
    Messages:
    10
    Likes Received:
    0
    bookmark dulu klo ada waktu luang boleh nyoba ntar
     
    Bloggervin, Jan 11, 2016
    #16
  17. didagoan

    didagoan Ads.id Pro

    Joined:
    Feb 21, 2015
    Messages:
    425
    Likes Received:
    13
    bermanfaat gan. thanks
     
    didagoan, Jan 12, 2016
    #17
  18. Der Fuhler

    Der Fuhler Ads.id Fan

    Joined:
    Jul 9, 2015
    Messages:
    239
    Likes Received:
    292
    lanjutan tutorialnya mana lagi gan?! bagus nih.. kok gak ada lanjutan lagi?!

    greets.
     
    Der Fuhler, Jan 16, 2016
    #18

Share This Page