Membuat Rounded Corner di Template Blogger

Ingin tampilan yang agak lentur/ tidak kaku, gunakan rounded corner. Selain kotak biasa, ada pilihan untuk kotak bergaris.Mana yang lebih baik, rounded corner atau kotak biasa? Ini sangat relatif, tergangung desain, juga selera.

Desain yang compact, kubic, tentu lebih tepat menggunakan kotak biasa, tapi untuk tampilan yang bisa match dengan huruf-huruf lengkung, gambar lengkung, tentu lebih tepat menggunakan rounded corner.

Bagaimana membuat rounded corner? Saya akan menunjukkan cara membuat rounded corner di template new blogger. Cara yang sederhana, tanpa manipulasi script, hanya html css biasa saja.

Pertama, buatlah kotak dengan sudut rounded seperti gambar di bawah.



Kemudian dengan perintah slice, pisahkan menjadi tiga bagian: bagian atas, tengah , dan bawah. Ini juga bisa manual dengan cropping bagian per bagian kemudian simpan memenjadi file sendiri-sedniri. Namun cara yang lebih mudah adalah dengan slice.

Setelah diseleksi dengan slice, simpan sebagai web file, save for web --> beri nama file --> simpan di folder. Maka akan terbentuk folder images di folder penyimpanan. File yang erbentuk dari perintah slice adalah 3 buah file dengan nama file_1.jpg, file_2.jpg, dan file_3.jpg.

Bentuknya seperti ini:
File rounded atas:


File garis tengah:


File rounded bawah:


Gunakan file 1 untuk rounded atas, file 2 untuk garis tengah dan file tiga untu penutup bawah.

perintah sederhana htmlnya adalah sebagai berikut:
buat tiga buah div:

[div][/div]
[div class="tengah">[ --- semua isi sidebar di sini ---] [/div]
[div][/div]

untuk properties tengah.div pakai properties sebagai beikut:

.tengah { background-image=url("folder/file_2.jpg"); background-repeat:repeat-y;)

Bagimana memasangnya dalam template blogger? untuk template default, kita harus melihat properties dari sidebarnya. Kita harus membuat file roundednya lebarnya sama dengan lebar sidebar. Kita ambil contoh template minima:

Perhatikan bagian berikut:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
properties diatas adalah untuk kerangka meletakkan div sidebar yang akan kita isi dengan rounded.

buat properties untuk masing-masing bagian:

.atas {backgorund-image:url(folder/file_1.jpg); background-repeat:no-repeat; backgorund-posistion:bottom; }
.sidebar {backgorund-image:url(folder/file_2.jpg); background-repeat:repeat-y; }
.bawah {backgorund-image:url(folder/file_3.jpg); background-repeat:no-repeat; backgorund-posistion:top; }

measang pada template code:

<div id='sidebar-wrapper'>
<div class='atas'></div>
<b:section class='sidebar' id='sidebar' preferred='yes' />
</div>
<div class='bawah'></div>


untuk yang belum begitu paham cara memasang style, silakan lihat pada posting terdahulu sekali: tutorial css.

CSS, Mengenal List Properties

List atau daftar, atau kalau di ms word kita mengenalnya dengan nama bullet and numbering adalah model penomeran berhierarki. Bisa menggunakan huruf, angka, atau lambang (bullet). Dalam pemrograman internet, css, kita bisa mengunakan fungsi list yaitu ul untuk unorderd list (list yang tidak bernomor) dan ol yaitu ordered list. Selain itu ada list yang horizontal dan ada list yang vertikal. Ada list yang memakai angka atau huruf, ada list yang memakai bullet atau image.

Bedanya ul dan ol? Sebelum itu kita harus tahu, ul dan ol adalah tag untuk list, untuk membuat list itemnya, kita butuh satu lagi tag yaitu li. jadi tag li harus berada dalam tag ul atau ol. Dan tag ul atau ol di dalamnya harus ada li.

contoh:
Un-Ordered List

<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ul>

hasilnya:

• list 1


• list 2


• list 3


• list 4


• list 5

ordered list:

<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ol>

Hasilnya:

1. list 1


2. list 2


3. list 3


4. list 4


5. list 5

List dengan link:

<ul>
<li><a href="http://www.paradesain.net">paradesain</a></li>
<li><a href="http://forumpurworejo.blogspot.com">forum blogger purworejo</a></li>
<li><a href="http://medscript.brinkster.net">medscript on brinkster</a></li>
</ul>


hasilnya:

• paradesain


• forum blogger purworejo


• medscript on brinkster

mengatur jenis/ type list:
untuk mengatur type list kita bisa menggunakan property list-style-type
contoh:

buat dulu css nya di style, misalnya
li.list1 { list-style-type:suare;} akan menghasilkan list kotak;
li.list1 { list-style-type:circle;} akan menghasilkan list linkaran berlubang;

untuk membuat list berupa icon atau image pakai list-style-image:
li.list1 { list-style-image:url(sumber file)}

Penulisannya:

<ul>
<li class="list1">list 1</li>
<li class="list1">list 2</li>
</ul>


List ke kanan dan list ke bawah:

untuk list ke kanan (contoh untuk navigasi atas di blog ini, dan blogger indonesia).
pakai properties untuk li { display:inline}

untuk list ke bawah (contoh seperti sidebar di blog ini):
pakai properties untuk li { display:block;}

silakan dikembangkan sendiri, gunakan properties margin dan padding untuk ul, border-bottom, tambahkan background-color untuk link. bagi para blogger pengunjung blog ini yang ahli CSS, mohon koreksinya bila ada kesalahan.

Tutorial CSS, Background di Header

Anda ingin menambahkan image atau gambar di header blog?
Header berupa gambar indah di lihat, dan menjadikan blog atau web jadi meriah. Ada dua cara memasang gambar, satu dengan langsung di taruh, dengan tag IMG, atau dijadikan latar belakang.

Untuk menambah latar belakan image pada header lakukanlah hal sebagai berikut:
pada css style, buat properties untuk header
misalnya:
#header
{
padding:10px;
background-image:url( alamat file );
background-repeat:no repeat;
}
Perhatikan, ukuran file gambar, kalau ingin pas dengan halaman yang sudah didesain, sesuaikan ukuran gambar dengan properties #header.

/*kalau ukuran gambar lebih kecil dari div header, dengan propertie background-repeat:no repeat, maka hanya akan terlihat satu gambar saja, seperti perintah IMG. Kalau ukuran gambar sama dengan ukuran div #header, properties background-repeat tak diperlukan.

Nah, di atas gambar kita bisa menulis seperti biasanya. Tulisan di atas gambar.

posisi SERP google no 3 untuk pencarian dengan kata kunci:"tutorial CSS"

Tutorial CSS: Membuat Navigasi Vertikal

Navigasi horizontal sudah, kali ini saya akan memberikan contoh membuat navigasi vertikal, yang bisa dipasang di sidebar anda. Konsep dasarnya adalah list html. Seperti kalau di ms word kita tahu numbered list, yang bisa memakai angka atau huruf, bisa juga juga memakai bullet. (Bullet and Numbering).

langsung saja. Buatlah elemen div dengan kelas sidebar
.sidebar
{
padding:0;
width:100px;
text-align:right;
}
ini akan menjadi tempat kita meletakkan elemen list, yang kalau di ms word kita sebut bullet and numbering. div sidebar di atas kita setting dengan padding:0 artinya, jarak alemen atau font yang berada di dalam div tersebut 0, (mepet pinggir).

Kemudian widt:100px; lebar elemenkita set 100 pixel, ini bisa kita ubah sesuai dengan lebar sidebar kita. atau tak usah diberi property ini kalau berada dalam elemen lain yang sudah ditentukan width-nya. Misalnya berada salam kolom table atau #div dengan fixed width, lebar yang ditentukan.

text-align:right, text rata kanan.

mulai dengan list:
.sidebar ul
{
margin:0;
padding:0;
}
ul = unordered list;
kita tulis .sidebar ul karena nanti kita akan memasang elemen ul dalam div dengan class sideba.

.sidebar li
{
font-family:georgia,tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
list-style-type:none;
border-bottom:1px solid #ffffff;
}

fornt-family: kelompok huruf, list-style-type: none, tidak memakai penanda list, dalam ms word bisa memakai angka, huruf, atau bullet.
border-bottom:besarnya 1 pixel, silid, dengan warna putih.

.sidebar li a
{
color:#000000;
display:block;
text-decoration:none;
background-color:#00CCCC;
padding:2px 5px 2px 1px;
border-right:4px solid;
border-right-color:#006666;
}
Tampilannya akan seperti ini:


karena list nanti berupa link, yang bisa kita isi dengan url atau ke halaman yang lain, maka kita perlu menambahkan elemen a (link).

.sidebar li a:visited
{
color:#003366;
}
link yang sudah di klik, halaman sudah terbuka, akan berganti warna textnya, #003366.

.sidebar li a:hover
{
color:#ffffff;
text-decoration:none;
background-color:#006699;
border-right:4px solid;
border-right-color:#003366;
}
mengatur penampilan pada saat mouse kita melewati tulisan dalam list tersebut: hover;

jangan lupa taruh property di atas pada bagian style di dalam head.

bagi yang berminat, silakan download, free.

Mengenal Property Link

Link adalah sebuah text yang terhubung ke halaman atau url tertentu. dalam blog, link sangat penting, karena ini salah satu penilaian dari search engine dalam menentukan rating blog kita.

Bagimana mmebuat link? mudah saja. sebuah link terdiri dari tag:
<a href="url"> nama link </a>
url di sini bisa url relative maupun url absolut, permanen link. url ralatif menuntunt ke halaman yang masih satu server, atau dalam satu komputer.
misalnya: <a href="index.htm">Index</a>

link absolut, selalu akan menuju alamat tersebut walaupun yang mengakses beda komputer, karena ditulis lengkap.
contoh: <a href="http://www.bloganda.com">Link Ke bloganda</a>


Property Link

warna untuk link:

secara default, setiap link akan diwarnai dengan warna biru, garis bawah. untuk mensetting warna link sesuai dengan warna favorit, atau menyesuaikan dengan warna halaman, maka berikut ini langkahnya:

dalam style, buat atau edit link (a)
a
{ color: red; /*warna link merah*/
text-decoration:none;/*tanpa garis bawah*/
}

