Cari Artikel Blog Ini

Total Tayangan Laman

POSTING BLOG TAMPIL DENGAN BORDER MELENGKUNG

Setelah tutorial menampilkan postingan dalam bentuk kotak , sekarang anda dapat menampilkan border post dalam bentuk kotak yang sudutnya melengkung. Sebagai contoh, coba anda perhatikan border post EPG Studio yang telah diatur sehingga tampilannya berupa kotak melengkung pada keempat sudutnya.
Caranya, anda hanya perlu menambahkan sedikit kode pada bagian post, maka blog andapun akan tampil dengan border melengkung.
Ikuti langkah=langkah dibawah ini :
  1. Masuk ke Blogger.
  2. Pilih Rancangan kemudian pilih Edit HTML.
  3. Cari kode seperti dibawah ini :

    post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em

  4. Copy kode dibawah ini, dan paste tepat dibawahnya

    • Untuk tampilan border melengkung pada seluruh (4) sudut :

      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;


    • Untuk tampilan border melengkung pada 2 sudut bagian atas :


      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      -webkit-border-radius-topleft: 10px;
      -webkit-border-radius-topright: 10px;
      -khtml-border-radius-topleft: 10px;
      -khtml-border-radius-topright: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;



    • Untuk tampilan border melengkung pada 1 sudut bagian kiri atas :

      -moz-border-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-radius-topleft: 10px;
      -khtml-border-radius-topleft: 10px;
      border-top-left-radius: 10px


    • Untuk tampilan border melengkung pada 2 sudut bagian bawah :

      -moz-border-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-radius-bottomleft: 10px;
      -webkit-border-radius-bottomright: 10px;
      -khtml-border-radius-bottomleft: 10px;
      -khtml-border-radius-bottomright: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;

    • Border melengkung pada bagian atas kiri dan kanan bawah

      -moz-border-radius-topleft: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-radius-topleft: 10px;
      -webkit-border-radius-bottomright: 10px;
      -khtml-border-radius-topleft: 10px;
      -khtml-border-radius-bottomright: 10px;
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;


  5. Setelah selesai menambahkan kode border diatas, klik tombol Simpan Template.
  6. Lihat perubahan blog anda sekarang.


Trik diatas dapat juga anda gunakan pada bagian blog yang lain, misalnya sidebar, komentar pengunjung atau bagian apa saja yang penting anda memahami dan mengetahui kode HTML bagian-bagian tersebut.
Selamat mencoba, semoga bermanfaat...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
7 Comments

7 komentar :

echa bintang timur mengatakan...

mantap bos..????? tengkyu.....

Ray mengatakan...

contohnya mana mas ?

Ades mengatakan...

Ray@ : contohnya ada pada post, sidebar dan komentar, silahkan amati...

Anonim mengatakan...

Hey
I digged this excellent utility DRM-removal and used it for removing drm from itunes protected musics a years ago, it did it well, btw. Then I bought mp3 player and it could't play my wma files so I decided to [url=http://drm-removal.com]convert wma to mp3[/url] with drm-removal. It works like magic! Just in a few clicks, you only need to click "Add" button and choose the folder of wma files. They will convert all the files simultaneously at a really high speed. If you have the same problem and need to convert wma to mp3, you should try drm-removal!
I am big fan of audiobooks and actually wonder, if it legal. I bought a book (now its mine!) from napster, but may be its drm and I can't copy it to my MP3 player!! Thats dick!! I can remove drm - but what about legacy?

thanks in advance!

blok harian mengatakan...

kalo gak ada code nya di blog kita gimana sob?

Ades Sambas mengatakan...

@blok hariankode pada EPG Studio menggunakan template tata letak. Mungkin template yang anda gunakan template baru Blogger jadi kodenya bereda

Rizal Yuliandi mengatakan...

Waw,keren semua nii artikelnya,ijin copas satu persatu yaa, tapi sayang nya da malam...sampai jumpa lain waktu sobbb,thanksss berat

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!