Format Teks

Untuk membuat teks lebih fungsional dan lebih berfariasi, format teks termasuk yang sangat sering digunakan dalam penulisan artikel. Dengan menggunakan format teks kita dapat merubah bentuk atau ukuran teks.

Beberapa format teks yang sering digunakan yaitu :

Bold (Ketebalan), ditandai dengan tag awal <b> dan tag akhir </b>
Strong (Besar), ditandai dengan tag awal <strong> dan tag akhir </strong>
Italic (Kemiringan), ditandai dengan tag awal <i> dan tag akhir </i>
Small (sedang), ditandai dengan tag awal <small> dan tag akhir </small>
Under line (Garis bawah), ditandai dengan tag awal <u> dan tag akhir </u>
Strikethrough (Garis ditengah teks), ditandai dengan tag awal <strike> dan tag akhir</strike>

Perhatikan contoh :

<b> Bold (Ketebalan) </b>
<strong> Strong (Besar) </strong>
<i> Italic (Kemiringan) </i>
<small> Small (sedang) </small>
<u> Under line (Garis bawah) </u>
 <strike> Strikethrough (Garis ditengah teks) </strike>

Berikut hasilnya :

Bold (Ketebalan)
Strong (Besar)
Italic (Kemiringan)
Small (sedang)
Under line (Garis bawah)
Strikethrough (Garis ditengah teks)

code : HNGJJ4NWVWRW

Mudah kan...........?

OK....Selamat membaca artikel yang lain dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Penggunaan Atribut Baris

Dalam format html, baris bisa ditandai dengan tag <p> atau ditandai dengan tag <br/> , biasanya saya menggunakan tag <p> atau tag <br/> untuk memberi jarak antara teks dengan teks dibawahnya, seperti pada saat membuat daftar. Tag ini juga sering saya gunakan untuk memisahkan tabel, gambar, dll.

Berikut contoh penggunaan spasi pada teks :

<h2>Nama-nama buah :</h2>
<p>
Mangga
<br/>
Rambutan
<br/>
Pepaya, dll
</p>

Berikut hasilnya :

Nama-nama buah :

Mangga


Rambutan


Pepaya, dll

Berikut yang tidak menggunakan tag <br/> :

Nama-nama buah :

Mangga
Rambutan
Pepaya, dll

Mudah kan...........?

OK....Selamat membaca artikel yang lain dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Membuat garis

Menyisipkan sebuah garis memang kadang sangat diperlukan. Garis bisa disisipkan ditengah - tengah paragraf, biasanya digunakan sebagai penekanan suatu teks dalam sebuah paragraf . Tapi yang jelas garis bisa ditempatkan dimana saja, sesuai fungsi dan kebutuhannya.
Garis dalam penulisan html ditandai dengan tag <hr/>, dan tag <hr/> penulisannya tidak menggunakan tag pembuka.

Berikut contoh cara penulisan saat menyisipkan garis diantara paragraf :

<h1>HTML</h1>

<hr/>

<p>
Struktural yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah tulisan seperti tag <h1><h2><h2> dan seterusnya, tag ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai penulisan judul..
</p>

<hr/>

<p>
Presentational adalah tag yang menentukan tebal tipisnya tampilan dari sebuah tulisan yang sering kita lihat lihat sebagai tanda bold, tag ini berlaku untuk semua teks pada sebuah paragraf termasuk Heading atau judul. (contoh, <b>Teks Tebal</b>).
</p>
<hr/>

Berikut hasilnya :

HTML

---

Struktural yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah tulisan seperti tag dan seterusnya, tag ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai penulisan judul..

---

Presentational adalah tag yang menentukan tebal tipisnya tampilan dari sebuah tulisan yang sering kita lihat lihat sebagai tanda bold, tag ini berlaku untuk semua teks pada sebuah paragraf termasuk Heading atau judul. (contoh, Teks Tebal).

---

Mudah kan...........?
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara membuat efek shadow pada kotak dan gambar

Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi warna pada border, seleksi warna pada text, fitur skala, kolom pada text, termasuk fitur gradien pada background. Selain itu Penggunaan css3 membuat blog kita menjadi lebih ringan, sehingga ketika membuka blog, loading terasa lebih cepat.
Sekian banyak Tutorial yang sudah saya posting di blog ini sudah menggunakan fitur css3. Dan Untuk kali ini, saya juga akan memanfaatkan fitur dari css3, yaitu memberi efek shadow pada sebuah kotak dan image atau gambar.

