Upload Template Blogger dan Membuat Template Blog Sendiri

Cara Upload dan Mengganti Template Blogger serta membuat template blog sendiri.

Tutorial cara upload template Blogger ini merupakan penyegaran dan penambahan informasi dari artikel sebelumnya tentang Cara Merubah Template Di Blog Blogspot. Sebelumnya sudah dijelaskan cara merubah template dan kali ditambah dengan cara membuat template blog sendiri secara offline dan online serta cara upload template yang sudah dibuat sendiri maupun download dari penyedia template.

Tutorial ini dibagi kedalam 2 bagian penting yaitu :

  1. Cara mengganti template menggunakan template bawaan atau upload template Blogger yang sudah jadi baik itu template gratis maupun template berbayar..
  2. Cara membuat template sendiri secara online maupun menggunakan software secara offline.

Kenapa dibuat dalam satu ulasan, supaya Anda dapat dengan mudah mendapatkan informasi dan panduan dalam satu tempat.

Bagian 1

Cara mengganti template Blogger Blogspot menggunakan template bawaan

Template asal belum diganti Upload Template Blogger
Template Contempo Light default install blog

Seperti yang sudah dijelaskan sebelumnya untuk mengganti template blogger caranya sebagai berikut.

Dari admin Blogger buka menu Tema dan pilih template yang diinginkan, gulir ke bawah untuk melihat semua template yang tersedia.

Pilih template bawaan Blogger Upload Template Blogger
Pilih template yang tersedia

Dalam halaman ini selain hanya mengganti template juga bisa melakukan beberapa hal seperti penyesuaian, pencadangan, pemulihan, beralih ke tema klasik dan edit HTML.

Fitur sesuaikan Upload Template Blogger
Fitur sesuaikan
fitur tambahan Upload Template Blogger
Fitur tambahan

Penyesuaian :

Dalam penyesuaian Anda bisa melakukan beberapa hal seperti mengganti gambar latar belakang dan warna, merubah jenis huruf, ukuran dan warna huruf serta konfigurasi untuk menampilkan fitur profil, form subscribe, halaman dll.

Fitur penyesuaian template
Penyesuaian template

Cadangkan :

Fitur ini untuk mencadangkan / backup template, biasanya dilakukan jika ingin mengganti dengan template lain tetapi mungkin akan di upload kembali karena pada template sudah dilakukan penyesuaian tertentu, sehingga jika template kembali digunakan tidak perlu melakukan penyesuaian ulang benar-benar dari awal.

Fitur pencadangan Upload Template Blogger
Fitur pencadangan

Perlu diperhatikan dalam penjelasan gambar diatas bahwa ada keterangan “beberapa gadget mungkin tidak dicadangkan” artinya bahwa walaupun di cadangkan mungkin beberapa gadget (konten/penyesuaian di sidebar) akan kembali ke awal sebelum dilakukan penyesuaian. Jadi Anda harus menyesuaikan ulang walaupun tidak semuanya.

Pulihkan :

Berfungsi untuk memulihkan template menggunakan file template yang sudah di unduh juga sekaligus berfungsi untuk unggah tema baru. Ketika file tema di unggah maka akan menggantikan template yang ada dan merubah semua penyesuaian sesuai template yang baru di upload.

Upload template Blogger
Upload template

Beralih ke tema Klasik :

Menggunakan template Blogger generasi pertama sebelum generasi terakhir, mungkin beberapa orang masih ingin menggunakannya dengan alasan tertentu namun saya tidak menyarankan, gunakanlah template generasi terbaru karena lebih kekinian.

Template klasik Blogger
Template klasik Blogger

Ketika menggunakan tema klasik. Anda tidak akan memiliki akses ke banyak fitur baru seperti desainer tema.

Cara upload template Blogger dari penyedia template lainnya (bukan template bawaan)

Untuk upload template ke Blogger dari pengembang template (bukan template bawaan) caranya sama yaitu menggunakan fitur pulihkan seperti yang telah dijelaskan diatas. Anda bisa gunakan template Blogger gratis maupun template Blogger berbayar.

Download template Blogger

Untuk template Blogger versi gratis akan kita gunakan dari btemplates.com silahkan pilih template yang diinginkan. Anda bisa melihat demo terlebih dahulu atau langsung Download. Selain menyediakan template versi gratis mereka juga menyediakan versi berbayar.

Dalam contoh kali ini kita akan gunakan template versi gratis LMS Education

