Sahabat Blogger

Membuat Meta BlogCatalog

2010-02-12T12:41:00.000-08:00

Sekali lagi sebagus apapun blog,jika tak terindex mesin pencari sama saja bohong khan? itu sebabnya kali ini Pelajaran Blog membahas tentang membuat meta blogcatalog.
Awalnya memang tidak bisa di pastikan bahwa meta ini bisa di jadikan referensi agar cepat terindex mesin pencari,Google pada khususnya.Tapi setelah beberapa hari,salah satu teman terbaik saya,yang menyebut dirinya "Cah Donorejo",seperti nama yang dia pakai saat berkomentar pada blog ini,memberi tahu saya bahwa meta yang diberikan BC,sangat efektif dan memang terbukti cepat terindex Google.

Seberapa akuratkah meta BlogCatalog?
Jika kurang yakin,ketikkan kata kunci "Supaya Cepat Terindex Google" pada www.google.com,inget ya bukan www.google.co.id(jika terset google.co.id,pilih tulisan "Google.com in English") dan ketikkan kata kunci di atas.

Supaya cepat terindex google" di Google ,http://cepat-terindex-google.blogspot.com/,klik disini untuk melihat. menempati posisi pertama.

Klik link tersebut untuk menuju halamannya dan klik kanan lalu "View Source",disitu dia meletakkan beberapa meta,dan meta blogcatalog salah satunya.

**Tapi,jika sudah berubah wajar dunk,khan algoritma google juga selalu berubah-ubah.
Ini membuktikan bahwa setelah dia meletakkan meta BC,bukan sesuatu yang sulit untuk cepat terindex mesin pencari.

Bagaimana saya bisa mendapatkan Meta BlogCatalog?Contoh dari meta ini(saya ambil dari meta BC dari blog ini) seperti di bawah ini:

<meta content='9BC9206xxx' name='blogcatalog'/>

Untuk mendapatkannya cukup mudah,anda hanya kunjungi http://www.blogcatalog.com/,setelah itu Sign Up,di sebelah kanan bagian atas(jika belum berubah).
Setelah itu,tulis dan isikan form seperti yang diinstruksikan,untuk username,biasanya BlogCatalog tidak mengizinkan 2 kata nama yang dipisahkan dengan spasi.

Setelah anda mengisi semua form dan data dari blog anda,lalu klik tombol "Submit Blog".
Tunggu beberapa saat dan akan muncul halaman link setelah anda memferivikasi email dari BC tentunya.
Copy salah satu kode link BlogCatalog kedalam HTML anda.

Lalu dimana Meta nya?

Meta ini oleh BC,diletakkan paling bawah,copy kode tersebut dan letakkan pada halaman HTML anda di bawah kode <head>
Simpan.Selesai.

Sumber : pelajaran-blog.blogspot.com

Membuat Meta y_key pada Yahoo Add My Site

2010-02-12T12:18:00.000-08:00

Apakah anda sudah mempunyai meta y_key?

Meskipun saat ini meta sudah tidak begitu vital diterapkan sebagai langkah untuk Search Engine Optimation(SEO),tapi masih banyak blogger-blogger papan atas menggunakan langkah ini.

Selain meta diskripsi dan keyword yang sering diterapkan (meta ini di letakkan di antara <head> dan </head>)seperti:

Contoh meta untuk diskripsi di pelajaran-blog.blogspot.com:

<meta content='Pelajaran tentang cara membuat blog di blogspot,juga belajar tentang menghias blog,membuat sambil blogging belajar menghias blogger khusus untuk pemula' name='description'/>

**Untuk menjelaskan diskripsi dari blog tersebut

Contoh meta untuk keyword di pelajaran-blog.blogspot.com:

<meta content='pelajaran blog,cara membuat blog,belajar menghias blog,untuk pemula,blogspot,blogger,blogging' name='keywords'/>

**Untuk menjeaskan kata kunci untuk menuju blog tersebut

Nah!yang akan kita bahas kali ini,adalah meta y_key.

Bagaimana saya bisa mendapatkan meta y_key?Meta y_key adalah meta yang dimiliki oleh Yahoo,maka kita harus mempunyai account di Yahoo,sebelum mensubmit blog kita ke directory mereka.

Contoh bentuk meta yang di berikan,nantinya akan seperti ini :

<meta content='32bf6291ec6ec61f' name='y_key'/>

Langkah pertama,masuk Yahoo dengan ID Yahoo anda yang masih valid tentunya,untuk lebih cepat anda bisa kunjungi di https://siteexplorer.search.yahoo.com/.

Selanjutnya,masukkan alamat URL blog anda,lalu klik Add My Site.

Setelah itu,anda di hadapkan halaman bahwa anda telah mensubmit URL blog anda,pada tabel keterangan nya disitu ada kolom Sites,Feeds,Action dan Status pada kolom terakhir.

Nah! pada kolom Status,hanya diperlihatkan sebuah object berbentuk bulat,klik tanda bulat tersebut untuk melihat status.
Selanjutnya anda akan di hadapkan 2 pilihan.

By uploading a verification file to my site.
By adding a META tag to my home page

Pilih tanda segitiga pada tulisan "By adding a META tag to my home page" dan copy kode y_key nya,yang mana ya?
Yang mirip seperti ini:

<META name="y_key" content="xxxxxxxxxxxxxxxx">

Kode diatas hanya contoh kodenya,tulisan "x" diatas adalah nomor key blog anda.
Copy kode tersebut dan letakkan di bawah kode <head> pada halaman HTML anda lalu Simpan Template anda.
Setelah anda berhasil meletakkan kodenya,kembali ke halaman account Yahoo dimana anda baru saja mengcopy kode tadi,setelah itu klik Tombol "Ready to Authenticate",dan tunggu sampai muncul halaman yang memberi tahu bahwa y_key anda telah berhasil untuk difungsikan.

Contoh tulisan jika sudah berhasil kurang lebih seperti ini :

Your site has been authenticated

If you have added the META tag <META name="y_key" content="<meta name="y_key" content="xxxxxxxxxxxxxxxx" >, please keep the tag in your site's home page. We will revalidate your site ownership by checking this META tag regularly.

If you have uploaded the verification file, please keep the file y_key_xxxxxxxxxxxxxxxx.html on your site root http://alamat-blog-anda.com and do not change the content (xxxxxxxxxxxxxxx). We will revalidate your site ownership by checking this file regularly.

Saat saya meletakkan y_key, koq Error ya?Error,mungkin hanya disebabkan kode yang tidak ditutup dengan benar.Memang dari Yahoo sendiri,memberikan kode yang seperti ini:

<META name="y_key" content="xxxxxxxxxxxxxxxx">

Anda tinggal disuruh menyisipkan tanda "/" pada akhir kode,yang nantinya menjadi seperti ini:

<META name="y_key" content="xxxxxxxxxxxxxxxx"/>

Dalam waktu kurang lebih 24 jam,Bibi Yahoo akan segera mengindex anda. :)

Sumber : pelajaran-blog.blogspot.com

Tentang SEO

2010-02-12T11:56:00.000-08:00

SEO (Search Engine Optimization)

Merupakan langkah/kiat menuju pengoptimalan dalam hal ini masalah Search Engine. Sebagus apapun sebuah situs,jika tak dapat direkam/ditangkap/di indexoleh mesin pencari,sama halnya dengan sia-sia.Dengan terindex mesin pencari kemungkinan situs kita akan di lihat oleh seluruh orang di dunia ini akan semakin besar.Banyak di jumpai blog yang bagus, namun kurang optimalnya kiat dalam peng-index-an.
Dibawah ini salah satu langkah peletakkan meta tags agar terindex mesin pencari :

Kode ini cukup anda letakkan di bawah kode <head>.

<meta content='nama anda' name='Author'/>
<meta content='Tulis Diskripsi Blog' name='description'/>
<meta content='Tulis Kata Kunci Blog' name='keywords'/>
<meta content='follow, all' name='robots'/>

Atau jika anda ingin menambah meta yang lain,coba kunjungi disini
Anda juga bisa menggunakan langkah-langkah SEO ala pelajaran-blog.blogspot.com.
Adapun langkah-langkahnya,anda simak di bawah ini :

Gunakan nama blog yang tidak terlalu panjang.
Gunakan kode <h1> pada awal artikel.
Jika anda meletakkan gambar jangan lupa tuliskan kode alt="nama blog
anda" .(contoh : <img src="http://bla-bla-bla.jpg"alt="nama
blog anda">
Tambahkan URL anda ke Altavista,Alltheweb,MSN,Yahoo dan submitter yang lain.
Perbanyak teman blog untuk memasang Link blog kita.
Berkomentarlah di kotak komentar sebuah blog yang sudah cukup terkenal.
Buatlah Blogroll blog-blog terkemuka.
Jika perlu ngemis blogger lain untuk me link kan link kita.
Chatting,lampirkan alamat blog kamu,karena semakin jauh jangkauan IP
seorang pengunjung,akan meningkatkan PageRank kita.
Buatlah SiteMap
Update selalu.
Berikan tanda Bold / Huruf tebal pada setiap kata yang berkaitan dengan
nama blog anda.

Semoga,langkah-langkah diatas sedikit bisa membantu anda agar ter index oleh mesin pencari.

Sumber : pelajaran-blog.blogspot.com

Mendaftarkan Blog di Google

2010-02-12T11:45:00.000-08:00

Mendaftarkan Blog di Google
Langkah ini merupakan keharusan jika kita ingin publikasi. Search engine sendiri banyak sekali, namun berdasarkan pengalaman dengan joomla cukuplah dengan mendaftarkan di google.com, yahoo.com dan msn.com (karena ketiga search engine inilah yang sampai saat ini masih mendominasi di dunia internet).

Pertama kali pertama kita coba mendaftarkan blog kita ke Google

Siapkan sebuah email gmail.com, silahkan mendaftar jika belum mendaftar (gratis) dan saya rasa semua sudah bisa kan.

Tambahan webmaster tool dari google. Jika anda sudah membuat, silahkan masuk dan akan tertampil gambar seperti berikut.

Silahkan mengetikkan alamat URL blog dan klik Add.Misalnya: http://blackinews.blogspot.com/

Kalau langkah tersebut sudah anda lewati, maka akan muncul gambar berikut

(Perhatikan blackinews.blogspot.com sudah masuk)

Selanjutnya akan saya terangkan cara verifikasi blogspot anda sebagai berikut :

Melanjutkan dari tutorial sebelumnya add black in news with google.

Langkah kedua setelah mendaftarkan blog kita ke google, maka selanjutnya kita diminta oleh google untuk memverifikasi blog kita, atau biasa diistilahkan dengan verified.

Proses verifikasi sendiri ada dua: (dipilih salah satu)

Menambahkan meta tag
Upload HTML file

Namun pada blogspot, paling mudah adalah dengan memilih metode pertama.

Nah cara menambahkan meta tag adalah:

Pilih “add a meta tag” seperti gambar berikut.

Lalu akan muncul kode-kode yang di dalam sebuah kotak.

Biasanya diawali meta name

Nah, jangan bingung itu kode yang Anda butuhkan yang nantinya akan ditambahkan di template blog yang kita pakai.

Sekarang masuk ke blog rekan-rekan blacky account blogspot masing-masing
Pilih pengaturan >> edit html. Silahkan lihat gambar

Sekarang rekan-rekan black idea harus mencari tag <head>

Lalu copy meta name tadi yang kita dapat dari google dan paste di bawah <head>, atau sebelum kode </head>

Jangan lupa untuk menyimpan setiap editing yang dilakukan dengan meng-klik simpan template yang ada di pojok bagian bawah.

Langkah terakhir dalam proses verifikasi adalah di account webmaster google tool.

Sekarang bubuhkan centang pada seperti terlihat pada gambar dan klik verify.

Dan kalau sukses maka akan muncul seperti gambar seperti berikut.

Sumber : blackinews.blogspot.com

SEO Properties

2010-02-11T03:34:00.000-08:00

Meta Title, Description dan Keyword di Blogger

2010-02-10T19:23:00.000-08:00

Tulisan ini berjudul selengkapnya Mengungkap Semua Rahasia Tersembunyi Pada Meta Title, Description dan Keyword di Blogger yang saya ambil dari blognya mas O-Om. Bigi sobat yang mau mempelajari secara lengkap silahkan kunjungi dengan mengklik link judul diatas.

OPTIMASI SEO PADA META DESCRIPTION DAN KEYWORD - CARA I

