Cara Membuat Template Blog Dari Awal
Sebenarnya banyak sekali template blog yang keren dan tinggal siap pakai yang bisa kalian download di internet baik itu gratis maupun yang versi premium, namun tidak bisa di pungkiri bahwasannya selera orang itu berbeda, mungkin ada yang sudah merasa lebih puas dengan template yang sudah di gunakan karena sudah sesuai dengan kriteria yang mereka cari atau bisa jadi malah sebaliknya.
Dan di sini saya akan menunjukkan cara untuk membuat dan memodifikasi template sendiri.
Baca juga :Saran saya sebelum membuat template blog sendiri :
Cara Membuat Blog Di Blogspot Dengan MudahCara Mengubah Tampilan Template Blog (Dengan Aman)
- Pahami dulu dasar dasar bahasa pemrograman HTML dan CSS (bila perlu Javascript juga)
- Pastikan kalian memliki banyak waktu luang (karena membuat template hingga complete itu butuh waktu lama)
- Ikuti tutorial ini dengan cermat dan teliti
- 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"/>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
Promo Menarik
Comments
Post a Comment