Cara Mudah Membuat Template Blogger Bagi Pemula

Cara Mudah Membuat Template Blogger Bagi Pemula
Cara Mudah Membuat Template Blogger Bagi Pemula: salah satu pertanyaan yang paling populer ditanyakan sahabat blogger pengguna yang cara membuat template blogger, banyak blogger telah meminta saya pertanyaan ini di komentar dan melalui layanan kontak lainnya jadi saya berfikir kenapa tidak saya harus membuat posting yang panjang special buat mereka.

Pada dasarnya, hal ini datang dalam Web Desain dan Pengembangan sehingga seseorang harus memiliki keterampilan ini dalam rangka untuk membuat template blogger dinyatakan membaca dan memahami artikel panjang ini akan sia-sia. Hari ini, saya tidak akan mengambil terlalu banyak waktu Anda dalam jenis diskusi jadi mari kita mulai membahas tentang topik utama.

Persyaratan Untuk Membuat Template Blogger :

Pertama, saya ingin menyebutkan dasar persyaratan yang setiap orang harus memiliki untuk merancang atau memdisaign template blogger karena setiap orang biasa tidak bisa dengan mudah membuat blogger template dibutuhkan beberapa keterampilan khusus. Hal pertama adalah bahwa sobat harus tahu blogger sempurna.

Cara membuat blog, membuat tulisan dan halaman, melakukan sedikit penyesuaian, bermain dengan gadget dan juga bagaimana platform ini benar-benar bekerja. Setelah ini, Pengetahuan dasar desain web yang diperlukan di mana HTML dan CSS yang paling penting. Dalam blogger, Anda dapat menggunakan HTML, CSS, XML dan JavaScript. Jika sobat tahu semua bahasa ini maka sobat tidak akan menghadapi masalah dalam merancang template blogger profesional.

Langkah 1 Mempersiapkan Pengujian / Demo Blog Untuk Membuat Template :

ini adalah hal yang umum bahwa sebelum membuat setiap template blogger sobat harus membuat blog demo untuk template itu. Jadi, membuat blog dan mempublikasikan lebih dari 10 + tulisan di atasnya. Harus ada satu gambar, semua pos, 4-5 paragraf teks, daftar bernomor, daftar peluru dan kutipan dalam setiap pos. Kami akan merancang ini masing-masing dan setiap hal sehingga membuat 10 + posting dengan ini segala sesuatu dan juga mengintegrasikan beberapa widget penting dalam footer atau sidebar. Setelah itu, sobat dapat menggunakan default template di atasnya tapi segera kami akan menghapusnya dan desain template lain di atasnya.

Langkah 2 Memahami Dasar Struktur Template Blogger :

Sebelum memulai template kita harus memahami struktur dasar dari template blogger. Kita juga dapat mengatakan bahwa kita akan membuat halaman kosong sederhana template blogger. Jadi, saya sudah mempersiapkan coding dasar yang akan membantu Anda untuk memahami struktur dasar. Dengan janji saya yang akan mengupdate cara membuat template blog bagi pemula maka saya membuat Artikel lagi. Anda bisa baca artikel sebelumnya DISINI 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 Untuk 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.

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).

1. 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/

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:

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.
mengedit desain template Klik Save / Download untuk menyimpan template yang sudah Anda edit:

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.

2. 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.

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).

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.

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.

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.

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.

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.

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.

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. demikian segelintir pembahasan seputar cara membuat template blog bagi pemula gimana sobat mudah atau gampang bagi kalian, Oooo pusing !! Wajarr sob hahaha

Demikian tentang Cara Membuat Template Blogger Bagi Pemula, semoga bermanfaat.

Berlangganan update artikel terbaru via email:

26 Responses to "Cara Mudah Membuat Template Blogger Bagi Pemula"

  1. mantap infonya gan lanjut lagi dong

    BalasHapus
  2. sip, bisa nih ane buat tmplate sndiri tx ya

    BalasHapus
  3. wah sip nih,,, bisa di jual nantinya kalau template buatan sendiri laku keras

    BalasHapus
    Balasan
    1. Haha semoga saja :D

      Hapus
  4. saya suka sama artikelnya, mantap..

    BalasHapus
  5. wah ini zaman saya sma, nice sharing gan

    BalasHapus
  6. dari dlu pngen banget buat template sendiri, tp klo pake dreamswaver harus pro, tapi ternyata ada cara yang simple lewat online, jadi bisa buat template sendiri yang simple, hhe nice info gan.. langsung otw nyoba buat

    BalasHapus
    Balasan
    1. Iya gan yang simpel2 aja lebih gampang yg penting paham (y)

      Hapus
  7. Yang pakai cara online lebih simple ya gan :D saya juga udah pengen buat template sendiri dari dulu hehe

    BalasHapus
    Balasan
    1. Sok atuh buat nanti di jual :D

      Hapus
  8. Balasan
    1. Komen yang relevan gan nanti saya back (y)

      Hapus
  9. Nice artikelnya gan.

    BalasHapus
  10. bagus nih bisa di jual :D

    BalasHapus
  11. Tutornya bisa diikuti nih, biar bisa bikin template sendiri hihi sekaligus nambah pengalaman =D

    BalasHapus

> KOMENTAR SPAM & LINK AKTIF TIDAK AKAN DITAMPILKAN

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel