Desain blog sendiri adalah salah satu hal yang paling membuat blogger (khususnya pemula seperti pangeran) pusing tujuh keliling. Belum lagi harus dihadapkan dengan coding CSS, Javascript, PHP supaya bisa membuat desain blog sendiriΒ menjadi lebih menarik dan keren tentunya.
Sehingga, tidak heran jika Pangeran sering mendapatkan pertanyaan seperti ini :
“Pange, cara membuat desain blog keren itu gimana?”
“Pange, ada gak rekomendasi desain blog terbaik yang bisa dijadiin contoh untuk blog?”
“Pange kapan ngajarin cara mendesain blog ?”
“Pange, contoh desain blog gratis yg keren itu gimana?”
Dan masih banyak lagi pertanyaan yang sering sekali Pangeran dapatkan.
Tapi, karena membuat konten panduan secara utuh itu butuh waktu, akhirnya Pangeran hanya bisa menjawab seadanya dulu.
Kalau dijelaskan menggunakan kata-kata tanpa prakter, kalianΒ juga akan merasa kesulitankan?
Makanya, mumpung kali ini Pangeran punya waktu yang cukup luwes, daripada mikirin mantan, mending Pangeran sharing cara desain blog yang sudah temen-temen tunggu selama ini.
Sebelum kita menuju panduan, jangan lupa di akhir pembahasan kali ini, Pangeran sudah menyiapkan Ebook Desain Blog (.pdf) yang bisa temen-temen download secara gratis mengenai panduan desain blog untuk pemula supaya menarik.
Oke, mari kita mulai membahasnya.
Memahami Struktur Template Blog
Kebanyakan blogger pemula sering melupakan hal sederhana ini. Yaitu : tentang dasar mendesain sebuah blog.
Inilah yang membuat blogger pemula merasa sulit ketika bertemu dengan bahasa coding yang lebih rumit dari ngertiin cewek itu.
Jadi, ada baiknya jika baru mulai belajar membuat desain blog sendiri untuk memahami dulu struktur apa saja yang ada di sebuah template blog.
Penjelasan ini sebenarnya sudah pernah Pangeran bahas di cara merapikan tampilan blog, tapi supaya lebih jelas akan Pangeran jelaskan kembali.
1. Header
Header Blog adalah bagian kepala atau bagian paling atas di dalam sebuah blog. Pada bagian header, biasanya terdapat Judul Blog dan Deskripsi blog. Namun, itu yang biasanya.
Untuk beberapa blog kadang ditambahkan button social media, banner, dll.
Penulisan script Header biasanya diawali dengan code <header>
dan diakhiri dengan </header>
. Pada script inilah kalianΒ bisa mengedit title
danΒ description
dalam sebuah blog.
2. Sidebar
Sidebar BlogΒ adalah bagian dalam tata letak suatu blog. Biasanya, sidebar blog memiliki 2 posisi, yaitu di kanan atau kiri. Ada juga beberapa template blogger menampilkan di kedua posisi tersebut.
Hal ini kembali ke selera dari penggunanya.
Pada sidebar blog dapat ditambahkah widget pendukung untuk memudahkan pembaca menavigasi blog kalian. Seperti contohnya Widget Arsip Blog, Kategori, Artikel Terbaru, Profil dll.
Mengenai bagaimana cara mengatur tata letak di sidebar akan Pangeran jelaskan di bab selanjutnya.
3. Post
Post BlogΒ adalahΒ hasil dari keseluruhan konten yang sudah kamu tulis dan upload. Pada post biasanya menampilkan Judul, Isi Konten dan Kolom Komentar.
Pada konten, kalian bisa menambahkan mulai dari teks, foto, video, gif, embed, dll.
4. Footer
Footer BlogΒ adalah bagian kaki atau bagian paling bawah dari sebuah blog. Pada footer, biasanya terdapat informasi hak cipta (credit title) dari blog dan ada juga ditambahkan widget di beberapa templateΒ blog.
Pada template default blogger, penulisan codenya dimulai dari <footer>
dan diakhiri dengan </footer>
.
Bagaimana? Sekarang kalian sudah mulai pahamkan, apa saja yang ada di dalam sebuah template blog.
Nah, sekarang Pangeran akan melanjutakan ke panduan tentang cara desain blog supaya menarik. Selengkapnya di bawah ini.
Cara Desain Blog di Blogger/Blogspot
Sebenarnya, jika kalian rajin membaca Google Answer tentang Mengubah Desain Blog, tentunya sudah tidak perlu Pangeran lanjutkan lagi bagaimana supaya bisa mendesain blog sendiri.
Tapi, memang Pangeran akui sendiri bahwa Google Answer masih menjawab perihal pertanyaan mendasar.
Jadi, wajar saja jika kalian yang baru memulai blog, masih merasa bingung dengan apa yang dijelaskan.
Nah, supaya gak bingung, mari kita mulai membahasnya.
Cara memodifikasi blog menjadi keren :
- Masuk ke Blogger.com
- Pilih blog mana yang ingin kalian desain templatenya
- Pada menu sebelah kiri, silahkan klik Template
- KlikΒ SesuaikanΒ (jika ingin mengedit tanpa mikirin coding) dan klikΒ Edit HTMLΒ (jika mau mencoba mengedit dengan coding)
- Pada menu sebelah kiri, kalian bisa memilih Template, mendesain Latar Belakang, Lebar Blog, Tata Letak dan Tingkat Lanjut.
- Jika sudah selesai, klik Terapkan ke blog di kanan atas
- Untuk melihat hasil desain, klik Lihat Blog di kanan atas.
Sampai di sini, mungkin kalian masih ada bingungΒ pada beberapa fungsi yang Pangeran jelaskan di atas.
Makanya, sekarang Pangeran akan jelaskan apa saja fungsi yang bisa diterapkan pada masing-masing menu pada dashboard desain blogger.
Setelah klik Template pada menu di kiri. Maka akan tampil dua pilihanΒ SesuaikanΒ atauΒ Edit HTML.
Kedua tombol ini memiliki fungsi yang sama, tapi mereka memiliki cara yang berbeda.
Ketika kalian klikΒ Sesuaikan, maka akan tampil dashboard desain blog yang sangat mudah untuk mengaturnya.
Begini penjelasan fungsi-fungsi menu di dashboard desain blogger :
- Template : menu ini memberikan pilihan template default yang sudah disiapkan oleh blogger yang bisa digunakan dan dicustomizeΒ dengan mudah.
- Latar BelakangΒ : menu ini digunakan untuk mengubah background dan tema warna utama dari template yang dipilih
- Sesuaikan Lebar : menu yang satu ini tentunya untuk mengatur seberapa lebar blog yang akan kamu miliki. Bukan cuman lebar keseluruhan blog, tapi bilah samping yang berarti pembagian lebar sidebar dan post di blog kamu. Masih ingatkan apa itu sidebar dan post?
- Tata Letak : menu ini digunakan untuk mengatur tata letak isi (apakah ingin menggunakan sidebar, atau tidak dll). Dan juga tata letak kaki yaituΒ footernya ingin 3 colom widgetΒ atau hanya satu. Bukan cuma itu saja, kalian juga bisa menambahkan widget pada sidebar yang akan Pangeran jelaskan di bab selanjutnya.
- Tingkat LanjutΒ : menu ini adalah menu yang sering Pangeran gunakan, karena pada menu ini kalian bisa mengubah warna judul, deskripsi, garis yang ada di blog. Selain itu, bisa juga mengubah font dan ukuran dari font judul blog, judul konten blog, deskripisi blog, judul sidebar, dll.
Nah, sekarang gimana?
Apakah sudah mengerti atau bingung? Kalau bingung, tanya di komentar, ya.
—0o0—
Selanjutnya Pangeran akan membahas tombol ke-2. YaituΒ Edit HTML.
Ketika kalian klik edit html, tampilannya akan sangat berbeda dengan tombol sesuaikan :