Cara pertama dibawah ini bisa kita gunakan untuk melakukan optimasi pada Meta Description dan Meta keyword, kita dapat melihat perbedaan pada setiap hasil temuan pada mesin pencari dimana setiap halaman memiliki tambahan meta tertentu sesuai dengan judul postingan (lihat rumus).

Silahkan coba ganti meta description dan keyword anda menggunakan kode dibawah ini, jangan lupa sesuaikan deskripsi dan kata kunci blog rekan masing dengan mengganti karakter ditandai warna merah dibawah.

<b:if cond='data:blog.pageType != "item"'>

<meta content='Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap' name='description'/>

<meta content='Dowload soal CPNS dari UGM, Prediksi Soal CPNS, Jawaban Soal CPNS, Pendaftaran CPNS, tanya jawab Soal CPNS' name='keywords'/>
<b:else/>

<meta expr:content='data:blog.pageName + "Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap" name='description'/> <meta expr:content='data:blog.pageName + " Dowload soal CPNS dari UGM, Prediksi Soal CPNS, Jawaban Soal CPNS, Pendaftaran CPNS, tanya jawab Soal CPNS" name='keywords'/>

</b:if>

Contoh Rumus hasil pencarian pada halaman index.

<BLOG TITLE>
<Meta Description>
<URL>

Prediksi soal CPNS terlengkap
Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap.
www.cobacobaaja.com - Tembolok - Mirip

Contoh Rumus hasil pencarian pada halaman Postingan.

<POST TITLE>
<Post Title> <Meta Description>
<URL>
Rahasia kunci jawaban soal CPNS tahun 2009

Rahasia kunci jawaban soal CPNS tahun 2009 - Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap.
www.cobacobaaja.com/.../kisi-kisi/soalcpns.hml -Tembolok - Mirip

OPTIMASI SEO PADA META DESCRIPTION DAN KEYWORD - CARA II

Cara yang kedua hampir sama dengan cara yang pertama, yang berbeda hanya pada deskripsi pada halaman postingan (lihat rumus).

Silahkan coba ganti meta description dan keyword anda menggunakan kode dibawah ini, jangan lupa sesuaikan deskripsi dan kata kunci blog rekan masing dengan mengganti karakter ditandai warna merah dibawah.

<b:if cond='data:blog.pageType != "item "'>

<meta content='Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap' name='description'/>

<meta content='Dowload soal CPNS dari UGM, Prediksi Soal CPNS, Jawaban Soal CPNS, Pendaftaran CPNS, tanya jawab Soal CPNS' name='keywords'/>

<b:else/>

<meta expr:content='data:blog.pageTitle + " Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap" name='description'/>
<meta expr:content='data:blog.pageTitle + "
Dowload soal CPNS dari UGM, Prediksi Soal CPNS, Jawaban Soal CPNS, Pendaftaran CPNS, tanya jawab Soal CPNS" name='keywords'/>

</b:if>

Contoh Rumus hasil pencarian pada halaman index.
<BLOG TITLE>
<Meta Description>
<URL>

Prediksi soal CPNS dari UGM

Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap.
www.cobacobaaja.com - Tembolok - Mirip

Contoh Rumus hasil pencarian pada halaman Postingan
<POST TITLE>
<Blog Title> <Post Title> <Meta Description>

<URL>

Dowload gratis rahasia kunci jawaban soal CPNS tahun 2009
Prediksi soal CPNS terlengkap: Download gratis rahasia kunci jawaban soal CPNS tahun 2009 - Blog ini menyediakan kisi-kisi soal CPNS dan prediksi soal CPNS terlengkap.
www.cobacobaaja.com/.../kisi-kisi/soalcpns.hml -Tembolok - Mirip

Cara pertama dan kedua diatas terus terang sama bagusnya, jadi silahkan pilih salah satu saja. OK! Semua teknik rahasia SEO pada sebagian Meta Tag sudah saya ungkap semuanya, jadi silahkan dipelajari dengan seksama dan semoga berhasil.

Sumber : Diambil dari Blog sobat O-Om.com

Memasang Symbol Emotion pada postingan

2010-02-10T17:37:00.000-08:00

Berikut ini cara Memasang Symbol Emotion pada postingan

1. Pertama-tama yang harus tersedia adalah Mozilla Firefox yang berversi 1.5 atau diatasnya. Kalau belum silahkan download Firefox Google Toolbar

2. Setelah download lalu Install Greasemonkey (aku pun xtau fungsi Grease Monkey untuk apa sebenarnya.)

3. Setelah itu Install Script ini.

4. Selanjutnya cari kode ini ]]></b:skin> dan paste kode yang berwarna merah seperti di bawah ini.

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

]]></b:skin>

5. Setelah selesai, boleh lihat hasilnya seperti di bawah ini.

Sumber : dari teranung.blogspot.com

Kode Warna HTML 2

2010-02-10T16:15:00.000-08:00

Disini saya sediakan informasi kode warna. Sebelumnya ada juga saya posting kode yang memakai kode RGB, dapat anda lihat disini

COLOR NAME	CODE	COLOR
Black	#000000
Grey0	#150517
Grey18	#250517
Grey21	#2B1B17
Grey23	#302217
Grey24	#302226
Grey25	#342826
Grey26	#34282C
Grey27	#382D2C
Grey28	#3b3131
Grey29	#3E3535
Grey30	#413839
Grey31	#41383C
Grey32	#463E3F
Grey34	#4A4344
Grey35	#4C4646
Grey36	#4E4848
Grey37	#504A4B
Grey38	#544E4F
Grey39	#565051
Grey40	#595454
Grey41	#5C5858
Grey42	#5F5A59
Grey43	#625D5D
Grey44	#646060
Grey45	#666362
Grey46	#696565
Grey47	#6D6968
Grey48	#6E6A6B
Grey49	#726E6D
Grey50	#747170
Grey	#736F6E
Slate Grey4	#616D7E
Slate Grey	#657383
Light Steel Blue4	#646D7E
Light Slate Grey	#6D7B8D
Cadet Blue4	#4C787E
Dark Slate Grey4	#4C7D7E
Thistle4	#806D7E
Medium Slate Blue	#5E5A80
Medium Purple4	#4E387E
Midnight Blue	#151B54
Dark Slate Blue	#2B3856
Dark Slate Grey	#25383C
Dim Grey	#463E41
Cornflower Blue	#151B8D
Royal Blue4	#15317E
Slate Blue4	#342D7E
Royal Blue	#2B60DE
Royal Blue1	#306EFF
Royal Blue2	#2B65EC
Royal Blue3	#2554C7
Deep Sky Blue	#3BB9FF
Deep Sky Blue2	#38ACEC
Slate Blue	#357EC7
Deep Sky Blue3	#3090C7
Deep Sky Blue4	#25587E
Dodger Blue	#1589FF
Dodger Blue2	#157DEC
Dodger Blue3	#1569C7
Dodger Blue4	#153E7E
Steel Blue4	#2B547E
Steel Blue	#4863A0
Slate Blue2	#6960EC
Violet	#8D38C9
Medium Purple3	#7A5DC7
Medium Purple	#8467D7
Medium Purple2	#9172EC
Medium Purple1	#9E7BFF
Light Steel Blue	#728FCE
Steel Blue3	#488AC7
Steel Blue2	#56A5EC
Steel Blue1	#5CB3FF
Sky Blue3	#659EC7
Sky Blue4	#41627E
Slate Blue	#737CA1
Slate Grey3	#98AFC7
Violet Red	#F6358A
Violet Red2	#E4317F
Deep Pink	#F52887
Deep Pink2	#E4287C
Deep Pink3	#C12267
Deep Pink4	#7D053F
Medium Violet Red	#CA226B
Violet Red3	#C12869
Firebrick	#800517
Violet Red4	#7D0541
Maroon4	#7D0552
Maroon	#810541
Maroon3	#C12283
Maroon2	#E3319D
Maroon1	#F535AA
Magenta	#FF00FF
Magenta1	#F433FF
Magenta2	#E238EC
Magenta3	#C031C7
Medium Orchid	#B048B5
Medium Orchid1	#D462FF
Medium Orchid2	#C45AEC
Medium Orchid3	#A74AC7
Medium Orchid4	#6A287E
Purple	#8E35EF
Purple1	#893BFF
Purple2	#7F38EC
Purple3	#6C2DC7
Purple4	#461B7E
Dark Orchid4	#571B7E
Dark Orchid	#7D1B7E
Dark Violet	#842DCE
Dark Orchid3	#8B31C7
Dark Orchid2	#A23BEC
Dark Orchid1	#B041FF
Plum4	#7E587E
Pale Violet Red	#D16587
Pale Violet Red1	#F778A1
Pale Violet Red2	#E56E94
Pale Violet Red3	#C25A7C
Pale Violet Red4	#7E354D
Plum	#B93B8F
Plum1	#F9B7FF
Plum2	#E6A9EC
Plum3	#C38EC7
Thistle	#D2B9D3
Thistle3	#C6AEC7
Lavendar Blush2	#EBDDE2
Lavendar Blush3	#C8BBBE
Thistle2	#E9CFEC
Thistle1	#FCDFFF
Lavendar	#E3E4FA
Lavendar Blush	#FDEEF4
Light Steel Blue1	#C6DEFF
Light Blue	#ADDFFF
Light Blue1	#BDEDFF
Light Cyan	#E0FFFF
Slate Grey1	#C2DFFF
Slate Grey2	#B4CFEC
Light Steel Blue2	#B7CEEC
Turquoise1	#52F3FF
Cyan	#00FFFF
Cyan1	#57FEFF
Cyan2	#50EBEC
Turquoise2	#4EE2EC
Medium Turquoise	#48CCCD
Turquoise	#43C6DB
Dark Slate Grey1	#9AFEFF
Dark Slate Grey2	#8EEBEC
Dark Slate Grey3	#78C7C7
Cyan3	#46C7C7
Turquoise3	#43BFC7
Cadet Blue3	#77BFC7
Pale Turquoise3	#92C7C7
Light Blue2	#AFDCEC
Dark Turquoise	#3B9C9C
Cyan4	#307D7E
Light Sea Green	#3EA99F
Light Sky Blue	#82CAFA
Light Sky Blue2	#A0CFEC
Light Sky Blue3	#87AFC7
Sky Blue	#82CAFF
Sky Blue2	#B0E2FF
Light Sky Blue4	#566D7E
Sky Blue	#6698FF
Light Slate Blue	#736AFF
Light Cyan2	#CFECEC
Light Cyan3	#AFC7C7
Light Cyan4	#717D7D
Light Blue3	#95B9C7
Light Blue4	#5E767E
Pale Turquoise4	#5E7D7E
Dark Sea Green4	#617C58
Medium Aquamarine	#348781
Medium Sea Green	#306754
Sea Green	#4E8975
Dark Green	#254117
Sea Green4	#387C44
Forest Green	#4E9258
Medium Forest Green	#347235
Spring Green4	#347C2C
Dark Olive Green4	#667C26
Chartreuse4	#437C17
Green4	#347C17
Medium Spring Green	#348017
Spring Green	#4AA02C
Lime Green	#41A317
Spring Green	#4AA02C
Dark Sea Green	#8BB381
Dark Sea Green3	#99C68E
Green3	#4CC417
Chartreuse3	#6CC417
Yellow Green	#52D017
Spring Green3	#4CC552
Sea Green3	#54C571
Spring Green2	#57E964
Spring Green1	#5EFB6E
Sea Green2	#64E986
Sea Green1	#6AFB92
Dark Sea Green2	#B5EAAA
Dark Sea Green1	#C3FDB8
Green	#00FF00
Lawn Green	#87F717
Green1	#5FFB17
Green2	#59E817
Chartreuse2	#7FE817
Chartreuse	#8AFB17
Green Yellow	#B1FB17
Dark Olive Green1	#CCFB5D
Dark Olive Green2	#BCE954
Dark Olive Green3	#A0C544
Yellow	#FFFF00
Yellow1	#FFFC17
Khaki1	#FFF380
Khaki2	#EDE275
Goldenrod	#EDDA74
Gold2	#EAC117
Gold1	#FDD017
Goldenrod1	#FBB917
Goldenrod2	#E9AB17
Gold	#D4A017
Gold3	#C7A317
Goldenrod3	#C68E17
Dark Goldenrod	#AF7817
Khaki	#ADA96E
Khaki3	#C9BE62
Khaki4	#827839
Dark Goldenrod1	#FBB117
Dark Goldenrod2	#E8A317
Dark Goldenrod3	#C58917
Sienna1	#F87431
Sienna2	#E66C2C
Dark Orange	#F88017
Dark Orange1	#F87217
Dark Orange2	#E56717
Dark Orange3	#C35617
Sienna3	#C35817
Sienna	#8A4117
Sienna4	#7E3517
Indian Red4	#7E2217
Dark Orange3	#7E3117
Salmon4	#7E3817
Dark Goldenrod4	#7F5217
Gold4	#806517
Goldenrod4	#805817
Light Salmon4	#7F462C
Chocolate	#C85A17
Coral3	#C34A2C
Coral2	#E55B3C
Coral	#F76541
Dark Salmon	#E18B6B
Salmon1	#F88158
Salmon2	#E67451
Salmon3	#C36241
Light Salmon3	#C47451
Light Salmon2	#E78A61
Light Salmon	#F9966B
Sandy Brown	#EE9A4D
Hot Pink	#F660AB
Hot Pink1	#F665AB
Hot Pink2	#E45E9D
Hot Pink3	#C25283
Hot Pink4	#7D2252
Light Coral	#E77471
Indian Red1	#F75D59
Indian Red2	#E55451
Indian Red3	#C24641
Red	#FF0000
Red1	#F62217
Red2	#E41B17
Firebrick1	#F62817
Firebrick2	#E42217
Firebrick3	#C11B17
Pink	#FAAFBE
Rosy Brown1	#FBBBB9
Rosy Brown2	#E8ADAA
Pink2	#E7A1B0
Light Pink	#FAAFBA
Light Pink1	#F9A7B0
Light Pink2	#E799A3
Pink3	#C48793
Rosy Brown3	#C5908E
Rosy Brown	#B38481
Light Pink3	#C48189
Rosy Brown4	#7F5A58
Light Pink4	#7F4E52
Pink4	#7F525D
Lavendar Blush4	#817679
Light Goldenrod4	#817339
Lemon Chiffon4	#827B60
Lemon Chiffon3	#C9C299
Light Goldenrod3	#C8B560
Light Golden2	#ECD672
Light Goldenrod	#ECD872
Light Goldenrod1	#FFE87C
Lemon Chiffon2	#ECE5B6
Lemon Chiffon	#FFF8C6
Light Goldenrod Yellow	#FAF8CC