Sebelum template di upload, baca terlebih dahulu dokumentasi yang sudah tersedia untuk masing-masing template. Dokumentasi ini sebagai panduan dalam menerapkan penyesuaian seperti penyesuaian gambar slider, sidebar, menu, logo dan lain sebagainya.

Dan penting ketika menggunakan template gratis adalah syarat dan ketentuan yang telah dibuat oleh pengembang template. Biasanya template gratis melarang menghapus link kredit, pastikan Anda membaca terlebih dahulu syarat dan ketentuan dari pembuat template.

Sedangkan jika Anda ingin menggunakan template Blogger premium bisa mendapataknnya di https://themeforest.net/category/blogging/blogger atau template Blogger Indonesia berbaayr di https://sugeng.id

Upload template Blogger

Setelah template di unduh kemudian ekstrak dan kembali ke menu Tema -> Pulihkan -> Upload dan pilih file template dengan ekstensi XML.

File template blogger
File template blogger

Untuk template custom biasanya tidak tersedia pratinjau, silahkan Anda akses saja halaman depan blog untuk melihat hasil upload template baru.

Pratinjau tema tidak tersedia
Pratinjau tema tidak tersedia

Selanjutnya adalah menyesuaikan template. Cara terbaik untuk menyesuaikan tema custom yaitu membaca dokumentasi yang telah disediakan. Berikut link dokumentasi LMS Education https://btemplates.com/blog/lms-education-template/

Silahkan Anda sesuaikan halaman, tata letak, logo dan lain sebagainya.


Bagian 2

Cara membuat template Blog Sendiri

Membuat tema blog yang menarik tidak dapat dipungkiri harus memahami koding terutama cara penggunaan dan penerapan HTML serta CSS. Jika Anda tidak berniat mempelajari HTML dan CSS silahkan lewati bagian ini dan gunakan template yang sudah jadi.

Apa itu HTML ?

Hypertext Markup Language ( HTML ) adalah bahasa markup standar untuk dokumen yang dirancang untuk ditampilkan di browser web. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa skrip seperti JavaScript .

Browser web menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen tersebut menjadi halaman web multimedia. HTML mendeskripsikan struktur halaman web secara semantik dan awalnya menyertakan isyarat untuk tampilan dokumen.

Sumber https://en.wikipedia.org/wiki/HTML

Apa itu CSS ?

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, body text, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sumber https://id.wikipedia.org/wiki/Cascading_Style_Sheets

Untuk menjelaskan cara menggunakan CSS dan HTML tidaklah akan cukup dalam satu halaman tutorial, maka dari itu saya beritahukan tempat untuk mempelajari HTML dan CSS tanpa harus berpindah-pindah sumber.

Tampilan home w3school
Halaman muka w3school | gambar screenshot dari w3school.com

Anda bisa belajar HTML dan CSS sampai bisa melalui www.w3schools.com yang merupakan tempat belajar berbagai bahasa pemrograman secara gratis. w3schools.com sangat cocok sebagai tempat belajar HTML CSS terutama untuk pemula karena kemudahan navigasi konten pembelajaran. Anda juga bisa menerapkan latihan dan hasilnya bisa dilihat secara langsung.

Latihan langsung di w3school | gambar screenshot dari w3school.com

Setelah Anda memahami HTML dan CSS walau mungkin tidak secara keseluruhan, maka sudah bisa mulai membuat templat Blog. Ada istilah belajar sambil berjalan artinya mendalami HTML CSS sambil praktek membuat template.

Gabungkan pengetahuan Anda tentang HTML dan CSS dengan alat membuat template, baik itu secara online maupun software pembuat template offline.

Tetapi Anda jangan kaget ketika membandingkan alat pembuat template online maupun offline dengan template sudah jadi buatan para profesional. Pada awalnya template yang dibuat sendiri mungkin jauh dari harapan, untuk mempercantiknya perlu mempelajari dan praktek secara terus menerus.

Membuat template Blogger sendiri online

Membuat template blog secara online menggunakan generator template artinya tidak memerlukan software khusus, Anda bisa langsung membuat template asalkan ada koneksi internet. Ada beberapa tempat untuk membuat template blogger secara online.

Dalam ulasan ini ada dua tempat untuk membuat template blog secara online yaitu :

Alat online pertama psyc.horm.org

Pengaturan Dasar

