Pengertian Margin dan Padding pada Blog

Dengan memahami margin, padding, border dan cara menerapkan dengan CSS, akan memberi kesempatan bagi blogger (pemula), untuk bereksperimen sendiri dengan menentukan dan mengatur sifat dan nilai property. Ini sering dijumpai pada penerapan css style pada template, .body {..},.sidebar {...},. container {...}, css widget, pengaturan posisi dan jarak (space) antara sidebar, penerapan pada pargaraf posting, pada h1, h2.....dst.

Apa Margin itu?

Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.

Secara visual akan lebih mudah memahami definisi dari margin ini :

Margin dapat diatur menggunakan properti margin "shorthand" (yaitu istilah, yang mewakili empat nilai marjin untuk elemen) atau dengan penulisan stye "longhand". Untuk itu dibawah saya beri contoh beberapa penulisan margin dalam css.

Contoh penulisan margin pada suatu elemen ("shorthand")

#element { margin: 10px;}

Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; }

Ini berarti elemen memiliki:

-margin-top, margin-bottom : "10px"

-margin-left, margin-right : "20px"

#element { margin: 10px 20px 5px 15px; }

Elemen ini memiliki -margin-top : 10px, margin-right: 20px,  margin-bottom : 5px, margin-left: 15px

Berikut penulisan margin style "longhand":

#element { margin-top: 10px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px;}

Apa Padding itu?

Jadi bagaimana dengan padding? Nah, padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.

Padding juga dapat dipahami sebagai "filling". Karena  padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi/border dan isi dari elemen. (lihat visual dibawah)

Dari gambar diatas dapat diartikan padding adalah ruang yang diatur antara border/tepi dengan isi / konten dari suatu elemen (dalam hal ini isi konten berupa text).

Serupa dengan margin, padding juga diatur menggunakan properti padding "shorthand"  dan juga dapat dilakukan dengan properti padding "longhand": padding-top, padding-right, padding-bottom, dan padding-left.

Contoh : 

#element { padding: 10px; }/*padding untuk semua sisi sama 10px*/

#element { padding: 5px 10px 2px 4px; }/*padding: Top, Right, Bottom, Left*/ 

#element { padding-top: 10px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px;} 

Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside space dari suatu elemen yang diatur disekitar area konten. Penerapannya padding sering dijumpai  hampir disemua elemen, sebagai contoh pengggunaan padding pada heading (h1, h2, h3....) di postingan.

Contoh : 

h1 { background: yellow;

padding: 20px 20px 20px 80px;}

h2 { background: orange;

padding-left:120px;}

(problogiz)

Cara Membuat Postingan Tanpa Sidebar

Ada Dua CSS

Seperti pada postingan terdahulu, jika kita menggunakan trik ini maka akan ada 2 css untuk satu id widget atau section. Yang pertama dipanggil tanpa syarat dalam keadaan umum. Yang kedua adalah dipanggil untuk syarat tertentu saja, dalam hal ini kita memberikan syarat untuk alamat postingan yang kita tentukan. Yang perlu diperhatikan ketika kita nanti menambah css jangan hilangkan css asli.



Lebar Area Postingan

Untuk mengatur lebar area postingan Anda harus mengetahui kodenya terlebih dahulu. Pada umumnya memiliki kode main-wrapper. Nah, yang perlu Anda ketahui, main-wrapper ini berada pada bagian outer-wrapper atau bisa hanya dengan kode wrap saja yang istilahnya sebagai wadah/nampan bagian-bagian template yang terdiri dari main wrapper dan sidebar. Oleh karena itu main-wrapper tidak boleh lebih lebar dari outer-wrapper. Saya misalkan kode-kode dari template minima. Jika pada bagian css ada titik-titik itu berarti kode css lain yang tidak saya tuliskan. Dalam hal ini yang saya sertakan adalah dalam hal lebar saja (berkode: width)

CSS Outer
 #outer-wrapper {
  width: 660px;
...............................
  }

CSS Main-wrapper
#main-wrapper {
  width: 410px;
...............................
  }

Nah, pada kode di atas lebar main-wrapper adalah 410px, lebih kecil dari lebar nampannya yakni 660px. Bukankah masih ada sisa? Ya kita pastikan sisa lebar itu adalah milik sidebar. Jika kita tulis cssnya



#sidebar-wrapper {

  width: 220px;

..............................

}



Jadi lebar area sidebar (220) ditambah area postingan (410) adalah 630px, masih lebih kecil dari batas yakni 660px. Sisa 30 px adalah untuk margin, yakni jarak antara tepi kiri dengan area postingan, jarak area postingan dengan sidebar dan jarak area sidebar dengan tepi kanan.

