Membuat Efect Zoom Dengan CSS | Tanpa Script

Kembali lagi ke bahasan tentang CSS, Pada posting-posting sebelumnya kita sudah tahu persis beberapa kemudahan yang bisa kita lakukan dengan CSS. Yaitu kita bisa menentukan jarak, posisi dan lebar dari suatu area. Tapi sebenarnya kegunaan CSS ini tidak hanya sampai disitu saja. Dengan CSS ini kita juga bisa membuat suatu efek-efek style tertentu pada suatu konten. Salah satunya adalah yang akan kita bahas di postingan ini. Yaitu Membuat Efect Zoom Dengan CSS.

Efek zoom atau membuat pembesaran ini biasanya digunakan pada gambar. Dan ternyata kehebatan dari CSS ini kita sudah bisa membuat efek zoom ini menjadi kelihatan keren walaupun Tanpa Script. Salah satu Contoh atau Demonya bisa anda lihat di Gambar widget Popular post dibawah atau bagian footer blog ini. Gambar Thumbnail dari widget tersebut akan sedikit membesar jika diletakkan mouse. Atau dengan kata lain efet tersebut akan terjadi dengan Mouse Hover.

Untuk mendapatkan hasil yang seperti itu anda bisa membuatnya dengan cara memberikan CSS seperti ini.

Dari hasil CSS tersebut maka kita akan menghasilkan efek seperti ketika kita meletakkan mouse pada gambar dibawah ini.

Selamat Mencoba..!!!!

Pengenalan JQuery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Selain dukungan fasilitas yang lengkap, membuat plugin jquery juga cukup mudah. Dukungan ajax adalah salah satu fasilitas yang sudah tersedia di jquery.

JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.

Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Dikarenakan Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan, adalah salah satu alasan kenapa banyak web developer lebih memilih JQuery dibandingkan dengan Javascript Framework lain.

Apa itu Javascript Framework?

Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.

Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.

Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.

JQuery dan kemudahannya

JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.

Mari kita tengok bagaimana JQuery mempermudah kita.

Jika kita punya halaman HTML seperti ini:

<div id="container">This is container</div>

Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan adalah salah satu alasan kenapa banyak web develover lebih memilih JQuery dibandingkan dengan Javascript Framework lain.

Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.

<script src="jquery.js" type="text/javascript">

</script>

<script type="text/javascript">

$("#container").append("<strong>Ini hasil tambahan dari JQuery</strong>");

</script>

Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya disini.

Black Computer Store Blogger Template

Setelah sebelumnya share template White ads pigeon blogger Template, maka dipostingan kali ini admin ngalor ngidul kembali ingin share template gratis. Nama templatenya Black Computer Store Blogger Template. Sesuai namanya template ini khusus buat pecinta template berwarna gelap karena template ini warnanya hitam pekat.

Black Computer Store Blogger Template ini bukan murni hasil design dari admin ngalor ngidul. Admin ngalor ngidul hanya melakukan sedikit edit saja. Aslinya template ini adalah blogger store V2 hasil design dari Rifki Aria Gumelar, author dari www.javatemplates.com.

Berikut ini adalah tampilan dari  Black Computer Store Blogger Template.

Home page style

Main Post Style

Fitur dari Black Computer Store Blogger Template ini sendiri tidak jauh beda dengan blogger store V2. Bahkan bisa dibilang sama. Admin hanya mengedit sedikit dan juga menambahkan share button dan Java script extra agar bisa dipasang image transisi dibagian posting.

Jika belum tau seperti apa fitur yang admin tambahkan anda bisa langsung lihat sendiri di blog demonya. Untuk saat ini, template tersebut hanya bisa didownload melalui the doctor template.

Live Demo

Download

Jika ada kesulitan, silakan langsung ke tutorial asli dari template ini di www.javatemplates.com. 

Atau Hubungi kami melalui menu kontak untuk penambahan fitur dan mengkustomisasi lebih lanjut.