Sumber : diambil dari teranung.blogspot.com

Memasang Google Page Rank Checker

2010-02-10T15:27:00.000-08:00

Semua sudah tau tentang Google Page Rank? Ranking yang diberi pada blog anda berdasarkan dari Bot/Crawler/Spider Google. Setiap hari Bot/Crawler/Spider Google ini bergerak dari satu site ke satu site yang lain mengambil informasi untuk dimasukkan dalam index list Google. salah satu kriteria dalam menentukan page ranking ini adalah sebagai contoh bile Site A buat link ke Site B. Itu adalah satu vote dari Site A ke Site B.

Tetapi tak hanya satu kriteria itu saja. terdapat lebih dari 100 kriteria dalam menentukan ranking sebuah website/blog. Tujuan utama pihak Google buat semacam ini adalah untuk menentukan site yang paling sesuai dan paling bagus untuk dijadikan search result bila seseorang user masukkan keyword untuk search di google.

Sekarang, anda boleh memasukkan Google Page Rank Checker dibawah ini ke web/blog anda. copy kode dibawah ini dan paste web page sesuai kinginan anda. Pilih salah satunya dibawah ini..kemudian letakkan di blog anda dengan cara login dulu, pilih Tata Letak, Tambah Gadget, HTML/JavaScrip

	<a href="http://www.prchecker.info/" target="_blank"><img src="http://www.prchecker.info/PR1_img.gif" alt="Page Rank Checker" border="0"></a>
	<a href="http://www.prchecker.info/" target="_blank"><img src="http://www.prchecker.info/PR2_img.gif" alt="Page Rank Checker" border="0"></a>

IMPORTANT: Please DO NOT modify the code, otherwise we can not guarantee the correct work of our free page rank checking tool that displays the page rank value!

Sumber : teranung.blogspot.com & prchecker.info

Memasang Read More

2010-02-10T14:55:00.000-08:00

Cara pasang semi otomatis

Dulu memasang Read More pada tempelate lama, sayangnya template klasik tidak lagi digunakan sekarang ini. Saat ini kita lebih senang menggunakan versi terkini
Versi ini lebih menarik dan kerana anda tidak lagi perlu membaca halaman secara keseluruhan. Ini juga digunakan untuk memudahkan pemahaman anda.
1. Dalam halaman TEMPLATE tekan tulisan Edit Html. Jangan lupa Tick Expand Widget Template.

Letakkan script di bawah ini sebelum </head>

<script type='text/javascript' src=
'http://marzukijalil.googlepages.com/hackosphere.js' />

2. Selanjutnya, cari kode biru ini <b:includable id='post' var='post'> dan tambah kod yang berwarna merah seperti yang ditunjukkan di bawah.

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

3. Terakhir sekali setelah kode yang berwarna merah di tambah, save templates. Setelah itu pegi ke tab Setting -> Formatting. Dan di bawah sekali letakkan kode di bawah ini:

Tulisan anda yang pertama disini
<span id="fullpost">
dan tulisan selanjutnya disini
</span>

Selain cara diatas ada lagi yang lebih baru dari O-Om, lihat disini.

Sumber : teranung.blogspot.com

Memasang Hide Show Navigation

2010-02-09T22:52:00.000-08:00

Hide/Show Navigation Elemen digunakan untuk menggantikan drop-down menu ataupun archieve drop-down menu dan blogroll agar ia tampil lebih pendek dan ringkas serta memudahkan pengunjung menjelajahi blog kita.

1. Login ke blog, pilih Tata Letak, Edit Html, dan centang Expand Template Widget kemudian simpan code di bawah ini sebelum tag ]]></b:skin>.

.commenthidden {display:none}
.commentshown {display:inline}

2. Simpan Code di bawah sebelum code atau tag </head>

<script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>

3. Dan code di bawah merupakan kode yang akan kita simpan pada Sidebar, postingan atau di mana saja selama kode ini akan di gunakan.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title
</a><br /> <div class="commenthidden" id="UniqueName">..isi..</div>

UniqueName : Anda boleh rename pada UniqueName1, UniqueName2, UniqueName3 atau sebagainya untuk membedakan UniqueName antara satu sama lain.

Title : Merupakan judul (boleh diletakkan tulisan ataupun imege) yang apabila di tekan akan menampakkan atau meyembunyikan sebuah elemen.

Isi : Merupakan Elemen yang di sembunyikan. biasa berupa postingan, linklist dll.

Penggunaan Dalam Postingan
Untuk menggunakan cara ini ke dalam postingan. Pertama dalam Editor blog kita harus menulis dalam bentuk Html jadi tekan Edit html.

Kemudian contoh penulisan kodenya seperti ini.

<a aiotitle="click to expand" href="javascript:togglecomments('CONTOHPERTAMA')">
Postingan...+/-</a><br /> <div class="commenthidden" id="CONTOHPERTAMA">Untuk menggunakan kode ini ke dalam postingan. Pertama dalam Editor blog kita harus menulis dalam bentuk Html jadi tekan Edit html.</div>

Penggunaan Dalam Widget LinkList atau Blogroll

Untuk di gunakan ke dalam elemen widget LinkList atau blogroll. Pertama cari dulu kode html LinkList kita. Caranya dalam halaman TEMPLATE buka EDIT HTML kemudian tandai Expand Template Widget.

Setelah itu cari kode html LinkList. Misalnya kodanya seperti di bawah. Dan lihat tulisan berwarna olive merupakan kode Hide/Show Elemen, yang saya tambahkan dan tempatkan di antara kode html LinkList.

<b:widget id='LinkList1' locked='false' title='Photoshop' type='LinkList'> <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'>
<a aiotitle='click to expand' href='javascript:togglecomments("Basic")'>
Blogroll...(+/-)
</a><br/> <div class='commenthidden' id='Basic'>
<ul>
<b:loop values='data:links' var='link'>
<li><aexpr:href='data:link.target'><data:link.name/>
</a></li>
</b:loop>
</ul></div>
<b:include name='quickedit'/>
</div>
</b:includable> </b:widget>

Basic : merupakan uniqname
Blogroll...(+/-) : merupakan title atau semacam tombol

Sumber : teranung.blogspot

Cara pasang Auto Read More terbaru

2010-02-09T19:54:00.000-08:00

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.
Penting! Yang sudah memasang Read More
versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus
kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi
tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<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/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span></b:if><b:if cond='data:blog.pageType =="item"'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)

Membuat Meta Keyword Yang Dinamis

2010-02-05T08:09:00.000-08:00

Dari sobat : Azis Lamayuda | www.z33s.co.cc

Setiap orang yang jadi seorang Blogger pasti selalu berharap dan ingin sekali jika Web atau Blognya berada di jajaran depan mesin pencari seperti Mbah Google, Yahoo, dan Yang lainnya. Namun itu semua tak lupu dari beberapa usaha yang harus dilewati dengan penuh kesabaran. mungkin salah satu usaha yang bisa ditempuh itu salah satunya yang akan saya posting disini yaitu Membuat meta keyword yang dinamis dengan cara mengotak-atik HTML Template Blog/web kita.

Meta Keyword Dinamis atau sering disebut juga Dynamic Meta Keyword adalah salah satu teknik SEO dimana meta keyword yang digunakan dapat berubah-ubah sesuai dengan artikel.
Penggunaan Meta Keyword Dinamis juga untuk menghindari duplikat meta content. Umumnya kan yang digunain tuh meta keyword statis atau manual dimana keywordnya dimasukin sendiri satu persatu, selain itu juga untuk setiap halaman selalu sama. Sebelumnya juga Kita telah membahas mengenai optimasi meta keyword dan deskripsinya. Langsung saja, cara ini saya dapat dari Eblogtemplate yang telah mempopulerkannya. untuk melihat secara langsung klik disini.
Biasanya didalam barisan HTML meta tag nya seperti ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title></b:if>

Lalu modifikasi atau ganti saja menjadi seperti ini:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName' name='Keywords'/></b:if>

Dengan begitu, maka jika postingan anda dibuka maka title di browser akan menampilkan judul postingan anda, meta deskripsi blog anda juga menampilkan judul postingan anda, dan meta keywordnya adalah judul postingan anda.
Jadi meta keyword dinamis seperti diatas hanya bisa menampilkan keyword berupa judul postingan anda saja. Sebenarnya bisa juga menggunakan label/kategori postingan anda sebagai keyword, tapi kurang etis jika untuk satu postingan anda harus memberi 10 label/kategori.

Jika sudah selesai cari kode <Head>, Lalu sisipkan kode berikut di atasnya:

<b:if cond='data:blog.pageType == "item"'>
<b:section id='meta1' showaddelement='no'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'/>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<meta name="keywords" content="<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>" />
</b:if>
</b:loop>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>
</b:section>
</b:if>

Agar Title SEO Friendly kata O-Om

Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar dengan Title kode yang sudah dimodifikasi.
Cari kode title dibawah ini:
<title><data:blog.pageTitle/></title>
Kemudian ganti semua kode diatas dengan kode dibawah

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Memasang Meta tag pada bagian header kode template.

Kalau anda ingin memasang meta tag seperti Kang rohman pakai, kodenya adalah seperti ini :


<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,follow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'> 
<meta content='noindex,follow' name='robots'/>  
</b:if> 
</b:if> 
    <title><data:blog.pageTitle/></title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='Judul Blog Anda' name='Author'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Tentang isi blog anda' name='description'/>
<meta content='Keyword yang sesuai isi blog anda, seperti tutorial blog, bikin blog, cara bikin blog, download, software gratis, gratis, google adsense, bisnis internet, template dll' name='keywords'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>

Untuk author serta meta keyword tentu saja harus di sesuaikan dengan milik anda sendiri. Khusus untuk para master, mohon di koreksi apabila ada kesalahan pemasangan kode (maklum pemula, pasang kode tidak tahu bener atau nggaknya).
Jangan lupa di Save, terus lihat dan rasakan hasilnya. selain itu , ada tips yang harus di perhatikan dalam hal membuat meta tag deskripsi atau keyword yaitu di antaranya :

Pastikan jumlah karakter keyword tidak melebihi 500 karakter.

Sebaiknya keyword yang di pasang di blog anda harus selalu berhubungan dengan apa yang anda tulis

Jangan membuat keyword yang melenceng dari jalur postingan yaitu keyword itu tidak nyambung dengan isi potingannya.

