Membuat Blog Bg 2 'CSS'

Sebelumnya saya telah menjelaskan apa itu variable dan berfungsi sebagai apa pada pertemuan pembuatan blog bg 1 sebelumnya.. 
Okeh sekarang kita masuk kedalam bagian CSS pada blogger, pada bagian ini saya hanya menyampaikan bagian mana sajakah yang harus kita edit agar mendapatkan hasil yang seperti kita inginkan, CSS sendiri diibaratkan sebagai pemercantik dalam mendisain blog.
   
Pada bagian body kita dapat mengatur jenis font secara default yang dapat kita gunakan dalam pemrograman di blogger, selain itu kita juga dapat mengatur background resolusi dsb.

body {
background: #dedede url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbOt5fGvHHTdMQPAebz5YKouwEvk7Xy5iaF3fXwioejWbSMwdQDJmhmiQbbCjSXfD2RqJ1soas1QIsh4F0u18EEPAAtk4NBKuE7j5u1uJA6jG1O5FQV3AAnfXc5eNLuLttw-ivAsvjofcw/s1600/6Untitled-1.png) repeat-y scroll 0 0;

Scrip diatas digunakan untuk mendisain background dengan warna latar dan gambar, pada postingan sebelumnya saya telah menjelaskan beberapa tutorial.

min-height: 700px;
min-width: 1024px; 
max-height: 700px;
max-width: 1280px;
background-width:100%;

Saya menambahkan scrip min dan max resolusi yang digunakan pada blog yang anda buat, apabila anda menghiraukanyapun tidak apa, karena padaumunya blogger memiliki resolusi 920.

text-shadow: 0.02em 0.02em 0.03em rgb(191, 191, 191);

Saya juga menambahkan shadow pada text agar terlihat lebih indah dengan scrip diatas.

color:#333333;
font-family:Ubuntu;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

Nah kalo scrip diatas digunakan untuk pengaturan jenis ataupun warna dan model font yang kita gunakan.

margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-align:center;

Pada scrip diatas terdata margin, margin adalah jarak enter antara baris. Sedangakan outline adalah pengaturan outline pada tulisan itu sendiri dan yang terakhir adalah text-align adalah posisi text dimulai secara default.

}

Pada sub program link ini berguna untuk memberikan efek warna pada text yang berupa link

a:link {
color:#CC0000;
text-decoration:none;

Diatas terdapat warna dan text-decoration, text-decoration berfungsi untuk merubah tampilan pada link.

}

Visited adalah untuk memberikan efek perubahan pada text apabila kita telah mengclick link tersebut.

a:visited {
color:#CC0000;
text-decoration:none;

Diatas terdapat warna dan text-decoration, text-decoration berfungsi untuk merubah tampilan pada link.

}

hover adalah untuk memberikan efek pada text apabila kita mendekati sebuah link. dengan turunan a:

a:hover {
color:#CC0000;
text-decoration:none;

Diatas terdapat warna dan text-decoration, text-decoration berfungsi untuk merubah tampilan pada link apabila kita mengarahkan.

}

Fungsi img untuk memberikan efek pada image.

a img {
border-width:0;

border-widh adalah ukuran besarnya garis yang akan ditampilkan pada bagian sisi-sisi image.

}

Fungsi ini dugunakan untuk mengatur tata letak judul blog anda, disini saya menaru judul blog saya pada bagian kiri.

#header-wrapper {
left:15px;
position:relative;

Left adalah posisi tulisan blog saya

top:-60px;

Top adalah psosisi tulisan saya terhitung dari bagian atas.

width:286px;

Width adalah lebar atau luas tulisan judul blog saya.

text-shadow: 1em 1em 3em rgb(191, 191, 191);

Saya juga menambahkan shadow pada text agar terlihat lebih indah dengan scrip diatas.

}

Fungsi header berfungsi untuk mengatur posisi judul blog anda ataupun warna secara default

#header {
color:white;

Color adalah warna font judul blog anda secara default

margin:5px;

margin adalah jarak judul blog anda secara default

text-align:left;
text-align berfungsi untuk mengatur letak atau rata text pada judul blog anda secara default
}

Fungsi header berfungsi untuk mengatur ukuran, jenis margin dan judul blog anda

#header h1 {
color:#FFFFFF;
display:block;
font-family:Ubuntu;
font-size:67px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;

Diatas merupakan pengaturan warna, ukuran serta model dan jenis font yang digunakan pada blog anda.

letter-spacing:-4px;
line-height:normal;
margin-bottom:0;
margin-top:45px;

Diatas merupakan pengaturan format text yang digunakan pada judul blog.

}

Fungsi header berfungsi untuk mengatur perubahan judul blog ketika menjadi link

#header a {
color:white;
text-decoration:none;
}

Fungsi header berfungsi untuk mengatur perubahan judul blog ketika menjadi link dan mouse di dekatkan

#header a:hover {
color:white;
}

Fungsi header berfungsi untuk mengatur deskripsi pada blog kita