DEMO

Cara Membuat Postingan Tanpa Sidebar

1. Login ke blogger

2. Tata Letak

3. Edit HTML

4. Cari kode </head>

5. Letakkan kode berikut ini di atas </head>

 <b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>

 <style>

.sidebar{

display: none !important;

}

 #main-wrapper, .post {

width: 640px;

  }

  </style>

  </b:if>

Ganti yang berwarna merah pertama dengan alamat postingan yang ingin Anda buat penuh area postingannya dan hilangkan sidebarnya. Ganti warna merah kedua dengan lebar yang telah Anda perhitungkan.

Cara Membuat Judul Post Warna Pelangi pada Blog

Jika kita ingin mengedit judul post, link blog atau hover pada template blog,

kita harus nguprek css nya.

Kali ini saya ingin berbagi cara membuat judul post warna pelangi pada blog.



1. Tentunya login blog sobat dan menuju template edit html

2. cari kode .post h2  ,ini kode untuk judul postingan

3. Letakkan kode berikut di dalamnya

-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400);

Hasilnya ntar seperti ini

.post h2 {-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); font:18px Architects+Daughter;line-height:1.2em;margin:.25em 0 0;padding:0 0 4px;}

6. Save



Sobat dapat memodifikasi warna sesuai keingin. Pada tutorial saya kali ini hanya mencontohkan warna pelangi. Jika ada kode css lain yang lebih simple dari yang saya bikin, dapat di share melalui reply komentar.

Background Judul Post Blog

Untuk sobat blogger yang tidak mengetahui cara memberi background judul posting blog.

Simak berikut caranya:

1. Login blog

2. Rancangan

3. Edit html

4. cari kode .post-title {

atau .post h3

Intinya kode yang mirip dengan kode di atas.

5. Tambahkan kode berikut dibawahnya,

jika sobat ingin memberinya dengan background warna.

 background-color: #000000;

sehingga kodenya menjadi seperti berikut:

.post h3 {

 background-color: #000000;

}

warna dapat di ubah sesuai keinginan.

Jika sobat ingin memberinya dengan background gambar

Tambahkan kode berikut dibawah .post h3 {

background: url (URL gambar sobat) repeat-x;

sehingga kodenya seperti berikut:

.post h3 {

background: url (URL gambar anda) repeat-x;

}

6. Simpan template.

Demikian tutorial cara membuat background judul post blog.

Semoga bermanfaat.

Cara Mengganti Font Style pada Blog

Bosan dengan font style yang itu2 aja sob?

Sobat dapat menggantinya dengan mudah.

Berikut ini cara mengganti fonti font blog:

1. Kunjungi Google web font.

2. Pilih font style keinginan dan klik "add to collection"

3. Kemudian klik use setelah itu muncul script font yang sobat pilih.

misal:

<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

Tempatkan kode tersebut dibawah <head> dan tambah simbol "/"

dan jadinya seperti dibawah ini:





<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>



4. Edit font-family di template sobat dengan mengganti font yg baru sobat pilih tadi

misal:

.post h3{

font-size:28px;

font-family:'Oregano ';

color:#333;

text-shadow:0px 2px 1px #000;

text-align:center

}

5. Simpan template jika pengeditan sudah selesai.



Lihat hasilnya dan semoga infonya bermanfaat

Cara memback up seluruh isi blog

Tidak terbayang andai saja blog kita hacked? dan seluruh isi blog hilang?

Sayang kan blog yang sudah lama kita bangun hilang begitu saja.

Tindakan pencegahan agar kita dapat meng-copy seluruh isi blog tanpa co-past satu persatu,

caranya sebagai berikut:



1. login ke blogger

2. Pilih pengaturan

3. Pilih Expor blog

4. Selanjutnya klik tombol Unduh Blog,

kemudian akan muncul kotak konfirmasi Download selanjutnya OK.

5.proses penyimpanan file sudah selesai



selanjutnya apabila kita ingin mengcopy atau memindahkan file isi blog yang telah kita simpan tadi ke blog baru kita atau ke blog yang sama ( apabila anda ingin meng upload lagi ke blog semula )



caranya :



1. Setelah login masuk ke pengaturan

2. Selanjutnya klik Impor Blog.

3. kemudian penguploadan file posting yang kita backup tadi.

4. Pilih file posting backup yang telah kita simpan di komputer kita

(Sebelum proses pengimporan blog, jangan lupa centang kotak "Terbitkan semua entri yang diimpor secara otomatis").

5. Klik tombol Impor Blog

6. Selesai.



Demikian cara memback up seluruh artikel blog termasuk templatenya.

Semoga infonya berguna