SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Mempercantik Sidebar dengan CSS

Mempercantik Border dengan CSS seperti postingan saya sebelumnya merupakan hiasan atau kreasi untuk TAB menu Horizontal, Judul di dalam sidebar dan lain sebagainya, seperti contoh tampilan Blog saya ini.
Lihat contoh disamping.
Seumpama kawan bertanya apakah bisa untuk mempercantik Sidebar ??!!  jawabnya tentu bisa, yang penting kawan sedikit mengerti  struktur template yang kawan pakai, dan saya sudah mencobanya pada sidebar Blog atau apalah namanya pada umumnya berbentuk segi empat atau segi empat dan keempat sudutnya melengkung, saya kasi contoh gambar :

Tapi yang ingin saya bicarakan sekarang adalah merubah bentuk sidebar segi empat polos menjadi segi empat dengan sudut melengkung baik satu sudut, dua sudut maupun tiga sudut melengkung silahkan kawan mencoba untuk berkreasi, cara membuatnya selengkapnya silahkan baca atau lihat disini

Okey langsung saja ke TKP :
  • Seperti biasa masuk ke account Blogger dengan ID kawan 
  • Pada Dasbor pilih atau Klik Edit HTML
  • Simpan / Download template kawan dulu untuk antisipasi
  • Cari bagian Sidebar keberadaannya sebelum  ]]></b:skin>  
  • Perhatikan ciri-cirinya kurang lebih seperti berikut :
/* Sidebar Content */
.sidebar {color: #666666;line-height: 1.5em;font-family: Helvetica;}
#sidebar .widget{border:1px solid #390;background:#DDEEDD; padding:0px;margin-bottom:10px;}
#sidebar .widget-content{border:1px solid #B7B7B7;padding:2px;} dan seterusnya
  • Tulisan berwarna merah ( border:1px solid #390; ) ganti dengan css sudut melengkung postingan saya sebelumnya.
Gambar disamping kiri ini adalah tampilan sidebar Blog saya. cara pembuatannya adalah menggabungkan 2 css sudut melengkung yang kiri atas dan kanan bawah.
Biar kawan tak bingung seperti saya ini bingung cara menyampaikan sebaiknya saya beri contoh yang sudah ada sebelumnya :


<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px;">
<center>CONTOH</center>

<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 10px 10px; ">
<center>CONTOH</center>

Cara penggabungan :

border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 10px 10px; ">

Sebelum kawan bertanya : mengapa banyak sekali topleft 10px 10px dan bottomleft 0px 0px  ????? 
Sesuai Table pada postingan saya yang lalu tujuannya agar tampilan Border jadi sama (baik di google chrome, mozilla, Opera maupun yang lainnya) sebagai contoh perbedaan tampilan dengan css sama :

-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; border-top-right-radius: 10px 10px;border-top-left-radius: 10px 10px; ">

Cara merubah sudut melengkung yang di kiri menjadi di kanan hanya merubah right menjadi left begitu pula sebaliknya contoh :

-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 0px 0px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 0px 0px; -border-top-right-radius: 10px 10px;-border-bottom-right-radius: 0px 0px;"

Okey saya cukupkan sampai disini dulu, untuk menambah wawasan kawan silahkan kreasikan sendiri biar Blog kawan tampil beda.



5 komentar pada “Mempercantik Sidebar dengan CSS”

  1. waah boleh di coba niih

    Bikers Indonesia - http://bikersindo.blogspot.com

    Follow ya

    BalasHapus
    Balasan
    1. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
      dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
      berikan 4 angka 9994 alhamdulillah ternyata itu benar2 tembus AKI.
      dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
      ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
      allah saya akan coba untuk membuka usaha sendiri demi mencukupi
      kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
      sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
      yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
      insya allah anda bisa seperti saya…menang togel 275
      juta, wassalam.


      dijamin 100% jebol saya sudah buktikan...sendiri....







      Apakah anda termasuk dalam kategori di bawah ini !!!!


      1"Dikejar-kejar hutang

      2"Selaluh kalah dalam bermain togel

      3"Barang berharga anda udah habis terjual Buat judi togel


      4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


      5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
      tapi tidak ada satupun yang berhasil..







      Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
      anda semua dengan Angka ritwal/GHOIB:
      butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
      100% jebol
      Apabila ada waktu
      silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




      atau klik langsung di KLIK DSINI BOCORAN TOGEL




      angka GHOIB: singapur 2D/3D/4D/



      angka GHOIB: hongkong 2D/3D/4D/



      angka GHOIB; malaysia



      angka GHOIB; toto magnum 4D/5D/6D/



      angka GHOIB; laos










































      kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
      dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
      berikan 4 angka 9994 alhamdulillah ternyata itu benar2 tembus AKI.
      dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
      ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
      allah saya akan coba untuk membuka usaha sendiri demi mencukupi
      kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
      sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
      yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
      insya allah anda bisa seperti saya…menang togel 275
      juta, wassalam.


      dijamin 100% jebol saya sudah buktikan...sendiri....







      Apakah anda termasuk dalam kategori di bawah ini !!!!


      1"Dikejar-kejar hutang

      2"Selaluh kalah dalam bermain togel

      3"Barang berharga anda udah habis terjual Buat judi togel


      4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


      5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
      tapi tidak ada satupun yang berhasil..







      Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
      anda semua dengan Angka ritwal/GHOIB:
      butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
      100% jebol
      Apabila ada waktu
      silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




      atau klik langsung di KLIK DSINI BOCORAN TOGEL




      angka GHOIB: singapur 2D/3D/4D/



      angka GHOIB: hongkong 2D/3D/4D/



      angka GHOIB; malaysia



      angka GHOIB; toto magnum 4D/5D/6D/



      angka GHOIB; laos

      Hapus
  2. Terimakasih buat tutorialnya. Salam sukses

    BalasHapus
  3. aku merasa seperti anak kelas 1 dapet soal kelas 6 blas ndak nyantol, tapi trims infonya saya buat latihan di blog saya

    BalasHapus
  4. @Lasino dulu dan sampai saat ini saya sama kawan, masih tetap belajar, cuma kalau kawan mau belajar jangan cepat prustasi dan harus rutin
    -Karena kalau kita mau merubah tampilan Blog sedikit tidaknya kita harus tahu struktur / bagannya Blog kita, saya sudah berapa kali ganti template [sebenarnya ini tidak baik - dan JANGAN DITIRU] :z

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger