Kamis, 29 Juli 2010

Membuat textarea seperti google

Diposting oleh Hizrian di 00.46 | Kamis, 29 Juli 2010 | 18 komentar

Untuk sementara saya tidak melanjutkan Dasar dasar html.
Maaf ya tapi saya akan membahas tentang Membuat textarea seperti google sebagai contoh bisa anda lihat disini Contoh textarea.
Jika anda tertarik ikuti caranya sebagai berikut: ( :kopi )
1. Buka Dasbor
2. Pilih rancangan -> edit html
3. Cari kode ]]></b:skin> Lalu paste kode berikut diatasnya

.ds{display:-moz-inline-box}.ds{border-bottom:solid 1px #e7e7e7;border-right:solid 1px #e7e7e7;display:inline-block;margin:3px 0 4px;margin-left:4px}

4. Cara menggunakan:

Buatlah sebuah post
Lalu pastekan code berikut
<div style="height: 32px; margin: 4px 0pt;" class="ds"><input style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204); color: rgb(0, 0, 0); font: 18px arial,sans-serif bold; height: 25px; margin: 0pt; padding: 5px 8px 0pt 6px; vertical-align: top;" size="50" value="tes"></div>

5. Lihat contohnya di Contoh textarea
selesai juga deh

Readmore..

Sabtu, 24 Juli 2010

Dasar dasar html 4

Diposting oleh Hizrian di 17.24 | Sabtu, 24 Juli 2010 | 16 komentar

Dalam Dasar dasar html 4 ini saya tidak membahas tag lagi karena telah saya bahas pada post:

Dasar dasar html 3

Dasar dasar html 2

Dasar dasar html 1

Sekarang saya akan membahas bagaimana cara menambah CSS dalam Bahasa HTML.
Sebagai contoh saya akan mempraktekkan cara membuat Bubble tooltips 100% menggunakan CSS.
Caranya seperti berikut:

Cari code <body>
Dibawah code tersebut tambahkan code dibawah ini
<style type="text/css">
....
</style>
Ganti code yang berwarna merah dengan code css berikut:
/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}

a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAuzrWOxtFDg3M3CmMAK4kv8iisTez1cFFSYy0Mq2ID4Y6aO-05KjmA-Dlxp7Lr8wORwrrzqPVVJl-4xd0KsbCaxGcBJE1mcV3s2HkrNJBVPNkkaN5s6J2149tAPl5QHUwAYl2M4SJZmQ/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat bottom;
}

/*---------- balon tips END-----------*/
Untuk menggunakan code css tesebut caranya seperti ini:
Dibawah code </style> Pastekan code berikut:
<a class='bt' href='#'>FAQ'S<span class='balontips'>
<span class='atas'>
</span>
<span class='tengah'>
Tulis apa aja tentang FAQ'S!
</span>
<span class='bawah'>
</span>
</span>
</a>
Maka hasilnya seperti ini:

Readmore..

Jumat, 23 Juli 2010

Dasar dasar html 3

Diposting oleh Hizrian di 00.37 | Jumat, 23 Juli 2010 | 15 komentar

Label: Belajar Html

Sudah siapkah anda untuk mempelajari Dasar dasar html 3? pasti sudah siap
oh iya, sebelum mempelajari Dasar dasar html 3?
sebaiknya anda membaca post berikut:
Dasar dasar html 1
Dasar dasar html 2

-Tag <p>
Digunakan untuk mendefisinikan suatu paragraf
Cara menggunakan:
<p>Dasar dasar html 1? pasti sudah siap</p>
<p>Dasar dasar html2</p>
<p>Dasar dasar html3</p>
Hasilnya:

Dasar dasar html1

Dasar dasar html2

Dasar dasar html3

-Tag <html>
Digunakan agar dapat diketahui bahwa kode yang digunakan adalah kode html

-Tag <head>
Digunakan untuk membuat dan menambah elemen-elemen pada header

-Tag <body>
Digunakan untuk membuat dan menambah elemen-elemen pada badan suatu dokumen html

-Tag <title>
Digunakan untuk memberi nama/judul pada dokumen html yang akan dimunculkan pada browser

Cara menggunakan Tag <html>,<head>,<title>,<body>
<html>
<head>
<title>Dasar dasar html<title>
</head>
<body>
<p>Dasar dasar html1</p>
<p>Dasar dasar html2</p>
<p>Dasar dasar html3</p>
</body>
</html>
Hasilnya:

-Tag <big>
Digunakan untuk memperbesar tulisan <big> tidak sama dengan tag <b> (bold) karena tag <big> lebih besar dari pada <b>
Cara menggunakan:
<big>Big lebih besar dari pada bold</big>
<b>Bold lebih kecil dari pada big</b>
Hasilnya:
Big lebih besar dari pada bold
Bold lebih kecil dari pada big

Sampai disini dulu Dasar dasar html 3 Nanti saya akan lanjutkan pada Dasar dasar html 4 dengan pembahasan lebih seru lagi

Readmore..

Selasa, 20 Juli 2010

Dasar dasar html 2

Diposting oleh Hizrian di 03.33 | Selasa, 20 Juli 2010 | 11 komentar

Label: Belajar Html

Post ini adalah kelanjutan dari Dasar dasar html 1
Sekarang saya akan membahas lanjutan tag sebelumnya pada post "Dasar dasar html 1"

-Tag <button>
Digunakan untuk membuat tombol.
Cara menggunakan:
<button type="button">Tombol atau button</button>
Hasilnya:

-Tag <strong>
Fungsinya sama seperti tag <bold>,tetapi kalau dalam seo tag <strong> lebih baik daripada <bold>
Cara menggunakan
<strong>Strong</strong>
Hasilnya:
Strong

-Tag <em>
Fungsinya sama seperti tag <i>,tetapi kalau dalam seo tag <em> lebih baik daripada <i>
Cara menggunakan
<i>Miring</i>
Hasilnya:
Miring

-Tag <h1> sampai <h6>
Digunakan biasanya daram mengatur besar tulisan header atau judul.
Cara menggunakannya:
<h1>Tulisan H1</h1>
<h2>Tulisan H2</h2>
<h3>Tulisan H3</h3>
<h4>Tulisan H4</h4>
<h5>Tulisan H5</h5>
<h6>Tulisan H6</h6>
Hasilnya:

Tulisan H1

Tulisan H2

Tulisan H3

Tulisan H4

Tulisan H5

Tulisan H6

-Tag <li>
Digunakan untuk menampilkan angka atau nomor data berurut.Untuk yang bersimbol kita menggunakan <ul> dan untuk bernomor <ol>
Cara menggunakan:
<ul>
<li>simbol 1</li>
<li>simbol 2</li>
<li>simbol 3</li>
</ul><ol>
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
Hasilnya:

simbol 1
simbol 2
simbol 3

satu
dua
tiga

-Tag <img>
Digunakan untuk menampilkan gambar
Cara menggunakan:
<img src="http://i50.tinypic.com/2ed7338.jpg">
Hasilnya:

-Tag <sub>
Digunakan untuk memvuat huruf/teks subscript
Cara menggunakan:
H<sub>2</sub>O
Hasilnya:
H₂O

-Tag <sup>
Tag <sup> ini adalah kebalikan dari subscript
Contoh penggunaan:
m^-1
Hasilnya:
m^-1

-Tag <option>
Digunakan untuk mendefinisikan suatu elemen yang bisa dipilih dalam suatu daftar pilihan.
Baca:Dasar-dasar pembuatan option

Akhirnya selsai juga Dasar dasar html 1,Dasar dasar html 2
Tunggu Dasar dasar html tiganya!

Readmore..

Sabtu, 17 Juli 2010

Dasar dasar html 1

Diposting oleh Hizrian di 17.10 | Sabtu, 17 Juli 2010 | 11 komentar

Label: Belajar Html

Kali ini saya akan menulis tentang "Dasar dasar html".
-Apa itu HTML?
HTML adalah singkatan dari hypertext markup languange. Html berisikan tag-tag dan aturan aturan yang memungkinkan kita untuk membuat halaman web.
-Apa itu tag?
Saat membuat halaman web kita membutuhkan fungsi tag.
Format menulis tag sepeti berikut:
<TAG>Isi dengan Teks atau Gambar</TAG>

-Tag <b>
Digunakan untuk mempertebal tulisan.
Cara menggunakan:
<b>Bold</b>
Hasilnya:
Bold

-Tag <i>
Digunakan untuk memiringkan tulisan.
Cara menggunakan:
<i>Italic</i>
Hasilnya:
Italic

-Tag <a>
<a> adalah singkatan dari anchor, tag ini digunakan untuk membuat link
Cara menggunakan:
<a href="http://k-blogger1.blogspot.com/">K-blogger</a>
Hasilnya:
K-blogger