#header .description {
color:white;
font-family:Ubuntu;
font-size:15px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

Diatas merupakan pengaturan warna, ukuran serta model dan jenis font yang digunakan pada blog anda.

margin:-5px 0 0;

Diatas merupakan pengaturan format text yang digunakan pada judul blog.

}

Fungsi header img berfungsi untuk pengaturan format posisi gambar pada heder.

#header img {
margin-left:auto;
margin-right:auto;
}

Fungsi outer-wrapper berfungsi untuk mengatur lebarnya halaman yang akan kita gunakan pada blog kita fungsi.

#outer-wrapper {
float:left;
font-family:Ubuntu;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

Diatas merupakan pengaturan warna, ukuran serta model dan jenis font yang digunakan pada blog anda.

margin:0 auto;
position:relative;
text-align:left;

Diatas merupakan pengaturan format text yang digunakan pada blog kita.

width:980px;

Diatas merupakan pengaturan luas pada blog kita standar blogger adalah 920.

}

Main wrapper digunakan untuk mengatur tata letak seperti posisi posting pada blog anda, selain digunakan untuk mengatur postingan biasanya juga dugunakan untuk penempatan widget, footer dsb.

#main-wrapper {
float:right;
margin-top:-100px;

Scrip diatas digunakan untuk pengaturan posisi pada main-wrapper

overflow:hidden;
width:630px;

Scrip diatas digunakan untuk pengaturan lebar dari main-wrapper

}

Fungsi sidebar-wrapper digunakan untuk pengaturan widget pada blog anda, selain itu bisa juga digunakan untuk posisi header apabila kita ingin menarunya pada bagian ini.

#sidebar-wrapper {
color:#000000;

Scrip diatas digunakan untuk pengaturan warna latar pada sidebar.

float:left;
margin-left:30px;

Scrip diatas digunakan untuk pengaturan posisi pada widget.

overflow:hidden;
width:270px;

Scrip diatas digunakan untuk pengaturan lebar pada widget yang akan kita gunakan nanti.

} 

Fungsi h2.date-header digunakan untuk pengaturan data tanggal pada postingan yang kita gunakan.

h2.date-header {
padding-top:150px;
margin:1.5em 0 0.5em;

Fungsi diatas digunakan untuk mepengaturan posisi atau furmat yang kita gunakan pada postingan.

}

Fungsi .post digunakan untuk pengaturan secara default pada bagian post.

.post {
border-bottom:1px solid #CCCCCC;

Border-bottom adalah fungsi dimana kita akan membuat suatu garis pada bagian akhir post

margin:0.5em 0 1.5em;
padding-bottom:1.5em;

Fungsi diatas digunakan untuk pengaturan format post secara default.

}

Fungsi .post h3 adalah fungsi dimana kita mengatur warna, posisi serta model yang akan kita tampilkan pada bagian judul postingan.

.post h3 {
color:#CC0000;
font-size:22px;
font-weight:bold;
line-height:1.4em;
margin:0.25em 0 0;
padding-top:10px;
padding-bottom:20px;

Fungsi datas digunakan untuk pengaturan warna, ukuran, jenis serta format font yang akan tampil.

text-shadow: 0.1em 0.1em 0.2em rgb(204, 204, 204);

Adalah fungsi yang digunakan untuk memepercantik judul postingan berupa shadow.

background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDo0jxDTrGd8cBY94h5OJvjBKy0zcUu6qNabxHHyCM5OxOijqSeUhw2WipIOYQHbkPVGL3vY4uIRD6Dfnq3AeNuzfQhp6I75y9180DxqaVqZlqypaAaqg8J_2uzvgtfuRx47UZOoDVcxnf/s650/Untitled-1.png) right top no-repeat;

Fungsi diatas digunakan untuk menambahkan gambar pada judul postingan yang akan kita gunakan.

} 

Fungsi post-body adalah fungsi yang digunakan untuk menampilkan isi dari postingan.

.post-body {
color:#333333;
font-size:13px;
line-height:18px;
margin:0 0 0.75em;
}

Fungsi .post-body blockquote dan .post blockquot adalah fungsi yang digunakan untuk pengaturan blockquot pada postingan

.post-body blockquote {
line-height:1.3em;
}
.post blockquote {
background:#EEEEEE none repeat scroll 0 0;
font-family:georgia;
font-style:italic;
margin:1em 20px;
padding:10px;
}

Fungsi .post-footer adalah fungsi yang digunakan untuk pengaturan footer, footer sendiri ialah suatu fungsi yang mngatur tampilan pada bagian bawah blog anda, biasa digunakan untuk pengaturan widget, serta definisi si web itu sendiri.

.post-footer {
color:#999999;
font-family:Ubuntu;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-bottom:10px;
margin-top:5px;
text-transform:none;
}

Fungsi footerb merupan optional yang saya tambahkan pada pembuatan blog ini, footerb sendiri bersifat flexibel, dan footerb sendiri digunakan untuk pengaturan pada widget.