Yang pertama, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur:

<style type="text/css">
.box-shadow1{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px #818181;
-webkit-box-shadow: 7px 7px #818181;
-moz-box-shadow: 7px 7px #818181;
}
</style>
<div class="box-shadow1">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang kedua, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.box-shadow2{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}
</style>
<div class="box-shadow2">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang ketiga, menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.box-shadow3{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: -7px -7px 8px #818181;
-webkit-box-shadow: -7px -7px 8px #818181;
-moz-box-shadow: -7px -7px 8px #818181;
}
</style>
<div class="box-shadow3">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang keempat, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah gambar, dengan memberi efek blur :

<style type="text/css">
.box-shadow4{
width:300px;
height:300px;
padding:5px;
margin:0 auto;
color:#ooo;
background:#00378A;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kKsejWC3XM6pYMWJEuRln0_ccpUc4kU5CRRkAffUhwW3BaDpXQCGgVGMf6A2ReOP3VWthP_eKlR2d4YqTlm9VqpbOAwI3qUy7LaY_KW1ZS940n8RiURkVuLTWk_fIAVTzK7UGdMqACKX/s300/Gardu.jpg) no-repeat 0px 0px;
opacity:0.7;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<br />
<div class="box-shadow4">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang kelima, cara menambahkan teks pada box shadow :
Untuk membuat fariasi Teks, silahkan anda bisa lihat artikel  cara membuat fariasi Teks

<style type="text/css">
.box-shadow5{
width:300px;
height:150px;
padding:5px;
margin:0 auto;
color:#fff;
font-size: 22px;
font-family: Goudy Stout,sans-serif;
background:#00378A;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<div class="box-shadow5">Cara membuat efek shadow pada kotak dan gambar</div>

Berikut hasilnya :

Cara membuat efek shadow pada kotak dan gambar

OK....Selamat membaca dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

CSS

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Kini CSS sendiri sudah berkembang hingga CSS level 3, dan beberapa fitur dari CSS level 3 adalah berkaitan dengan perbatasan dan latar belakang.  Ini mencakup dan memperluas fungsionalitas dari CSS level 2 [CSS21], Yang dibangun pada CSS level 1 [CSS1]. Sedang Ekstensi utama dibandingkan dengan tingkat 2 adalah perbatasan yang terdiri dari gambar, kotak dengan beberapa latar belakang, kotak dengan sudut bulat dan kotak dengan bayangan.
Banyak fungsi dan fitur baru yang menarik dari CSS3. Beberapa browser berbasis WebKit, seperti Safari dan Chrome, dan Opera sudah mendukung Transisi CSS3 pada Mentransformasi CSS3. CSS3 ini memberikan kecepatan yang lebih cepat terlihat untuk halaman web dengan konten dinamis, dan bergulir lebih halus. Fungsi dan fitur dari CSS3, kini sudah banyak digunakan untuk membuat dan membangun beberapa bagian dari halaman web.

Berikut ini beberapa contoh penggunaan CSS, yang bisa kita gunakan untuk mengatur tampilan sebuah web :
- CSS Backgrounds
- CSS Teks
- CSS Font
- CSS Link
- CSS Daftar / list
- CSS Box Model
- CSS Border
- CSS Border Radius
- CSS Margin
- CSS Padding
- CSS Dimensi

Dan banyak lagi penerapan penggunaan CSS. Anda bisa lihat dan baca artikel yang berhubungan dengan penggunaan CSS, pada tutorial blog, yang ada pada tab menu disebelah samping kanan blog ini.

OK....Selamat membaca dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

HTML Hyperlink (Link)

Sebuah hyperlink (atau link) adalah kata, kalimat, atau gambar yang dapat Anda klik untuk melompat atau menuju ke dokumen baru atau bagian baru dari sebuah halaman yang sedang dibaca. Untuk mengetahui bahwa suatu kata, kalimat, atau gambar mengandung sebuah link, biasanya bila Anda memindahkan kursor di atas link disuatu halaman Web, panah kursor akan berubah menjadi gambar tangan kecil.

Penulisan html link ditandai dengan tag awal <a> dan tag akhir atau tag penutup </a>. Dan tag <a> dapat digunakan dalam dua cara:

1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href

2. Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama

Kode HTML untuk link yang sederhana bisa ditulis seperti ini:

<a href="http://www.carabuatwebgratis.com/">Klik disini</a>

artinya bil kita klik hyperlink "Klik disini", maka link akan mengarahkan kealamat http://htmlnoer.blogspot.com

HTML Link - Atribut Target

Atribut target menentukan tempat untuk membuka dokumen terkait. Artinya link akan mengarahkan kealamat yang terkait dengan membuka jendela baru dalam browser.

Berikut penulisan html link dengan atribut target :

<a href="http://www.carabuatwebgratis.com/" target="_blank">Klik disini</a>

Dan masih banyak mengenai macam-macam atribut untuk html link. Anda bisa baca artikel lain yang berhubungan dengan hyperlink yaitu "Penggunaan atribut hyperlink" dan "CSS Link".

Semoga bermanfaat.....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Fungsi Sitemap atau Peta situs

Site map atau peta situs sama halnya dengan daftar isi atau bisa juga disebut arsip sebuah web atau blog. Site map atau peta situs merupakan bagian dari web atau blog yang sangat berperan sekali.

Tujuan penting membuat site map atau peta situs diantaranya adalah :

1. Site map atau peta situs bertujuan untuk mempermudah pengunjung untuk melihat seluruh isi artikel yang ada dalam sebuah website atau blog.

2. Site map atau peta situs bertujuan untuk mempermudah search engine seperti google mengindek seluruh isi artikel yang ada dalam sebuah website atau blog. Dengan kata lain site  map atau peta situs bertindak sebagai alat bantu navigasi dengan memberikan gambaran umum tentang isi sebuah web atau blog.  Site map Peta situs dapat meningkatkan mesin pencari optimasi situs dengan memastikan  bahwa  semua  halaman  dapat  ditemukan.

Sangat disayangkan bila web atau blog kita yang berisi banyak artikel atau halaman lain yang sangat penting dan pengunjung tidak mengetahui keberadaan artikel atau halaman tersebut, terutama search engine seperti google.

Beberapa bentuk site map atau peta situs yang bisa kita buat :

1. XML site map
Site map atau peta situs ini membantu  mesin pencari untuk lebih cerdas merangkak sebuah situs web atau blog dan menyimpan hasilnya dapam mesin pencari secara up to date. Site map yang dibuat dengan modul tersebut dapat  secara otomatis diindek oleh  mesin pencari Ask, Google, Bing, dan Yahoo!.

Contoh :

 <url>

  <loc>http://www.carabuatwebgratis.com/</loc>

<lastmod>2010-12-22T06:10:34+00:00</lastmod>

  <changefreq>always</changefreq>

  <priority>1.00</priority>

</url>

<url>

  <loc>http://www.carabuatwebgratis.com/p/home.html</loc>

  <lastmod>2010-12-22T06:10:34+00:00</lastmod>

  <changefreq>always</changefreq>

  <priority>0.80</priority>

</url>

<url>

  <loc>http://www.carabuatwebgratis.com/p/explorer.html</loc>

  <lastmod>2010-12-22T06:10:34+00:00</lastmod>

  <changefreq>always</changefreq>

  <priority>0.80</priority>

</url>

... dan seterusnya.....

</urlset>

2. ROR Site map

Format XML yang dengan sendirinya  bisa  menggambarkan  setiap isi  dari artikel atau halaman suatu web atau blog secara umum, sehingga setiap mesin pencari dapat lebih  detail membaca seluruh  isi  dari artikel atau halaman suatu web atau blog tersebut.

Contoh :

<rss version="2.0" xmlns:ror="http://rorweb.com/0.1/" >

<channel>

  <title>ROR Sitemap for http://www.carabuatwebgratis.com/</title>

  <link>http://www.carabuatwebgratis.com/</link>

<item>

     <link>http://www.carabuatwebgratis.com/</link>

     <title>Tutorial blog  | Blog Tutorial | trik-tips blog</title>

     <description>Tutorial blog  | Blog Tutorial | trik-tips blog</description>

     <ror:updatePeriod>always</ror:updatePeriod>

     <ror:sortOrder>0</ror:sortOrder>

     <ror:resourceOf>sitemap</ror:resourceOf>

</item>

<item>

     <link>http://www.carabuatwebgratis.com/p/home.html</link>

     <title>Tutorial blog  | Blog Tutorial | trik-tips blog</title>

     <description>Tutorial blog  | Blog Tutorial | trik-tips blog</description>

     <ror:updatePeriod>always</ror:updatePeriod>

     <ror:sortOrder>1</ror:sortOrder>

     <ror:resourceOf>sitemap</ror:resourceOf>

</item>

... dan seterusnya ...

</channel>

</rss>

3.  HTML Sitemap

Bentuk site map atau peta situs dengan kode html. Selain untuk mengoptimalkan mesin pencari, site map atau peta situs ini lebih berfokus untuk memudahkan pengunjung melihat seluruh isi suatu web atau blog.

Contoh :

<div id="cont">
<h1>HTML Site Map</h1>
<h3><a href="http://www.carabuatwebgratis.com/">Homepage</a>
Last updated: 2010, December 23</h3>
<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/iklan-anda.html" title="iklan anda">iklan anda</a></td></tr>

<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/menambah-widget-jam-pada-blog.html" title="menambah widget jam pada blog">menambah widget jam pada blog</a></td></tr>

<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/cara-membuat-read-moreselengkapnyabaca.html" title="cara membuat read more, selengkapnya">cara membuat read more, selengkapnya</a></td></tr>

<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/cara-menghilangkan-navbar-pada-blogger.html" title="cara menghilangkan navbar pada blogger">cara menghilangkan navbar pada blogger</a></td></tr>

... dan seterusnya ...

Nah itulah beberapa tentang Fungsi Sitemap atau Peta situs, semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

HTML Headings

Headings atau Judul Post merupakan elemen structural dari HTML Yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah tulisan seperti tag <h1><h2><h2> dan seterusnya, tag ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai penulisan judul.

Headings atau Judul Post ditandai dengan tag <h1> hungga <h6> dan seterusnya.
<h1> Untuk penulisan judul terbesat, dan hingga <h6> untuk menuliskan judul yang lebih kecil.
Berikut cara penulisan :

<h1>Teks Judul atau Headings 1</h1> <h2>Teks Judul atau Headings 2</h2> <h3>Teks Judul atau Headings 3</h3> <h4>Teks Judul atau Headings 4</h4> <h5>Teks Judul atau Headings 5</h5> <h6>Teks Judul atau Headings 6</h6>

Dan berikut hasilnya :

Teks Judul atau Headings 1 Teks Judul atau Headings 2 Teks Judul atau Headings 3 Teks Judul atau Headings 4 Teks Judul atau Headings 5 Teks Judul atau Headings 6

Catatan :

Browser secara otomatis menambahkan Spasi kosong sebelum dan sesudah heading atau judul.

Pentingnya Judul atau Headings

Mesin pencari menggunakan judul Anda untuk mengindeks seluruh isi dari halaman web Anda.
Karena pembaca dapat mengerti isi halaman Anda dengan judul tersebut, jadi sangat penting untuk menggunakan pos untuk menunjukkan struktur dokumen.
H1  harus digunakan sebagai judul utama, diikuti dengan sub judul H2, kemudian H3 , dan seterusnya.
Gunakan HTML judul untuk judul saja. Jangan gunakan judul untuk membuat teks besar atau tebal.


HTML Lines atau Garis

Tag <hr/> menciptakan  sebuah garis horizontal pada sebuah halaman HTML.

Unsur "hr" dapat digunakan untuk memisahkan sebuah konten atau paragraf teks:

<p> Ini adalah sebuah paragraf </ p> <hr /> <p> Ini adalah sebuah paragraf </ p> <hr /> <p> Ini adalah sebuah paragraf </ p>

Hasilnya sebagai berikut :

Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf

HTML Komentar

Komentar atau Html yang digunakan untuk menjekaskan bagian-bagian pada elemen Html, dan Html komenter dapat disisipkan ke dalam kode HTML untuk membuatnya lebih mudah dibaca dan dimengerti. Html Komentar diabaikan atau tidak terbaca oleh browser dan tidak ditampilkan pada halaman browser.

Contoh penulisannya sebagai berikut :

<!-- columns --> <p>Ini adalah sebuah paragraf / konten "columns"</p> <!-- main --> <p>Ini adalah sebuah paragraf /  konten "main"</p> <!-- content --> <p>Ini adalah sebuah paragraf  / konten  "content"</p>

Catatan :

Ada tanda seru setelah kurung buka, tetapi tidak sebelum kurung penutup.

Berikut hasilnya dan Html komentar tidak terbaca :

Ini adalah sebuah paragraf / konten "columns" Ini adalah sebuah paragraf /  konten "main" Ini adalah sebuah paragraf  / konten  "content"

Pernahkah Anda melihat sebuah halaman Web dan bertanya-tanya "seperti apa cara penulisan dalam kode Html ... ?!". Silahkan anda bisa coba lihat sekumpulan HTML pada halaman sebuah web.

Caranya, klik kanan pada halaman web dan pilih "View Source" (IE) atau "View Page Source" (Firefox), atau serupa untuk browser lainnya. Ini akan membuka jendela yang berisi kode HTML dari halaman web tersebut.

OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini. 

Baca artikel lain :

Atribut Html

Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti Tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: "<", ">" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka "<...>"dan diakhiri dengan tag penutup "</...>". Kemudian di dalam tag tersebut terdapat Elemen HTML seperti html, head, title,body dll. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML. Jadi penambahan Atribut memberikan informasi tambahan tentang elemen HTML. Kesimpulannya :     * HTML elemen dapat memiliki atribut     * Atribut memberikan informasi tambahan tentang suatu elemen Html     * Atribut selalu ditulis pada tag awal     * Atribut ditulis dalam pasangan nama / nilai seperti: name="value" Misalnya HTML link didefinisikan dengan tag <a>. Alamat link ditetapkan dalam atribut href : . <a href="http://www.tutorialblognoer.co.cc">Home</a> Atribut Nilai (value) harus selalu diapit tanda kutip. dan tanda kutip yang umum digunakan yaitu tanda kutip ganda ("......"). Tapi bisa juga menggunakan tanda kutip tunggal ('......').  Catatan : Dalam beberapa situasi tertentu, ketika nilai atribut itu sendiri berisi tanda kutip, perlu untuk menggunakan tanda    kutip tunggal seperti ( '...... "......" ......'). Penulisan atribut dianjurkan dengan huruf kecil, Versi yang lebih baru (X) HTML akan menuntut atribut huruf kecil.  Berikut ini adalah daftar dari beberapa atribut yang standar untuk elemen HTML : Atribut Value Description class classname Menentukan classname untuk elemen id id Menentukan sebuah id unik untuk elemen style style_definition Menentukan gaya inline untuk elemen title tooltip_text Menentukan tambahan informasi tentang elemen OK....Selamat membaca artikel yang lain dan semoga bermanfaat.... Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih. Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara Membuat Rounded Corner

Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow, transform rotate, selector, dan lain-lain. Dan semua itu masih banyak yang belum kita coba. Tapi tak mengapa, masih banyak waktu kita untuk menjelajahi kode css dan efek-efeknya.

OK...!!! Kali ini kita akan mencoba untuk membuat sebuah  kotak dengan sudut tumpul atau sering juga di sebut dengan  rounded corner. Rounded Corner adalah sebuah efek melengkungkan sebuah garis (border) pada sebuah elemen di web, tentunya hal ini untuk memudahkan kita dalam mendesain web ataupun blog.

Apalagi Rounded Corner ini diberi efek background warna gradasi, pasti akan tambah indah desain web atau blog kita. Tapi untuk efek gradasi akan saya jelaskan pada postingan berikutnya.

Perhatikan sudut-sudut dari garis dibawah ini :
 

DISINI

TEKS ANDA

DISINI

TEKS ANDA

DISINI

TEKS ANDA

Keterangan :

Warna bisa diubah sesuai selera

(-moz-border) dan (webkit-border) bisa anda rubah, semakin kecil nilai "px"nya akan semakin meruncing sudutnya,dan sebaliknya, semakin besar nilai "px"nya akan semakin tumpul sudutnya.

Berikut kode css dari bentuk di atas adalah : 

<div style="border:#1589FF 3px solid; -moz-border-radius:10px; -webkit-border-radius:10px;">

    DISINI TEKS ANDA</div>

Catatan :

Gunakan browser versi terbaru yang support CSS3 dan jangan gunakan Internet Explorer, misalnya browser Mozilla Firefox, agar trik ini bisa tampil.

Jadi deh.....
Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara membuat Text-Shadow

Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Penggunaan efek shadow pada teks merupakan salah satu bagian trik yang bagus, selain teks lebih enak dibaca juga agar web ataupun blog tampil lebih menarik dan terkesan lebih elegan. Tapi tentu dalam pemberian efek shadow pada teks juga harus disesuaikan besar kecilnya ukuran font, gelap terangnya efek shadow yang tampil, dan lebar tidaknya efek blur yang muncul. Dan semua itu bisa kita atur nilainya agar teks yang kita buat menggunakan efek ini lebih enak dibaca dan tampil lebih indah.

OK...!!!,  Ada dua cara dalam pembuatan text-shasow :

1. Menggunakan kode html (xhtml)

Kita bisa secara langsung membuat Text Shadow pada area posting, dengan cara    menambah kode html pada area html. Berikut adalah cara penulisan kode HTML :

<h3 style="color: #01022c; font-family: staccato222 BT; font-size: 2em; font-weight: 700; line-height: 1.2em; padding: 3px 10px; text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119);">
Tuliskan Teks di sini !!
</h3>

Berikut hasilnya :

Tuliskan Teks di sini !!

2.  Menggunakan kode CSS.

Untuk cara yang ini anda harus menyisipkan kode Css pada Template, tepatnya anda bisa letakkan kode Css sebelum tag </head>.

Berikut contoh teks shadow menggunakan kode Css :

<style type='text/css'>
.teks-shadow {
color: #01022c;
font-family: staccato222 BT;
font-size: 2em;
font-weight: 700;
line-height: 1.2em;
padding: 3px 10px;
text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119)
}
</style>

Kemudian untuk menampilkan text shadow kita tinggal menambah kode html pada widget atau area posting ataupun dimana anda akan menempatkan teks shadow sesuai kebutuhan anda.

<div class="teks-shadow">
Teks Shadow disini
</div>

Berikut hasilnya :

Teks Shadow disini

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Satu Link Tukar Sebar Sejuta

Anda ingin Agar Link ke Blog Anda nempel terus dan dibantu promosikan oleh 1 juta orang lebih? Jika Ya, maka Anda dapat menggunakan iklan dengan Faktor Kali. Cara Kerjanya sangat sederhana. Anda mendaftar di link yang akan saya sebutkan beberapa saat lagi. Kemudian langsung LOGIN dan isi Data Anda meliputi Blog Anda, judul Blog Anda dan keterangan singkat tentang Blog Anda tersebut. Segera setelah itu anda akan punya WEBSITE REPLIKA KHUSUS dengan id Anda yang unik untuk Anda promosikan. Saran saya letakkan saja link link ini di blog Anda agar orang lain dapat mengikuti.

Anda pasti sangat mudah mengajak orang untuk mendaftar, karena semua orang butuh promosi, setiap orang ingin iklan mereka tersebar dengan cepat. Ok, anggaplah anda telah mulai mempromosikan website replika Anda tadi. Kita asumsikan 2 orang teman Anda sudah Gabung melalui link Anda!. 2 Orang ini disebut Level 1 Anda. Setelah itu promosi otomatis Anda akan mulai segera bekerja sendiri bagaikan autopilot. Mengapa? Karena link ke blog Anda tadi NEMPEL pada website 2 orang member Anda tadi. Sekarang Anda mulai dibantu promosi oleh 2 orang!.

2 Orang member Anda tadi juga bisa mengerjakan cara yang sama, mereka mengajak masing-masing 2 teman mereka, berarti ada tambahan 4 orang kan?. 4 Orang ini disebut Level 2 Anda. Total Jumlah member Anda sekarang menjadi 6. Kemudian ini berlanjut terus, 4 orang baru yang di level 2 Anda tadi juga mengajak 2 teman mereka, tambah 8 (Level 3). Sekarang Anda telah dibantu oleh 14 orang. Link Ke Blog Anda dibawa oleh 14 orang, padahal Anda hanya ngelink ke tempat saya satu kali bukan? Ini terus berlanjut!

Perkembangan seperti ini tabel perkembangannya:

Level	Jumlah	Total
1	2	2
2	4	6
3	8	14
4	16	30
5	32	62
6	64	126
7	128	254
8	256	510
9	512	1022
10	1024	2046
11	2048	4094
12	4096	8190
13	8192	16382
14	16384	32766
15	32768	65534

Ternyata jika Anda mendaftar setelah ini, memasukkan informasi blog Anda, kemudia saya mengajak 2 orang saja maka iklan Anda dapat dibawa bukan oleh 1 juta orang lebih melainkan 2 Juta orang lebih! Promosi Anda yang sederhana bisa membuat iklan Anda NEMPEL pada sebanyak itu orang. Gratis pula!.

Anda tak akan menyia-nyiakan kesempatan ini. Silahkan bergabung sekarang juga kesini: http://didianto.com

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara Membuat Read more

Update cara buat read more, tapi cara ini menggunakan cara manual. Jadi kita memberi read more dengan menyisipkan beberapa kode pada saat kita posting atau menulis artikel. Dan kode tersebut kita letakkan sesuai keinginan kita, yaitu kita akan menginginkan berapa kalimat atau berapa karakter yang akan kita tampilkan pada halaman depan blog kita.
Cara ini memang sudah usang, tapi tidak ada salahnya saya update kembali....OK.
Bila anda menginginkan cara buat read more yang otomatis, sehingga kita tidak harus selalu mesisipkan kode read more tersebut pada saat posting, anda bisa baca artikelnya DISINI.



Tapi bila tetap ingin yang manual, silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut : 

<data:post.body/>

7. Ganti kode <data:post.body/> dengan kode :

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p> </b:if>

8. Jika sudah anda ganti,Simpan Template.

Langkah selanjutnya, pergi ke Dasboar, lalu pilih Pengaturan, selanjutnya pilih Format.
Dibagian paling bawah teks area kosong bertuliskan Template Posting, lau tuliskan kode berikut :

<span class="fullpost"> </span>

9. Setelah itu Simpan.

Selanjutnya.....

Kode tersebut sebenarnya hanya untuk mempermudah penulisan saat posting,maksudnya ?
Silahkan anda posting baru, pada kolom Edit HTML,bukan di kolomTulis.
Ketika di buka halaman posting pada kolom Edit Html, Kode tersebut,akan keluar secara Otomatis.

Anda tinggal memasukkan artikel mana yang ingin di tampilkan pada haman depan,dan mana halaman yang untuk selanjutnya.

Caranya lihat ilustrasi di bawah ini :

Saya membuat posting baru,dan saya menulisnya di kolom Edit HTML bukan di Tulis / Compose.
Saat membukanya ada tulisan :

<span class="fullpost">
</span>

Saya,akan menuiskan sebagai berikut :

"Diantara anda dan saya kira-kira gantengan mana ya.....
<span class="fullpost">
Kalau gantegan anda, ya.....bersyukurlah.....hehehe....
</span>

Maka,setelah saya publikasikan akan menjadi seperti ini :

Diantara anda dan saya kira-kira gantengan mana ya.....
Read More... /Selengkapnya...

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara Memasang Background Gambar pada postingan

Banyak cara untuk memperindah blog kita, salah satunya dengan memberi background gambar pada tulisan atau postingan kita, seperti pada halaman ini. Tapi tentunya gambar yang akan kita gunakan sebagai background sebaiknya kita buat lebih transparan, agar nantinya tulisan atau postingan kita tetap terlihat dan tetap enak di baca.
Dengan menambah background  pada postingan  seperti yang ada dihalaman ini saya yakin anda juga akan tertarik, pengunjung anda akan selalu betah berlama-lama diblog anda. Kerren kan......?

Ok.... sekarang kita mulai cara membuatnya ya....:

1. Silahkan anda login ke blog anda.
2. Klik Posting, lalu pilih Entri baru.
3. Masukkan kode dibawah ini pada halaman (HTML), bukan (Compose) :

<div style="background:url(URL Image) no-repeat;">Teks anda disini</div>

4. ganti Ulr dengan Ulr image anda.
5. Ganti tulisan "Teks anda disini" dengan tulisan atau artikel anda.
6. Setelah selesai silahkan anda terbitkan, dan lihat hasilnya

Jadi deh.....
Silahkan anda mencoba,

Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :