Kode warna HTML . 2

Kode warna HTML - Untuk membuat blog atau web hal pertama yang harus kita pelajari adalah pemahaman HTML. Sebagaimana kita ketahui bahwa fungsi HTML ini sangat banyak. Salah satu diantaranya adalah membentuk suatu warna baik untuk background atau font. Untuk mempermudahkan anda mengenali kode dan nama warna maka saya akan mencantumkan kode warna HTML yang akan saya sertakan sampel warnanya pada background.
Silahkan anda simak.

#FOF8FF Aliceblue

#FAEBD7 Antiquewhite

#00FFFF Aqua

#7FFFD4 Aquamarine

#F0FFFF Azure

#F5F5DC Beige

#FFE4C4 Bisque

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

#5F9EAD Cadetblue

#7FFF00 Chartreuse

#D2691E Chocolate

#FF7F50 Coral

#64950 Cornflowerblue

#FFF8DC Cornsilk

#DC143C Crimson

#00FFFF Cyan

#00008B Darkblue

#008B8B Darkcyan

#B8860B Darkgoldenrod

#A9A9A9 Darkgray

#006400 Darkgreen

#8B008B Darkmagenta

#BDB76B Darkkhaki

#556B2F Darkolivegreen

#FF8C00 Darkorange

#9932CC Darkorchid

#8B0000 Darkred

#E9967A Darksalmon

#8FBC8B Darkseagreen

#483D8B Darkslateblue

#2F4F4F Darkslategray

#00CED1 Darkturquoise

#9400D3 Darkviolet

#FF1493 Deeppink

#00BFFF Deepskyblue

#696969 Dimgray

#1E90FF Dodgerblue

#B22222 Firebrick

#FFFAF0 Floralwhite

#228B22 Forestgreen

#FF00FF Fuchsia

#DCDCDC Gainsboro

#F8F8FF Ghostwhite

#FFD700 Gold

#DAA520 Goldenrod

#808080 Gray

#008000 Green

#ADFF2F Greenyellow

#F0FFF0 Honeydew

#FF69B4 Hotpink

#CD5C5C Indianred

#4B0082 Indigo

#FFFFF0 Ivory

#F0E68C Khaki

#E6E6FA Lavender

#FFF0F5 Lavenderblush

#7CFC00 Lawngreen

#FFFACD Lemonchiffon

#ADE8E6 Lightblue

#F08080 Lightcoral

#E0FFFF Lightcyan

#FAFAD2 Lightgoldenrodyellow

#90EE90 Lightgreen

#D3D3D3 Lightgray

#FFB6C1 Lightpink

#FFA072 Lightsalmon

#20B2AA Lightseagreen

#87CEFA Lightskyblue

#778899 Lightslategray

#B0C4DE Lightsteelblue

#FFFFE0 Lightyellow

#00FF00 Lime

#32CD32 Limegreen

#FAF0E6 Linen

#FF00FF Magenta

#800000 Maroon

#66CDAA Mediumaquamarine

#0000CD Mediumblue

#BA55D3 Mediumorchid

#9370DB Mediumpurple

#3CB371 Mediumseagreen

#7B68EE Mediumslateblue

#00FA9A Mediumspringgreen

#48D1CC Mediumturquoise

#C71585 Mediumvioletred

#191970 Midnightblue

#F5FFFA Mintcream

#FFE4E1 Mistyrose

#FFE4E1 Moccasin

#FFDEAD Navajowhite

#000080 Navy

#FDF5E6 Oldlace

#808000 Olive

#6B8E23 Olivedrab

#FFA500 Orange

#FF100%0 Orangered

#DA70D6 Orchid

#EEE8AA Palegoldenrod

#98FB98 Palgreen

#AFEEEE Paleturquoise

#DB7093 Palevioletred

#FFEFD5 Papayawhip

#FFDAB9 Peachpuff

#CD853F Peru

#FFC0CB Pink

#DDA0DD Plum

#B0E0E6 Powderblue

#800080 Purple

#FF0000 Red

#BC8F8F Rosybrown