-Tag <center>
Digunakan untuk menengahkan tulisan
Cara menggunakan:
<center>Hai hai</center>
Hasilnya:

Hai hai

-Tag <hr>
<hr> adalah singkatan dari horizontal ruler
Cara menggunakan:
<hr>Horizontal ruler</hr>
Hasilnya:

Horizontal ruler

-Tag <strike>
Digunakan untuk mencoret sebuah tulisan
Cara menggunakan:
<strike>Coret</strike>
Hasilnya:
~~coret~~

Sampai disini dulu Dasar dasar html 1 sebenarnya masih panjang tapi saya akan melanjutkannya di Dasar dasar html 2

Readmore..

Kamis, 15 Juli 2010

Mengganti background blockquote

Diposting oleh Hizrian di 01.21 | Kamis, 15 Juli 2010 | 13 komentar

Label: trik blog

Fungsi blockquote adalah mempercantik tulisan ataupun untuk background kode atau sebagainya.
sebagai contoh:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Sebelum saya menjelaskan tentang "Mengganti background blockquote" saya akan menjelaskan cara menggunakannya.
Berikut caranya:

Select tulisan yang akan anda tambahkan fungsi blockquote
lalu klik icon berikut ->
Selesai

Dan sekarang cara "Mengganti background blockquote"
Berikut caranya:

Siapkan url gambar
Login blogger
Pilih Rancangan -> Edit html
Cari kode berikut:

.post-body blockquote {
background-position:-10px -7px;
border: 1px dotted #FFC600;
margin: 10px;
padding: 10px;
background: url("http://img516.imageshack.us/img516/1513/blackquotewe3.png") no-repeat
#FFF8DD;
text-align: justify;
}

Lalu ganti kode warna merah dengan url gambar anda
Dan save template

Readmore..

Sabtu, 10 Juli 2010

Membuat File JavaScript

Diposting oleh Hizrian di 22.14 | Sabtu, 10 Juli 2010 | 14 komentar

Label: Seo , trik blog

Menurut buku seo yang saya baca JavaScipt tidak SEO-friendly. Jika kita menggunakan JavaScript terlalu banyak kemungkinan posisi di search engine menurun.
Untuk mengurangi efek masalah ini adalah dengan "Membuat File JavaScript"
Cara membuatnya seperti ini:

Buka notepad
Tentukan kode JavaScript yang akan dibuat menjadi File
Jika sebelumnya kodenya seperti ini:
<script type="text/javascript">
Isi dari javascript...
</script>
Maka hapus kode warna merah dan copy isi dari code JavaScript dan pastekan ke Notepad
Lalu save dengan membuat Filename : NamaFile.js dan Save as type: All files
Upload file JavaScript tersebut
Setelah diupload,Cara menggunakannya seperti ini:
<script type="text/javascript" src="URL_File_JS_Yang_Sudah_Di_Upload.js"></script>
Selesai deh

Readmore..

Jumat, 09 Juli 2010

Mempercantik textarea

Diposting oleh Hizrian di 19.29 | Jumat, 09 Juli 2010 | 15 komentar

Label: trik blog

Setelah menulis post Cara membuat textarea,Cara membuat select all pada textarea, Dan Cara membuat select all otomatis pada textarea sekarang saya akan membahas cara "Mempercantik textarea"
Berikut contoh dan kodenya:
<textarea name="code" rows="3" cols="20" style="background: #FF00FF; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> Kode </textarea>
<textarea name="code" rows="3" cols="20" style="background: #FF00FF; color: #FFFFFF; border: 3px solid #FF7F00; line-height: 1.5em; padding: 5px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;"> Kode </textarea>
<textarea name="code" rows="3" cols="20" style="background: #FF00FF; color: #FFEFF9; border: 10px outset #FF7F00; line-height: 1.5em; padding: 5px;"> Kode </textarea>
<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px;"> Kode </textarea>

Untuk belajar dasar dasar mempercantik textarea baca:

Rounded Corner (Sudut melengkung)

Macam macam border 1

Kode warna

Readmore..

Rabu, 07 Juli 2010

Menentukan Geographic Target di Webmaster Tools

Diposting oleh Hizrian di 19.05 | Rabu, 07 Juli 2010 | 20 komentar

Label: search engine , Seo , trik blog