#footerb {
margin-top:50px;
}

Fungsi .post img adalah untuk pengaturan latar gambar yang akan tampil pada postingan blog

.post img {
border:1px solid #CCCCCC;

Fugnsi border adalah untuk memberikan garis yang mengelilingi gambar.

padding:2px;
}

Fugnsi .sidebar adalah fungsi yang digunakan untuk pengaturan wdoget secara default baik dalam segi ukuran font, warna dan format.

.sidebar {
color:#999999;
font-size:14px;
line-height:1.5em;
}

Fungsi .sidebar h2 adalah fungsi yang diguanakan untuk pengaturan judul postingan yang digunakan pada widget.

.sidebar h2 {
color:white;
font-family:Ubuntu;
font-size:21px;
font-weight:bold;
letter-spacing:0;
margin-bottom:5px;
text-transform:none;

Fugnsi diatas adalah fungsi yang berfugnsi untuk pengaturan warna font, jenis, model dan format pada widget.

}

Fungsi .sidebar a adalah untuk pengaturan format link pada widget

.sidebar a {
color:#999999;
}

Fugnsi .sidebar a adalah untuk pengaturan format link pada widget ketika mouse didekatkan.

.sidebar a:hover {
color:white;
}

Fungi yang digunakan untuk pengaturan widget yang digunakan

.sidebar .widget, .main .widget {
border-bottom:1px solid #666666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Fungsi navigation adalah fungsi yang digunakan untuk pengaturan latar pada navigasi atau menu pada blog kita.

#navigation {
background:#e4e4e4 none repeat scroll 0 0;

Fungsi diatas digunakan untuk pengaturan warna pada menu blog

height:35px;
line-height:35px;
margin-left:335px;
text-align:left;

Fungsi diatas digunakan untuk pengaturan format pada menu yang digunakan pada blog.

}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home

.homebtn {
display:inline;
}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home link

.homebtn a {
background:#CC0000 none repeat scroll 0 0;
color:#F2F2F1;

Fungsi diatas digunakan untuk pengaturan warna font dan background

font-family:Ubuntu;
font-size:12px;
font-weight:bold;
letter-spacing:0;
padding:11px 50px 9px;

Fungsi diatas digunakan untuk pengaturan format, model dan jenis font yang digunakan

}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home link pada saat mouse didekatkan.

.homebtn a:hover {
background:#CC0000 none repeat scroll 0 0;
color:#F2F2F1;
text-decoration:none;
}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu link.

.navitem a {
color:#191919;
font-family:Ubuntu;
font-size:12px;
font-weight:bold;
letter-spacing:0;
padding:11px 30px 9px;
}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home link pada saat mouse didekatkan.

.navitem a:hover {
background:#757575 none repeat scroll 0 0;
color:#F2F2F1;
text-decoration:none;
}

Fungsi yang digunakan untuk pengaturan tata letak menu search

#search-wrapper {
margin-left:20px;
margin-top:-32px;
width:300px;
}

Fungsi Search input digunakan untuk pengaturan pada saat input pada seachbox

#search input {
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}

Fungsi yang digunakan untuk pengaturan menu search

margin:0;
padding:0;
position:relative;
}

Fungsi search-box digunakan untuk pengaturan dalam membuat search box pada blog anda.

#search-box {
background:#4B4B4B none repeat scroll 0 0;

Fungsi diatas digunakan untuk pengaturan background, maksud dari no-reparat scrol adlaah tidak terdapatnya scroolbar.

border:medium none;

Fungsi border adalah untuk menmpilkan garis yang mengelilingi box.

color:#939393;
display:block;
height:22px;
padding:6px 10px 5px;
width:236px;

Fungsi diatas adalah fungsi yang digunakan dalam pemberian warna, posisi dan ukuran lebar dan tingginya search box.

}

Fungsi search-button digunakan untuk pengaturan dalam membuat tombol search pada blog anda. Akan tetapi tombol seach tidak digunakan pada blog ini.

#search-button {
background:transparent url() no-repeat scroll 0 0;
border:medium none;
display:block;
height:35px;
left:256px;
margin:0;
position:absolute;
top:13px;
width:39px;
}
#search-button:hover {
background:transparent url() no-repeat scroll 0 0;
}

Footer-wrapper adalah fungsi yang digunakan untuk pengaturan background pada menu setelah postingan dan berada paling bawah pada blog yang kita buat ini.

#footer-wrapper {
background:#191919 none repeat scroll 0 0;

Fungsi diatas digunakan untuk pengaturan warna background yang digunakan pada footer.

clear:both;
height:110px;
line-height:50px;
margin-left:335px;
padding-left:20px;
text-align:left;

Fungsi diatas digunakan untuk pengaturan format latar pada footer.

}

Sebenarnya masih banyak lagi fugnsi dari CSS yang belum dielaskan, akan tetapi saya hanya menjelaskan bagian-bagian dari CSS yang pada umunya digunkan dalam pengeditan Blogger.

Semoga bermanfaat..