headerummary

Menata Template Blog Sederhana

8 comments
Menata Template Blog Sederhana


بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيم


Tema menulis kali ini berkaitan dengan menata template blog sederhana. Bagi saya cukup challenging dibandingkan tema-tema sebelumnya. Karena butuh effort lebih untuk mengutak-atik pengaturan template sesuai keinginan. Belum lagi saya tidak sedang dekat dengan laptop, membuat otak berputar bagaimana caranya agar tugas ini beres tanpa banyak drama. Dengan tekad dan keberanian, akhirnya saya memulai mengatur template blog melalui smartphone. Mau tau bagaimana keseruannya dan bagaimana caranya template Ummary bisa seperti ini? Simak tips and sharing saya berikut yuk, Sahabat.

Menata Template Blog Sederhana

Pengertian Template 

Barangkali ada yang belum paham, template itu bagian blog sebelah mana. Template adalah tampilan sebuah blog, yang menunjukkan tata letak komponen-komponen blog. Dengan menggunakan template, blogger akan lebih mudah dalam mengelola blog mereka. Saat penulisan artikel, adanya template dapat mengakomodir semua tulisan agar tampak seragam dan rapi sesuai pengaturan. Baik dari ukuran header, posisi artikel, posisi widget, posisi footer, termasuk penggunaan font. Setiap halaman akan terlihat serupa tanpa perlu diubah pada setiap halamannya.

Template bawaan

Flashback sedikit yaa.. Awalnya para peserta Blogspedia Coaching diminta mengganti template bawaan blogspot dengan template unduhan gratis. Namun karena butuh laptop untuk memindahkan kode HTML dan membayangkan rumitnya melakukan pengubahan kode-kode tersebut bipanmelalui smartphone, saya urung. Saya memilih opsi kedua untuk tetap menggunakan template bawaan blogspot.

Blogspot memiliki beberapa template bawaan yang cukup indah untuk diaplikasikan pada blog Sahabat. Sahabat bisa initp di bagian dashboard blogger yang berjudul themes, disana tinggal pilih saja template mana yang sesuai dengan karakter masing-masing. Bila ingin ada perubahan pun, dapat dilakukan dengan mengutak-atik kode HTML atau mengatur layout-nya.


Mengatur Warna Tampilan Template

Blog Ummary ini (sebelumnya) menggunakan template bawaan blogspot berjudul SIMPLE. Template simple ini direkomendasikan karena lebih mudah diutak-atik sesuai kebutuhan blogger. Saat membuat logo yang dominan berwarna baby pink, saya pun memilih warna baby pink dan putih sebagai warna dominan blog ini. Sahabat bisa lihat gambar berikut untuk menentukan warna-warna yang akan digunakan untuk menghiasi template.

Mengatur warna

Beberapa Item Template Bawaan yang Dapat Diubah

Memasang Ikon Social Mediai

Agar pembaca dapat mengenali kita sebagai penulis tidak hanya dari tulisan, Sahabat dapat menambahkan tombol social media pada tampilan blog. Supaya pengunjung dapat mengenali profil kita dan berinteraksi juga melalui social media. Nah, untuk menyempatkan ikon social media pada blog, Sahabat dapat melihat infografis berikut. Untuk kode yang akan dimasukkan, silahkan unduh dari blog-nya mba marita yang saya letakkan di referensi ya. Tinggal pilih sesuai judul yang ingin dicoba.

Memasang Menu Drop Down

Menu drop down ini dapat dipilih sebagai pengganti header page. Isinya sama-sama bisa memuat Home, Sitemap atau Daftar Isi, About Me atau Tentang Blogger, dan halaman lain yang ingin ditambahkan. Kelebihannya, dengan menu drop down, banyaknya halaman yang dicantumkan akan terlihat lebih rapi dan minimalis. Sahabat bisa mencoba mengikuti petunjuk di tautan ini untuk membuatnya.

Memasang Tombol Back To Top