Perhatian:
Mohon jika anda menggunakan template ini untuk tidak meremove link yang ada difooter. Hargailah sedikit karya dan usaha kami. Jika ingin template yang memang hanya milik anda, anda bisa anda bisa membuat template dengan design anda sendiri. Atau dengan menggunakan jasa kami (^_^).

Trik Cepat menghilangkan Navbar dan widget bawaan blogger

Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yang disediakan. Sebuah custom template juga rata-rata telah dilengkapi dengan berbagai widget dan konten-konten favorite dan disukai oleh para blogger.

Salah satu cirinya lagi adalah telah menghilangnya widget-widget bawaan dari blogger, seperti misalnya navbar bawaan blogger. Tapi tahukah anda jika sebenarnya widget tersebut sebenarnya tidaklah hilang dari template anda. Widget tersebut biasanya hanya disembunyikan oleh designernya.

Coba saja ada masuk ke menu edit html dari dashboard anda. Kemudian cari kode berikut ini.

#navbar atau .navbar

Biasanya kode CSS yang akan mengikuti dari kode tersebut adalah seperti ini:

#navbar {
visibility:hidden;
}

.navbar {
visibility:hidden;
}

#navbar {
display:none
}

.navbar {
display:none
}

Memang betul jika dengan kode tersebut maka Navbar bawaan blogger tersebut akan menjadi hilang atau tersembunyi. Namun bukan berarti navbar bawaan blogger tersebut hilang. Sebagai buktinya adalah jika kita sedikit tahu tentang inspect element atau dilihat dari page sourcenya, sebenarnya widget tersebut masih ada.

Lalu bagaimana caranya agar Navbar dan widget bawaan blogger tersebut benar-benar hilang??
Caranya cukup gampang.

1. Login ke dashboard -> design -> edit html.
2. Cari kode:

 <body>
3. Letakkan kode berikut tepat diatasnya.

<script type="text/javascript">
<![CDATA[
<!--/*<body>*/-->
]]>
</script>

4. Save Template.
Maka kita akan ada pemberitahuan seperti ini. Klik saja hapus atau delete widgets.

Maka widget-widget bawaan dari blogger tersebut akan benar-benar hilang termasuk juga widget bawaan lainnya seperti tanda obeng atau quick edit dan lain sebagainya.

Tambahan:
Jika kita ingin memunculkan kembali widget tersebut, maka kita tinggal hapus kode tersebut. Gampangkan??

Elegant White Pigeon Template

Pada postingan kali ini admin ngalor ngidul coba untuk share hasil coba-coba design template blogspot/blogger. Admin memberi nama template ini Template Elegant White Pigeon. Template blogger ini bisa dibilang simple. Cara penggunaannya sangat gampang.
Berikut ini adalah spesifikasi dari Elegant White Pigeon Blogger Template.

1. 3 kolom di halaman utama.
2. 2 kolom di halaman posting.
3. 2 kolom sidebar kanan.
4. 2 kolom khusus iklan diatas postingan ukuran 250 x 250
5. 1 kolom khusus untuk iklan link ukuran 640 x 15
6. 3 kolom footer.
7. Loading yang sangat cepat karena tidak banyak menggunakan gambar.
8. SEO friendly.
9. System Custom navigasi utama.
10. Di lengkapi dengan Share Button, Sharing sexy, dan Subcriber dll.

Di bawah ini adalah screen shoot dari template yang saya maksud.

Home Style

Posting Style

Buat yang ingin menggunakan template ini bisa didownload secara gratis. Untuk mendapatkan template ini, sementara ini baru hanya dapat didownload dari thedoctortemplate.com. Jika mengalami sedikit kesulitan dengan pemakaiannya silakan tinggalkan komentar dibawah atau hubungi kami dengan menggunakan menu kontak jika ingin redesign atau custom ulang template ini.

Live Demo

Download