Selanjutnya ada cara yang terbukti sangat efektif meningkatkan SEO yang bisa di lakukan dengan meng-submit web/blog secara otomatis, selengkapnya daftar 159 SEO gratis dapat anda lihat disini

Mungkin itu saja yang bisa saya berikan dan kalau ada yang menambahkann saya tunggu. Terima kasih dan semoga bermanfaat.

Mengukur Berat Loading Blog

2010-02-05T07:05:00.000-08:00

Mengukur Berat Dan Loading Blog dari saungweb.blogspot.com

Keasyikan mempercantik tampilan blog dengan memasang segala pernak pernik accessories seperti widget , banner dsb, hingga membuat penampilan blog kita semakin cantik dan elegan, tapi itu harus dibayar mahal dengan loading yang lama karena blog kita menjadi berat alias gendut bin gembrot, apalagi kalau koneksi internetnya lambat..itulah yang saya alami hingga lupa Mengukur Berat Dan Loading Blog ini.

Dulu pernah diingatkan tentang seberapa berat blog ini hingga dilakukan operasi besar ganti template, akhirnya tampil lebih pede dengan Wajah Baru Dengan Free Template , dan berhasil menurunkan berat blog ini dari 210 menjadi 133 KB . walaupun ini masih gendut karena katanya batas normalnya itu 100 KB.

Waktu berjalan , keasyikan lagi hingga lupa untuk diet , bengkak lagi menjadi 178 KB.., akhirnya diet lagi tapi sampai sekarang baru turun hingga 155 KB.. masih berat ..bingung juga apalagi yg mesti dibuang ya.. padahal saya telah membuang :

Banner iklan 3 buah

Banner SEO 2 buah walau gak banyak ngaruh

Label Link , adense

Tampilan posting di halaman utama dari 5 jadi 4 artikel

Kode ShinyStat .

Lupa lagi.. pokokny dll.

Sekarang saya pasang tool untuk mengukur berat blog ini, agar selalu ingat utk diet.. ya hitung2 di Posyandu aja pan tiap bulan Balita itu mesti timbang badan biar sehat ..hehee

Ada beberapa tools online service yang menyediakan jasa untuk test kecepatan atau Mengukur Berat Dan Loading Blog atau website, namun ingat hal ini tidak termasuk : koneksi internet yang memang lambat , komputer kita yang memang lemot n jadul dan kesalahan alam lainnya , tool tersebut diantaranya :

Pakai Iwebtool speed test : Tinggal masukan URL Blog , klik Submit nanti akan tahu seberapa berat Size-nya (KB) dan berapa lama loadingnya (seconds).

Tool Pingdom : Yang ini hasilnya agak komplit dan rinci sebab menampilkan grafik tentang lamanya loading dari semua objek link yang ada dalam blog kita,

Tool Stopwatch : Namanya juga stopwatch jadi kita akan tahu berapa detik loading blog kita

Pakai WebSiteOptimization.com. Yang ini hasilnya akan lebih komplit lagi, kita dapat mengetahui seberapa cepat waktu loading sebuah website apabila diakses menggunakan 6 kecepatan koneksi internet. Hasil tes juga disertai dengan analisis website yang dapat dipakai sebagai acuan untuk optimasi website lebih lanjut.

Dari tools diatas , disini saya hanya akan pasang yang no. 1 saja, sedangkan untuk yg lainnya akan saya posting kemudian ( jika sempat). Namun agar blog/website kita tidak berat dan loadnya cepat ada beberapa tips yg mesti diperhatikan diantaranya :

Hapus Widgert/ script yang tidak penting2 amat , hal ini berdasarkan kepada :
• Apakah widget ini sangat anda butuhkan ?
• Apakah widget ini mempunyai nilai / kegunaan bagi pembaca (jika widget ini tidak ada apakah pembaca akan kesulitan mencari sebuah artikel)?
• Apakah pembaca anda akan mengeluh jika anda menghapus widget dari tampilan blog anda?

Kurangi jumlah atau perkecil gambar yang anda gunakan .

Sederhanakan CSS anda ..dengan cara mengkompresnya… Caranya .. tunggu dalam postingan selanjutnya

Untuk mengukur berat dan loading blog atau web anda, silahkan masukan URL nya disini ( maksimal 10), silahkan timbang blog anda disini.

Mempercepat Login Blog 1

2010-02-05T06:50:00.000-08:00

Mempercepat Loading Blog Dengan Css Compress dari www.z33s.co.cc

Seberapa berat login blog anda...? itu mungkin yang patut kita tanyakan pada blog kita. OK kali ini saya akan membantu mempercepat login di blog supaya lebih cepat waktu loadingnya. Kita akan mempercepat dengan mengotak atik yang namanya CSS.
CSS...? apa CSS itu?
CSS itu kependekan dari Cascading Style Sheet yaitu sebuah bahasa program atau dokumen yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web atau blog. Salah satu cara mengoptimalkannya adalah dengan mengompresnya agar ukurannya menjadi lebih kecil , sehingga tidak terlalu membebani loading blog, dengan demikian diharapkan loading blog menjadi lebih cepat lagi karena 'sizenya' telah berkurang setelah di compress.

Langsung aja, berikut tahap-tahapnya:

1. Login ke Blogger lalu pilih Lay Out dan klik Edit HMTL

2. Jangan lupa backup template dulu dengan Download Full Template , siapa tahu nanti malah berantakan.