Tombol back to top pada halaman ini terlihat sebagai gambar panah mengarah atas, yang terletak di ujung sebelah kanan bawah. Fungsinya untuk memudahkan mengembalikan artikel yang sedang atau telah dibaca ke posisi teratas. Di referensi sudah saya sematkan link-nya Sahabat, siapa tau mau mencoba membuat.

Memasang Banner Logo Komunitas

Bagian banner ini digunakan untuk menambahkan logo komunitas-komunitas yang Sahabat ikuti beserta tautannya Bila ada pengunjung yang ingin mengetahui komunitas tersebut, tinggal klik saja gambar yang kita input, maka akan langsung dibawa pada website komunitas tersebut. Cek referensi di bawah yang tertulis pembuatan banner logo komunitas, bila Sahabat tertarik mencoba.

Menghilangkan "?m=1"

Kode ini biasanya terlihat pada address bar, pada tampilan home blog. Seperti blog ini sebelumnya, meskipun alamatnya ummary.com, namun saat diakses memiliki embel-embel, terlihat ummary.com?m=1. Dengan cara meng-klik tautan berikut, Sahabat dapat membaca petunjuk pengeditan secara detail.

Perubahan Template

Memasang Template Unduhan

Setelah selesai menghias template disana sini, saya penasaran melihat hasil blog milik teman-teman. MasyaaAllah ternyata bagus-bagus semua, apalagi dengan template unduhan sesuai yang disarankan coach.

Namanya manusia, muncullah rasa ingin memiliki tampilan serupa hehehe.. Seorang teman memberitahu bahwa ia dapat mengubah template blog nya dengan menggunakan smartphone, alhasil saya bersemangat untuk turut mengubah template bawaan blogspot ke template unduhan.


Template Fiksioner

Fiksioner adalah template blogspot buatan igniel.com yang dapat digunakan secara gratis. Kelebihan template ini dilansir dari situs sang pemilik, sangatlah banyak. Tetapi yang menjadi acuan utama sesuai arahan coach, template ini SEO friendly . Yang berarti lebih ramah dan lebih mudah bagi Google saat melakukan pencarian artikel dan meletakkan halaman blog tersebut di halaman pertama Google search.

Selain itu desainnya minimalis dan modern, serta warna pada template juga dapat diubah sesuai selera. Terutama bagi pembaca, Fiksioner sangat mobile friendly. Pembaca dapat langsung memilih dan membaca artikel di halaman pertama, dan tidak dipusingkan dengan aneka widget. Pun saat memuat halaman atau loading nya tergolong cepat. Tentu saja kelebihan ini membuat pembaca nyaman berlama-lama mengulik blog kita.

Template demo

Tutorial Memasang dan Pengaturan

Sebenarnya cukup mudah mengganti template blog dengan template Fiksioner ini, cukup ikuti petunjuk yang sudah dipaparkan. Bila ingin mengunduh, klik disini , dan bila ingin mengaturnya, klik disini. Ada dua cara yang dapat dipilih untuk menginstall template Fiksioner.


Pertama : Salin HTML

Cara ini lebih direkomendasikan karena akan menghasilkan tampilan yang 100% sama dengan versi demo-nya. Namun minusnya, beberapa kode akan ikut hilang, seperti kode ads, widget dan lain-lain. Jadi sebelum mengganti, ada baiknya menyimpan kode penting pada template lama. Untuk menggunakan template unggahan ini, lakukan cara berikut ini.


Kedua : Unggah XML

Langkah ini dapat menjadi opsi untuk mengganti template, tetapi minusnya adalah kode-kode lama akan ikut terbawa, sehingga tampilan menjadi berantakan. Namun dapat disiasati dengan mengaturnya di menu layout (tata letak). Ikuti petunjuk di bawah bila hendak memilih cara kedua ini.

Unggah XML