#4169E1 Royalblue

#8B4513 Saddlebrown

#FA8072 Salmon

#F4A460 Sandybrown

#2E8B57 Seagreen

#FFF5EE Seashell

#A0522D Sienna

#C0C0C0 Silver

#87CEEB Skyblue

#708090 Slategray

#FFFAFA Snow

#00FF7F Springgreen

#4682B4 Steelblue

#D2B48C Tan

#008080 Teal

#D8BFD8 Thistle

#FF6347 Tomato

#40E0D0 Turquoise

#EE82EE Violet

#F5DEB3 Wheat

#FFFFFF White

#F5F5F5 Whitesmoke

#FFFF00 Yellow

#9ACD32 Yellowgreen

Cara Memasang Widget Feedjit Di Blog

Feedjit adalah widget yang berfungsi untuk memantau traffic suatu situs. Berbeda dengan site meter, feedjit tidak menghitung banyaknya jumlah kunjungan tapi khusus memantau traffi blog kita seperti :

1. Mengetahui dari negara mana pengunjung itu berasal

2. Mengetahui Situs apa yang membawa mereka datang

3. Mengetahui Keyword atau kata kunci apa yang membawa mereka masuk ke halaman blog anda, jika mereka menggunakan search engine

4. Mengetahui halaman populer blog Anda, yakni halaman yang paling banyak dikunjungi pengunjung

5. Mengetahui halaman masuk dari pengunjung, artinya halaman yang pertama mereka buka saat berkunjung ke blog anda.

6. Mengetahui link apa yang membawa mereka keluar.



Lalu bagaimana cara memasangnya ?

Ada dua pilihan cara apabila anda ingin memasang feedjit yaitu :

1. Register langsung dari situsnya http://feedjit.com
2. Copy paste kode berikut :

<script type="text/javascript" src="http://feedjit.com/serve/?vv=364&amp;dd=&amp;wid=4b4f08e6b09a6055&amp;pid=0&amp;proid=0&amp;bc=EAF1F0&amp;tc=0D0101&amp;brd1=33B3DB&amp;lnk=3454D3&amp;hc=90062C&amp;ww=200"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

Tinggi, lebar, warna font. warna background dan lain-lain dapat anda edit sendiri pada kode tersebut.

Cara Membuat Scroll pada Label, Arsip Blog Atau Widgets Lain

Cara Membuat Scroll pada Label, Arsip Blog Atau Widgets Lain

Cara ini saya dapat waktu saya mencari kesana kemari cara membuat Scroll untuk Label Blog saya, karena label di blog saya adalah Widgets bawaanya Blogspot jadi saya bingung cara membuat Scroll untuk Label tersebut dan akhirnya dipertemukan dengan Blognya Arie Aldyno.

Temen-teman pasti sudah pada tahu apa itu Scroll dan langsung saja ke cara membuatnya:


1. Sign in di www.blogger.com

2. Ke Design atau Tata letak terus klik Edit Html

3. Cari Kode:

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML4' locked='false' title='Blog Stats' type='HTML'>
<b:widget id='HTML11' locked='false' title='Daftar Isi:' type='HTML'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'>
<b:widget id='HTML6' locked='false' title='etc.' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

4. Pokoknya cari nama widgets yang akan anda beri scroll.
Misalnya ingin memberi scroll untuk Label, maka kodenya kira2 seperti ini

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Nah kode id yang nanti di pakai untuk Label ini adalah Label1

5. Kemudian Pastekan Kode dibawah ini di atas kode ]]></b:skin>

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Kemudian Simpan Templete.
Nah kalau berhasil nggak akan Error, dan Label akan ada Scrollnya.

Cara ini bisa juga untuk membuat scroll pada Arsip Blog atau Widgets lainnya, Seperti contoh script diatas (script point 3) Contoh kita akan memberi Scroll pada Arsip Blog, yang mengambarkan id Arsip Blog yaitu BlogArchive1, maka kita tinggal mengganti kata Label1 pada script point 5 (yang berwarna biru) dengan Kata BlogArchive1. Sedang Untuk tinggi scroll bisa diatur sesuai selera anda (ganti kode yang berwarna merah), yang kalau seperti yang diatas itu tulisan 200px.

