Membuat Frame Area Posting Dan Sidebar

Salah satu upaya agar tampilan blog lebih enak dipandang mata adalah dengan membuat Frame / bingkai atau border berupa kotak yang membuat batas antar area posting (main-wrapper), widget di sidebar maupun footer.dan kebetulan kemarin saya baru Membuat Frame Area Posting Dan Sidebar di blog Tutorial Dan Bisnis ini.

Untuk lebih jelasnya pada gambar screenshoot dibawah ini terlihat Frame / Bingkai berupa garis tepi atau border pada setiap area posting dan widget di sidebar.

Membuat Frame Area Posting Dan Sidebar 

 

 

 

 

 

Inilah Cara Membuat Frame Area Posting Dan Sidebar yang saya lakukan :

a. Cara Membuat Frame / Bingkai Pada Area Posting (main wrapper)

  1. Pertama login ke akun blogger atau dashboard.
  2. Pilih menu Template –> Edit HTML
  3. Selanjutnya cari code ini : .post {    tekan CTRL+F untuk memudahkan mencari
  4. Tambahkan kode dibawah ini tepat dibawah code .post {

    padding: 5px;
    Border-top: 3px solid #000000;
    Border-bottom: 3px solid #000000;
    Border-left: 3px solid #000000;
    Border-right: 3px solid #000000;
    Margin-bottom: 10px;

  5. Lakukan preview atau pratinjau dulu, jika sudah ok Lalu simpan template

b, Cara membuat Frame / Bingkai Pada Sidebar

  1. Pertama login ke akun blogger atau dashboard.
  2. Pilih menu Template –> Edit HTML
  3. Cari code ini : ]]></b:skin>   Agar lebih mudah mencari tekan control+F
  4. Tambahkan kode dibawah ini tepat diatas code ]]></b:skin>

    sidebar .widget{
    padding:5px 5px 5px 5px;
    border:1px solid #C11209;
    margin-bottom:5px

  5. Lakukan preview atau pratinjau dulu, jika sudah ok Lalu simpan

Keterangan : Semua angka dan warna bisa diganti sesuai selera

  • Padding: 5px; = Jarak antara text post dengan garis pinggir 5px; makin tinggi angka jarak dari tepi akan semakin lebar
  • Border-top: 3px solid #000000; = garis pinggir atas 3px semakin tinggi angka,   maka akan semakin tebal garisnya
  • Border-bottom: 3px solid #000000 ; = garis pinggir bawah 3px
  • Border-left: 3px solid #000000 ; = garis pinggir kiri 3px
  • Border-right: 3px solid #000000 ; = garis pinggir kanan 3px
  • Margin-bottom: 10px; = jarak antar post yang satu dengan lainnya 10px
  • Code warna #000000 adalah warna hitam

Catatan : Bentuk Frame bisa diganti sesuai selera                   

  • solid      : bingkai menjadi garis biasa ( ___________ )
  • dotted   : bingkai menjadi titik-titik ( .............................. )
  • dashed : bingkai menjadi garis putus-putus ( --------------------- )
  • double  : Bingkai 2 garis biasa   ( = )
  • Ridge
  • Groove
  • Inset
  • Outset
  • Radius ( Sudut melengkung )
  • dan lain-lain

Sampai disini  topik bahasan kita kita tentang Membuat Frame Area Posting Dan Sidebar selamat mencoba membuat halaman blog lebih menarik dan nyaman dimata pengunjung, tinggal tambah optimasi lebih SEO Friendly sehingga nyaman juga dimata Google dan si Cantik Alexa .


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
  3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Membuat Frame Area Posting Dan Sidebar dengan Url https://tutorialdanbisnis.blogspot.com/2012/11/membuat-frame-area-posting-dan-sidebar.html , bila berkenan silahkan bagikan dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, letakan link aktif artikel ini sebagai sumbernya dengan copy kode di bawah ini.


Related Post:

11 komentar:

  1. wah tutorial yang sangat bagus sob,,,sangat membantu

    BalasHapus
  2. wah makasih banget gan infonya keren.,.,.,

    BalasHapus
  3. boleh juga tuh langsung di coba nih,

    BalasHapus
  4. nambah lagi ilmu mantep gan nih infonya.,.,. keran dah makasih banget

    BalasHapus
  5. kunjungan sore mas salam kenal,

    BalasHapus
  6. sangat menarik,, sukses terus ya sob

    BalasHapus
  7. info yang sangat bagus sekali gan...

    BalasHapus
  8. saya sangat terbantu dengan info yang anda berikan.. makasih...

    BalasHapus

Silahkan Comment disini, saya comment di sana..

Langganan Artikel

Enter your email address:

Delivered by FeedBurner

Label

  1. Bisnis (5)
  2. Daftar Isi (4)
  3. Info (4)
  4. Link (2)
  5. Olah Raga (1)
  6. SEO (5)
  7. Software (3)
  8. Template (14)
  9. Tips Dan Trik (2)
  10. Tutorial (16)

Alexa