Jadi, untuk mendesain blog pada Edit HTML ini, Pangeran sudah siapkan panduanΒ di bawah ini yang bisa kalian coba terapkan di blog.
Panduan Desain Blog bagi pemula + Teknik SEO :
- Cara membuat blog gratisΒ
- Cara memilih template blog yang mudah dipahami
- Cara mengganti template blogger dalam 4 langkah mudah
- Cara mengganti judul dan deskripsi blogΒ
- Cara membuat dan mengganti (memasang) favicon di blog
- Cara membuat deskripsi blog SEO Friendly
- Cara upload gambar supaya SEO Friendly
- Cara mudah membuat tab menu bar di blog
- Cara menambahkan widget yang benar di blog
- Widget yang wajib dan tidak dipasang di blog
- Cara mengganti background di blog
- Cara backup artikel (post) dan template blog
Panduan memasang Meta Tag, Embed, dan Button FollowΒ untuk Social Media :
- Cara memasang timeline twitter
- Cara memasang tombol follow twitter
- Cara memasang twitter cardΒ
- Cara memasang tombol share lengkap, responsive dan ringan
- Cara membuat aplikasi facebook
- Cara baru membuat fanpage facebook
- Cara memasang open graph facebook
- Cara memasang form komentar facebookΒ
- Cara memasukkan foto dan video instagram di postingan
Bonus Cara Desain Blog supaya Keren :
- Cara memasang scroll pada komentar blog, popular post dan arsip blog
- CaraΒ membuat tab menu rata tengah (center)
- Cara membuat judul postingan, widget dan tanggal di blog rata tengah (center)
- Cara membuat judul sidebar menjadi rata tengah (center)
- Cara membuat dan memasang CBOX di sidebar
- Cara baru memasang Alexa rank
- Cara memberi background di sidebar blog
- Cara mengubah cursor blog jadi keren
- Cara membuat auto New Tab
- Cara membuat βBaca selanjutnya / Readmoreβ di postingan
- Cara membuat About Me keren di sidebar blog
- Cara menghilangkan Langganan Entri : (Atom) dan Poskan Komentar : (Atom)
Cara Desain Template Blogger Menjadi Responsive :
- Masuk ke blogger.com
- Pilih blog yang ingin dibuar responsive
- Klik template yang di menu sebelah kiri
- Pada kolom “seluler” klik sesuaikan template seluler dan pilih template untuk tampilan mobilenya
- Jika sudah, kalian bisa pratinjau untuk melihat hasil dan klik Simpan.
Untuk mendapatkan update panduan baru,Β silahkan subscribe blog ini. Gratis kok..
—o0o—
Sesuai janji Pangeran di awal, kalian akan mendapatkan Ebook tutorial desain blog (pdf) yang menarik secara gratis. Caranya gampang. Klik tombol di bawah ini dan selamat membaca :
Ebook Gratis!
Cara Desain Blog Terbaik
Dalam Ebook ini, Pangeran membagikan cara mendesain blog supaya menarik dan membuat pembaca semakin betah berlama-lama membaca konten (artikel) yang kalian tulis. Bukan hanya itu, ada cara yang sedikit rahasia Pangeran bongkar di Ebook ini.
Semoga bermanfaat.
Sebagai penutup, Pangeran harap kalian tidak usah terlalu bingung dengan desain blog itu harus sebagus apa.
Tetap, yang paling penting adalah konten.
Desain itu no.2 atau no.3. Soalnya orang yang mencari informasi di google untuk membaca konten, bukan untuk melihat desain.
Tapi, bukan artinya desain blog tidak penting. Masih penting, tapi lebih utama perbaiki dulu kualitas konten kalian.
Jika kalian bingung dengan coding, sekarang sudah banyak template blogger gratis yang bisa kalian download sesuai dengan selera kalian.
Sepertinya kopi Pangeran sudah habis. Jika ada panduan baru, tentunya akan Pangeran update kembali.
Terimakasih sudah membaca. Pangeran Wortel pamit.Β See you…..
wah bagus nih, akhirnya nemu blog yang beginian jadi setidaknya tau tiap2 fungsi yang ada di blog. kalau saya sih bagian favorit pas nge blog… Desainnya hahaha.. biasanya saya bisa berhari-hari cari template dari luar sampe lupa sama fungsi blognya sendiri wkwkwk.. tapi emang ga bisa di pungkiri sih ya kalau desain blog yang menarik bisa mempengaruhi blog.. nice artikel bro…
btw, salam kenal ya!
Wah, bisa nambah ilmu baru….!
Makasih Om, semoga bisa istiqomah menulis yang bermanfaat, biar bisa dibaca banyak orang, dan manfaatnya dapat dirasakan banyak orang juga…
Mas kalo tombol read more ga bisa muncul tuh kenapa ya? Udah browsing sana sini cari tutorialnya tetep ga muncul muncul tuh read more π
Thanks.
Serius, informasi ini membantu banget buat orang seperti saya
Thanks!
Tapai saran sya mohon agar membalas setiap komentar yang di berikan atau pertanya dari setiap komentar. Mas.
TERIMAKASIH.
Bagaimana kalau tidak bisa codig seperti saya ?
Ya aku juga awalnya gak bisa coding, tapi karena mau belajar, pelan-pelan bisa..
Masih perlu banyak belajar ane ganπ π
Desain Blog bagi saya paling malas di kerjakan, tapi lama lama pengen juga pake desain blog yg baru biar terkesan punya suasana baru…..Trims Artikelnya
Maaf tanya
Saya masih pemula banget
Minta info cara bikin html full body background (yg ada di belakang konten).
Makasih
Nanti jika ada kesempatan akan saya buatkan scriptnya.
Terimakasih ilmu nya
ijin download ebooknya mas arya
silakan
Sebuah tulisan yang sangat bermanfaat. Dapat menambah wawasan dalam mendesain blog. Saya sudah follow blog Anda karna cukup menarik buat para blogger. http://blog.manhura.id
Blog bagus bangat… thank you om, berkat postingan ini ane jadi terinspirasi lagi π lanjut terus, moga sukses om.
Ingin lah rasanya kenal sama pangeran ini. Hehe
Wah menarik sekali dan lengkap pembahasannya
terima kasih mas Pangeran
Terima kasih ilmunya kk
Terima kasih infonya. Benar-benar membantu