Semoga bermanfaat

Cara membuat scroll Bar pada posting blog

Cara membuat scroll Bar, maka sekarang saya akan sharing Cara membuat scroll Bar pada posting blog.
Karena Cara membuat scroll Bar ini sangat berguna sekali disaat kita melakukan posting blog misalkan dengan kode yang super panjang, sebagai contoh,

Caranya hampir sama. ketika sobat melakukan posting ke blog sobat sisipkan kode:

<div style="border: 1px solid #eee; height: 30px; overflow: auto; padding: 10px; width: 550px;">
               LETAKAN TULISAN APAPUN
</div>
Tapi ditulis pada halaman edit HTML, bukan compose .lihat gambar:

 

Lalu lakukan pengecekan dengan masuk ke halaman compose.

Contoh Hasil :

LETAKAN TULISAN APAPUN

Cara Membuat Bander dengan posisi Horizontal

Untuk membuat blog lebih kelihatan menarik, terkadang kita perlu untuk memasang banner agar tidak terlalu banyak space kosong. Apalagi banner yang kita pasang berupa animasi sehingga lebih atraktif. Dalam memasang banner kita harus menentukan posisi yang menarik sehingga pengunjung dengan mudah melihatnya dan jika klik banner tersebut maka akan muncul informasi yang relevan atau masuk ke website Anda. Dalam memasang banner hal yang perlu diperhatikan adalah penataan yang strategis agar mudah dilihat dan disesuaikan dengan komposisi template web. Jadi tidak asal tempel karena mata pengunjung tidak suka melihat seuatu yang kurang menarik.

Pemasangan banner dapat disusun secara vertical dari atas ke bawah juga secara horizontal arah menyamping dari kiri ke kanan. Tergantung selera masing-masing pemilik blog. Tapi saya pribadi lebih suka pada susunan yang horizontal menyamping karena akan langsung terlihat semua tanpa harus memutar scroll mouse, apalagi bila ada banyak banner yang akan dipasang.

Sebenarnya sangat mudah untuk menata banner agar dapat dipasang berjajar menyamping horizontal, kita hanya memanfaatkan fungsi table. Jika anda tertarik berikut ini kode yang diperlukan :

<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse"

border width="383">
<tr>
<td>kode banner1</td>
<td>kode banner2</td>
<td>kode banner3</td>
</tr>
</table>

Tetapi perlu diingat usahakan ukuran bannernya sama, misalnya jika banner 1 berukuran 125 x 125 px maka banner ke-2 dan ke-3 juga 125 x 125 px, tujuannya agar setelah jadi akan terlihat rapih.

Baiklah saya contohkan misalnya saya akan memasang tiga buah banner iklan.

Banner 1 memiliki kode :

1. <a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a>  

Banner 2 memiliki kode :

1. <a href="http://www.neobux.com/?r=ncmajid"><img src="http://images.neobux.com/imagens/banner3.gif" width="125" height="125"></a>  

Banner 3 memiliki kode :

1. <a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a>  

Sehingga lengkapnya menjadi :

<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 383px;">

<tr><td><a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a></td>

<td><a href="http://www.neobux.com/?r=ncmajid"><img src="http://images.neobux.com/imagens/banner3.gif" width="125" height="125"></a></td>

<td><a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a></td>
</tr></table> 

Cara Membuat Tanda Tangan Di Bawah Artikel

• Sudahkah anda mempunyai tanda tangan online?

Waduh!sebelum tamat riwayat blog ini,cuman gara-gara ga posting beberapa hari,mendingan posting artikel meskipun kurang banyak membantu,dalam belajar menghias blog.

Betul sekali,tanda tangan online anda bisa lihat contoh di bawah ini:

---

Ingin tahu cara membuatnya?

Ya,ada cara praktis untuk membuat tanda tangan seperti diatas,bukan dari Paint da juga bukan dari Photosop.Lalu?

• Membuat tanda tangan online pada blog

Untuk membuat bentuk tanda tangan diatas secara praktis,kita memakai jasa .www.mylivesignature.com
Tampilan halaman dari www.signature.com seperti ini :

---

• Pertama,masuk situs www.mylivesignature.com
• Pilih tulisan "Click Here To Start"
• Lalu akan tampil sebuah halaman dengan 3 pilihan pilih "Using the signature creation wizard".
• Masukkan Nama,nama ini untuk hasil gambar tanda tangan anda,kemudian "Next Step"
• Ikuti petunjuk,dan sesuaikan sesuai selera anda
• Jika anda sudah merasa cocok,klik tulisan "Want to use this signature?"
• Akan ada 2 pilihan "Generate HTML code" dan "Generate BB code "
• Pilih "Generate HTML code"
• Selanjutnya ada 2 pilihan lagi,misal pilihan 1 pilih "Generate a code from my handwritten signature"
• Copy kode tersebut dan letakkan pada Halaman HTML anda.
• Selesai

• Meletakkan Kode pada Akhir Artikel/Postingan

Untuk meletakkan kode tanda tangan Online dari www.mylivesignature.com ini,ikuti langkah berikut :

---

• Pilih Dashboard
• Lalu pilih Pengaturan
• Pilih Format
• Tuju Tulisan Templates Posting
• Letakkan Kode dari www.mylivesignature.com tadi pada kotak tersebut.
• Simpan Perubahan.
• Selesai

---

• Melihat Tampilan Tanda Tangan Online pada Artikel

Saat hendak posting artikel baru,anda akan melihat tanda tangan/Signature tersebut,tinggal tulis artikel anda diatas kode tersebut.

Sederhana khan?

Jika anda sudah selesai mengikuti langkah-langkah seperti diatas,memang pada artikel sebelumnya (sebelum anda membuat tanda tangan ini),tanda tangan tersebut belum tampil,jika anda akan menampilkannya,tinggal Edit artikel anda,dan letakkan kode tanda tangan tersebut dibawah artikel anda.

Cara Daftar, Registrasi dan pasang alexsa traffic rink butoon

Bila sampeyan datang di Alexa Rank pasti akan tahu secara lengkap peringkat situs-situs terkemuka juga  blog dengan peringkat terbaik hingga blog yang berperingkat dengan angka jutaan. Alexa rank merupakan situs terkemuka yang mampu memberikan data dengan tingkat akurasi cukup terpercaya sehingga banyak digunakan sebagai standart bagi blogger sedunia. Banyak manfaat yang dapat kita petik dengan mendaftarkan blog melalui registrasi di sini. Setidak-tidaknya melalui alexa kita dapat selalu melakukan monitoring perkembangan blog yang kita kelola hari demi hari. Melalui inilah diharapkan kita mampu melakukan evalusai terhadap bebrapa hal yang berkaitan dengan upaya peningkatan rating, peringkat atau popularitas. Sebuah widget akan kita peroleh secara gratis untuk dipasang di blog yang setiap saatnya akan memperlihatkan kepada kita sejauh mana perkembangan yang kita capai melalui data peringkat yang tertampilkan.

Langkah Pendaftaran

Panduan dan Tutorial BloGGeR ini sekaligus dilengkapi dengan cara memasang button Alexa serta cara menambahkan kode html untuk menata dan memperindah penampilan Alexa Traffic Rank Button yang akan diperoleh setelah proses registrasi.

1. Alexa : Silahkan langsung KLIK link berikut untuk datang di Alexa
   http://www.alexa.com/
2. Register : KLIK link “Register” yang terletak di sebelah kanan atas.
3. Register for an Account-1 :KLIK link “Register” (kanan-atas).
   Email : Tulis alamat email.
   Nickname : Tulis nama panggilan (User Name).
   Full Name : Tulis nama lengkap.
   Country : KLIK untuk memilih tempat domisili (Indonesia).
   Register : KLIK “Register“.
   
