Belajar Buat Template Blogger Dari 0

Discussion in 'Blogger' started by mugianto, Mar 12, 2016.

Tags:
?

Bermanfaat?

  1. Bermanfaat Sekali

    4 vote(s)
    80.0%

  2. Tidak Bermanfaat

    1 vote(s)
    20.0%
Multiple votes are allowed.
Page 1 of 2
  1. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Howdy 'Sohib-M' apa kabarnya?
    Pada artikel kali ini saya akan Berbagi pengalaman saya dalam 'Belajar Buat Template Blogger' kepada kalian, dan kembali saya tekankan, bahwa di sini saya tidak memberikan 'Tutorial' ataupun mengajarkan, saya hanya Berbagi sedikit pengetahuan saya dalam 'Belajar Buat Template Blogger'. Untuk selengkapnya mari kita lanjutkan membaca artikel ini.

    Sebelum kita masuk lebih dalam, di wajibkan bagi 'Sohib-M' sudah mempunyai akun 'Blogger' terlebih dahulu, dan persyaratan untuk bisa mempunyai akun 'Blogger' adalah sudah mempunyai 'Gmail' (jika belum punya bisa baca artikel ini: Cara Membuat Akun Google/Gmail) jika sudah, kalian juga harus punya akun 'Google Plus/G+' (Jika belum punya bisa baca artikel ini: Cara Membuat Akun Google Plus). Jika persyaratan sudah terpenuhi, yuk kita langsung menuju topik pembahasan pertama kita, yaitu 'Menghancurkan Template Bawaan Blogger'.
    Klik Disini, atau mengetiknya langsung pada url browser kalian www.blogger.com. Jika sudah kalian akan diarahkan masuk ke halaman Blogger seperti terlihat di bawah ini:


    [​IMG]
    Admin Blogger

    Jika 'Sohib-M' sebelumnya telah membuat blog, maka blog kalian akan muncul di halaman ini (anak panah berwarna hijau). Namun jika 'Sohib-M' belum memiliki blog, langsung saja klik tombol buat blog (anak panah berwarna hitam).
    Note: Saran saya, karena ini terbilang belajar bersama, buat saja blog baru. Karena kita akan sama-sama mengikuti tahap-tahapan dalam Membuat Template Blogger.

    Setelah 'Sohib-M' mengklik 'Buat Blog' blogger akan memunculkan/pop-up bagan untuk kita membuat blog baru kita, seperti terlihat pada gambar di bawah ini:


    [​IMG]
    Buat Blog

    Pada bagan tersebut 'Sohib-M' wajib mengisi nama judul blog kalian (anak panah berwarna hijau) dan url alamat blog (anak panah berwarna hitam) dan juga memilih sebuah template dari banyaknya Template Bawaan Blogger (anak panah berwarna biru). Sementara untuk anak panah berwarna merah, akan bisa di klik jika kita telah mengisi semua yang di atas dengan benar.

    Jika sudah selesai, 'Sohib-M' akan diarahkan ke halaman 'Dashboard Blogger' kalian, seperti terlihat pada gambar di bawah ini.


    [​IMG]
    Dashboard Blogger

    Saya harap 'Sohib-M' telah banyak mengerti tentang fitur-fitur yang ada di halaman 'Dashboard Blogger' ini, karena kita tidak akan membahas satu-persatu fungsi-fungsi mereka. Yuk langsung saja klita fokus dalam 'Belajar Membuat Template Blogger' klik saja 'Template' (anak panah berwarna hitam). Lalu klik 'Edit HTML' seperti terlihat pada gambar di bawah ini.

    [​IMG]
    Edit HTML Blogger


    'Sobih-M' akan disuguhkan tampilan bagian dalam HTML pada Template Blogger seperti ini:


    [​IMG]
    Halaman Edit HTML Blogger

    Sebelum kita lanjut, ada baiknya 'Sohib-M' intip dulu blog yang sudah kalian buat (anak panah berwarna merah), tampilannya yang ada adalah template yang sudah kita pilih saat membuat blog tadi.
    Kembali ke halaman edit HTML, karena kita akan membuat Template dari 0, jadi kita perlu Menghancurkan Template Bawaan Bloggernya, klik kiri pada mouse di bagian dalam edit HTML, lalu tekan ctrl + A terus klik Delete/Hapus. Sekarang template nya sudah benar-benar kosong, kalian bisa test simpan/save template, dan secara cepat Blogger akan memberikan peringatan seperti ini 'Kesalahan saat mengurai XML, baris 1, kolom 1: Premature end of file'. Itu berarti kita tidak akan bisa menyimpan/save template jika tidak ada isinya.

    Berarti kita sekarang mempunyai target baru, dan apa itu? Targetnya adalah supaya kita bisa menyimpan/save template kita dengan kode-kode yang kita akan terapkan. Jadi langkah selanjutnya adalah kita membuat template, lakukan saja seperti 'Sohib-M' membuat template biasa.

    Kita pasang kode HTML biasa:
    Code:
    <html>
