Cara Membuat Template Blog Untuk Pemula Sampai Bisa
Template blog adalah cerminan dari blog itu sendiri, jadi tak heran jika semua orang ingin membuat template yang bersifat personal, karena dianggap lebih bisa mewakili tulisan dari sang penulis. Yang jadi masalah adalah cara membuat template blog saya akui tidaklah mudah, kita dituntut untuk menguasai beberapa bahasa pemrograman web seperti HTML / CSS / JS.Namun, Anda tidak perlu khawatir, karena di artikel ini saya akan membagikan tutorial lengkap bagaimana cara membuat template blog dari awal sampai akhir, untuk pemula sampai bisa.
Akan ada 2 cara membuat template blog yang akan saya bagikan :
- Buat template blog secara Online
- Buat template blog secara Offline
Kedua cara tersebut, baik yang offline maupun online memiliki kelebihan dan kekurangan masing-masing. Untuk itulah disini saya akan membahas lebih lanjut mengenai perbdeaan dari kedua cara membuat template blog tersebut.
2 Cara Membuat Template Blog Blogger
Perlu saya ingatkan bahwa template yang akan kita buat adalah template dari Blogger. Tetapi untuk pengguna blog / website Wordpress, tetap bisa mengikutinya (khusus tutorial buat template blog online), karena CSS yang akan kita edit sama saja. Dan untuk mengikuti tutorial ini tentu saja Anda harus sudah memiliki blog, jika belum punya silahkan pelajari bagaimana cara membuatnya disini Cara Membuat Blog.
Baik, langsung saja kita bahas cara yang pertama yaitu cara buat template secara online dan selanjutnya akan saya bahas pula yang versi offline (lebih lengkap).
Cara Membuat Template Blog Online
Kekurangan membuat tempate secara online membutuhkan koneksi internet, jadi pastikan Anda siap untuk kehilangan kuota data Anda, kelebihannya tentu saja, kita bisa lebih mudah dalam membuat template, karena sudah tersedia tool-tool yang akan mempermudah kita dalam mengedit template web.
- Silahkan Anda kunjungi situs untuk mengedit template disini http://www.dotemplate.com/
Cara Membuat Template (Gambar: 1)
Jika halaman awal sudah terbuka, nantinya Anda akan diminta untuk memilih beberapa template, pilih sesuai selera lalu klik untuk mulai mengedit template tersebut. - Gunakan Tool yang ada untuk mengedit desain template
Cara Membuat Template (Gambar: 2)
Ada banyak tool disana, seperti misalnya Gradient color (untuk mengubah warna background), Light effect (menambah efek cahaya) dan ada juga tool Drop shadow yang berfungsi untuk menambahkan efek bayangan. - Klik Save / Download untuk menyimpan template yang sudah Anda edit
Cara Membuat Template (Gambar: 3)
Tombol Save / Download berada di bagian pojok kiri layar Anda, jika dirasa template yang Anda edit sudah selesai silahkan klik tombol tersebut lalu pilih Export ke Blogger / Wordpress untuk mulai download template hasil editan Anda.
Selesai sudah hanya butuh 3 langkah untuk membuat template baru, tanpa perlu susah-susah untuk mempelajari bahasa pemrograman CSS atau HTML. Jika Anda ingin buat template blog yang baru, silahkan ulangi dari tahap pertama.
Cara Membuat Template Blog Offline
Jika Anda lebih suka membuat template secara offline, maka tutorial di bawah ini saya harap bisa menambah pengetahuan dan memudahkan Anda dalam mengedit template. Ingat ini hanya untuk template Blogger, karena CSS didasarkan dari XML Default dari Blogger.
CSS Outer Wrapper
#outer-wrapper {background:#fff;max-width:1000px;margin:20px auto;padding:20px;overflow:hidden;margin-top:75px;border:1px solid #e0e0e0}
Fungsi dari CSS ini adalah untuk mengatur lebar dari blog yang akan kita buat, bisa dibilang Outer Wrapper adalah CSS Terluar dari sebuah blog.
#outer-wrapper {background:#fff;max-width:1000px;margin:20px auto;padding:20px;overflow:hidden;margin-top:75px;border:1px solid #e0e0e0}
Fungsi dari CSS ini adalah untuk mengatur lebar dari blog yang akan kita buat, bisa dibilang Outer Wrapper adalah CSS Terluar dari sebuah blog.
CSS Content Wrapper
#content-wrapper {background-color:#fff;margin:0 auto;padding:5px 0 0; word-wrap:break-word;}
Jika Outer Wrapper adalah css untuk mengatur 'kulit' terluar blog, maka CSS Content Wrapper ini berada di atasnya, atau bagian untuk mengatur bagian isi blog (header, sidebar, footer).
#content-wrapper {background-color:#fff;margin:0 auto;padding:5px 0 0; word-wrap:break-word;}
Jika Outer Wrapper adalah css untuk mengatur 'kulit' terluar blog, maka CSS Content Wrapper ini berada di atasnya, atau bagian untuk mengatur bagian isi blog (header, sidebar, footer).
CSS Header Wrapper
#header-wrapper {width:100%;margin:0 auto;margin-bottom:15px;overflow:hidden;padding:0;}
Untuk mengatur lebar dari header (tempat menaruh judul blog), selain itu juga bisa kita sisipkan CSS untuk mengubah ukuran / font dari H1.
#header-wrapper {width:100%;margin:0 auto;margin-bottom:15px;overflow:hidden;padding:0;}
Untuk mengatur lebar dari header (tempat menaruh judul blog), selain itu juga bisa kita sisipkan CSS untuk mengubah ukuran / font dari H1.
CSS Main Menu Wrapper
#menu-wrapper{background:#363636;height:50px;width:100%;position:relative;padding-left:-20px;padding-right:-20px;}
CSS Menu digunakan untuk mengubah menu navigasi pada blog, di dalam css Main Menu, juga diselipkan CSS untuk mengubah Ol, UL dan Li, karena ktiga elemen tersebut juga bagian dari Navigasi.
#menu-wrapper{background:#363636;height:50px;width:100%;position:relative;padding-left:-20px;padding-right:-20px;}
CSS Menu digunakan untuk mengubah menu navigasi pada blog, di dalam css Main Menu, juga diselipkan CSS untuk mengubah Ol, UL dan Li, karena ktiga elemen tersebut juga bagian dari Navigasi.
CSS Post Wrapper
#post-wrapper {background:transparent;color:#666;float:left;width:70%;max-width:700px;margin:0 0 10px;}
Jika Anda ingin mengubah warna background artikel Blog, maka kita perlu mengedit value dari selector background. Misal jika ingin ganti background warna hitam, maka isi background dengan value #000000.
#post-wrapper {background:transparent;color:#666;float:left;width:70%;max-width:700px;margin:0 0 10px;}
Jika Anda ingin mengubah warna background artikel Blog, maka kita perlu mengedit value dari selector background. Misal jika ingin ganti background warna hitam, maka isi background dengan value #000000.
CSS Comments
#comments {background:#fff;clear:both;margin:10px auto 0;line-height:1em;padding:20px;border:1px solid #e0e0e0;}
CSS Comments berfungsi untuk mengubah tampilan dari Comment Box yang dianggap terlalu sederhana bagi sebagian blogger, solusinya kita bisa mengganti warna, ukuran dengan menambahkan CSS comments.
#comments {background:#fff;clear:both;margin:10px auto 0;line-height:1em;padding:20px;border:1px solid #e0e0e0;}
CSS Comments berfungsi untuk mengubah tampilan dari Comment Box yang dianggap terlalu sederhana bagi sebagian blogger, solusinya kita bisa mengganti warna, ukuran dengan menambahkan CSS comments.
CSS Search
#search {position:relative;font-size:13px;font-family:'Open Sans',sans-serif;width:auto;height:100%;margin:0 auto;text-align:center;}
CSS Search digunakan untuk mengedit Search Box, jika warna default dari search box adalah putih dengan border hitam, maka kita bisa dengan mudah mengubahnya dengan CSS Search.
#search {position:relative;font-size:13px;font-family:'Open Sans',sans-serif;width:auto;height:100%;margin:0 auto;text-align:center;}
CSS Search digunakan untuk mengedit Search Box, jika warna default dari search box adalah putih dengan border hitam, maka kita bisa dengan mudah mengubahnya dengan CSS Search.
CSS Widget
.widget {line-height:1.4em;}
Jika Anda memasang widget di sidebar blog, dan ingin mengubah warna / ukuran dari widget tersebut, maka Anda bisa menggunakan CSS Widget.
.widget {line-height:1.4em;}
Jika Anda memasang widget di sidebar blog, dan ingin mengubah warna / ukuran dari widget tersebut, maka Anda bisa menggunakan CSS Widget.
CSS Sidebar Wrapper
#sidebar-wrapper {background:transparent;float:right;width:30%;max-width:300px; margin:0 auto;}
Untuk mengatur lebar dari sidebar, kita bisa memanfaatkan CSS Sidebar Wrapper.
#sidebar-wrapper {background:transparent;float:right;width:30%;max-width:300px; margin:0 auto;}
Untuk mengatur lebar dari sidebar, kita bisa memanfaatkan CSS Sidebar Wrapper.
CSS Popular Post
.PopularPosts ul li {padding: 10px;border-bottom:1px solid #ddd;position:relative;transition:all 1s ease-out;animation:BounceRate 3s;}
Masih di bagian sidebar, kode CSS diatas untuk mengatur padding, border dan background artikel populer.
.PopularPosts ul li {padding: 10px;border-bottom:1px solid #ddd;position:relative;transition:all 1s ease-out;animation:BounceRate 3s;}
Masih di bagian sidebar, kode CSS diatas untuk mengatur padding, border dan background artikel populer.
CSS Footer
#footer-wrapper {color:#ddd;width:98%;font-size:12px;margin:0 auto;font-weight:400;max-width:1000px;}
Sesuai namanya CSS Footer berfungsi untuk mengedit bagian footer blog, dari mulai font, background, sampai ukuran dari footer tersebut.
#footer-wrapper {color:#ddd;width:98%;font-size:12px;margin:0 auto;font-weight:400;max-width:1000px;}
Sesuai namanya CSS Footer berfungsi untuk mengedit bagian footer blog, dari mulai font, background, sampai ukuran dari footer tersebut.
Sementara itu saja yang bisa saya jelaskan, semoga penjelasan singkat tentang Cara Membuat Template Blog ini bisa membantu atau mempermudah Anda dalam membuat template blog baru, baik di Wordpressmaupun Blogger.