Perhatian:
Mohon jika anda menggunakan template ini untuk tidak meremove link yang ada difooter. Hargailah sedikit karya dan usaha kami. Jika ingin template yang memang hanya milik anda, anda bisa anda bisa membuat template dengan design anda sendiri. Atau dengan menggunakan jasa kami (^_^). Silakan Hubungi kami melalui menu kontak untuk penambahan fitur dan mengkustomisasi lebih lanjut.

Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

Dipostingan kali ini kita akan membahas bagaimana cara menghilangkan dan menampilkan suatu objek diblog. Dalam mendesign sebuat template, Penggunaan Trik dan Kode-kode Untuk Menampilkan dan Menghilangkankan ,atau lebih tepatnya menyembunyikan Widget Content Blog ini sangat diperlukan agar hasil template yang kita buat tidak terlihat monoton. Sebagai contoh adalah widget slider dan salah satu sidebar yang ada pada blog ini. Widget tersebut hanya akan muncul dihalaman utama dan kategori blog dan akan menghilang jika kita masuk kehalaman posting.

Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini biasanya pasti ada ditemplate-template dengan gaya magazine atau majalah. Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog

<b:if cond="data:blog.url == data:blog.homepageUrl">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika kita mengklik Label Post atau membaca postingan secara keseluruhan.

2. Kategori Post dan Single Post

<b:if cond="data:blog.url != data:blog.homepageUrl">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (postingan secara keseluruhan).

3. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType != &quot;item&quot;">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.

4. Single Post atau Halaman Postingan

<b:if cond="data:blog.pageType == &quot;item&quot;">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.

5. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType == &quot;index&quot;">

...Kontent...

</b:if>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond="data:blog.url == &quot;URL_POST_TERTENTU&quot;">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'>

...Konten...

</b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.

Cara penggunaan kode ini sangatlah gampang. Kita cukup menambahkan kode yang kita inginkan kewidget yang ingin kita tampilkan atau sembunyikan.

Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok atau dengan memberikan perintah melalui kode CSS-nya. Namun biasanya, penerapan kode-kode ini melalui CSS hanya di gunakan untuk mengatur komposisi dari suatu kolom widget konten. Misalnya lebar dan posisi widget atau objek berbeda dihalaman utama dan postingan. Mungkin hal ini akan kita bahas di postingan berikutnya.

Mungkin itu saja yang saya tahu tentang Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini. Jika teman-teman punya pendapat atau ilmu yang lain, silakan tinggalkan komentar dan url postingannya dibawah ini. Semoga bermanfaat.

Cara Mengetahui id dan class dari suatu widget atau kolom

Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten area pasti memiliki id tersendiri. Id ini merupakan nama dari widget tersebut seperti halnya header, sidebar, footer dan lain sebagainya. Untuk si pembuat atau designer template tersebut pasti tidak sulit untuk mengubah suatu area baik itu lebar, tinggi posisi dan lain sebagainya dari template tersebut. Namun berbeda halnya dengan kita yang hanya bisa memakai alias menikmati hasilnya.

Nah, permasalahannya disini adalah ketika ada sesuatu yang terlihat agak janggal, kemudian kita ingin memperbaiki dengan mengedit kode CSS-nya, atau kita ingin menambahkan suatu area disekitarnya, maka kita mau atau tidak mau kita harus tahu terlebih dahulu id dari kolom widget yang kita rubah. Id ini sendiri haruslah bersifat unik alias tidak boleh sama. Jadi tidak semua widget itu memiliki nama yang sama. Sehingga ketika sebuah template ini didesign, terutama template yang memiliki banyak kolom maka akan semakin banyak pula id-id yang akan diberikan oleh si designer.

Sebagai contoh misalnya sebuah template yang mempunyai 2 kolom sidebar, maka si designer ini pasti akan memberikan id tersendiri dari masing area. Pemberian id ini tidak ada ketentuannya. Id Sidebar tersebut bisa saja sidebar pertama diberi nama dengan sidebar-left dan sidebar kedua diberikan id sidebar-right, atau sidebar1 dan sidebar2, atau id-id yang lain misalnya yang satu id-nya sidebar-left, tapi sidebar yang kedua diberikan id kolom-tambahan.