<head>
<title>Buat Template</title>
</head>
<body>
</body>
</html>
    Lalu simpan/save tamplate lihat apa yang terjadi. Terjadi error dengan tulisan 'There should be one and only one skin in the template, and we found: 0', yang berarti 'harus ada satu dan satu-satunya skin di templatenya' berarti di dalam kode syntact di atas kurang tag skin/b:skin, mari kita tambahkan tag b:skin di antara tag <head></head>, seperti di bawah ini
    Code:
    <html>
<head>
<title>Buat Template</title>
<b:skin></b:skin>
</head>
<body>
</body>
</html>
    Lalu simpan/save tamplate lihat apa yang terjadi. Terjadi error dengan tulisan 'We did not find any section in your template. A template must have at least one b:section tag.', yang berarti 'tidak ditemukan section apapun pada template, sebuah template setidaknya mempunyai 1 tag b:section'. Jadi mari kita tambahkan tag b:section di antara tag <body></body>, seperti di bawah ini.
    Code:
    <html>
<head>
<title>Buat Template</title>
<b:skin></b:skin>
</head>
<body>
<b:section></b:section></body>
</html>
    Lalu simpan/save tamplate lihat apa yang terjadi. Dan masih terjadi error dengan tulisan 'One of the sections is missing the required id attribute. Every section should have a unique id.', yang berarti 'Semua section harus mempunyai id yang unik dari yang lainnya'. Jadi mari kita berikan id yang unik di dalam tag b:section tersebut, seperti di bawah ini.
    Code:
    <html>
<head>
<title>Buat Template</title>
<b:skin></b:skin>
</head>
<body>
<b:section id='kepala'></b:section>
</body>
</html>
    Lalu simpan/save tamplate lihat apa yang terjadi. Alhasil tidak lagi terjadi error saat kita menyimpan/save template kita, berarti target kita untuk bisa menyimpan/save telah tercapai. Kita perlu merefresh browser kita , ini dilakukan untuk melihat ada/tidak-nya perubahan pada susunan kode pada template Blogger kita, setiap kali kita berhasil melakukan perubahan/penambahan. Dan ternyata setelah kita merefresh browser kita, Blogger secara otomatis menyisipkan beberapa kode di dalam template yang sedang kita buat, seperti terlihat di bawah ini.
    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='[URL]http://www.w3.org/1999/xhtml[/URL]' 