Pasti banyak yang bertanya mengapa blognya sering masuk di google.com tapi di google.co.id tidak? Sedangkan blog kita berbahasa indonesia pasti pengunjung yang kita butuhkan berasal dari indonesia.
Maka kita harus set target geografis ke indonesia.
Berikut caranya:
1.Masuk Google webmaster
2.Lalu klik Site configuration --> Pilih settings

3.Pada Geographic Target pilih Indonesia

4.Klik save

Selesai deh

Readmore..

Selasa, 06 Juli 2010

Start Sharing Not Selling

Diposting oleh Hizrian di 06.05 | Selasa, 06 Juli 2010 | 11 komentar

Label: Kontes seo

Start Sharing Not Selling, Manusia adalah makhluk sosial dimana kita tidak dapat hidup tanpa orang lain dan begitu pula orang lain.
Yang dimaksud dengan sharing adalah berbagi
dan yang dimaksud selling adalah menjual
Jadi jika diartikan menjadi : mulailah berbagi jangan menjual (Start Sharing Not Selling)
Sekarang banyak orang yang menjual ilmunya dibandingkan membagikannya.Yang dimaksud menjual ilmu ialah membagi ilmu tetapi ia mengharapkan sesuatu contohnya uang. Memang tak masalah tapi apa salahnya kita berbagi (Sharing) dari pada menjualnya (Selling).
Bukankah ilmu itu kita dapat dari orang lain juga?Lalu untuk apa pelit ilmu?Tidak masalahkan untuk berbagi (Sharing)?.
Budayakanlah Berbagi Karena Jika kita berbagi ilmu kepada orang lain maka orang yang kita bagi ilmu itu ilmunya akan bertambah dan ilmu kitapun akan bertambah juga.
-----------------------------------------------------------------------------

Start Sharing Not Selling adalah kontes seo yang diadakan oleh www.adsense-id.com
Hadiahnya:
Juara 1 = $50 + domain .com PR3
Juara 2 = $30 + domain .com PR2
Juara 3 = $20

Peraturannya:
1. Lama kontes 1 Bulan terhitung sejak 7 Juli, berakhir 7 Agustus 2010
2. Menjadi Anggota Adsense-Id. Sekarang juga daftar di adsense-id.com
3. Membuat artikel dengan tema Start Sharing Not Selling
4. Artikel berbahasa Indonesia minimal 200 kata.
5. Keyword utama: Start Sharing Not Selling dengan URL utama http://www.adsense-id.com/forums/forum.php
6. Di akhir artikel berikan keyword Indonesian Publisher Community dengan url http://www.adsense-id.com
7. Pemenang akan dilihat dari hasil pencarian Google.Co.Id, ditutup 7 Agustus jam 12 Siang.
8. Daftarkan URL Postingan kontes dengan cara kirim pesan pribadi Squids. Tentunya kudu daftar dulu di forum Adsense-id.

Indonesian Publisher Community

Readmore..

Senin, 05 Juli 2010

Award pertama

Diposting oleh Hizrian di 19.47 | Senin, 05 Juli 2010 | 10 komentar

Label: Award

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh59u2IBT72Wo4Zd1HzL1qRSoAvUnAnXLRc2Jw_BC8JJ3dbNz6zub2PkyT1JyM50A7_2a6x-S_8InelBBdC_CWkSTkD0rLau_pXxLtiUMBwNtWGR7uUo0ZLcVFu3KOuYUJG0mg2yDuLMH8/s1600/award+backlink.jpg

Terima kasih buat coretan-felix yang telah membagi award ini kepada K-blogger. Ini adalah award pertama K-blogger.
Selamat untuk 10 blog di bawah ini yang kebagian FRIENDLY VISITOR AWARD dari K-blogger:

1.Akbar Yahya
2.Gus Ikhwan
3.Rizky 2009
4.Ardi33
5.Jaya
6.Berita Bola
7.Chandra
8.Miftah
9.ArDa
10.Pejhes

Aturan Main:
Bagi sobat yang menerima award ini diharuskan untuk membagikan kembali award ini kepada sepuluh orang temannya. Selanjutnya, sobat penerima award harus meletakkan link-link berikut ini di blog atau artikel masing-masing:

1. sumberppc.blogspot
2. loudy.co.cc
3. loudy92.blogspot
4. fahmiahmadfarizan.blogspot
5. bagusfuns.blogspot
6. dunia-klue.blogspot
7. kuncupkembang.blogspot
8. gieterror.blogspot
9.coretan-felix.co.cc
10.k-blogger1.blogspot.com