Pengaturan Dasar | gambar screenshot dari psyc.horm.org
Pengaturan Dasar | gambar screenshot dari psyc.horm.org
  • Provider pilih Blogger.
  • Site Description isi dengan deskripsi singkat blog untuk SEO. Misalnya Blog Tentang Kerajinan Tangan.
  • Site Keywords untuk SEO isi dengan kata kunci yang terkait dengan konten blog. Misalnya kerajinan kayu, kerajinan rotan, kerajinan kertas dll.
  • Page Title untuk membuat judul Blog terkait SEO.
  • Width Unit apakah akan menggunakan px atau persen.
  • Background untuk penyesuaian apakah akan menggunakan warna latar atau menggunakan gambar.
  • Link untuk menentukan warna link aktif, link ketika didekati kursor dan link setelah dikunjungi.

Konfigurasi Judul

Pengaturan Judul | gambar screenshot dari psyc.horm.org
Pengaturan Judul | gambar screenshot dari psyc.horm.org

Pada pengaturan judul, Anda bisa menentukan jenis latar judul apakah ingin menggunakan warna atau gambar. Juga terdapat pengaturan isi judul, deskripsi, ukuran huruf dan warna serta jarak spasi antara tulisan judul dengan box judul.

Pengaturan Kolom

Pada pengaturan kolom Anda bisa menentukan tata letak kolom apakah ingin menggunakan satu kolom pos saja tanpa sidebar kiri kanan, dua kolom dengan sidebar kanan dan sidebar kiri atau tiga kolom yang di dalam nya terdapat kolom pos termasuk sidebar kiri dan kanan.

Pengaturan Kolom di PsycHo
Pengaturan Kolom | gambar screenshot dari psyc.horm.org

Side Schema untuk menentukan pengaturan box dimana konten sidebar di tempatkan. Pengaturan Side Schema tidak akan mempengaruhi secara langsung isi konten nya. Contoh nya pengaturan background sidebar.

Side Theme untuk pengaturan tampilan konten sidebar seperti warna tulisan, ukuran dan lain sebagainya.

Post Schema sama prinsipnya seperti Side Schema yaitu pengaturan global box post/artikel. Dan Post Theme untuk pengaturan tampilan di dalam Post Schema.

Setelah memahami penggunaan dasar, selanjutnya tinggal berlatih dan membiasakan. Tidak ada cara terbaik selain dengan terus berlatih.

Untuk mendapatkan hasilnya tinggal klik Get Code di Pengaturan Dasar. Centang persetujuan syarat dan ketentuan kemudian Get PsycHokinesis.

Get PsyHokinesis | gambar screenshot dari psyc.horm.org

Copy keseluruhan kode HTML dan simpan di editor misalnya di notepad, kalau saya sendiri lebih suka menggunakan Notepad++ kemudian simpan file menggunakan ekstensi .xml misalnya templateblogsayav1.xml

Sebelum dijadikan .xml
Setelah dijadikan .xml

Setelah file disimpan kemudian upload file template tersebut melalui admin blog dan hasilnya seperti dibawah ini.

Contoh hasil template generator dengan psyc.horm.org
Contoh hasil template generator dengan psyc.horm.org

Hasil diatas tanpa melakukan kustom lebih jauh, hanya layout dan tampilan standar. Anda bisa buat tampilan sesuai keinginan karena setiap orang memiliki penilaian berbeda.

Perlu diketahui bahwa membuat template blogspot secara online menggunakan template generator dengan psyc.horm.org berlaku untuk template klasik generasi pertama. Jadi pada saat upload template silahkan beralih ke Tema Klasik generasi pertama.

Alat online kedua www.pimp-my-profile.com

Pada dasarnya menggunakan template generator dari pimp-my-profile.com memiliki persamaan umum untuk membuat template yaitu :

Pilih jenis platform yaitu blogger.

Halaman muka gambar screenshot dari pimp-my-profile.com
Halaman muka | gambar screenshot dari pimp-my-profile.com

Pada sidebar kiri terlihat beberapa pilihan seperti Blogger Editor, Blogger Template, Blogger Graphics dan Surveys.

Blogger Editor gambar screenshot dari pimp-my-profile.com
Blogger Editor | gambar screenshot dari pimp-my-profile.com
  • Blogger Editor untuk modifikasi tampilan.
  • Blogger Templates untuk memilih dan menggunakan template yang sudah disediakan, template ini dalam bagian tertentu juga bisa di modifikasi. Terdapat banyak kategori template yang bisa dipilih.
  • Blogger Graphics merupakan bahan sumber gambar untuk isi konten.
  • Surveys untuk membuat form survey dengan menggunakan kode yang sudah tersedia.