xmlns:b='[URL]http://www.google.com/2005/gml/b[/URL]'
xmlns:data='[URL]http://www.google.com/2005/gml/data[/URL]' 
xmlns:expr='[URL]http://www.google.com/2005/gml/expr'>[/URL]'
<head>
<title>Buat Template</title>
<b:skin><![CDATA[]]></b:skin>
</head>
<body>
<b:section id='kepala'/>
</body>
</html>
    Update 27 Februari 2016
    Pada kasus tertentu dengan menggunakan cara di atas tidak akan berhasil dan kalian akan mendapatkan peringatan gagal untuk men-save, atau muncul pop up google rusak. Untuk mengatasi hal tersebut, solusinya adalah langsung menerapkan kode-kode yang di atasCopy-Paste saja kode-kode yang di atas, saran saya sih ketik secara manual, suatu saat juga nanti kalian mengerti bagaimana bahasa yang diterapkan oelh Blogger.

    Pada huruf berwarna merah, Blogger telah mengganti tag pembuka dari HTML template 'Sohib-M' sudah tidak ada lagi kan tag pembuka <html>. Sementara untuk huruf yang berwarna hijau di dalam tag b:skin yaitu '<![CDATA[]]>' tidak akan terlihat jika 'Sohib-M' tidak mengklik di antara tag b:skin-nya, jadi coba saja di klik, sementara pada huruf yang berwarna biru, karena di dalam tag <b:section id='kepala'></b:section> belum terdapat isi, maka secara otomatis Blogger membuat tag penutup langsung.

    Sekarang silakan 'Sohib-M' intip blog kalian, pasti tidak ada apa-apanya, masih seperti kertas kosong, dikarenakan kita belum memasukan apa-apa di dalam template kita. Tapi itu adalah kabar bagus, karena kita telah berhasil 'Menghancurkan Template Bawaan Blogger' dan memulainya dari 0, benar-benar dari 0.

    Jikalau 'Sohib-M' ada yang merasa kurang faham dengan penjelasan di artikel ini, bisa melihatnya langsung dalam channel Youtube saya , dan mungkin penjelasannya lebih rinci pada video di bawah ini

    Pada artikel berikutnya, saya akan berbagi pengalaman saya dalam 'Belajar Buat Template Blogger' tentang 'Membuat Header Dengan Fitur Tambahkan Gadget', jadi nantikan artikelnya ya.

    Semoga 'Sohib-M' dapat sedikit terbantu dengan terbuatnya artikel ini. Kurang lebihnya kualitas artikel yang saya buat ini, saya harap 'Sohib-M' mau memakluminya. Tolong bantu saya, untuk share artikel ini jika bermanfaat, serta bantu like,share dan subscribe social media yang saya punya. Hal tersebut dapat mendongkrak semangat saya untuk terus membuat kelanjutan apa yang tengah saya bahas ini, atas perhatiannya saya ucapkan terima kasih.
     
    Last edited by a moderator: Mar 12, 2016
    mugianto, Mar 12, 2016
    #1
    Ardilas and endah.dedeyuana1 like this.
  2. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,253
    Likes Received:
    2,716
    Trophy Points:
    413
    KangAndre, Mar 12, 2016
    #2
  3. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    mugianto, Mar 12, 2016
    #3
  4. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    mugianto, Mar 12, 2016
    #4
  5. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,253
    Likes Received:
    2,716
    Trophy Points:
    413
    Tidak perlu, sudah diedit oleh moderator agar tidak melanggar rules.
    Ditunggu share lainnya :D
     
    KangAndre, Mar 12, 2016
    #5
    rakiwen likes this.
  6. Malik Abimanyu

    Malik Abimanyu Member

    Joined:
    Jun 23, 2014
    Messages:
    278
    Likes Received:
    16
    Trophy Points:
    18
    Saya coba bikin aja dulu deh, hehe.... nice share gan!
     
    Malik Abimanyu, Mar 13, 2016
    #6
  7. Muhammad Khoir

    Muhammad Khoir Super Level

    Joined:
    Jun 10, 2014
    Messages:
    2,874
    Likes Received:
    363
    Trophy Points:
    83
    Google+:
    Kurang begitu paham masalah script... Mending pakek yang sudah jadi...! gratisan banyak...!
     
    Muhammad Khoir, Mar 13, 2016
    #7
  8. Malik Abimanyu

    Malik Abimanyu Member

    Joined:
    Jun 23, 2014
    Messages:
    278
    Likes Received:
    16
    Trophy Points:
    18
    Tapi gak ada salahnya belajar mas, hehe :D
     
    Malik Abimanyu, Mar 13, 2016
    #8
  9. Qoeple

    Qoeple Member

    Joined:
    Nov 21, 2015
    Messages:
    551
    Likes Received:
    90
    Trophy Points:
    28
    Google+:
    Berarti tinggal copas kode ini ya Gan ?

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='[URL]http://www.w3.org/1999/xhtml[/URL]'
xmlns:b='[URL]http://www.google.com/2005/gml/b[/URL]'
xmlns:data='[URL]http://www.google.com/2005/gml/data[/URL]'
xmlns:expr='[URL]http://www.google.com/2005/gml/expr'>[/URL]'
<head>
<title>Buat Template</title>
<b:skin><![CDATA[]]></b:skin>
</head>
<body>
<b:section id='kepala'/>
</body>
</html>
    Ini kode template dasarnya ya ?
     
    Qoeple, Mar 13, 2016
    #9
  10. Minecraftndns

    Minecraftndns Active Member

    Joined:
    Dec 13, 2015
    Messages:
    922
    Likes Received:
    100
    Trophy Points:
    43
    terlalu berbelit2 tutornya mas, coba buat yg to the point aja mas...
    nice share lah :D
     
    Minecraftndns, Mar 13, 2016
    #10
  11. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    iya gan itu susunan dasarnya buat lolos menghancurkan template bloggernya
     
    mugianto, Mar 13, 2016
    #11
  12. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Kalau t
    o the Point kesian yang mau belajar serius kang hehehe btw dah kasih masukan
     
    mugianto, Mar 13, 2016
    #12
  13. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Saya setuju sama Mas Malik, nanti juga pasti pengen punya template sendiri hehehe
     
    mugianto, Mar 13, 2016
    #13
  14. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    suatu saat juga mas Khoir bakal mau belajar bikin template sendiri, mengasikan loh mas hehe
     
    mugianto, Mar 13, 2016
    #14
  15. Minecraftndns

    Minecraftndns Active Member

    Joined:
    Dec 13, 2015
    Messages:
    922
    Likes Received:
    100
    Trophy Points:
    43
    iia ane sih tau kang, tapi jangan di isikan tulisan yg ngebahas tata cara bikin blog lah, jadinya postingannya agak terlihat maksa biar jadi panjang...
    maaf nih agak ngritik dikit, tapi kalo agan merasa itu pas sih gapapa. Itu pemikiran ane aja :D
     
    Minecraftndns, Mar 13, 2016
    #15
  16. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Sama-sama Mas Malik, semoga lancar belajarnya, saya juga masih belajar
     
    mugianto, Mar 13, 2016
    #16
  17. Garett

    Garett Super Level

    Joined:
    Apr 13, 2015
    Messages:
    1,105
    Likes Received:
    1,049
    Trophy Points:
    163
    Google+:
    Blogger Template Pre-render. Layaknya pada Tumblr; hanya operasional template, tanpa merubah sistem operasional (Front-End). Block dan baris HTML plus tag spesial untuk mencetak halaman yang diinginkan. Anda harus mengerti dasar HTML/CSS dan Js plus Tag spesial yang disediakan penyedia layanan.

    Saya biasa pakai Twig, Swig atau Liquid sebagai pre-processor Front-End design dan template engine. Ini menyenangkan, anda tidak perlu menulis ulang seluruh block kode berulang-ulang.
     
    Garett, Mar 13, 2016
    #17
  18. Malik Abimanyu

    Malik Abimanyu Member

    Joined:
    Jun 23, 2014
    Messages:
    278
    Likes Received:
    16
    Trophy Points:
    18
    Hehe, oke mas, sama-sama belajar kita :D
     
    Malik Abimanyu, Mar 14, 2016
    #18
  19. Muhammad Khoir

    Muhammad Khoir Super Level

    Joined:
    Jun 10, 2014
    Messages:
    2,874
    Likes Received:
    363
    Trophy Points:
    83
    Google+:
    Yupz...! Tapi otak ane dangkal,,,! Sudah dari tahun 2014 yg nyoba...! Ampek cari program seperti dreamweaver dan artisteer...! Malah mentok dan tetep gak bisa....! Ane sukanya edit yg sudah jadi...! Tinggal ditambahin atau dikurangin...! :D
    Asyik sih....! Tapi untuk sekarang ane nyerah....! Eman kuota....! Mending untuk nulis post dan cari referensi..! :D
     
    Muhammad Khoir, Mar 14, 2016
    #19
  20. Dina Astuti

    Dina Astuti New Member

    Joined:
    Nov 7, 2015
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    1
    Kalau buat yang mau fokus di html, dan punya waktu yang banyak memang bagus buat belajar ini deh, tapi khusus yang tidak punya waktu, tinggal download atau beli, banyak kok templte hehe.. tapi makasih mas sudah sharing.
     
    Dina Astuti, Mar 14, 2016
    #20
  21. Si Raja

    Si Raja Member

    Joined:
    Nov 24, 2015
    Messages:
    851
    Likes Received:
    70
    Trophy Points:
    28
    mantap..
    kalau Raja pakai bawaan Blogspot ajach..!!
     
    Si Raja, Mar 14, 2016
    #20
