Cara Membuat Template Blog Dari Awal | Tutorial Lengkap

Cara Membuat Template Blog Dari Awal

Template atau Tema blog merupakan suatu tampilan yang amat penting dan paling di perhatikan oleh para pengunjung blog tersebut, karena template blog juga bisa mempengaruhi rasio pentalan (bounce rate) pada blog kita.

Zona Internetku September 03, 2018

Cara Membuat Template Blog Dari Awal

Sebenarnya banyak sekali template blog yang keren dan tinggal siap pakai yg sanggup kalian download dalam internet baik itu gratis pula yg versi premium, namun nir sanggup pada pungkiri bahwasannya selera orang itu tidak sinkron, mungkin terdapat yg telah merasa lebih puas menggunakan template yg telah di gunakan lantaran sudah sesuai menggunakan kriteria yang mereka cari atau sanggup jadi malah sebaliknya.

Dan pada sini aku akan memperlihatkan cara untuk menciptakan

Baca juga :

Cara Membuat Blog Di Blogspot Dengan Mudah Cara Mengubah Tampilan Template Blog (Dengan Aman) Saran saya sebelum membuat template blog sendiri :

  1. Pahami dulu dasar dasar bahasa pemrograman HTML dan CSS (bila perlu Javascript juga)
  2. Pastikan kalian memliki banyak waktu luang (karena membuat template hingga complete itu butuh waktu lama)
  3. Ikuti tutorial ini dengan cermat dan teliti
  4. Gunakan blog dummy sebagai uji coba template kalian

Panduan Untuk Membuat Template Blogspot Sendiri Mulai Dari Nol

1. Masuk Ke dalam blog kalian masing (di sarankan untuk di coba di blog baru / blog dummy)

2. Pilih menu "Template" (saat ini Tema)

3. Kemudian klik "Edit HTML"

4. Hapus semua kode yang ada di dalam template tersebut, setelah itu masukkan kode HTML berikut ini untuk membuat kerangka bagian paling mendasar pada template

			<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:skin> </b:skin> </head> <body> </body> </html>

  • html berfungsi sebagai tanda bahwa bahasa pemfornatan yang di gunakan dalam membuat template adalah HTML
  • head berguna sebagai header blog, isi kode ini sangat sensitif sekali bagi blog kita. Contohnya adalah Meta Tag, Kode verifikasi, CSS, JS, link eksternal CSS dan Jquery
  • b:skin adalah kode css yang berguna untuk mengatur tampilan layout template
  • body merupakan sebuah kode yang berisi sebagai kerangka tampilan blog, isi blog dan juga widget yang telah di gunakan. body juga bisa di gunakan untuk tempat meletakkan kode css dan javascript

Selanjutnya adalah membuat kerangka atau tata letak tampilan template

letakkan kode berikut ini ke dalam tag <body>...</body>

			<div id="wrapper"> <div id="content-wrapper"> <div id="head-wrapper"> <b:section class="head section" id="head"> <b:widget id="Header1" locked="true" title="Diptekin (Header)" type="Header"> </b:widget></b:section> </div> <div id="head-ads-wrapper"> <b:section class="head-ads section" id="head_ads"> </b:section></div> <div class="clear"> <div id="nav-wrapper"> <b:section class="nav section" id="nav"> </b:section></div> <div class="clear"> <div id="main-wrapper"> <b:section class="main section" id="main_post"> <b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog"> </b:widget></b:section> </div> <div id="sidebar-wrapper"> <b:section class="sidebar section" id="sidebar"> </b:section></div> <div class="clear"> <div id="footer-wrapper"> <div id="footer-wrapper-1"> <b:section class="footer-1 section" id="footer_1"> </b:section></div> <div id="footer-wrapper-2"> <b:section class="footer-2 section" id="footer_2"> </b:section></div> <div class="clear"> <div id="footer-bottom-wrapper"> <b:section class="footer-bottom section" id="footer_bottom"> </b:section></div> </div> </div> </div> </div> </div> </div> </div>

  • wrapper berfungsi sebagai pembungkus tampilan luar
  • b:section berfungsi sebagai tempat untuk menambahkan dan meletakkan widget pada template
  • b:widget di gunakan sebagai tanda bahwa kode tersebut merupakan isi bagian dari widget atau gadget

