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: 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: 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. 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. Edit HTML Blogger 'Sobih-M' akan disuguhkan tampilan bagian dalam HTML pada Template Blogger seperti ini: 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. KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 @mugianto lebih baik ke sini dulu https://www.bersosial.com/pages/rules Berapa link yang diperbolehkan dan apa yang dilarang. KangAndre, Mar 12, 2016 #2 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author @Kangandre makasih kang Andre atas perhatiannya siap dilaksanakan mugianto, Mar 12, 2016 #3 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author apa perlu didelete kan post Ku? mugianto, Mar 12, 2016 #4 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 Tidak perlu, sudah diedit oleh moderator agar tidak melanggar rules. Ditunggu share lainnya KangAndre, Mar 12, 2016 #5 rakiwen likes this. 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 Muhammad Khoir Super Level Joined: Jun 10, 2014 Messages: 2,873 Likes Received: 362 Trophy Points: 83 Google+: Author Kurang begitu paham masalah script... Mending pakek yang sudah jadi...! gratisan banyak...! Muhammad Khoir, Mar 13, 2016 #7 Malik Abimanyu Member Joined: Jun 23, 2014 Messages: 278 Likes Received: 16 Trophy Points: 18 Tapi gak ada salahnya belajar mas, hehe Malik Abimanyu, Mar 13, 2016 #8 Qoeple Member Joined: Nov 21, 2015 Messages: 551 Likes Received: 90 Trophy Points: 28 Google+: Author 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 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 Minecraftndns, Mar 13, 2016 #10 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author iya gan itu susunan dasarnya buat lolos menghancurkan template bloggernya mugianto, Mar 13, 2016 #11 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author Kalau t o the Point kesian yang mau belajar serius kang hehehe btw dah kasih masukan mugianto, Mar 13, 2016 #12 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author Saya setuju sama Mas Malik, nanti juga pasti pengen punya template sendiri hehehe mugianto, Mar 13, 2016 #13 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author suatu saat juga mas Khoir bakal mau belajar bikin template sendiri, mengasikan loh mas hehe mugianto, Mar 13, 2016 #14 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 Minecraftndns, Mar 13, 2016 #15 mugianto Member Joined: Mar 7, 2016 Messages: 419 Likes Received: 48 Trophy Points: 28 Google+: Author Sama-sama Mas Malik, semoga lancar belajarnya, saya juga masih belajar mugianto, Mar 13, 2016 #16 Garett Super Level Joined: Apr 13, 2015 Messages: 1,104 Likes Received: 1,049 Trophy Points: 163 Google+: Author 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 Malik Abimanyu Member Joined: Jun 23, 2014 Messages: 278 Likes Received: 16 Trophy Points: 18 Hehe, oke mas, sama-sama belajar kita Malik Abimanyu, Mar 14, 2016 #18 Muhammad Khoir Super Level Joined: Jun 10, 2014 Messages: 2,873 Likes Received: 362 Trophy Points: 83 Google+: Author 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...! Asyik sih....! Tapi untuk sekarang ane nyerah....! Eman kuota....! Mending untuk nulis post dan cari referensi..! Muhammad Khoir, Mar 14, 2016 #19 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 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 (You must log in or sign up to reply here.) Show Ignored Content Page 1 of 2 1 2 Next > Loading... Similar Threads - Belajar Buat Template [Ask] belajar ali58a, Feb 23, 2017, in forum: Blogger Replies: 3 Views: 1,118 Faisal Reza Feb 27, 2017 Belajar SEO jika setengah setengah dapat menyebabkan gangguan kejiwaan desi ambar sari, Jul 10, 2016, in forum: Blogger Replies: 60 Views: 8,464 Pian Jul 31, 2016 Capek mana bikin artikel sama belajar SEO? AhmadWafa, Oct 25, 2013, in forum: Blogger Replies: 7 Views: 1,227 sutrisno Oct 5, 2016 (Ask) Template Blogspot Gratis buat member Si Raja, May 16, 2017, in forum: Blogger Replies: 1 Views: 1,332 KangAndre May 16, 2017 [ASK] Cara membuat Shortener Generate Link Domain Sendiri Pasha Lovarian, Mar 15, 2017, in forum: Blogger Replies: 5 Views: 3,715 compzone08 Oct 3, 2017 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
@mugianto lebih baik ke sini dulu https://www.bersosial.com/pages/rules Berapa link yang diperbolehkan dan apa yang dilarang.
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 ?
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
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.
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...! Asyik sih....! Tapi untuk sekarang ane nyerah....! Eman kuota....! Mending untuk nulis post dan cari referensi..!
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.