Cara Memberi Backgraund Di Dalam Posting Artikel Blog

Lihat gambar di atas pada kotak posting di blog, ada kotak lagi, itu namanya Backgraund Posting Artikel. Jadi fungsinya menambah menarik artikel dan sebagai tempat menulis kode-kode css atau hal penting lainnya yang ingin anda tekankan sebagai pembeda dari isi artikel posting yang lain.

Berikut Cara Memberi Backgraund Di Dalam Posting Artikel Blog :

1. Logging Blog.
2. Buat Entri untuk mulai menulis artikel.
3. Lihat pojok kiri atas ada dua pilihan kotak Compose dan HTML.
4. Pilih HTML Masukkan kode berikut ini :

<div style="background-color: red; border: 1px dotted #ffffff; padding: 5px; width: 400px;">TULISAN ANDA</div>

5. Warna merah, itu warna backgraud ganti warna dalam Bahasa Inggris.
Warna hijau itu garis sekelilingnya atau bordernya, ganti dengan pilihan : solid, dotted, dashed, double, groove, ridge, inset,  atau outset. Warna pink itu warna garis bordernya, ganti dengan kode warna sesuai minat anda.
 6. Simpan setelah menulis artikel selesai.

Cara Membuat Border Pada Postingan Blog

Pernah tidak kalian mengunjungi blog teman anda, di blog mereka ada border keren-keren untuk tiap postingan blog. Sebelumnya pasti kalian sudah tahu apa itu border postingan pada blog. Border postingan blog itu adalah garis pembatas berbentuk kotak yang isinya berupa postingan artikel kalian. Contohnya border postingan saya menggunakan dotted (garis putus-putus) berwarna merah. Ada banyak tipe untuk membuat border postingan caranya berikut :

1. Logging blog >> template >> tingkat lanjut >> Ccs.
2. Tulis kode Ccs.
3. Contoh border saya seperti ini kodenya Ccsnya :

.post{
  border-bottom:4px dotted #ff0000;
  border-top:4px dotted #ff0000;
  border-right:4px dotted #ff0000;
  border-left:4px dotted #ff0000;
  padding-bottom:0.9em;
  padding-left:0.9em;
  padding-right:0.9em;
}

3. Tapi kalau kalian ingin border yang berbeda begini tinggal ganti tulisan yang berwarna kuning dengan solid, dotted, dashed, double, groove, ridge, inset, outset. Dan tulisan berwarna hijau dengan kode warna sesuai minat anda. Kalau padding itu istilah lainnya margin.
4. Setelah anda utak-atik, jangan lupa disimpan.

Cara Mengedit Tampilan Copy Right

Copy Right adalah keterangan yang terletak pada bagian bawah blog yang berisi nama, tahun, dan template pembuat blog.  Copy Right tidak mempengaruhi rank blog anda. Copy right hanya memberi kesan profesional dan ciri khas tersendiri pada blog anda. Seperti yang telah dijelaskan pada Cara Menyembunyikan Attribution Power By Blogger, setiap blog 2013 sudah memiliki copy right namun tampilannya sederhana. Jika anda ingin mengedit tampilannya saya sarankan untuk menyembunyikan dulu copy right di blog setelah itu silahkan coba cara  mengedit tampilannya berikut ini :

Cara Mengedit Tampilan Copy Right :

1. Logging Blog
2. Sembunyikan Copy Right bawaan blog
3. Edit dengan klik Template >> Edit HTML
4. Letakkan kode berikut di atas ]]></b:skin>

.copyright{
float:left;
padding-top:5px;
padding-bottom:5px;
font:normal 80% Verdana,Trebuchet,Arial,Sans-serif;} 

5. Ganti float menjadi right jika Sobat ingin meletakkannya pada bagian kanan blog, left pada bagian kiri. Jika ingin terletak di tengah, hapus kode float.
6.  Taruh kode berikut ini, di atas </body>