Selanjutnya untuk pengaturan template Fiksioner, Sahabat dapat melihat tutorialnya dari tautan link yang saya cantumkan di atas. Sahabat tinggal memilih mana saja pengaturan yang ingin diganti sesuai keperluan, sekaligus mengecek apakah tampilan baru ini telah sesuai dengan kaidah-kaidah pada meta SEO.

Tampilan Before After

Setelah susah payah mengganti kode pada template lama, lalu berpindah lagi ke template baru, ternyata semua pengaturan yang saya lakukan lenyap sudah. Saya harus men-nyetting kembali dari awal.

Sempat memilih menggunakan cara upload XML untuk menginstall Fiksioner melalui smartphone, sebab sedang berjauhan dengan laptop. Namun karena ada beberapa kode bawaan yang membuat pengecekan blog via meta SEO tidak rapi, saya meminta tolong suami yang berdekatan dengan laptop untuk membantu menyalin kode HTML. Lagi-lagi sesuai perkiraan, kode yang sudah saya buat lenyap untuk kedua kali.

Kembali saya mengulang melakukan setting-an beberapa kode untuk mewujudkan template yang sesuai harapan. Alhamdulillah meskipun menggunakan smartphone, selesai sudah tahapan mengutak-atik kode untuk menata template blog sederhana Ummary ini.

Before after


Referensi


https://www.blogernas.com/2016/06/apa-itu-template-blog-dan-contohnya.html?m=1#:~:text=Lalu%20apa%20pula%20itu%20Template,setiap%20halamannya%2C%20akan%20tetap%20sama.

https://www.blogspedia.my.id/2018/03/cara-mudah-menambah-social-media-button.html

https://www.tettytanoyo.com/2015/04/blogging-cara-membuat-menu-drop-down.html?m=1

https://www.blogspedia.my.id/2019/01/tutorial-membuat-tombol-back-to-top.html 

https://www.blogspedia.my.id/2018/03/banner-dalam-satu-widget-html-vertikal-dan-horizontal.html 

https://www.softrickinfo.com/2018/09/cara-menghilangkan-m1-di-blogspot_61.html

https://www.igniel.com/2018/10/fiksioner-blogger-template.html?m=1

https://fiksioner.blogspot.com/2018/10/fiksioner-template-documentation.html?m=1
Ummi Maryama
Teman mainnya Maryam dan Hisham | Islamic Parenting - Home Education - Healthy Lifestyle Enthusiast | Partner belajar sekaligus pembelajar Al Qur'an

Related Posts

8 comments

  1. Pinknya manis banget. Jadi ciri khas Ummary ya.

    ReplyDelete
  2. Wah, salut aku mba! Aku yang pakai laptop aja keteteran mba. Apalagi pake smartphone, bisa jungkir balik nggak selesai-selesai ganti templatenya hehe.

    ReplyDelete
  3. MasyaAllah.. apresiasi tertinggi untuk Ummu Maryam yang sabar mengulik menggunakan smartphone. Mantap!
    Yang pakai laptop saja belum tentu sabar.

    ReplyDelete
  4. Masya Allah luar biasa nih perjuangannya kalau pake smartphone. alhamdulillah pada akhirnya berhasil juga, selamat ya ummu maryam. Suka sama warnanya yang kalem dan soft.

    ReplyDelete
  5. Blognya jadi makin cantik dan nyamn mbak. Semangat ya! Semoga jadi semakin semangat ngonten, menghsilkan artikel yang dinanti oleh pembaca ❤️

    ReplyDelete
  6. Blog favku nih blognya mbak nisa! Sekarang jadi makin apik ya tampilannya 😍

    ReplyDelete
  7. Jadi merasa tertampar tampar :" Ini manis bangeet Ya Allah huhuhu meski aku nggak suka pink mampir kesini jadi suka pink

    ReplyDelete
  8. oh I always love the piiiiink 😍 masya allah yaaa tim edit pake HP 🤣

    ReplyDelete

Post a Comment

Follow by Email