Agar kita bisa mengetahui id dari suatu widget ini caranya sangat gampang. Kita tidak perlu memeriksa dan mengeditnya satu persatu. Caranya adalah kita cukup menggunakan fasilitas inspect element. Jika belum tahu tentang inspect element ini, silakan baca terlebih dahulu postingan tentang inspect element disini.

Disini saya juga akan coba memberikan satu contoh kecil. Saya akan contohkan bagaimana saya melihat id salah satu kolom yang ada di blog ngalor-ngidul ini langsung.

1. Pertama letakkan mouse pada widget yang ingin kita ketahui id-nya, sebagai contoh disini saya akan melihat id-id dari widget slider yang ada di homepage blog ini.
2. Klik kanan pada browser. Saya sendiri disini menggunakan browser google chrome. Jadi Kalau mau hasilnya sama, maka saya sarankan anda juga menggunakan google chrome.
3. Pilih inspect element sehingga kita akan mendapatkan hasil seperti dibawah ini. Jika kurang jelas klik saja gambarnya.

4. Sekarang coba kalian perhatikan bagian yang saya lingkari dengan garis merah tebal. Disitu kita bisa lihat ada banyak sekali kode source dan/atau kode HTML dari blog ini. Dan disetiap tag yang berawalan <div> pasti disertai dengan kata id atau class.

Setelah kita tahu mengetahui id dari widget yang ingin kita rubah tersebut maka kita tidak perlu takut melakukan kesalahan dalam mengedit template tersebut. Karena untuk setiap id tersebut juga mempunyai kode CSS-nya sendiri sesuai dengan id-nya. Kode CSS dari id tersebut terdapat pada kolom inspect element disebelah kanan. Kode CSS tersebut juga akan berubah setiap kali kita melakukan inspect element diarea yang berbeda. Untuk melihat apakah widget yang ingin kita edit tersebut sudah benar atau tidak, maka dilayar monitor kita akan suatu tanda seperti yang terlihat di gambar dibawah ini.

Dengan demikian maka untuk pencarian id ini pun selesai. Heheee.....

Pengenalan JAVASCRIPT Fungsinya

Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya untuk apa??

Javascript adalah bahasa skrip yang diletakkankan dalam kode HTML dan diproses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Dengan demikian bisa dikatakan bahwa javascript itu berfungsi sebagai pemanggil suatu fungsi dari suatu argumen, baik itu berupa bilangan, parameter, variable, value, properti, metode dan lain sebagainya dengan menggunakan even-even tertentu.

Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam kode html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript ini sendiri biasanya diletakkan didalam tag <body> atau pada umumnya (khususnya diblogspot template) diletakkat diatas tag </head>. Cara penulisannya sendiri sebenarnya sangat sederhana yaitu kita hanya perlu menuliskan nama fungsi yang ingin kita panggil beserta parameter yang mengukutinya.

Contoh penulisan Internal:

<script type="text/javascript">
document.write(“Test”);
</script>

Contoh penulisan External:

<script type="text/javascript" scr='http://.../test.js'> 
</script>

Contoh penggunaan dalam Blogspot HTML/XML.

<HTML>
<HEAD>
<title> <h1>Belajar javascript</h1> </title>
<b:skin><![CDATA[
Tempat peletakan Kode CSS
]]</b:skin>
<script type="Javascript">
Kode javascript di sini
</script>
</HEAD>
<BODY>
Kode HTML di sini
</BODY>
</HTML>

Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.

Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.

Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:
Kode HTML

Anggap Disini Adalah Content.

Kode CSS

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}

Hasil:

Anggap Disini Adalah Content.

Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.

border-radius: 15px; /*Kode pembuat lengkungan sudut*/

Sehingga kode CSS-nya menjadi seperti ini.

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}

Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.