warna untuk link yang telah dikunjungi: a:visited

a:visited
{
color:blue; /*warna text biru*/

warna untuk link hover

ketika mouse, kursor, melewati sebuah link, biasanya kursor berubah menjadi gambar tangan, pada saat itu akan terjadi perubahan warna pada link. untuk mensetting warna dan property linknya, adalah sebagai berikut:
a:hover
{ color:green; /*warna link saat kursor melewati link */
}

tersedia juga banyak property:
misal:

border-bottom:1px dotted #ffffff;/* garis bawah sebesar 1 piksel putus-putus, warna putih*./

atau
{ border-bottom:1px solid;
border-bottom-color:#ffffff; /*warna putih*/
}

Yang perlu diperhatikan, jangan salah urutan penempatannya, urutan yang benar:
a, a:visited, a:hover

a {....}
a:visited {...}
a:hover {...}

selamat mencoba
sumedi

TUTORIAL CSS (1)

CSS singkatan dari Cascading Style Sheet, merupakan kode untuk mengatur tampilan halaman. Untuk mengatur jenis huruf, warna, ketebalan, bisa langusng menggunakan TAG HTML, namun dalam perkembangannya menjadi rumit kalau menyangkut desain yang banyak, kalau mau mengedit, maka tiap halaman harus di edit satu-satu.

Dengan CSS kita tinggal masuk ke script CSS nya lalu mengganti bagian mana yang akan diganti. Karena dalam CSS semua sudah dikelompokkan dalam ID atau Class tertentu, maka menjadi mudah manajemen halamnnnya.

CSS ada yang merupakan file terpisah, CSS external, yang kemudian di link ke halaman HTML. Satu file CSS bisa dipakai untuk banyak halaman dengan style sama. Pemisahan halaman HTML dengan CSS akan memudahkan dalam pengeditan. Namun hal ini membutuhkan hosting untuk menyimpan file. Keuntungan lainnya, dengan memisahkan file css, tak mudah ditiru orang hanya dengan melihat source codenya. Untuk untuk membuat CSS external, buatlah file dengan extensi *.css.

Misalnya: File: latihan1.css


body
{
bground-color:#red
}

kemudian buat file html, misalnya dengan nama latihan1.html
cara menyisipkan kode CSS yaitu dengan koneksi link css:

Sisipkan diantara tag <head>...</head> kode sebagai berikut:

<style type=text/css>
<link href="latihan1.css" rel="stylesheet" type="text/css">
</style>


Ada juga CSS yang menjadi bagian dari halaman, CSS internal, seperti dalam halaman Blogger saya. Kelebihannya, tak membutuhkan hosting kkhusus untuk menyimpan file css nya. Ini merupakan solusi untuk blog seperti Bloger, wordpress yang hanya menyediakan halaman jadi, tidak menyediakan hosting file.

Cara membuat CSS internal.
Letak script CSS berada pada tag <head>...</head>
Diawali dengan

<style type =”text/css”>
<--
di sini script CSS
-->
</style>>

Tag CSS: selector {properties:value;}
Contoh:

body {
bground-color:#ffffff;
}

akan menghasilkan latar belakang putih.

img
{
border:1px solid
}

akan menghasilkan, setiap tag <img> yang tidak ditentukan class nya, akan diberi border sebesar 1 px.

Kalau ditentukan kelasnya misalnya:

.display img
{
border:0;
}

gambar yang dimasukkanke class .display tidak ada garisnya.

Class selector
Dalam CSS tiap-tiap bagian bisa dibagi-bagi dalam class yang berbeda sehingga memudahkan dalam pengeditan. Misalnya kita akan membedakan jenis huruf, ukuran, warha untuk tanggal, judul tulisan, dan isi tulisan. Kita buat tiga class dengan nama “tanggal”, “judul”, “isi”

.tanggal
{
font-family:verdana, arial, Helvetica;
font-size:10 px;
color:#green;
}

penggunaanya:

<div class=”tanggal”>
12 Juni 2007
</div>


menghasilkan: 12 Juni 27, font verdana, ukuran font 10px, warna hijau.

.judul
{
font-family:verdana, arial, Helvetica;
font-size:12 px;
color:#red;
text-transform:uppercase;
}

tampilan: font verdana, ukuran font 12px, warna: merah, huruf besar semua (uppercase).

.isi
{
font-family:Georgia, “times new roman”, arial;
font-size:12 px;
color:#000000;
}

tampilan: font Georgia (cirikhas wordpress, juga template minima-nya blogger), ukuran font 12px, warna hitam.

.kolomisi
{
padding:10px 5px 10px 10px;
}

artinya:
kalau kolom <td> diberi style .kolomisi akan terformat dengan Padding atas:10px, padding kanan:5px, padding bawah: 10px, dan padding kiri: 10px.


[bersambung di tulisan berikutnya]