<div class='copyright'>

Copyright &#169; 2013-2014 <a href=' http://r3394.blogspot.com/'>r3394 </a> | All  <a href='Right '>  </a> Reserved</div>

<div class='copyright'>

Template Design by <a href=' http://r3394.blogspot.com/'>Resti Fatmawati </a> | Powered By <a href='http://www.blogger.com/'>Blogger</a> </div>

Ganti warna :

Putih untuk tahun, Biru untuk URL blog anda, Pink untuk judul blog, Hijau Untuk nama anda.

Cara Menyembunyikan Attribution Power By Blogger

Attribution Power By Blogger adalah widget yang ada pada bagian bawah blog berisi tentang pemberitahuan Copy Right blog. Copy Right blog biasanya berisi tentang nama, tahun pembuatan dan template pembuat blog yang berada di posisi paling bawah blog. Sebenarnya setiap blog tahun 2013 sudah disediakan widget untuk mengedit copy right, tapi para blogger kurang suka akan tampilannya sehingga banyak blogger yang ingin mengganti dengan tampilan yang lain. Ketika ingin mengganti tampilan copy right ini biasanya blogger harus menghapus atau menyembunyikan Attribution Power By Blogger dulu. Nah, berikut cara pertama untuk membuat Attribution Power By Blogger lebih menarik, caranya dengan menyembunyikan Attribution Power By Blogger terlebih dulu baru mengedit tampilannya :

Cara Menyembunyikan Widget Attribution Power By Blogger :

1. Logging Blog.
2. Klik Desigh >> Template >> Edit HTML.
3.  Cari kode ]]></b:skin>, gunakan F3 atau Ctrl F untuk pencarian.
4. Letakkan Kode dibawah ini, letakkan kode tepat di atas ]]></b:skin>

#Attribution1 {
height:0px;
visibilitty:hidden;
display:none
}

5. Simpan.

Sekarang tinggal mengedit caranya baca Cara Mengedit Tampilan Copy Right.

Mengedit Dan Mempercantik Tampilan sidebar

Sidebar adalah kolom-kolom di kanan atau kiri blog yang berisi label, arsip blog, informasi diri dll. Sidebar memudahkan menemukan artikel posting blog untuk ditemukan pembaca. Yang pernah saya baca, sidebar itu bagus kalau tempatnya di sebeloah kiri karena google robot merayap dari kanan ke kiri. Jadi kalau di tempatkan di sebelah kiri, Google Robot akan merayapi artikel postingan kita terlebih dulu. Jadi saran saya taruh sidebar ki sebelah kiri dan percantiklah. Berikut cara jika anda ingin mempercantik sidebar dengan memberi judul sidebar, efek bayangan pada judul sidebar, border dan brackground silahkan ikuti langkah berikut ini :

Cara Mengedit Dan Mempercantik Tampilan Sidebar :

1. Logging blog >> Template >> Sesuaikan
2. Tingkat lanjut >> Edit CCS
3. Copy dan pastekan kode berikut :

.main-inner .sidebar .widget h2 { 
 margin-top: 0px; margin-bottom: 0px;
 margin-left-value: 0px; 
 margin-right-value: 0px; 
 padding: 5px 5px; color: #ff0000 !important;
 text-align: center; 
 border: 0px solid #ff0000; 
 border-radius: 0px; 
 box-shadow: 7px 6px 7px 1px #3d85c6;  
 background: #6fa8dc; 
 }

.main-inner .sidebar .widget-content { 
 margin: 2px; padding: 2px 2px; 
 text-align: justify; 
 text-decoration: none; 
 border: 0px solid #ff0000; 
 border-radius: 0px; 
 box-shadow: 0px 0px 35px 0px #6fa8dc; 
 background:#ffffff; 
 }

.main-inner .widget ul, 
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li { margin: 1px; padding: 4px; list-style: none; 
 }

Edit CCS tersebut sessuai keinginan anda.