Senin, 03 Juli 2017

Cara Membuat Template Blog Untuk Pemula Sampai Profesional

Membuat template buatan sendiri memang buat bangga dengan diri sendiri. Akan tetapi dalam pembuatan template perlu waktu yang tidak singkat , untuk membuat template blog sendiri , butuh waktu berjam-jam , berhari-hari bahkan sampai berminggu-minggu untuk menghasilkan template yang berkualitas tinggi SEO Freindly dan Responsive. Banyak para blogger yang salah dalam menggunakan template. Oleh sebab itulah mengapa para pembuat template tidak senang kalau link credit hasil jerih payahnya di hapus oleh si pemakai template , jadi ketika kawan memakai template unduhan entah itu gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika sobat ingin di hargai. Betul tidak?

Tahapan meracik dan mendisain template khusus pribadi:

1. Cermati beberapa template bloggger orang lain yang menurut sobat profesional, lalu sobat dapatkan satu model template yang super bagus. Langkah ini bukan untuk meniru, tapi lebih membangkitkan mood sobat dan refrensi sebuah tampilan blog bagus.

2. Buatlah sketsa atau gambar rancangan blog sobat, untuk membuatnya cukup menggunakan pensil, penggaris, penghapus dan kertas. Atau kalau mau menggunakan aplikasi untuk membuat sketsa, sobat bisa menggunakan software ini : sketchpad, pencil app, xnsketch, dan lainnya.

3. Setelah membuat sketsa tampilan blog, berikutnya sobat tuangkan kedalam bentuk gambar. Untuk yang ini sobat bisa menggunakan software pengolah gambar Photoshop.

4. Setelah rancangan blog sobat sudah menjadi bentuk gambar, tahap berikutnya adalah proses koding. Ini agar tampilan blog sobat bisa berinteraksi dengan pengunjung, misalnya tab menu bisa diklik dan beralih ke halaman yang dituju, kotak pencarian bisa berfungsi, laman bisa di tuju dan lain-lain.

5. Proses visualisasi rancangan sobat beres, kodingnya juga beres, berarti template blog sobat sudah bisa digunakan. Tapi jangan sampai lewatkan tahap ini, yaitu proses pengujan di berbagai browser internet. Karena template yang sobat buat belum tentu tampil optimal disemua browser. Dan masih banyak pekerjaan lainnya seputar responsivbilitas tampilan, search saja sobat di internet.

Membuat Template Blog Sendiri

Kali ini template blogger yang akan kita buat yaitu dengan struktur, Header, Header Ads, Sidebar, Content dan Footer.
Berikut adalah gambar template layout yang akan kita buat :
Cara Membuat Template Blog Untuk Pemula Sampai Profesional
Bagaimana cara membuat template blogger sendiri?
Yukkss kita menuju cara pembuatan Template Blogger. lakukan dengan teliti dan jangan lupa untuk dipahami fungsi-fungsi kodenya.

1. Login ke akun blogger sobat, kemudian menuju ke Editor Template Klik HTML.
Cara Membuat Template Blog Untuk Pemula Sampai Profesional
Jika sudah berada di Editor Template Blogger, hapus semua kode yang ada di kotak editor template (CTRL + A -> Delete).
Dan copy pastekan kode dibawah ini ke dalam editor template sobat.

---- >>>>> KODE HTML DASAR TEMPLATE <<<<< ---- <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head>    <b:if cond='data:blog.isMobile'>       <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>    <meta content='noindex,nofollow' name='robots'/> 

Membuat Wrapper pada Template Blogger :

Setelah sobat mengcopas semua kode dasar yang ada di atas kedalam template sobat, pada tahap selanjutnya kita akan membuat wrapper halaman luar template, kita akan membuat ukuran 1024px (sobat bisa merubah dengan sesuka hati).

1. Pertama copy pastekan kode CSS di bawah ini ke dalam template sobat. Tepatnya di atas kode

#wrapper{ background:#FFF; width:1024px; overflow:hidden; margin:0 auto; } 

2. Selanjutnya, agar kode CSS Wrapper tersebut dapat muncul di tampilan template, panggil kode CSS dengan HTML. Caranya : cari kode <body> kemudian copy pastekan kode dibawah ini tepat di atas kode <body> tersebut.

<div id='wrapper'> 

3. Langkah selanjutnya, kita pasang kode penutup </div>, tepatnya di atas kode </body>.

</div> 

4. Langkah Terakhir, coba sobat simpan template dan lihat hasilnya, Sampai disini sobat sudah bisa membuat template sederhana, akan tetapi pada template hanya muncul widget postingan saja. (Tetap mengikuti langkah demi langkah)

Membuat Header dan Header Ads pada Template :

Setelah kita membuat Wrapper untuk pembungkus template blogger, selanjutnya kita akan membuat header dan header Ads (Iklan).

1. Copy pastekan kode CSS dibawah ini ke dalam template sobat, tepatnya diatas kode </style&gt.

#header-wrapper{width:100%;overflow:hidden;} #header{width:262px;overflow:hidden;float:left;} #header-ads{width:728px;overflow:hidden;float:right;} .header .widget{padding:10px;} 

2. Selanjutnya, copy pastekan kode HTML dibawah ini tepat di atas kode <div id='wrapper'>.

<header id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget> </b:section> <b:section class='header' id='header-ads' maxwidgets='1'/> <div class='clear'/> </header> 

Membuat Post dan Sidebar Template Blog :

Setelah kita membuat Header dan Header Ads pada template blog, langkah selanjutnya adalah membuat sidebar dan konten/postingan di blog. Kali ini sidebar dan postingan yang akan kita buat, letak sidebar berada di sebelah kiri float:left  dan artikel berada di sebelah kanan float:right.

Caranya sebagai berikut :

1. Pertama copy pastekan kode CSS Sidebar dan Postingan dibawah ini tepat di atas kode </style&gt.

#artikel-wrapper{float:right;width:724px;overflow:hidden} #sidebar-wrapper{float:left;width:300px;overflow:hidden} #sidebar{padding:5px} .sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font- 

2. Pasang kode HTML sidebar tepat di atas kode <b:section class='main' id='main'>.

<aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside> 

3. Pasang kode HTML Postingan tepat di atas kode syntak <b:section class='main' id='main'>.

<aside id='artikel-wrapper'> 

4. Tutup tag HTML Postingan tadi tepat di bawah kode </b:section> yang terakhir atau juga bisa tepat di atas kode </div&gt.

</aside> 

Membuat Footer 3 Kolom pada Template Blog :

Setelah selesai membuat sidebar dan postingan di template blog, tahap akahir pembuatan yaitu membuat footer blog, letaknya yang paling bawah pada template. Langsung aja cara buat footer :

1. Copy pastekan kode CSS Footer di bawah ini tepat di atas kode </style&gt.

#footer-wrapper{width:100%;clear:both} .footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin: 

2. Langkah selanjutnya pasang kode HTML Footer berikut dan letakkan tepat di atas kode </div&gt yang paling akhir.

<div class='clear'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer-1' showaddelement='yes'/> <b:section class='footer' id='footer-2' showaddelement='yes'/> <b:section class='footer' id='footer-3' showaddelement='yes'/> </footer> 

Nah jika langkah diatas telah selesai silahkan simpan template dan lihat hasilnya. Bagaimana kawan susah atau gampang apa ente pingsang karena pusing mikirin tutorial ane,  kalau masih baru pertama kali membuat template mungkin sobat pusing , tapi lama-kelamaan kalau udah terbiasa sobat akan biasa saja Sampai bisa desain template sendir. Selamat Mencoba Kawan. Terima Kasih, sudah berkunjung di blog saya jika ada seputar pertanyaan silakan berkomentar di bawah.

54 komentar:

  1. Klo bisa d update lg gan biar berlanjut. Thanks

    BalasHapus
  2. Mantap sangat lengkap tutor nya. Makasih

    BalasHapus
  3. Tandai dulu, ntar baru dipraktekin :)

    BalasHapus
  4. thanks infonya gan, praktek dulu ahh

    BalasHapus
  5. ijin praktek, siapa tau bisa :D

    BalasHapus
  6. Wah... bisa gan, trims infonya ya.. semangat gan

    BalasHapus
  7. mantep gan tutornya kalo perlu software terbaru bisa cari disini kadekkrisma blogspot com

    BalasHapus
  8. izin bookmark dulu gan mau dipelajarin

    BalasHapus
  9. di praktekin dlu soal nya blmp ernah buat tempelate sendiri

    BalasHapus
  10. sebelumnya saya bingung mau belajar bikin template dimana, tapi disini saya semakin paham untuk membuat template sendiri

    BalasHapus
  11. sanngat bermanfaat gan, terus berkarya. (tokoilmukita)

    BalasHapus
  12. Baru liat kodenya aja udah pusing...

    BalasHapus
  13. Kebetulan saya juga sedang belajar cara membuat template untuk blog sendiri. Kalau soal HTML dan CSS mungkins saya sudah bisa, tapi kan ada beberapa perbedaan untuk template HTML biasa dan untuk blogger. Apa saja ya perbedaanya?

    BalasHapus
  14. mantab gan, itung2 buat nambah ilmu, sama tambahan pelajaran script, kebetulan ane lagi bljr css sama html hehehe, sangat membantu sekali gan, thanks sebelumnya. kalo bisa update terus gan perkembangan terbarunya tentang pembuatan templatenya, joss.

    BalasHapus
  15. Mantap gan selama ini saya hanya download template orang

    BalasHapus
  16. mantap buat template sendiri, ijin praktek gan

    BalasHapus
  17. Terimakasih agan artikelnya membantu

    BalasHapus
  18. ok...di simpen dulu buat praktek nanti

    BalasHapus
  19. thank sob pengajarannya. sekali kali buat template sendiri sambil belajar kalau bisa dilanjutin sob artikelnya biar lebih mantapp :v

    BalasHapus
  20. wah keren nih mobile friendly ya

    BalasHapus
  21. sangat mudah di pahami nih (y) thank ya

    BalasHapus
  22. ijin bookmark gan :D lumayan nih buat newbie seperti saya

    BalasHapus
  23. wiih keren gan, lumayan lengkap gan :) nice artikel

    BalasHapus
  24. Makasih bang atas tutorialnya kebetulan lagi pengen buat template blog sendiri.

    BalasHapus
  25. memang agak ribet ya gan, tapi kalau ga dicoba ya ga akan mungkin bisa, ijin bookmark

    BalasHapus
  26. is very fond of this article because it gives a lot of inspiration dewa poker

    BalasHapus

Silahkan berkomentar jika ada pertanyaan seputar topik pembahasan diatas.
Dilarang Keras!!!:
1. No Spam
2. Jangan sisipkan link aktif
3. Komentar berbau sara
Langsung saya hapus!!!