5. Selanjutnya masukkan kode CSS berikut ini di dalam tag <head>...</head> untuk mempercantik tampilan template blog

			Name : Nama template kalian Created : M. Chusnul Chakim And Nama kalian gan Published : 04/09/2018 Di larang menghapus kredit template, hargailah para pembuat template karena membuat template itu tidak mudah dan tidak instan */ /*http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:arial} /* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} table{border-collapse:collapse;border-spacing:0} h1,h2,h3,h4,h5,h6{font-weight:700;line-height:normal;padding:5px} h1{font-size:200%} h2{font-size:185%} h3{font-size:170%} h4{font-size:155%} h5{font-size:135%} h6{font-size:115%} /*Style Template Start*/ body{background-color:#ababab} /* Created by M. Chusnul Chakim http://zonainternetku.blogspot.com/2018/09/cara-membuat-template-blogspot.html */ #wrapper{max-width:1024px;width:100%;margin:0 auto;position:relative;display:block;overflow:hidden} #content-wrapper{padding:0 10px;margin:0;background-color:#cccccc} #head-wrapper{width:30%;padding:0;margin:0;float:left} #head-ads-wrapper{width:69%;margin:0;padding:0;float:right} #nav-wrapper{width:100%;padding:0;margin:0} #main-wrapper{width:69%;padding:0;margin:0;float:left} #sidebar-wrapper{width:30%;padding:0;margin:0 0 10px 0;float:right} #footer-wrapper{clear:both;margin:0!important} #footer-wrapper-1{width:69%;padding:0;margin:0;float:left} #footer-wrapper-2{width:30%;margin:0;padding:0;float:right} #footer-bottom-wrapper{width:100%;padding:0;margin:0!important} #head-wrapper,#head-ads-wrapper,#nav-wrapper,#main-wrapper,#sidebar-wrapper{background-color:#fff;position:relative;z-index:1;margin:0 0 10px 0} #footer-wrapper,#footer-wrapper-1,#footer-wrapper-2,#footer-bottom-wrapper{background-color:#000;color:#fff;position:relative;z-index:1;margin:0 0 10px 0} .head,.head-ads,.nav,.main,.sidebar,.footer-1,.footer-2,.footer-bottom{padding:0;margin:0} .head .widget,.head-ads .widget,.nav .widget,.main .widget,.sidebar .widget,.footer-1 .widget,.footer-2 .widget,.footer-bottom .widget{padding:10px;margin:0} .head-ads .widget h2,.nav .widget h2,.sidebar .widget h2,.footer-1 .widget h2,.footer-2 .widget h2,.footer-bottom .widget h2{padding:4px;margin:0 0 5px 0;font-size:17px;background:#00afff;color:#fff} .section{margin:0;padding:0} .clear{clear:both} @media screen and (max-width:768px){#wrapper{width:100%}#nav-wrapper,#head-wrapper,#head-ads-wrapper,#main-wrapper,#sidebar-wrapper,#footer-wrapper-1,#footer-wrapper-2,#footer-bottom-wrapper{width:100%;position:relative}}

Memasang Meta Tag ViewPort

meta tag viewport merupakan sebuah kode meta tag yang amat penting, karena meta tag ini bisa mempengaruhi tampilan template pada saat berada di berbagai macam perangkat layar pengguna.

Jika kamu tidak memasang meta tag ini maka tampilan dan ukuran template kamu menjadi berantakan atau tidak kompatible di perangkat lain.

Cara memasang meta tag ini kamu hanya perlu meletakkannya di dalam kode tag <head>...</head>

			<meta name="viewport" content="width=device-width, initial-scale=1"/>
Selanjutnya klik simpan untuk menyimpan hasilnya. kini template buatan kalian sendiri telah jadi. Untuk cara memasang dan melihat macam macam jenis meta tag pada template, kalian bisa melihat ulasannya di Kumpulan Dan Cara Membuat & Memasang Meta Tag Di Blogspot

Untuk kalian yang tidak ingin bersusah payah dalam membuat template sendiri maka kalian bisa menggunakan template buatan saya, karena template ini sangat responsive dan human friendly

Kumpulan Template Blogspot Buatan Zona Internetku

Kumpulan artikel tentang tutorial untuk membuat template blogspot yang lainnya :

Cara Membuat Menu Navigasi Dropdown Sederhana

Cara Membuat Auto Readmore Keren Otomatis

Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog

Cara Memasang Menu Breadcrumbs Di Blogspot

Cara Membuat Related Post Untuk Blogspot

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android | Tutorial Lengkap

Gambar
4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android. Mungkin sebagian besar orang membutuhkan informasi yang terbaru dan aktual mengenai pergerakan mata uang dunia baik itu dollar ataupun rupiah. Zona Internetku August 20, 2019 Hal yang mendorong seorang buat terus memantau perkembangan mata uang tersebut umumnya disebabkan sang alasan tersendiri misalnya urusan berbisnis ekspor/impor barang ke mancanegara, berpergian (travelling), trading forex dan pula usaha lainnya. Untuk memantau terus pergerakan nilai tukar mata uang global contohnya dolar Amerika Serikat, Singapura, Taiwan Deretan Aplikasi Terekomendasi Untuk Memantau Pergerakan Nilai Tukar Mata Uang Lokal Dan Asing (Internasional) Di Android 1. BI Mobile Pertama ada aplikasi BI Mobile yang diluncurkan dengan resmi dari Bank Sentral Republik Indonesia, melalui aplikasi kamu bisa melihat semua informasi mengenai keuangan seperti nilai tukar ru...
Baca selengkapnya

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Tehnik Pewarnaan Fountain Fill | Tutorial Lengkap

Gambar
Tehnik Pewarnaan Fountain Fill Tehnik Pewarnaan Fountain Fill Corel Draw Zona Internetku May 10, 2016 Tehnik Pewarnaan Fountain Fill Corel Draw . hallooo... :D sampai jumpa lagi di zona internetku, pada kesempatan kali ini, saya memposting tentang tehnik pewarnaan fountain fill yang ada di aplikasi corel draw x5, pewarnaan ini sangatlah penting untuk mengisi bagian sebuah objek, apalagi dalam sebuah animasi, dan juga dalam kehidupan sehari-hari, maka dari itu saya disini akan menunjukkan bagaimana Tehnik Pewarnaan Fountain Fill pada aplikasi corel draw x5, karena didalam aplikasi ini menyediakan fitur-fitur tehnik dalam sebuah pewarnaan sebuah objek, seperti pewarnaan menggunakan uniform fill, pattern fill, texture fill dan lain lain. Tapi disini saya hanya akan menjelaskan yang Fountain fill saja karena dengan tehnik ini kita bisa memainkan warna sesuai dengan kreasi kita, dan tehnik ini dan unform fill lebih banyak dipakai daripada yang lainnya. cukup disini dulu basa basin...
Baca selengkapnya