Anggap Disini Adalah Content.

Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.

- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/

Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.

1. Border-radius: 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

2. Border-radius: 0px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

3. Border-radius: 15px 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

4. Border-radius: 0 15px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 15px;

5. Border-radius: 15px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

6. Border-radius: 0px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

7. Border-radius: 15px 0 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

8. Border-radius: 0 15px 15px 0;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;

Dan Lain Sebagainya........

Jenis-jenis border dan cara pembuatannya

Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini juga. Yaitu Jenis-jenis border dan cara pembuatannya. Seperti yang kita ketahui border ini selain sebagai pembatas, juga sekaligus berfungsi untuk mempercantik tampilan blog.

Penulisan border ini sendiri juga bisa dengan memberikannya secara individu atau arahannya: yaitu atas, bawah, kiri, kanan. Untuk pengaturan dan properti CSS border ini kita bisa menggunakan perintah dari keterangan CSS dibawah ini.

Property Border:

1. Border-color : berfungsi untu menentukan warna.
Cara penentuan warna dari border ini bisa langsung dengan menyebutkan nama dari warna tersebut dalam bahasa inggris. Contoh penulisan:

border-color:red;
border-color:blue;
dsb..

Atau juga dengan menggunakan hex-code atau rbg. Contoh :

border-color:#000; = Hitam pekat, 
border-color:#FFF; = Putih,
dan lain sebagainya.

border-color:rgb(255, 255, 0); untuk warna kuning, 
border-color:rgb(0, 0, 255); untuk warna biru.
Dsb..

Contoh: Property Border-color Individu

border-top-color: red;
border-right-color: #FF6600;
border-bottom-color: rgb(128, 0, 128);
dsb

Untuk menentukan warna dalam bentuk kode ini kita bisa menggunakan color picker yang ada pada program-program design atau bisa juga dengan mencarinya di internet langsung. Ada banyak kok situs yang menyediakannya. Bahkan diblogger sendiri, untuk yang type sederhana kita bisa langsung mendapatkannya di bagian setting template melalui dahsboard kita. Atau jika mau anda juga bisa memasangnya di blog sendiri kalian bisa mendapatkan scriptnya diposting Cara membuat Color Picker diblog.
2. Border-style  : berfungsi untuk menentukan style atau pola dari border.
Value Border-Style antara lain:

Contoh penulisan:

border-style:solid, 
border-style:double.
Dsb..

Contoh: Property Border-style Individu

border-top-style:solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;

3. Border-width: berfungsi untuk menentukan ketebalan dari border.
Untuk penentu ketebalan border kita bisa kode initial, medium atau thick. Namun umumnya dalam proses design website atau template blog, yang biasanya digunakan satuan panjang seperti px, em, cm, in, dsb.

border-width:1px; 
border-width: 2em;
Dsb..

border-top-width: 1px
border-right-width: 2px;
border-bottom-width: 1em;
border-left-width: cm;
Dsb..

Namun pada umumnya tidak semua kode-kode tersebut pasti kita pakai. Biasanya kita juga hanya menuliskannya secara singkat. Untuk penulisan singkat ini kita gunakan jika border yang ingin kita buat memilik style, warna, dan ketebalan yang sama. sebagai contoh kita ingin membuat border kolom kontent dengan border property sebagai berikut: Ketebalan border = 5px Style border = ridge dan warna border = merah. Maka untuk penulisan secara individunya kita akan menuliskan seperti ini.

border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;

border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;

Anggap disini adalah content

Namun karena border yang ingin kita buat memilik style, warna, dan ketebalan yang sama, maka penulisannya cukup dengan kode seperti dibawah ini:

border: 5px ridge red;

Dan penulisan kode singkatnya ini memilik sifat otomatis. Jadi meski penulisannya terbalik-balik juga tidak masalah.
border: 5px ridge red; atau,
border: ridge 5px red; atau
border: red 5px  ridge;
dsb,,
hasil yang didapatkan adalah sama.