Setelah dimodifikasi selanjutnya simpan kode, caranya pada tab Finish klik Generate my Code. Copy semua kode, simpan menggunakan cara yang sama seperti diatas dan simpan sebagai file .xml

Template Generate Code
Generate Code | gambar screenshot dari pimp-my-profile.com

Dari kedua tempat membuat template blog secara online diatas, saya lebih menyarankan menggunakan psyc.horm.org

Membuat template blog offline dengan software

Selain menggunakan cara online untuk membuat template Blogger juga bisa dilakukan dengan cara offline menggunakan software.

Ada dua software cukup terkenal untuk membuat template blog offline yaitu :

Membuat template Blog menggunakan Artisteer

Artisteer adalah software pembuat berbagai macam tema website yang bisa di install di sistem operasi Windows. Anda bisa membuat template HTML, Blogger, WordPress, Joomla, Drupal, dan lainnya.

Halaman muka Artisteer gambar screenshot software Artisteer
Halaman muka Artisteer | gambar screenshot software Artisteer

Dalam ulasan ini tidak akan dibahas detail tentang cara menggunakan Artisteer, selain karena banyak juga karena sudah terdapat panduan lengkap yang sudah disediakan oleh Artisteer itu sendiri disini Dokumentasi Artisteer.

Keunggulan Artisteer.

  • Menurut saya ini benar-benar mudah digunakan, Anda hanya perlu mempelajarinya beberapa menit saja bagi web developer atau jika pemula mungkin perlu hanya beberapa jam saja.
  • Tersedia template sudah jadi dan tinggal di modifikasi.
  • Tersedia saran desain. Maksud dari saran desain misalnya jika Anda memilih warna dasar biru maka dari mulai background, tombol, tulisan, gambar dan lainnya akan disesuaikan lebih ke biru sehingga lebih mudah dalam menentukan penyesuaian warna.
  • Hasil template sudah responsive untuk semua ukuran layar.
  • Memungkinkan membuat mega Menu dan menu vertikal dalam bentuk accordion.
  • Membuat tombol termasuk saran tombol.
  • Membuat slider tanpa alat tambahan dan masih banyak lagi lainnya.
  • Ketika upload template Blogger tidak perlu lagi dirubah menjadi .xml karena sudah otomatis dan bisa langsung di upload.

Konfigurasi dasar perlu Anda ketahui adalah bagian Options.

Opsi dasar Artisteer | gambar screenshot software Artisteer
Opsi dasar Artisteer | gambar screenshot software Artisteer

Pada bagian ini untuk menentukan :

  • General menentukan responsive, menempatkan favicon.
  • CSS tambahan memungkinkan Anda bisa menyimpan style tambahan sendiri.
  • Deskripsi termasuk Author pembuat template, link Author, versi template, tag template dan URL pembuat template.
  • Watermark untuk menandai apakah ini template sudah jadi atau hanya berupa contoh.
  • Footernote untuk membuat link Author dan menghilangkan link ke Artisteer.
  • Tambahan HTML untuk menambahkan kode HTML.
  • Blogger untuk menghilangkan navbar blog.

Secara umum software pembuat template Blog dari Artisteer sangat cocok untuk pemula tapi tidak terbatas untuk professional ketika mereka ingin membuat template dasar yang kemudian dikembangkan.

Selain Artisteer terdapat beberapa software pembuat template lainnya seperti Template Toaster dan themler.io

Untuk kedua software ini belum pernah saya coba tapi jika dilihat sekilas lebih kekinian serta memiliki keunggulan dalam hal jenis template yaitu support Woocommerce, Magento, Virtuemart dan Prestashop. Juga support Bootstrap.

Jika sudah saya coba akan diulas nanti atau Anda bisa langsung mencobanya sendiri dengan download langsung dari website masing-masing.

Perlu diketahui bahwa software pembuat templat blog ini merupakan software berbayar sedangkan versi gratis nya terdapat watermark ketika template di export.

Kesimpulan

Jika anda sebagai pengguna dan ingin cepat mempublikasikan blog sehingga lebih fokus ke isi konten silahkan gunakan template yang sudah jadi. Tapi jika Anda berniat membuat template sendiri untuk keperluan pribadi maupun untuk jasa pembuatan website silahkan gunakan software pembuat template.

Antara pembuat template online dan software offline mana yang lebih baik ? menurut saya menggunakan software offline lebih memiliki kelebihan dibandingkan menggunakan alat online.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.