Monday, January 29, 2018

Merubah Tampilan Sidebar Dan Posting Blog

cara merubah tampilan sidebar dan posting blog. Menggunakan instruksi border, margin, padding, dan box shadow. Sehingga menciptakan tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibentuk berbeda dengan isinya. Seperti pola gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

 cara merubah tampilan sidebar dan posting blog Merubah tampilan sidebar dan posting blog

Langsung saja, cara merubah tampilan bab sidebar.

  1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
  2. Dan pilih Desainer Template > Tingkat Lanjut.
  3. Tambahkan CSS. kemudian masukan instruksi dibawah ini.
  4. .sidebar .widget h2{
    text-align:center;
    border:1px solid #ddd;
    margin:-10px -10px 0 -10px;
    padding:5px 0 5px 10px;
    background:#eee;
    box-shadow:0px 5px 5px #aaaaaa;}

    .sidebar .widget {
    text-align:center;
    border:1px solid #ddd;
    padding:5px 0 5px 0;
    box-shadow:0px 10px 10px #aaaaaa;}
  5. Terapkan ke blog. Selesai.
Keterangan kode:
  • .sidebar .widget h2{ mengatur judul pada bab sidebar.
  • .sidebar .widget { mengatur isi dari bab sidebar.
  • text-align:center; menciptakan goresan pena ditengah.
  • border garis kotak 
  • margin menciptakan kotak judul melebihi lebar dari isi widget atau gadget.
  • padding mengatur goresan pena dibagian dalam tulisan.
  • background:#eee; warna background.
  • box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

  1. Langkahnya sama menyerupai cara merubah tampilan sidebar blog. Hanya saja instruksi yang dimasukan yaitu sebagai berikut.
  2. h2.post-title{
    border:1px solid #ddd;
    margin:-12px -20px 0 -20px;
    padding:5px 0 5px 10px;
    background:#eee;
    box-shadow:0px 10px 5px #aaaaaa;}

    .post{
    border:1px solid #ddd;
    padding:10px 10px 0 10px;
    margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
  3. Terapkan ke blog. Selesai.
Keterangan kode:
  •  h2.post-title{ untuk mengatur bab judul posting
  • .post{ untuk mengatur isi dari bab posting.
  • Jika h2.post title tidak ada ganti dengan h3.post title
  • Untuk instruksi yang lainnya, fungsinya sama menyerupai keterangan instruksi di sidebar.
Silakan berkreasi sendiri, artikel diatas hanyalah sedikit pola cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang sanggup dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.
    Share:

    Related Posts:

    0 comments:

    Post a Comment