4. Register for an Account-2 (Thank You!) :Lanjutkan dengan KLIK “For Site Owners” yang terletak di bagian atas kanan-tengah .
5. Site Owner Tools - Widgets : Lanjutkan dengan KLIK “Get Traffic Widgets” (terletak di tengah).
6. Alexa Traffic Rank Button-1 :Tulis alamat blog (URL) dan lanjutkan KLIK “Build Widget” .
   
7. Alexa Traffic Rank Button-2 :Pilih di antara 3 (tiga) button yang disediakan Small, Regular, Banner). Lanjutkan dengan Copy kode “Alexa Traffic Rank Button” Simpan Kode tersebut.
8.  

Cara Memasang Alexa Traffict Rank Button Widget

1. Login to BloGGeR (login ke BloGGeR) : Gunakan User Name/Email Address dan Password (Sandi).
2. Dasboard (Dasbor) : Ada banyak link/menu di halaman Dasboard ini, pilihlah dan KLIK link Tata Letak/Rancangan (Layout/Design).
3. Tata Letak/Rancangan (Layout/Design) : Saat Memasuki Tata Letak, sampeyan akan langsung dibawa ke Page Element/Elemen Laman. Dari sinilah kode Alexa Traffict Rank Button Widget akan di simpan.
4. Add Gadget (Tambah Gadget) : KLIK “Tambah Gadget“.
5. HTML/Javascript : KLIK “HTML/Javascript“.
6. Paste Kode : Letakkan kode Alexa Traffict Rank Button Widget dalam box yang tersedia.
7. SAVE (Simpan) : KLIK “Simpan“. Lihat widget Alexa yang telah terpasang dengan membuka blog.

Contoh bentuk Kode Alexa Traffict Rank Button

<a class="AlexaSiteStatsWidget"  href="http://www.alexa.com/data/details/main?url=http://gubhugreyot.blogdetik.com">
<img  src="http://xsltcache.alexa.com/site_stats/gif/s/a/aHR0cDovL2d1Ymh1Z3JleW90LmJsb2dkZXRpay5jb20=/s.gif"  border="0" alt="Alexa Certified Traffic Ranking for  http://gubhugreyot.blogdetik.com" width="120"  height="95" />
</a>

Sampeyan bisa memasangnya dengan beberapa kode tambahan sehingga terlihat lebih indah seperti kode berikut :

<style type="text/css">
.bgsGR_Alexa{margin:15px 5px;padding:2px;border:2px solid #b04802;background:#333;
opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); width:124px;}
.bgsGR_Alexa:hover{border:2px solid #0233d2;background:#4f70dc; opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);}
.bgsGR_AlexaR{border:2px solid #555;}
.bgsGR_AlexaR:hover{border:2px solid #87a2fb;}
</style>
<div align="center">
<div class="bgsGR_Alexa">
<div class="bgsGR_AlexaR">
<a class="AlexaSiteStatsWidget"  href="http://www.alexa.com/data/details/main?url=http://gubhugreyot.blogdetik.com">
<img  src="http://xsltcache.alexa.com/site_stats/gif/s/a/aHR0cDovL2d1Ymh1Z3JleW90LmJsb2dkZXRpay5jb20=/s.gif"  border="0" alt="Alexa Certified Traffic Ranking for  http://gubhugreyot.blogdetik.com" width="120"  height="95" />
</a>
</div>
</div>
</div>

Atau dapat juga menggunakan tambahan kode html lain yang berupa table :

<table align="center" width="120" border="2" bgcolor="#333333" style="color:#66CCFF; border-color: #CC9966">
<tr>
<td align="center">MyAlexa</td>
</tr>
<tr>
<td align="center"><a class="AlexaSiteStatsWidget" href="http://www.alexa.com/data/details/main?url=http://gubhugreyot.blogdetik.com">
<img src="http://xsltcache.alexa.com/site_stats/gif/s/a/aHR0cDovL2d1Ymh1Z3JleW90LmJsb2dkZXRpay5jb20=/s.gif" border="0" alt="Alexa Certified Traffic Ranking for http://gubhugreyot.blogdetik.com" width="120" height="95" />
</a></td>
</tr>
</table>