CSS Dasar Template Blogger

css dasar blogger

Template blogger tersusun dari elemen-elemen pembentuk mulai dari elemen dasar sampai elemen khusus terstruktur. CSS digunakan untuk mengatur semua tampilan setiap elemen dari ukuran, posisi, sampai warna.

Dalam penyusunan atau pembuatan template blog penambahan CSS bisa kita lakukan dari elemen paling dasar yaitu standar element.

Kabar baiknya elemen paling dasar (standar element) setiap template umumnya sama. Oleh karena itu kita tidak perlu susah-susah memikirkan bagaimana mengatur CSS standar element, cukup copas dari yang sudah ada saja.

Pada BAB pertama Tutorial Cara Membuat Template Blog Sendiri Untuk Pemula Terlengkap kita sudah membuat elemen dasar meliputi header, konten, sidebar, dan footer.

Untuk membuat elemen dasar menjadi sebuah kerangka desain kita bisa menambahkan sebuah elemen baru untuk pembungkus dan juga CSS untuk mengatur display, lebar, dan posisi.

Selain membentuk kerangka, kita juga akan menambahkan CSS Standar Elemen yang berfungsi mereset dan memberikan style secara umum terhadap elemen-elemen standar untuk mempermudah kita dalam mendesain template blog buatan sendiri kedepannya.

CSS Dasar Blogger


Langkah pertama masuk ke template editor terlebih dahulu

Tambahkan CSS Standar Element berikut sebelum ]]></b:skin>

/* BLOGGER CSS */
.widget li{padding:0}
.widget ul{padding:0;margin:0;line-height:normal}
.widget-content li{list-style-type:none}
.separator a {margin:initial!important;}
.separator a img{margin: 1em;}
.separator:nth-child(1) a img{margin:initial;margin-bottom:1em}
.Navbar {display:none}

/* CSS RESET */
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;}

/* HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins{background:#fff;}


Simpan Template

Elemen Pembungkus


Selanjutnya kita akan membungkus semua elemen dari header sampai footer menggunakan sebuah elemen baru.

Copy kode berikut dan paste sebelum atau diatas kode <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>

<div class="outerWrapper">


Jangan lupa tutup tag divnya, copy paste kode berikut dibawah kode </footer>

CSS Elemen Dasar Kerangka Blogger

Setelah sudah menambahkan elemen baru untuk pembungkus, kita bisa langsung atur ukuran dan style lainya menggunakan CSS.

Elemen pertama yang akan diatur dengan CSS yaitu body karena merupakan elemen paling luar dalam struktur template

CSS untuk tag body kali ini akan diisi dengan background, ukuran font normal, word-wrap, dll.



Berikut kode CSS untuk tag body silahkan pasang sebelum ]]></b:skin>

body{
	position: relative;
	background-color: #f8f8f8;
	font-size: 14px;
	color: #656565;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}


Disini kita akan menggunakan ukuran standar dengan lebar secara keseluruhan yaitu 1024px

Tambahkan kode CSS berikut sebelum ]]></b:skin>

.outerWrapper{
	max-width: 1024px;
	margin: 0 auto;
	background-color: #fff;
	padding: 30px;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
}


CSS Standar Heading

Tag heading (h1-h6) merupakan tag untuk judul meliputi judul blog, judul konten, dst.

Ukuran font dari heading biasanya lebih besar dan tebal dari text lain.

Untuk mengatur ukuran heading bisa ditambahkan CSS berikut sebelum ]]></b:skin>

/* HEADING */
h1,h2,h3,h4,h5{display:block;font-weight:700}
h1{font-size:150%}
h2{font-size:140%}
h3{font-size:130%}
h4{font-size:120%}
h5{font-size:110%}


Simpan template

Coba kita view blog maka tampilan kurang lebih menjadi seperti berikut.
css standar element blogspot

Jika terdapat error atau kesulitan bisa ditanyakan langsung di komentar. Atau bisa cocokkan source code kalian dengan source kode punya saya.

Berikut bisa didownload hasil akhir source code pada sesi kali ini

Selamat, sampai disini kalian sudah menyelesaikan BAB 2 dalam Tutorial Membuat Template Blog Sendiri Untuk Pemula Terlengkap.

Silahkan lanjut ke bab berikutnya atau bisa lihat Daftar Isi Panduan Membuat Template Blog Sendiri Untuk Pemula

1 comment

  1. Admin_D
    kenapa nggak di update lagi
Post a Comment