3. Cari kode CSS nya , biasanya terletak antara kode :<b:skin><![CDATA[/* dan ]]></b:skin>

4. Kalau CSS nya sudah ketemu tinggal di blok , lalu ambil atau Cut ( klik kanan Mouse anda lalu Cut ) dan simpan dulu di Notepad , akan lebih baik lagi bila notepadnya di save sebagai backup , siapa tahu nanti diperlukan lagi.

5. Jika sudah baru kita masuk ke CSSdrive.com untuk mengkompresnya, disitu akan ada kotak bertuliskan Insert CSS Code

6. Copy CSS yang tadi disimpan di Notepad tersebut kemudian pastekan ke kotak Insert CSS Code.

7. Nanti ada beberapa pilihan seperti di bawah ini : (Untuk pemula sebaiknya pilih Light dan Don strip any comments saja dulu , supaya masih tetap terbaca jika nanti kita mau utak-atik-utek CSS lagi).

Compression mode: (?)

Light
Normal
Super Compact

Comments handling: (?)
Don't strip any comments
Strip ALL comments
Strip comments at least chars long (NOT counting line breaks within comment)

8. Klik Compress it yang ada dibawah kotak tersebut
9. Tunggu sebentar sampai proses compress selesai , kalau dah selesai dibawahnya suka ada keterangan seperti ini :

Compression results

Original size: 14487 bytes

Compressed size: 12357 bytes

Savings: 2130 bytes (15%)

10. Copy hasil compress tersebut dan pastekan ke tempatnya semula yaitu antara : <b:skin><![CDATA[/* dan ]]></b:skin>
11. Jika semua sudah selesai jangan lupa Save Templates
12. Selesai , selamat mencoba untuk Compress CSS Sebagai Upaya Optimasi Blog
13. Jika mau tahu Seberapa Berat Blog Sobat, Klik aja disini

Mempercepat Login Blog 2

2010-02-05T06:40:00.000-08:00

Cara mempercepat login blog dengan HTML Compress ( Mengcompress HTML menjadi lebih ringan )dari sobat www.z33s.co.cc

Blog atau web adalah sarana yang tepat untuk mengutarakan buah pikiran kita yang selalu tersirat setiap detik. Namun sungguh sangat disayangkan kalau kita selalu harus bersikap sabar menunggu loading blog/web kita yang sangat lama.
untuk itu saya akan berikan salah satu dari sekian banyak situs yang datap melakukan compress terhadap blog kita sehingga menjadi lebih ringan. mungkin kalo sebelumnya saya telah menjelaskan cara melakukan compress pada CSS.

berikut caranya:
1. silahkan kunjungi situs www.textfixer.com/,
2. scroll kursor kalian ke bagian bawah halaman web,
3. disana kalian akan melihat sebuah kotak kosong yang siap untuk disisipkan semua kode HTML kita.
4. Copy dan paste kode HTML blog kita dengan cara login ke blogger kamu, Masuk Tata Letak/Layout, setelah itu klik EDIT HTML.
5. setelah kode HTML di paste di kotak. kalian Klik " COMPRESS HTML"
6. Hasil Compress akan mucul di kotak baru bagian bawah. Copy dan paste kembali ke blog kalian.
7. selamat mencoba dan semoga berhasil.

Selain itu kalian juga dapa mendownload HTML Compression Tool dan HTML Compress yang dapat membantu anda juga.

NB: Jangan lupa untuk mem-Backup template terlebih dahulu.

Memposting Kode HTML Pada Artikel 2

2010-02-05T05:13:00.000-08:00

Dicopas dari : hermanblogtips.blogspot.com

Untuk memposting kode HTML pada artikel, Anda harus menggunakan sebuah software untuk mengkonversi/mengubah kode HTML menjadi kode yang dapat dibaca pada artikel.

Jika tidak, setiap kali kita memposting. Kode HTML-nya tidak akan muncul pada artikel. Misalnya kode < harus diganti dengan < dan kode < harus diganti dengan &lt;

Berikut adalah cara untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel:

1. Buka http://centricle.com/tools/html-entities/

2. Masukkan kode HTML yang mau ditampilkan pada artikel dalam kotak Centricle. Misalnya kode <div id='outer-wrapper'>.

3. Klik Encode. Kemudian akan muncul kode baru seperti pada gambar dibawah ini.

4. Gunakan kode baru tersebut untuk diposting pada artikel

Semoga bermanfaat..!!

Update - Pilihan selain http://centricle.com/tools/html-entities juga masih ada satu tempat lagi yaitu : http://www.blogcrowds.com/resources/parse_html.php

Teks Berjalan di Menu Bar

2010-02-05T04:54:00.000-08:00

Thanks For : hermanblogtips.blogspot.com

Selain membuat teks berjalan di blog. Kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger
2. Pada menu Layout -> Edit HTML
3. Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Simple Preview ";
msg = " | pernak-pernik blog -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Ganti teks berwarna merah dengan teks yang ingin anda tampilkan.
Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4. Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar seperti yang anda lihat di blog ini.

Memasang Label Cloud Pada Blogger

2010-02-05T03:24:00.000-08:00

Postingan ini dapat dari hermanblogtips.blogspot.com

Label cloud ini dikembangkan oleh phydeaux3. Sesuai dengan namanya, widget ini berhubungan dengan label sehingga bagi anda yang tidak memasang widget label pada blog anda. Cara ini tidak bisa digunakan.

Untuk label standar blogger, biasanya jumlah postingan yang termasuk dalam kategori tersebut akan tertera dalam bentuk angka yang terletak disampingnya. Tetapi beda dengan label cloud, yang menggambarkan jumlah postingan dalam bentuk ukuran font labelnya. Jadi semakin banyak postingan yang termasuk dalam kategori tersebut semakin besar pula ukuran fontnya. Sehingga terlihat lebih menarik dan tidak monoton. Selain itu, cara ini juga cocok untuk ukuran sidebar yang lebar karena susunannya mengurut ke samping.

Nah bagi anda yang ingin memasang label cloud ini, berikut adalah langkah-langkahnya:

1. Seperti biasa login ke Blogger. Pada menu Layout -> Edit HTML
2. Backup template anda
3. Beri tanda centang pada "Expand Widget Templates"
4. Letakkan kode dibawah ini diatas kode ]]></b:skin>

/* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}

5. Setelah itu, letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>

6. Lalu cari kode dibawah ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Ganti kode diatas dengan kode dibawah ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

8. Kalau sudah, klik Save Template. Selesai

Jika sobat ingin memodifikasi ukuran dan warna font labelnya. Silahkan arahkan perhatian anda pada kode seperti ini

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>

Ganti tulisan yang berwarna merah sesuai keinginan. Selamat mencoba..!

Cara Membuat Daftar Isi secara Manual

2010-02-04T20:50:00.000-08:00

Cara ini di ambil dari : www.karsono.co.cc

PENTING

Sebelum memulai tips ini sebaiknya melakukan backup terlebih dahulu. Caranya setelah Login, pilih Tata Letak, Edit HTML, Download Template Lengkap dan simpan ditempat sesuai keinginan anda. Setelah itu cntang Expand Template Widget, tunggu beberapa saat, dan mulai.

Untuk membuat daftar isi di blog ada dua cara, yaitu secara manual dan otomatis, untuk setiap pilihan cara sudah pasti ada keuntungan dan kerugian, untuk cara manual mungkin lebih ribet, dikarenakan harus selalu update link post, setiap ada penambahan post baru, sedangkan untuk cara otomatis memang tidak terlalu ribet, tetapi hal tersebut bisa berpengaruh terhadap crawl web kita, tetapi menurut google gak ngaruh si, crawl tersebut cuman informasi aja sebelum membuat daftar isi alangkah lebih baik jika kita melakukan back up terhadap file kita.

1. Membuat Daftar Isi secara Manual
Pembuatan Daftar Isi secara Manual sistemnya hampir sama dengan cara pembuatan Scroll Box, yang ditambahkan link dari postingan didalamnya, yang pertama harus dilakukan adalah membuat kode CSS-nya.

#daftar-isi-manual{ background:#C0C0C0; overflow: scroll; height:150px; font:10pt/15pt Arial, serif; color: blue }

Sedikit penjelasan untuk kode diatas, tinggi scroll box adalah 150px, dengan ukuran font adalah Arial 10 dan berwarna biru, langkah selanjutnya adalah masuk ke blogger --> Edit HTML, lalu copy kode css diatas tepat diatasnya kode ]]></b:skin>, lalu simpan, dan masuk ke Page Element, dan klik Add Gadget, pilih HTML/Script, dan masukkan kode dibawah ini:

Ganti link yang berwarna merah sesuai dengan link anda, sedangkan yang berwarana biru merupakan kalimat yang akan muncul sebagai link dan apabila ada penambahan postingan baru, berarti anda harus selalu melakukan update penambahan link baru pada kode diatas... hmm repot ya...hasil dari kode diatas adalah seperti dibawah ini

Selanjutnya masuk ke cara pembuatan daftar isi secara otomatis
2. Membuat Daftar Isi secara Otomatis

Untuk membuat daftar isi secara otomatis, masuk ke Edit HTML, dan jangan lupa centang Expand Widget Template, Seperti halnya pembuatan daftar isi blog secara manual, buatlah kode css seperti dibawah, dan letakkan di atas kode ]]></b:skin>,

#daftar-isi-otomatis{ border:2px outset blue; padding:5px 0 5px; background:#EAE9E9 }

Langkah selanjutnya cari kode di bawah ini:

<b:include data='post' name='post'/>

Untuk di template minima kode diatas ada dua, carilah kode yang pertama, bila sudah ketemu, ganti kode di atas dengan kode di bawah ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div id='daftar-isi-otomatis'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Lalu simpan, kemudian Masuk ke Page Element, dan klik Add Gadget, posisinya terserah mau di bagian menu atau di sidebar, contohnya bisa dilihat pada menu daftar isi blog ini

<a href="http://Alamatbloganda.blogspot.com/search?max-results=100">Daftar isi</a>

Pilih HTML/Script, dan masukkan kode diatas kedalamnya, tetapi sebelumnya ganti dulu alamat link-nya sesuai dengan alamat blog anda, simpan... dan lihat hasilnya.

Page Peel Efek menggunakan jQuery & CSS

2010-02-04T19:36:00.000-08:00

Tip ini saya dapat dari blognya O-Om

Kali ini saya menemukan Page Peel terbaru buatan Sohtanaka.com dengan koding yang tentu saja sangat berbeda dengan kedua Page
Peel diatas, Sohtanaka tidak menggunakan setup koding yang rumit, jadi rekan tinggal langsung memasangnya saja dihalaman blog. Walaupun masih ada sedikit yang harus diedit, itupun hanya sekedar mengubah tampilan gambar dan link tujuannya saja. Bila dilihat sekilas, untuk style tampilannya hampir sama saja, dimana ketika kita mengarahkan mouse pada area PagePeel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya. Lihat demonya disini.

Cara Pasang:

Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA[

Kemudian letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#pageflip {
position: relative;

right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;

}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat
right top;
}

Letakan kode ini dibawah tag <body>

Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, rekan bisa mengganti gambar dan
link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba.

Membuat Tampilan Halaman Secara Scroll

2010-02-04T18:33:00.000-08:00

Terima kasih kepada : Seby-Antoe - Tentang Cara Membuat Tampilan Halaman Secara Scroll

Membuat tampilan halaman secara scroll memang banyak sekali manfaatnya, selain mudah dalam membuatnya juga bisa memperingkas tampilan karena mempunyai fungsi scoll yang sudah pernah saya tulis sebelumnya. Untuk membuatnya tidak diperlukan kode HTML yang rumit, anda hanya menambahkan kode di bawah ini pada halaman yang akan dibuat tampilan secara scroll :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
Isi halaman yang akan ditampilkan secara scroll disini
</div>

Untuk membuatnya silahkan anda ikuti langkah2 dibawah ini :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah anda).
3.Copy Paste Script yang ada di bawah ini tinggal edit sesuaikan dengan kebutuhan sobat saja :

<div style='overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee'><ul><li><a href='http://www.seby-antoe.com/2009/09/cara-back-up-dan-upload-file-java.html'>Cara Back Up dan Upload File Java Script ke Free Hosting</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/cara-membuat-animasi-status-loading.html'>Cara Membuat Animasi Status Loading</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-membuat-buku-tamu-dengan.html'>Cara Membuat Buku Tamu dengan Shoutmix.com</a></li>
<li><a href='http://www.seby-antoe.com/2009/06/cara-membuat-dan-memahami-isi-blog-di.html'>Cara Membuat dan Memahami Isi Blog di Blogspot</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/cara-membuat-icon-address-bar-favicon.html'>Cara Membuat Icon Address bar ( Favicon ) di Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/cara-membuat-kata-penutup-di-blog.html'>Cara Membuat Kata Penutup di Blog Ketika Menutup Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-menampilkan-elemen-halaman-hanya.html'>Cara Menampilkan Elemen Halaman Hanya Pada Halaman Depan</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-menampilkan-elemen-halaman-hanya_28.html'>Cara Menampilkan Elemen Halaman Hanya Pada Halaman Selanjutnya</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-mudah-menulis-kode-html-di.html'>Cara Menulis Kode HTML di Postingan</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-mudah-membuat-tampilan-read-more.html'>Cara Mudah Membuat Tampilan Read More pada Postingan</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-setting-blog-di-blogspot.html'>Cara Setting Blog di Blogspot</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/memasang-toolbox-bookmark-share-addthis.html'>Memasang Toolbox Bookmark & Share di Bawah Postingan</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/memasang-widget-alexa-rank-di-blog.html'>Memasang Widget Alexa Rank di Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/cara-memberikan-efek-yang-menonjol-pada.html'>Memberikan Efek yang Menonjol pada Postingan</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/membuat-banner-animasi-melalui-situs.html'>Membuat Banner Animasi Melalui Situs Gratisan</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-blogger-login-widget.html'>Membuat Blogger Login Widget</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-efek-animasi-roaming-saat-blog.html'>Membuat Efek Animasi Roaming Saat Blog di Buka</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-efek-tulisan-berkedip-blink.html'>Membuat Efek Tulisan Berkedip ( Blink )</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-efek-zoom-pada-image-gambar.html'>Membuat Efek Zoom Pada Image / Gambar</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-footer-blog-3-kolom.html'>Membuat Footer Blog 3 Kolom</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-huruf-besar-pada-awal-postingan.html'>Membuat Huruf Besar pada Awal Postingan</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-image-gambar-terlihat-blur.html'>Membuat Image Gambar Terlihat Blur ( Tersamar ) Ketika Disorot Mouse</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/membuat-image-logo-button.html'>Membuat Image Logo Button</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-kata-sambutan-untuk-pengunjung.html'>Membuat Kata Sambutan Untuk Pengunjung Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-kolom-teks-area-untuk-kode.html'>Membuat Kolom Teks Area untuk Kode / Tulisan</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-label-berjalan-marquee-di-atas.html'>Membuat Label Berjalan ( Marquee ) di Atas Footer</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-link-berubah-warna-dan-membesar.html'>Membuat Link Berubah Warna dan Membesar Ketika Disorot</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-link-warna-rainbow-link.html'>Membuat Link Warna ( Rainbow Link )</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-menu-auto-hide-spoiler.html'>Membuat Menu Auto Hide ( Spoiler )</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-overline-pada-link-garis-atas.html'>Membuat Overline Pada Link / Garis Atas Pada Saat Link Disorot ( Mouse Over )</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/membuat-random-posts-dengan-tampilan.html'>Membuat Random Posts dengan Tampilan Slide</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-random-posts-di-bawah-postingan.html'>Membuat Random Posts di Bawah Postingan Dengan Tampilan Gambar</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/membuat-read-more-terbaru.html'>Membuat Read More Terbaru</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-recent-post-dengan-thumbnails.html'>Membuat Recent Post Dengan Thumbnails dan Comment Count</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/membuat-related-posts-atau-artikel.html'>Membuat Related Posts atau Artikel Terkait</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-sidebar-blog-menjadi-2-kolom.html'>Membuat Sidebar Blog Menjadi 2 Kolom</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-slide-menu-di-blog.html'>Membuat Slide Menu di Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-slide-show-tab-view.html'>Membuat Slide Show Tab View</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-snapshoot-link-webblog.html'>Membuat Snapshoot Link di Web/Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-tabview-widget.html'>Membuat Tabview Widget</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-tombol-view-pop-up.html'>Membuat Tombol View Pop Up</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-widget-artikel-terbaru-recent.html'>Membuat Widget Artikel Terbaru ( Recent Post )</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-widget-artikel-terpopuler-top.html'>Membuat Widget Artikel Terpopuler ( Top Post )</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-widget-komentar-paling-banyak.html'>Membuat Widget Komentar Paling Banyak ( Top Comments )</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/membuat-widget-komentar-terbaru-recent.html'>Membuat Widget Komentar Terbaru ( Recent Comments )</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-widget-pop-up-windows-di-blog.html'>Membuat Widget Pop Up Windows di Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-widget-tampak-menghilang-dan.html'>Membuat Widget Tampak Menghilang dan Muncul Kembali</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/membuat-widget-tampil-dengan-scroll.html'>Membuat Widget Tampil Dengan Scroll</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/menambah-emotion-pada-buku-tamu.html'>Menambah Emotion Pada Buku Tamu Shoutmix.com</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/menampilkan-beberapa-model-status.html'>Menampilkan Beberapa Model Status Online Yahoo Messenger</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/menampilkan-posting-secara-acak-random.html'>Menampilkan Posting secara Acak ( Random Post Widget )</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/mencegah-copy-paste-artikel-dengan.html'>Mencegah Copy Paste Dengan Menggunakan Copyscape</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/mengubah-setting-blog-nofollow-menjadi.html'>Mengubah Setting Blog Nofollow menjadi Dofollow</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/menyembunyikan-judul-dan-diskripsi-pada.html'>Menyembunyikan Judul dan Diskripsi pada Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/merubah-dan-memodifikasi-tampilan.html'>Merubah dan Memodifikasi Tampilan Blockquote</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/modifikasi-tampilan-label-cloud-blogger.html'>Modifikasi Tampilan Label Cloud Blogger</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/modifikasi-tampilan-widget-mybloglog.html'>Modifikasi Tampilan Widget MyBlogLog Recent Readers</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/pasang-translate-di-blog.html'>Pasang Translate di Blog</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/pengertian-dari-nofollow-menjadi.html'>Pengertian dari Nofollow menjadi Dofollow</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/pengertian-paddingmargin-dan-border.html'>Pengertian Padding, Margin dan Border pada CSS</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/setting-navbar-blogspot.html'>Setting Navbar Blogspot</a></li>
<li><a href='http://www.seby-antoe.com/2009/09/tips-membuka-2-target-link-dalam-1-link.html'>Tips Membuka 2 Target Link Dalam 1 Link</a></li>
<li><a href='http://www.seby-antoe.com/2009/08/tool-buat-cek-posisi-web-blog-di-google.html'>Tool Buat Cek Posisi Web / Blog di GOOGLE</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/backlink-checker.html'>Tool Untuk Mengecek Backlink Blog/Web Anda</a></li>
<li><a href='http://www.seby-antoe.com/2009/07/tools-buat-tes-kecepatan-loading-web.html'>Tool Untuk mengecek Kecepatan Loading Blog/Web Anda</a></li>
<li><a href='http://www.seby-antoe.com/2008/12/page-rank-checker.html'>Tool Untuk Mengecek PageRank Blog/Web Anda</a></li>
</ul></div>

4. Klik Simpan dan selesai. Hasilnya akan tampak seperti di bawah ini :

Cara Back Up dan Upload File Java Script ke Free Hosting

Cara Membuat Animasi Status Loading

Cara Membuat Buku Tamu dengan Shoutmix.com

Cara Membuat dan Memahami Isi Blog di Blogspot

Cara Membuat Icon Address bar ( Favicon ) di Blog

Cara Membuat Kata Penutup di Blog Ketika Menutup Blog

Cara Menampilkan Elemen Halaman Hanya Pada Halaman Depan

Cara Menampilkan Elemen Halaman Hanya Pada Halaman Selanjutnya

Cara Menulis Kode HTML di Postingan

Cara Mudah Membuat Tampilan Read More pada Postingan

Cara Setting Blog di Blogspot

Memasang Toolbox Bookmark & Share di Bawah Postingan

Memasang Widget Alexa Rank di Blog

Memberikan Efek yang Menonjol pada Postingan

Membuat Banner Animasi Melalui Situs Gratisan

Membuat Blogger Login Widget

Membuat Efek Animasi Roaming Saat Blog di Buka

Membuat Efek Tulisan Berkedip ( Blink )

Membuat Efek Zoom Pada Image / Gambar

Membuat Footer Blog 3 Kolom

Membuat Huruf Besar pada Awal Postingan

Membuat Image Gambar Terlihat Blur ( Tersamar ) Ketika Disorot Mouse

Membuat Image Logo Button

Membuat Kata Sambutan Untuk Pengunjung Blog

Membuat Kolom Teks Area untuk Kode / Tulisan

Membuat Label Berjalan ( Marquee ) di Atas Footer

Membuat Link Berubah Warna dan Membesar Ketika Disorot

Membuat Link Warna ( Rainbow Link )

Membuat Menu Auto Hide ( Spoiler )

Membuat Overline Pada Link / Garis Atas Pada Saat Link Disorot ( Mouse Over )

Membuat Random Posts dengan Tampilan Slide

Membuat Random Posts di Bawah Postingan Dengan Tampilan Gambar

Membuat Read More Terbaru

Membuat Recent Post Dengan Thumbnails dan Comment Count

Membuat Related Posts atau Artikel Terkait

Membuat Sidebar Blog Menjadi 2 Kolom

Membuat Slide Menu di Blog

Membuat Slide Show Tab View

Membuat Snapshoot Link di Web/Blog

Membuat Tabview Widget

Membuat Tombol View Pop Up

Membuat Widget Artikel Terbaru ( Recent Post )

Membuat Widget Artikel Terpopuler ( Top Post )

Membuat Widget Komentar Paling Banyak ( Top Comments )

Membuat Widget Komentar Terbaru ( Recent Comments )

Membuat Widget Pop Up Windows di Blog

Membuat Widget Tampak Menghilang dan Muncul Kembali

Membuat Widget Tampil Dengan Scroll

Menambah Emotion Pada Buku Tamu Shoutmix.com

Menampilkan Beberapa Model Status Online Yahoo Messenger

Menampilkan Posting secara Acak ( Random Post Widget )

Mencegah Copy Paste Dengan Menggunakan Copyscape

Mengubah Setting Blog Nofollow menjadi Dofollow

Menyembunyikan Judul dan Diskripsi pada Blog

Merubah dan Memodifikasi Tampilan Blockquote

Modifikasi Tampilan Label Cloud Blogger

Modifikasi Tampilan Widget MyBlogLog Recent Readers

Pasang Translate di Blog

Pengertian dari Nofollow menjadi Dofollow

Pengertian Padding, Margin dan Border pada CSS

Setting Navbar Blogspot

Tips Membuka 2 Target Link Dalam 1 Link

Tool Buat Cek Posisi Web / Blog di GOOGLE

Tool Untuk Mengecek Backlink Blog/Web Anda

Tool Untuk mengecek Kecepatan Loading Blog/Web Anda

Tool Untuk Mengecek PageRank Blog/Web Anda

Keterangan :
+ overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
+ width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
+ height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
+ padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
+ border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Mudah bukan, selamat mencobanya ...

Menggunakan Format Khusus di Facebook

2010-02-04T18:10:00.000-08:00

Cara menggunakan format khusus difacebook saya dapatkan disini. Fermat tersebut hanya berlaku pada tulisan catatan saja.

Untuk menggunakan format khusus seperti tebal dan bergaris bawah pada catatan Anda, gunakan perintah-perintah HTML berikut ini.

Untuk melihat ini:	Ketikkan ini dalam catatan Anda:
tebal	<b>tebal</b>
miring	<i>miring</i>
garis bawah	<u>garis bawah</u>
~~coret~~	<s>coret</s>
Ukuran besar	<big>Ukuran besar</big >
Ukuran kecil	<small>Ukuran kecil</small>
An em-dash—see?	An em-dash—see?
Hyperlink ke Facebook	Hyperlink ke <a href="http://www.facebook.com">Facebook</a>
Daftar Butir: One Item Another Item	Daftar Butir: <ul> <li>One Item</li> <li>Another Item</li> </ul>
Daftar Terurut: Butir Pertama Butir Kedua	Daftar Terurut: <ol> <li> Butir Pertama</li> <li> Butir Kedua</li> </ol>
Kutipan berikut ini istimewa: Karena menjorok ke dalam	Kutipan berikut ini istimewa: <blockquote>Karena menjorok ke dalam</blockquote>
Judul 1 Judul 2 Judul 3	<h1>Judul 1</h1> <h2>Judul 2</h2> <h3>Judul 3</h3>

Cara Membuat Kotak Iklan

2010-02-04T17:18:00.000-08:00

Terima kasih buat : Mas Agus Budi Santoso

Setelah melihat blog milik acustory jadi ingin juga menambah banner box di sidebar blog saya ini.

Siapa tau ada rekan-rekan ingin tau caranya.
Pertama coba letakkan kode berikut tepat di bawah kode <b:skin><![CDATA[

#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center;
}
#Box-Banner-ads img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}
#Box-Banner-ads img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}

Kalau sudah di paste selanjutnya buat element halaman baru dan masukkan kode seperti dibawah ini. Yang perlu diperhatikan yaitu teks yang berwarna merah merupakan url/link referensi sponsor sedangkan yang bewarna biru adalah url dimana banner sponsor berada

<div id='Box-Banner-ads'>
<a href='http://adsensecamp.com/?ref_id=8610' target='_blank'><img alt='ads' border='0' src='http://adsensecamp.com/images/banner/the-reds.jpg'/></a>
<a href='http://adsensecamp.com/?ref_id=8610' target='_blank'><img alt='ads' border='0' src='http://adsensecamp.com/images/banner/the-reds.jpg'/></a>
<a href='http://adsensecamp.com/?ref_id=8610' target='_blank'><img alt='ads' border='0' src='http://adsensecamp.com/images/banner/the-reds.jpg'/></a>
.
.
dst
.
.
<a href='http://adsensecamp.com/?ref_id=8610' target='_blank'><img alt='ads' border='0' src='http://adsensecamp.com/images/banner/the-reds.jpg'/></a>
</div>

Mudah-mudahan tulisan ini ada manfaatnya dan yang pasti tulisan ini hanya sebagai catatan pribadi saja.

Kode Warna HTML 1

2010-02-04T15:34:00.001-08:00

Thanks for : W3Schools Color Test

Hex	RGB	Nama
F0F8FF	240,248,255	AliceBlue
FAEBD7	250,235,215	AntiqueWhite
00FFFF	0,255,255	Aqua
7FFFD4	127,255,212	Aquamarine
F0FFFF	240,255,255	Azure
F5F5DC	245,245,220	Beige
FFE4C4	255,228,196	Bisque
000000	0,0,0	Black
FFEBCD	255,235,205	BlanchedAlmond
0000FF	0,0,255	Blue
8A2BE2	138,43,226	BlueViolet
A52A2A	165,42,42	Brown
DEB887	222,184,135	BurlyWood
5F9EA0	95,158,160	CadetBlue
7FFF00	127,255,0	Chartreuse
D2691E	210,105,30	Chocolate
FF7F50	255,127,80	Coral
6495ED	100,149,237	CornflowerBlue
FFF8DC	255,248,220	Cornsilk
DC143C	237,164,61	Crimson
00FFFF	0,255,255	Cyan
00008B	0,0,139	DarkBlue
008B8B	0,139,139	DarkCyan
B8860B	184,134,11	DarkGoldenRod
A9A9A9	169,169,169	DarkGray
006400	0,100,0	DarkGreen
BDB76B	189,183,107	DarkKhaki
8B008B	139,0,139	DarkMagenta
556B2F	85,107,47	DarkOliveGreen
FF8C00	255,140,0	Darkorange
9932CC	153,50,204	DarkOrchid
8B0000	139,0,0	DarkRed
E9967A	233,150,122	DarkSalmon
8FBC8F	143,188,143	DarkSeaGreen
483D8B	72,61,139	DarkSlateBlue
2F4F4F	47,79,79	DarkSlateGray
00CED1	0,206,209	DarkTurquoise
9400D3	148,0,211	DarkViolet
FF1493	255,20,147	DeepPink
00BFFF	0,191,255	DeepSkyBlue
696969	105,105,105	DimGray
1E90FF	30,144,255	DodgerBlue
B22222	178,34,34	FireBrick
FFFAF0	255,250,240	FloralWhite
228B22	34,139,34	ForestGreen
FF00FF	255,0,255	Fuchsia
DCDCDC	220,220,220	Gainsboro
F8F8FF	248,248,255	GhostWhite
FFD700	255,215,0	Gold
DAA520	218,165,32	GoldenRod
808080	128,128,128	Gray
008000	0,128,0	Green
ADFF2F	173,255,47	GreenYellow
F0FFF0	240,255,240	HoneyDew
FF69B4	255,105,180	HotPink
CD5C5C	205,92,92	IndianRed
4B0082	75,0,130	Indigo
FFFFF0	255,255,240	Ivory
F0E68C	240,230,140	Khaki
E6E6FA	230,230,250	Lavender
FFF0F5	255,240,245	LavenderBlush
7CFC00	124,252,0	LawnGreen
FFFACD	255,250,205	LemonChiffon
ADD8E6	173,216,230	LightBlue
F08080	240,128,128	LightCoral
E0FFFF	224,255,255	LightCyan
FAFAD2	250,250,210	LightGoldenRodYellow
D3D3D3	211,211,211	LightGrey
90EE90	144,238,144	LightGreen
FFB6C1	255,182,193	LightPink
FFA07A	255,160,122	LightSalmon
20B2AA	32,178,170	LightSeaGreen
87CEFA	135,206,250	LightSkyBlue
778899	119,136,153	LightSlateGray
B0C4DE	176,196,222	LightSteelBlue
FFFFE0	255,255,224	LightYellow
00FF00	0,255,0	Lime
32CD32	50,205,50	LimeGreen
FAF0E6	250,240,230	Linen
FF00FF	255,0,255	Magenta
800000	128,0,0	Maroon
66CDAA	102,205,170	MediumAquaMarine
0000CD	0,0,205	MediumBlue
BA55D3	186,85,211	MediumOrchid
9370D8	147,112,219	MediumPurple
3CB371	60,179,113	MediumSeaGreen
7B68EE	123,104,238	MediumSlateBlue
00FA9A	0,250,154	MediumSpringGreen
48D1CC	72,209,204	MediumTurquoise
C71585	199,21,133	MediumVioletRed
191970	25,25,112	MidnightBlue
F5FFFA	245,255,250	MintCream
FFE4E1	255,228,225	MistyRose
FFE4B5	255,228,181	Moccasin
FFDEAD	255,222,173	NavajoWhite
000080	0,0,128	Navy
FDF5E6	253,245,230	OldLace
808000	128,128,0	Olive
6B8E23	107,142,35	OliveDrab
FFA500	255,165,0	Orange
FF4500	255,69,0	OrangeRed
DA70D6	218,112,214	Orchid
EEE8AA	238,232,170	PaleGoldenRod
98FB98	152,251,152	PaleGreen
AFEEEE	175,238,238	PaleTurquoise
D87093	219,112,147	PaleVioletRed
FFEFD5	255,239,213	PapayaWhip
FFDAB9	255,218,185	PeachPuff
CD853F	205,133,63	Peru
FFC0CB	255,192,203	Pink
DDA0DD	221,160,221	Plum
B0E0E6	176,224,230	PowderBlue
800080	128,0,128	Purple
FF0000	255,0,0	Red
BC8F8F	188,143,143	RosyBrown
4169E1	65,105,225	RoyalBlue
8B4513	139,69,19	SaddleBrown
FA8072	250,128,114	Salmon
F4A460	244,164,96	SandyBrown
2E8B57	46,139,87	SeaGreen
FFF5EE	255,245,238	SeaShell
A0522D	160,82,45	Sienna
C0C0C0	192,192,192	Silver
87CEEB	135,206,235	SkyBlue
6A5ACD	106,90,205	SlateBlue
708090	112,128,144	SlateGray
FFFAFA	255,250,250	Snow
00FF7F	0,255,127	SpringGreen
4682B4	70,130,180	SteelBlue
D2B48C	210,180,140	Tan
008080	0,128,128	Teal
D8BFD8	216,191,216	Thistle
FF6347	255,99,71	Tomato
40E0D0	64,224,208	Turquoise
EE82EE	238,130,238	Violet
F5DEB3	245,222,179	Wheat
FFFFFF	255,255,255	White
F5F5F5	245,245,245	WhiteSmoke
FFFF00	255,255,0	Yellow
9ACD32	154,205,50	YellowGreen

Kode lain dapat dilihat disini

HTML code and web design help

2010-02-04T15:12:00.001-08:00

Special thanks for : http://www.computerhope.com

HTML overview

HTML, or HyperText Markup Language, is a world wide markup language that allows a user to create his or her own web page. While HTML is a fairly easy to learn
markup language, it does involve several hundred commands to learn and memorize.

With HTML, the user creates tags; tags are anything between the less-than and the greater-than signs. Using the tags, this identifies where the commands begin and end. For example, <b>Bold Text</b> tells the browser that <b> is the beginning of the bold text statement that will turn anything after that tag bold; once the browser hits </b> the browser then turns the bold text statement off, allowing for only specific text to be bold

On this page we have created a list of HTML commands, which can be used in web pages to change text, add different features, and apply several other different effects.

HTML COMMANDS

 - HTML Tag that allows you to implement comments into your HTML Code, which would be hidden to the average browser.

Example:

Preview:

<A> -HTML tag that which allows aspects of your web page to be anchored, such as a link <A HREF= "Http://www.computerhope.com">

Example:

<A HREF="http://www.computerhope.com">Computer Hope</A>

Preview:

Computer Hope

<ABBREV> - New HTML tag available with HTML3.0 which allows you to abbreviate words on your web page automatically.

Example:

<ABBREV>Contained words will be abbreviated.</ABBREV>

<ACRONYM> - Like ABBREV, also a new command with HTML 3.0 that displays the text acronym when mouse is highlighted over text.

Example:

<ACRONYM TITLE="Free computer help and support">Computer Hope</ACRONYM>

Preview:

Computer Hope

<ADDRESS> - Command that changes the format of the text to signify an address. This is generally used with e-mail addresses. However, can also be used for a street address.

Example:

<ADDRESS>support@computerhope.com</ADDRESS>

Preview:

support@computerhope.com

<APPLET> - Command used with Netscape to implement a Java application into a web page.

Example:

<APPLET CODE="myapplet">Click here to see Java applet.</APPLET>

Preview:

View COOL FEATURES to see Java applets.

Additional information:

To insert JavaScript into your web page you would use the <SCRIPT> tag.

<AREA> - Defines a section of an image that the user can click on. This allows you to have one image with multiple clickable links within it.

Example:

<AREA CORD="10,20,150,125" SHAPE=rect HREF="http://www.computerhope.com">. The CORD that is used in this example tells the computer where on the image the location for the link is when your mouse is over that CORD; then, if clicked, it will go to the
web page. The SHAPE tells the browser it is able to click and what type of shape the portion area is.

Example:

Additional information:

The 100,5,155,55 are telling the browser where the link is. 100 representing how far from the left you want the link to start. 5 representing how far from the top you want the link to start. 155 representing how far from the right you want the link to end. 55 representing how far from the bottom you want the link to end.

Preview:

On the below image, move your mouse over the O and notice how that is the only link on the image; clicking on that O would take you to our main page.

<B> - Tells the browser to display the text within the HTML tags to be bold.

Example:

<B>This text would be in bold</B>

Preview:

This text would be in bold

<BANNER> - HTML Tag used with HTML 3.0 used like scrolling but does not scroll with the rest of the HTML document.

Example:

<BANNER>Welcome to Computer Hope</BANNER>

<BASEFONT> - Tells the browser the new set for the font size can be 1 through 7. The default value is 3.

Example:

<BDO> - Tells the browser how to display the text; for example, using the DIR attribute you can make it go left to right using DIR=ltr Example:

<BDO DIR=rtl>Makes text go opposite way<bdo> this just causes the text to go right to left; this tag is usually used for international purpose.

Example:

<BDO DIR=ltr>This text would be going from the left to the right.</BDO>

Preview:

This text would be going from the left to the right.

<BGSOUND> - Allows you to play your music on your web page with Internet Explorer; will not work with people browsing with Netscape. You may also add the loop= statement to specify how many times you wish the sound to play.

Example:

Example:

<BIG> - HTML 3.0 tag that allows your text to be BIG.

Example:

<BIG>This text would be big.</BIG>

Preview:

This text would be big.

Example:

<BIG><BIG>This text would be bigger.</BIG></BIG>

Preview:

This text would be bigger.

<BLINK> - HTML tag that can be extraordinarily annoying when viewing a web page. Internet Explorer does not incorporate this tag, but still is available with Netscape Navigator.

Example:

<BLINK>This text would be blinking if compatible browser</BLINK>

Preview:

This text would be blinking if compatible browser.

<BLOCKQUOTE> - Command that allows you to indent your lines one inch from the left hand side. Instead of using this command to indent text or other objects we suggest using
CSS. See document CH001034 for
additional information and help.

Example:

<BLOCKQUOTE>This would be one tab from the left hand side of the page or the table cell it is in.</BLOCKQUOTE>

Preview:

This would be one tab from the left hand side of the page or the table cell it is in.

<BODY> - Command that should be located towards the top of your HTML code. This tag is used to specify the color of the text, the links, the background color and the background image.

Example:

background="back.gif" - This is telling the browser that you wish to have an image in the background. The page you are currently viewing is one image tiled down to create the appearance of a side column. If you
wish to create the same effect with your web page, you must remember to create this image at least 1040 pixels in length; this will allow your web page to be displayed properly with all resolutions up to 1024 x 768. A common mistake we have noticed is other web masters creating images at 640/650 pixels in length, which makes the image tiled when viewing web pages over 640 x 480. For additional information on video resolutions, see our Video Card Page.
bgcolor="#FFFFFF" - This specifies we wish to have a white background; while this is not necessary when having an image as a background, it generally creates a better transition for our page, considering it contains mostly white. #FFFFFF is the hexadecimal for the color white. In this tag you can also specify white instead of the hexadecimal value.
text="#000000" - This tells the browser to display all text black unless otherwise specified. #000000 is the hexadecimal for the color black. This
tag will also allow you to specify the color by spelling it out.
link="#000000" - Specifies that links on the page that have not been visited should be black. If this tag is not specified the default color will be used, which usually is a blue. #000000 is the hexadecimal for the color black. This tag will also allow you to specify the color by spelling it out.
vlink="#000000" - Specifies the color of the links that have been visited. If this tag is not specified the default color is generally purple. #000000 is the hexadecimal for the color black. This tag will also allow you to specify the color by spelling it out.
alink="#000000" - Specifies the color when the link is active; this is generally specified for newer browsers, old browsers under 3.x do not have any effect on this code. The active link only changes when clicked (this is not used to change the color when the mouse is moved over the link). #000000 is the hexadecimal for the color black. This
tag will also allow you to specify the color by spelling it out.
topmargin="0" - Tells the browser not to have a margin on the top of the browser window (this is generally a small white space on the top of the page. We have noticed that Netscape and older versions of Internet Explorer do not completely eliminate the margin even if the value is zero.
leftmargin="0" - Tells the browser not to have a margin on the left side of the browser window (this is generally a small white space on the top of the page. We have noticed that Netscape and older versions of Internet Explorer do not completely eliminate the margin even if the value is zero.

Preview:

The above example is the body tag we are currently using on this page.

<BR> - Tells the browser that this is the end of the line and to start a new one.

Example:

<BR>

Preview:

The <BR> HTML tag returns once (down one line), another applicable HTML tag is <P ALIGN="LEFT"> Paragraph here.</P> When this tag is used this will begin a new paragraph.

<CENTER> - Tells the web browser to center the text according to the page, table, or frame.

Example:

<CENTER>This text would center on the page.</CENTER>

Preview:

This text would center on the page.

<CITE> - Similar to the blockquote command this command enables you to cite text and displays itself in an italic font.

Example:

<CITE>This text is in italic and is a cite from somewhere else.</CITE>

Preview:

This text is in italic and is a cite from somewhere else.

<CODE> - Allows the user to specify code or a command that generates a different type of font to signify the code.

Example:

<CODE>dir - command used in DOS to list files.</CODE>

Preview:

dir - command used in DOS to list files.

<DEL> - Allows a user to delete text within an HTML document without actually removing it using a strike through.

Example:

This is an example of <del>removed</del> text.

Preview:

This is an example of ~~removed~~ text.

<DD> - Specifies to the browser that a definition is going to placed in the code. The browser will then indent the paragraph (x 2) and change the font of the characters.

Example:

<DD>Definition goes here.</DD>

Preview:

        Definition goes here.

<EM> - Tells the browser that this is important text and it will make it emphasized.

Example:

<EM>Computer Hope</EM>

Preview:

Computer Hope

<EMBED> - Used with Netscape Navigator, which implements a third-party file such as a movie or sound clip or some special embedded object on the web page. Example: <embed src="mydoc.dcr">

Example:

<FONT> - Allows you to have multiple fonts, colors and sizes.

Example 1:

<FONT size=+2>This text would be two times bigger.</FONT>

Example 2:

<FONT COLOR="BLUE">This text would be blue.</FONT>

Example 3:

<FONT COLOR="RED">This text would be
red.</FONT>

Example 4:

<FONT COLOR="YELLOW">This text would be yellow.</FONT>

Preview 1:

This text would be two times bigger.

Preview 2:

This text would be blue.

Preview 3:

This text would be red.

Preview 4:

This text would be yellow.

For more usable colors and information, see our HTML COLOR page

<FORM> - Allows you to obtain input from visitors; you can see an example of this by viewing the source in our e-mail page.

<FRAME> - Netscape HTML extension that allows you to use frames on the web page, being able to make bigger and smaller sections; each frame can contain different text.
You can also use the <FRAMESET command, which is a replacement for the regular body command.>

Example:

<H1> - <H6> - Tells the browser how big you want the text <H1> being the biggest and <H6> being the smallest. Note: Because Computer Hope is using CSS elements for the H1 tag not only will this text be big but it will have an underline in this example. Without the CSS it would just be big.

Example:

<H1>This text would be BIG.</H1>

Example:

<H6>This text needs spectacles to read.</H6>

Preview:

This text would be BIG.

Preview:

This text needs spectacles to read.

<HEAD> Allowing you to tell about the web page but this info will never be displayed when viewing unless the source is viewed, as well as the location to place your meta tags.

Example:

<HEAD><TITLE>Look at the top of the page how it says HTML HELP, specify the name you want the page to be.</TITLE></HEAD>

<HR> - Puts a normal bar across the screen to help separate the text.

Example 1:

<HR>

Example 2:

Example 3:

Preview 1:

Preview 2:

Preview 3:

<I> - Italicizes the text.

Example:

<I>Italic Text</I>

Preview:

Italic Text

<IMG> - Command used to display images on your web page.

Example:

Preview:

<INS> - Short for Insert, this tag is used to help illustrate what new text has been inserted into an HTML document. Useful for when multiple people are working on the same document.

Example:

This line of text has <INS>new</INS> inserted text.

Preview:

This line of text has new inserted text.

<ISIndex> - New command coming out with HTML 3.0
allowing you to search.

Example:

<LI> - Tells the browser that this is a list item, either putting a bullet in front of text or a number in front of the text, depending if <ul> or <ol> is used.

Example:

Example 2:

Preview:

Preview 2:

<MARQUEE> - Used with Microsoft Internet Explorer and other recent browsers to make your text scroll on the screen. This HTML tag does not work with any current versions of Netscape Navigator.

Example 1:

<MARQUEE BEHAVIOR="scroll" DIRECTION ="left">Computer Hope</MARQUEE>

Example 2:

<MARQUEE BEHAVIOR="scroll" DIRECTION ="right">Computer Hope</MARQUEE>

Example 3:

<MARQUEE BEHAVIOR="slide" DIRECTION ="left">Computer Hope</MARQUEE>

Example 4:

<MARQUEE BEHAVIOR="alternate" >Computer Hope</MARQUEE>

Example 5:

<MARQUEE BEHAVIOR="scroll" DIRECTION ="left" bgcolor="blue">Computer Hope</MARQUEE>

Example 6:

<font color ="green"><MARQUEE BEHAVIOR="scroll" DIRECTION ="right" >Computer
Hope</MARQUEE></font>

Example 7:

<font color ="white"><MARQUEE BEHAVIOR="scroll" DIRECTION ="right" bgcolor="red">Computer Hope</MARQUEE></font>

Preview 1:

Computer Hope

Preview 2:

Computer Hope

Preview 3:

Computer Hope

Preview 4:

Computer Hope

Preview 5:

Computer Hope

Preview 6:

Computer Hope

Preview 7:

Computer Hope

<META> - Allowing you to tell some search engines what to display for your page and keywords for your page.

Example 1:

Example 2:

Example 3:

Preview:

Preview not available due to the fact it needs to be in the body of this page.

See our meta tags definition for additional information and our promote page for information on getting your web page more
visible.

<NOBR> - Tells the browser that you want to continue the line with no breaking, preventing the line from getting cut of and returning to the next line.

Example:

<NOBR>This line would go on and not auto return so if the browser screen was not as long as the sentence you would have to scroll to see the remainder of the screen.</NOBR>

Preview:

This line would not wrap until you entered a break

<OL> - Tells the browser that this is a list item and to list it in numbering format.

Example:

Preview:

<OPTGROUP> - Add an option groups to a drop down list of items.

Example:

<select name="Example">
<optgroup label="First"></optgroup>
<option>Example one</option>
<optgroup label="Second"></optgroup>
<option>Example two</option>
</select>

Preview:

<P> - Tells the browser that this is the end of the paragraph and will not attempt to word wrap it.

Example:

<P>Location for the paragraph to begin and end.</P>

Preview:

Location for the paragraph to begin and end.

<PRE> - Tells the browser to do what you do as you type it so you can put text where you want it and have as many spaces as you want.

Example:

Preview:

The    Text  Can l  o  o  k  how you want it to    l  oo k.

<SAMP> - Will enclose the text as a sample, usually lower casing it and underlining it.

Example:

<SAMP>This would be small and plain.<SAMP>

Preview:

This would be small and plain.

<SELECT> - Select menu that allows their person viewing your web page to select from a menu.

Example:

<select name="List" size="1">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>

Preview:

<STRONG> - Putting the text bold.

Example:

<STRONG>This text would get your attention</STRONG>

Preview:

This text would get your attention

<SUB> - Subscript; makes the browser display text _low.

Example:

<SUB>This text would be below midway.<SUB>

Preview:

This text would be below midway

<SUP> - Superscript; makes the browser display text ^high.

Example:

<SUP>This text would be above midway.<SUP>

Preview:

^{This text would be above midway}

<TABLE> - Allows you to Align text in tables. You can see an example of this on our Support

page. How you do this is start with <Table> and if you want borders, just use the below commands.

Example:

<TABLE ALIGN="center" border=1 cols=5 width=20 cellpadding=5><tr><td>Computer Hope</td></tr></TABLE>

Preview:

Computer Hope

See table page for additional information and examples on tables.

<TD> - Used to define each cell part of the table. See table page for additional information and examples on tables.

Example:

<TEXT AREA> - Allows the user to input text.

Example:

Preview:

<TH> - This is what each cell on the table is using.You can make this contain as many cells as you need.

Example:

<TH VALIGN="middle" WIDTH=50>Table header</TH>

Preview:

Preview not available for the fact changes page layout.

<TITLE> - This is used to label the page that your on. For example, the name of this page is ONLINE HELP -HTML-, Usually shown at the top of your screen.

Example:

Preview:

Look on the top title bar, this is what the above would do.

<TR> - The start of each row in a table. See table page for additional information and examples on tables.

Example:

<TR><TD>Table contents</TD></TR>

<TT> - Tells the browser that the font needs to be evenly spaced to occupy the full line.

Example:

<TT>This would be displayed as teletype</TT>

Preview:

This would be displayed as teletype

<UL> - Starts a bulleted item list (puts a bullet in front of text).

Example:

Preview:

<XMP> - Tells the browser to do no formatting to this text, just to display as-is, no matter what the size of the screen is. Just like the <PRE> command.

Example:

Preview:

Put text in it s own area

Membuat Tombol Spoiler

2010-02-04T00:10:00.000-08:00

Diambil dari Diary Osi dan blog Seby-Antoe

Spoiler atau biasa disebut tombol otomatis banyak sekali manfaat yang bisa di ambil dari tombol spoiler tersebut. Fungsi spoiler pada blog, mempercantik penataan blog, menghemat tempat, mempersingkat loading blog.

Spoiler juga dapat di gunakan saat membuat posting video atau gambar dan lainnya, dengan maksud agar saat para pembaca yang ingin membaca artikel kita, tidak membutuhkan waktu yang lama untuk loading ke artikel tersebut.
Cara membuat Spoiler sangatlah mudah, anda tinggal copy dan paste kode spoiler di bawah ini.

Untuk mengatur warna rgb teks spoiler yang di inginkan silahkan ke Google

Untuk membuat spoiler teks tidak berkedip, anda tinggal hapus kode <blink> dan </blink> pada kode spoiler di atas.

Satu hal lagi yang sangat perlu anda perhatikan, jangan lupa untuk mengganti teks
" J U D U L S P O I L E R " sesuai dengan yang anda inginkan

Oh yaaa..... satu hal lagi yang sangat mutlak dan wajib adalah, jangan lupa di save setelah selesai bikin spoiler.

Membuat Menu Auto-Hide ( Spoiler )

Cara untuk membuatnya adalah :

1. Login to Blogger kemudian pilih "Layout"

2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah).

3. Copy Paste Script yang ada di bawah ini :

Keterangan :

+ Tulisan yang berwarna merah bisa Anda ganti sesuai keinginan.
+ Yang berwarna hijau adalah tempat untuk meletakkan konten / script widget Anda.
4. Klik Simpan dan selesai.
Selamat mencoba dan semoga bermanfaat ...

Memposting Kode HTML Pada Artikel 1

2010-02-03T23:35:00.000-08:00

Artikel ini dicopas dari blog Bang Del

Bagaimana cara menampilkan link dalam posting. Mirip dengan cara menampilkan kode HTML pada posting. Untuk menampilkan link maka sebaiknya memahami terlebih dahulu tentang kode HTML. Bagaimana menampilkan kode HTML pada posting blog? Untuk menulisnya dapat dilakukan dengan mengganti karakter yang mau ditulis di posting dengan notasi tertentu. Dapat dilakukan secara manual atau dengan bantuan software tertentu dan layanan situs menulis kode html. Nah, kalau manual berarti harus mengetik sendiri notasi yang mau ditulis. Karakter kode html yang umum digunakan adalah seperti pada tabel di bawah ini:

Karakter	Notasi	No. Kode	Keterangan
<	<	<	Tanda Lebih Kecil Dari
>	>	>;	Tanda Lebih Besar Dari
«	«	«	Kurung Terbuka Ganda
»	»	»	Kurung Tertutup Ganda
&	&	&	Tanda Dan
"	"	"	Tanda Petik Ganda
±	±	±	Tanda Plus Minus
Space			Tanda Spasi
™	™		Tanda Trademark
©	©	©	Tanda Hak Cipta
®	®	®	Tanda Registered

Masih banyak karakter atau simbol lain yang bisa ditampilkan pada posting blog dengan notasi html khusus. Misalnya kode html untuk simbol yang biasa digunakan ilmu matematika, html untuk simbol mata uang dan html simbol editing huruf, garis dan simbol unik lainnya. Menampilkan kode html pada posting bisa dilakukan dengan menulis seperti teks biasa atau dengan cara menampilkan kode html pada text area. Agar lebih mudah saya berikan contoh berikut:

Menulis kode HTML pada posting seperti teks biasa

Contoh kalimat yang akan anda tulis berada di sini dan kode html ditulis di bawahnya.
<meta equiv="Content-Type" content="text/html; charset=win 1252">
</meta>

Sekarang bagaimana cara menulis kalimat dan kode html tersebut agar dapat tampil di posting blog? Kalau kalimatnya cukup diketik seperti biasa. Sedangkan untuk kode html-nya dapat dibuat seperti ini.

Contoh kalimat yang akan anda tulis berada di sini dan kode html ditulis di bawahnya.
<code>
<meta equiv="Content-Type" content="text/html; charset=win 1252">
</meta>
</code>

Penambahan atribut <code> dan </code> adalah perintah yang menandakan anda sedang menulis kode html sehingga yang tampil di podting adalah kode tersebut. Penting, saat menulis kode html pilih Edit HTML jangan pilih Tulis atau Compose.

Menulis Kode HTML dengan Text Area
Sekilas tentang text area. Apakah text area itu? Contoh text area dapat dilihat di halaman tukaran link. Text area bisa juga digunakan untuk membuat form seperti form berlangganan, search box dan masih banyak lagi. Dapat diartikan, text area adalah tempat menyimpan tulisan berupa teks. Banyak yang menggunakan text area untuk menyimpan kode html atau teks lain yang dapat di copy pengguna lain. Nah, untuk menulis kode tadi dalam text area bisa dilakukan seperti di bawah ini:

Contoh kalimat yang akan anda tulis berada di sini dan kode html ditulis di bawahnya.

Maka hasil yang tampil di blog adalah seperti ini:

Contoh kalimat yang akan anda tulis berada di sini dan kode html ditulis di bawahnya.

Kode yang warna merah adalah kode membuat text area. Sekali lagi sebagai pengingat, gunakan Edit HTML pada saat mengetik posting. Mudah-mudahan cara menulis dan menampilkan kode HTML pada posting dapat membantu. Dicoba-coba saja dulu, kalau salah ya diulangi lagi. Pasti bisa koq.

Cara yang lebih gampang dimengerti dari Kang Rohman adalah dengan menggunakan text area. Cara membuat text area secara lengkap silahkan klik di sini. Sebagai contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<p align="left"><textarea name="code" rows="1" cols="55"><meta http-equiv="refresh" content="10">
</meta></textarea></p>

Maka yang akan tampil di blog anda adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

Untuk memposting seperti yang saya jelaskan dia atas, anda harus pada posisi Edit HTML jangan pada posisi compose. Oke kawan, untuk yang kedua kalinya...selamat mencoba.

Atau kalu masih susah juga dengan cara diatas maka langsung saja kunjungi disini dan parse kode HTML yang mau diposting, dan copy hasil encode tersebut kemudian paste pada halaman posting blog anda.
http://www.blogcrowds.com/resources/parse_html.php
http://www.centricle.com/tools/html-entities

Sahabat Blogger

Membuat Meta BlogCatalog

Lalu dimana Meta nya?

Membuat Meta y_key pada Yahoo Add My Site

Apakah anda sudah mempunyai meta y_key?

Tentang SEO

SEO (Search Engine Optimization)

Mendaftarkan Blog di Google

SEO Properties

Meta Title, Description dan Keyword di Blogger

Memasang Symbol Emotion pada postingan

Kode Warna HTML 2

Memasang Google Page Rank Checker

Memasang Read More

Memasang Hide Show Navigation

Cara pasang Auto Read More terbaru

Membuat Meta Keyword Yang Dinamis

Mengukur Berat Loading Blog

Mempercepat Login Blog 1

Mempercepat Login Blog 2

Memposting Kode HTML Pada Artikel 2

Teks Berjalan di Menu Bar

Memasang Label Cloud Pada Blogger

Cara Membuat Daftar Isi secara Manual

PENTING

Page Peel Efek menggunakan jQuery & CSS

Membuat Tampilan Halaman Secara Scroll

Menggunakan Format Khusus di Facebook

Judul 1

Judul 2

Judul 3

Cara Membuat Kotak Iklan

Kode Warna HTML 1

HTML code and web design help

This text would be BIG.

This text needs spectacles to read.

Membuat Tombol Spoiler

Memposting Kode HTML Pada Artikel 1