Membuat sudut bulat Container Blogspot ||Blogger Tips||

Pujangga Blogs

19 January 2011

Membuat sudut bulat Container Blogspot ||Blogger Tips||

Pada awalnya template blog ini mempunyai sudut lancit disetiap ruasnya dan di modifikasi sekian rupa hingga tampil beda dari Magazine Template R.1.5 yang mana template asli dari kang rohman sebagai Publisher.Tapi yang akan kita bahas bukan itu.yang akan kita bahas disini adalah bagaimana memodifikasi template dengan membuat sudut pada tiap ruas berbentuk bulat (border radius).

Okey..waktunya kita bermain main dengan CSS,untuk anda yang berminat silahkan ikuti latihan kita kali ini.
Untuk membuat sudut bulat pada setiap ruas kita hanya sedikit membutuhkan kode css tambahan (CSS3).Tapi sayangnya dibeberapa browser tidak bisa menampilkan bentuk sudut bulat tersebut dikarenakan tidak suport dengan kode stylesheet CSS3 yang makin lama semakin berkembang seperti misalnya Internet Explorer (IE) dan Opera.Tapi dengan menggunakan Mozilla Firefox bentuk ruas sudut bulat itu bisa tampil sempurna.

Sebagai media latihan , saya akan mencoba untuk membuat sudut bulat pada Header (judul) halaman blogspot.


Kode diatas adalah bagian dari CSS Header pada blog saya sebelumnya...dengan contoh style diatas bentuk dari sudut header blog masih berbentuk sudut lancip.Nah..sekarang saya coba menambahkan dengan kode CSS dibawah ini.


Properties : -moz-border-radius-bottomright:15px; » mengartikan bahwa pada sudut bawah sebelah kiri akan membentuk sudut bulat dengan radius 15px .

Properties : -moz-border-radius-bottomleft:15px; » mengartikan bahwa sudut bawah sebelah kanan akan membentuk sudut bulan dengan radius 15px .

Saya akan memberikan contoh css dan hasilnya seperti dibawah ini :

Contoh CSS
<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
-->
</style>
Hasil Priview
contoh sudut bulat pada sisi bawah bagian kiri dan kanan
15px


Contoh CSS
<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-topright:15px;
}
-->
</style>
Hasil Priview
sudut bulat pada sisi bawah bagian kiri dan atas kanan
15px

Contoh CSS
<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
}
-->
</style>
Hasil Priview
sudut bulat pada sisi atas bagian kiri dan atas kanan
25px


Contoh CSS
<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius:50px;
}
-->
</style>
Hasil Priview
sudut bulat pada semua sisi
50PX


Bagaimana...?
Cukup mudahkan....semoga bermanfaat.

5 comments:

pulsa via paypal on January 21, 2011 at 7:20 PM said...

salam kenal mass tutorialnya menarik

Pujangga on January 21, 2011 at 8:34 PM said...

@pulsa via paypal : salam kenal kembali mas :25

lidya on January 24, 2011 at 9:11 AM said...

sudah saya coba di website saya dan berhasil, terimakasih mas angga atas tutorialnya :27

Baca Komik Manga Naruto on March 14, 2011 at 9:43 PM said...

wah oke bnget mas, thanks yah ats infonya ^^

Anonymous said...

mas itu kalo -moz cuman jalan di mozilla.
kalo mau jalan di chrome atau safari, -moz nya diganti -webkit


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment