menambah Sytle di tema blogger

Halo teman-teman kali ini kita akan belajar membuat style untuk tema blog ya. kemarin saya sudah pernah membuat tutorial cara membuat tema blog sendiri kali ini kita akan mempercantik tampilan yang menggunakan CSS

Tutorial sebelumnya Cara Membuat Tema Blog Sendiri untuk pemula

pasti kan sudah tau dasar dasar css

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.

CSS Dasar Blogger

Langkah pertama masuk ke template editor terlebih dahulu

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15



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

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'>

1

<div class="outerWrapper">

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>

1
2
3
4
5
6
7
8
9


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>

1
2
3
4
5
6
7


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

1
2
3
4
5
6
7


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

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

Berikut bisa didownload hasil akhir source code pada artikel

hasil akhir

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' class='v2' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>
  <head>
  	<!-- Title -->
	<b:if cond='data:view.isHomepage'>
	    <title><data:blog.pageTitle/></title>
	<b:elseif cond='data:view.isSingleItem'/>
	    <title><data:blog.pageName/> - <data:blog.title/></title>
	<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
	    <title>
	    <b:switch var='data:blog.locale'>
	        <b:case value='id'/>
	        Semua Postingan - <data:blog.title/>
	        <b:default/>
	        All Posts - <data:blog.title/>
	    </b:switch>
	    </title>
	<b:elseif cond='data:view.isError'/>
	    <title> 
	    <b:switch var='data:blog.locale'>
	        <b:case value='id'/>
	        Halaman tidak ditemukan - <data:blog.title/>
	        <b:default/>
	        Page Not Found - <data:blog.title/>
	    </b:switch>
	    </title>
	<b:else/>
	    <title><data:blog.pageName/></title>
	</b:if>
  	<b:skin><![CDATA[
  	/* -----------------------------------------------
	Blogger Template Style
	Name:     blog Template
	Version:  1.0.0
	Designer: Made Wiguna
	----------------------------------------------- */
	/* 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;}

	/* 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%}

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

	.outerWrapper{
		max-width: 1024px;
		margin: 0 auto;
		background-color: #fff;
		padding: 30px;
		box-shadow: 0 0 5px rgba(0,0,0,.1);
	}
	
	]]></b:skin>
  </head>
  <body>
  	<b:if cond='!data:view.isError'>
  		<div class="outerWrapper">
	  		<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
	        	<b:widget id='Header1' locked='true' title='' type='Header' visible='true'></b:widget>
	    	</b:section>
	  		<b:section class='main-content' id='main-content' name='Konten'>
	  			<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'  visible='true'></b:widget>
			</b:section>
			<aside id='sidebarWrap' class='sidebarWrap'>
	            <!-- widget sidebar -->
	            <b:section class='sidebar-content' id='sidebar-content' name='Sidebar '>
	            </b:section>
	        </aside>
	        <footer id='footerWrap' class='footerWrap'>
				<div class='credit'>
					Copyright &#169; 2021. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - Template Created by <a href='https://www.madewgn.my.id/' target='_blank'>Made Wiguna</a>
				</div>
			</footer>
		</div>
	</b:if>
  </body>
</html>

Atau juga bisa di lihat di sini
https://pastekan.cf/raw/B44slC9Ktm

Selanjutnya : cara meganti font Bloggers