Page 1 of 2
Loading...
Similar Threads - Belajar Buat Template
  1. ali58a

    [Ask] belajar

    ali58a, Feb 23, 2017, in forum: Blogger
    Replies:
    3
    Views:
    1,208
    Faisal Reza
    Feb 27, 2017
  2. desi ambar sari

    Belajar SEO jika setengah setengah dapat menyebabkan gangguan kejiwaan

    desi ambar sari, Jul 10, 2016, in forum: Blogger
    Replies:
    60
    Views:
    9,223
    Pian
    Jul 31, 2016
  3. AhmadWafa

    Capek mana bikin artikel sama belajar SEO?

    AhmadWafa, Oct 25, 2013, in forum: Blogger
    Replies:
    7
    Views:
    1,309
    sutrisno
    Oct 5, 2016
  4. Si Raja

    (Ask) Template Blogspot Gratis buat member

    Si Raja, May 16, 2017, in forum: Blogger
    Replies:
    1
    Views:
    1,448
    KangAndre
    May 16, 2017
  5. Pasha Lovarian

    [ASK] Cara membuat Shortener Generate Link Domain Sendiri

    Pasha Lovarian, Mar 15, 2017, in forum: Blogger
    Replies:
    5
    Views:
    3,850
    compzone08
    Oct 3, 2017

Share This Page