Sebelum sobat-sobat meletakkan link-link di atas, hapus terlebih dahulu peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Peserta nomor 2 menjadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link anda sendiri di bagian paling bawah (nomor 10). Tapi ingat...!!!, kalian semua harus adil dalam menjalankannya. Jika tiap penerima award mampu memberikan award ini kepada 5 orang saja dan mereka semua mengerjakannya , maka jumlah backlink yang akan didapat adalah:

Ketika posisi kamu 10, jumlah backlink = 1
Posisi 9, jumlah backlink = 5
Posisi 8, jumlah backlink = 25
Posisi 7, jumlah backlink = 125
Posisi 6, jumlah backlink = 625
Posisi 5, jumlah backlink = 3,125
Posisi 4, jumlah backlink = 15,625
Posisi 3, jumlah backlink = 78,125
Posisi 2, jumlah backlink = 390,625
Posisi 1, jumlah backlink = 1,953,125

Dan semuanya menggunakan kata kunci yang kamu inginkan. Dari sisi SEO kamu sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung web para downline kamu mengklik link itu, kamu juga mendapatkan traffik tambahan.

Selamat ya!!

Readmore..

Minggu, 04 Juli 2010

Cara Membuat Navigasi Breadcrumb

Diposting oleh Hizrian di 17.58 | Minggu, 04 Juli 2010 | 21 komentar

Label: navigasi , trik blog

Kali ini saya akan membahas tentang "Membuat Navigasi Breadcrumb"
Navigasi Breadcrumb berguna untuk memudahkan pengunjung untuk kembali kehalaman sebelumnya.

Contoh hasilnya:

Ada 2 jenis navigasi website, yaitu navigasi internal dan navigasi eksternal.

Navigasi internal adalah link yang akan menavigasi pengunjung dari satu halaman ke halaman lain tapi masih didalam website/blog yang sama contohnya seperti Navigasi Breadcrumb atau Navigation Breadcrumb
Navigasi eksternal adalah link yang digunakan untuk menavigasi pengunjung keluar dari halaman website/blog sekaligus keluar dari website/blog

Sekarang cara membuatnya:

Masuk dasbor
Pilih rancangan
Edit html
Centang Expand Template Widget
Kemudian cari kode ]]></b:skin>
Letakkan kode dibawah ini diatas kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
kemudian cari code <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika juga tidak ada cari yang mirip
Copy code berikut lalu paste dibawah kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

Simpan template

Readmore..

Jumat, 02 Juli 2010

Rounded Corner (Sudut melengkung)

Diposting oleh Hizrian di 01.14 | Jumat, 02 Juli 2010 | 13 komentar

Label: trik blog

Apakah anda sering menemui blog yang kelihatan melengkung seperti blog ini?
Itu namanya Rounded Corner
Sebagai contoh:

Berikut cara membuatnya:

Tentukan bagian yang akan anda ubah menjadi melengkung
Misalnya bagian post maka cari kode cssnya
Edit seperti berikut:

Full rounded corner :

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

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px; }

Rounded corner di atas :

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

-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; }

Rounded corner di kiri atas :

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

-moz-border-radius-topleft: 10px;

-webkit-border-radius-topleft: 10px;

-khtml-border-radius-topleft: 10px;

border-top-left-radius: 10px; }

Rounded corner di bawah :

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

-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; }

Catatan:

Kode warna merah adalah Kode yang harus ditambahkan
Kode -moz-border-radius digunakan untuk FF, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-bottom-left untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.

Referensi:http://optimasi-blog.blogspot.com/
Ditulis : Sendiri

Readmore..

Langganan: Postingan ( Atom )

Kamis, 29 Juli 2010

Sabtu, 24 Juli 2010

Jumat, 23 Juli 2010

Selasa, 20 Juli 2010

Tulisan H1

Tulisan H2

Tulisan H3

Tulisan H4

Tulisan H5

Tulisan H6

Sabtu, 17 Juli 2010

Kamis, 15 Juli 2010

Sabtu, 10 Juli 2010

Jumat, 09 Juli 2010

Rabu, 07 Juli 2010

Selasa, 06 Juli 2010

Senin, 05 Juli 2010

Minggu, 04 Juli 2010

Jumat, 02 Juli 2010

Web Saya

Shoutmix

Labels

Blog Archive

Reader Community

Blogroll

Flagcounter

About Me