galongkong

ukuran foto untuk posting blog

2016-04-22T01:19:00.001+08:00

Cara Menambahkan foto, gambar, ilustrasi, atau image SEO Friendly di Posting Blog.

ukuran foto

Kebanyakan blogger pemula "asal" upload foto, image, atau gambar tanpa edit dulu. Foto hasil jepretan kamera, langsung diupload tanpa diedit dulu.

Akibatnya, tampilan foto jadi error dan loading blog "dipastikan" lelet banget! Slow loading! Jadi, bagaimana Ukuran Foto yang Benar untuk Blog/Website?

Ukuran foto yang benar dan terbaik untuk blog/website adalah menyesuaikan dengan ukuran foto yang akan atau bisa muncul postingan atau di blog. Jika "lahan" foto ukurannya 600x600 pixel, misalnya, maka ukuran foto/gambar/image yang terbaik adalah 600x600 pixel.

Setidaknya, itulah yang dikatakan Insquare Media dalam postingnya tentang ukuran image yang benar untuk website.

Unless there's a reason that visitors to your website need access to a full sized image, the image you upload should be somewhere close to the size it's going to be displayed on screen - if I want an image to be the width of this article, 600px (pixels) wide will be about right, so that's what I upload.

Kecuali ada alasan bahwa pengunjung website Anda memerlukan akses ke image ukuran penuh, image yang Anda upload mestinya sama atau mendekati ukuran yang akan muncul di layar. Jika Anda akan menampilkannya seukuran 600 px (pixel), maka gambar yang diupload juga harus seukuran itu.

O iya, untuk blogger, ada ukuran maksimum lho! Ukuran foto maksimum untuk blogger yaitu 1.600 pixel. Tapi yang tampil di blog/layar tentu tidak sebesar itu. Wong text area blog rata-rata cuma 600-an pixel kok! kalaupun FULL, paling di kisaran 1600 pixel itu atau selebar layar monitor.

Cara Edit Foto Untuk Blog

Banyak cara dan software untuk edit foto/gambar sebelum diupload ke blog. Salah satunya yang disediakan MS Office, yaitu Microsoft Office Picture Manager.

Coba buka folder foto Anda, lalu klik kanan, dan pilih "Open With Microsoft Office Picture Manager". Akan muncul "penampakan" seperti ini:

Klik Edit Picture > Size. Maka akan muncul pilihan ukuran otomatis di kiri atas monitor. Di sana kita dikasih tau ukuran foto untuk web/blog itu ada dua macam: 640 pixel dan 448 pixel. Nah, pake itu saja!

Tapi kalo yang mau dimunculkan hanya 300 pixel, maka ubah saja ukuran fotonya menjadi 300 pixel, tidak kurang tidak lebih!

Judul dan Teks Alternatif

Satu hal lagi, setelah ukuran foto diedit, edit pula nama file fotonya. Yang tadinya IMG.JPG atau DSCN.IMG misalnya, ubah menjadi --misalnya-- pemandangan.jpg atau menulis.jpg, sesuai dengan keadaan foto dan relevan dengan judul, topik, atau kata kunci postingan blog.

Selain itu, setelah upload, jangan lupa "klik" foto yang sudah diupload, lalu klik "Properties". Isi tuh kolom "title" dan "alt text". Anda bisa mengisinya dengan copas judul posting. Good luck!

Cara Optimisasi Gambar untuk SEO Blog

2016-04-22T01:09:00.002+08:00

Cara Optimisasi Gambar untuk SEO Blog

Cara Membuat Gambar (Image) Posting Blog Agar SEO Friendly. Isi "Image Properties" Secara Manual!

MENYERTAKAN gambar (image) berupa foto atau ilustrasi dalam posting blog lazim dilakukan oleh para blogger. Namun, tidak semua blogger melakukan optimisasi gambar (image optimization) yang mereka upload itu untuk kepentingan SEO blog.

Optimisasi gambar merupakan salah satu Optimisasi Onpage (Onpage Optimization) dalam SEO Blog. Optimisasi Onpage sendiri merupakan pilar SEO Blog guna menaikkan traffic atau pengunjung blog.

Berikut ini 5 Cara Optimisasi Gambar untuk SEO Blog yang CONTOH BLOG sadur dari laman Shout Me Loud. Posting ini guna "melengkapi" posting sebelumnya tentang Ukuran Foto yang Benar untuk Blog.

1. Gambar yang Relevan (Image Relevance)

Gambar (foto/ilustrasi) yang kita upload untuk mempercantik sekaligus memperkuat posting hendaknya gambar yang relevan dengan topik atau isi tulisan. Posting tentang HandPhone, misalnya, jangan malah dikasih ilustrasi gambar perempuan cantik, kecuali sang cewek memegang HP :)

2. Tag Alternatif (Alt Tag)

Tag alternatif adalah teks "alternate text" yang akan muncul cursor diarahkan kepada gambar dan/atau muncul ketika gambar tidak muncul di layar monitor user. Alt tag juga akan muncul duluan jika loading gambar lambat.

Alt tag ini juga akan memberi informasi kepada mesin pencari bahwa ada gambar di sana. Jika gambar tidak muncul karena satu atau lain hal, mesin pencari akan tetap mengindeksnya berkat adanya alt tag ini.

Ilustrasi gambar di posting ini, misalnya, diberi Alt Tag "gambar untuk seo blog" dengan Title "Image Properties Blog".

Cara membuat Alt Tag gambar di blog blogspot: setelah gambar diupload, klik gambarnya sekali, lalu klik menu "properties" dan akan muncul dua kolom "Title Text" (judul gambar) dan "Alt Text" (teks gambar). Silakan isi dengan judul dan teks alternatif yang relevan dengan tulisan.

3. Ukuran Gambar (Image Size)

Ukuran gambar sangat penting untuk SEO, yakni menyangkut loading atau kecepatan tampilan blog. CB sudah membahasnya di posting Ukuran Foto yang Benar untuk Blog. Ukuran gambar bisa mempengaruhi ranking SEO.

Selain itu, lokasi hosting gambar juga turut menentukan. Yang terbaik, gambar diupload sendiri, bukan dengan URL link.

4. Nama File (File name)

Seperti halnya kata kunci yang penting ada di url (permalink), kata kunci juga penting ada di gambar. Jadi, berilah nama bagi file gambar Anda. Nama file gambar sebaiknya relevan dengan posting dan mengandung kata kunci.

Jika file gambar (foto) asli Anda bernama DSC0001.jpg misalnya, ubah menjadi, misalnya lagi, "steve-jobs-on-the-launching-of-iphone.jpg". Kata-kata kunci dipisahkan dengan hypen atau tanda strip (-).

5. Tag Judul dan Tautan Gambar (Title Tag and image linking)

Selain diberi nama file, gambar juga sebaiknya diberi judul (Title Tag), seperti sudah disediakan kolomnya oleh blogger. Gunakan kata kunci yang relevan. Soal tautan gambar sudah diatur oleh Blogger. Poin Image Linking berlaku untuk blog Wordpress.

UPDATE !!!
Memasang KODE OTOMATIS Title & Alt Text Image Properties
Ada pertanyaan di komentar: "kalo biar titlenya terisi otomatis sesuai judul artikel gimana gan...? biar gak capek ngisi setiap mosting. ane sering lupa isi soalanya".

Jawabannya, pasang kode/script, namun SANGAT TIDAK DISARANKAN karena tetap saja tidak menambah seo gambar. Di Chkme, jika ada satu gambar tanpa title & alt text, meskipun sudah menggunakan kode otomatis, maka skor seonya bekurang 95%.

Kode otomatis title & alt text dimaksud adalah di bawah ini, disimpan di atas kode</body>

Demikian Cara Optimisasi Gambar untuk SEO Blog. Good Luck & Happy Blogging!

THANKS

Cara Membuat Template Blog SEO Friendly

2016-04-22T01:03:00.004+08:00

Cara Membuat Template Blog SEO Friendly

Membuat Template Blog Jadi SEO Friendly. Sobat Blogger, Jika anda seorangg blogger maka sudah pasti pekerjaan anda adalah menulis artikel untuk pembaca bagi pengunjung blog anda, dan tentu saja anda harus membuat konten yang berkualitas untuk bisa dinikmati pembaca dan blog anda bisa di cintai pengunjung, nah..kalo anda ada dalam kriteria itu , berati itu sangat bagus untuk kemajuan blog anda, tapi... loh ko tapi sih ? ya apakah search engine juga menyukai blog anda? apakah template blog anda sudah SEO Friendly?

Ya Template Blog Anda Harus SEO Friendly!

Kenapa, karena dengan template yang SEO friendly anda dapat meningkatkan seo blog anda. dan bisa disukai search engine dengan struktur template anda yang tersusun rapi sebagai kriteria template SEO.

seperti yang kita tahu langkah untuk menarik perhatian search engine adalah dengan konten yang baik dan template yang SEO friendly

Untuk itu bagi anda membuat template yang SEO adalah suatu keharusan untuk proses kemajuan blog anda,masih banyak faktor yang kita perlu tingkatkan dalam rangka kemajuan blog anda dan di sukai search engine, ya salah satu faktor dan hal yang paling penting adalah template yang SEO friendly di mata search engine,untuk menenentukan masa depan blog anda.

Lanjut.....................

Sekarang jika anda tidak tahu bahwa bagaimana membuat template blogger anda bisa seo friendly maka saya akan menjelaskan kepada anda proses lengkap untuk membuat template yang seo friendly dengan yang saya pelajari dari sumber-sumber yang memang master dalam hal seo.

upsss ....

Catatan: Sebelum melakukan perubahan pada template anda, anda harus membackup template anda jika anda melakukan kesalahan dalam tutorial ini, maka gampang untuk di kembalikan ke semula.

Menambahkan Meta Deskripsi dan Keyword Pada Template Anda.

Meta deskripsi dan keyword adalah hal yang paling penting untuk meningkatkan seo blog anda, jika template anda belum terpasang meta deskripsi dan keyword, maka saya akan menjelaskan bagaimana anda harus melakukan pemasang meta deskripsi dan keyword ini, jika template anda di buat oleh orang yang memang hanya membuat template saja tanpa memasang meta tag ini, maka disini anda yang harus melakukannya, sekarang.

1. Masuk Ke akun Blogger anda.

2. Pilih Menu Template > Klik Edit Html > Cari Kode <head> (gunakan Ctrl+F)

3. Jika sudah ketemu, Copy kode di bawah ini dan letakan tepat di bawah kode <head>

<meta content=’text/html; charset=utf-8′ http-equiv=’Content-Type’/>
<meta content=’Isi Deskripsi Blog Anda‘ name=’description’/>
<meta content=’Isi Keyword Blog Anda‘ name=’keywords’/>

4. Ganti "Isi Deskripsi Blog Anda" dengan deskripsi situs blog anda maksimal 160 karakter.

Ganti "Isi Keyword Blog Anda" Dengan keyword situs blog anda.10-15 kata kunci atau keyword.

5. Klik save template. :D

Menggunakan Tag H2 Untuk Judul Posting.

Menggunakan tag H2 adalah keharusan untuk optimasi search engine yang lebih baik, biasanya di template default blogger, tag H3 digunakan secara default dalam judul posting. Jadi kita perlu memperbaikinya.

1. Masuk Ke akun Blogger anda.

2. Pilih Menu Template > Klik Edit Html.

3. Sekarang cari kode dibawah ini pada template anda.

<h3 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

4. Setelah anda menemukan kode yang mirip seperti di atas, ganti kode berikut dengan kode dibawah ini.

<h2 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>

5. Klik save template. :D

Mengoptimalkan Judul Posting Atau Title Tag

Pernahkah anda perhatikan atau meilhat pada saat anda melakukan pencarian menunjukan dimana JUDUL BLOG di awal dan JUDUL posting di belakang seperti contoh gambar dibawah.

Jika dalam search engine blog anda menunjukan pada hal kedua maka, itu tidak baik untuk seo blog anda, karena berarti ini menunjukan kata kunci yang di targetkan menunjukan di akhir bukan di awal. untuk mengoptimalkannya.

1. Masuk Ke akun Blogger anda.

2. Pilih Menu Template > Klik Edit Html.
3. Cari kode yang ada di bawah ini.

<title> <data: blog.pageTitle /> </ title>

4. ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | BEBERAPA KATA DESKRIPSI</title>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<title>Posts in:<data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found | <data:blog.pageTitle/></title>
</b:if>
</b:if>

5. Ganti "BEBERAPA KATA DESKRIPSI" dengan deskripsi singkat sesuai situs blog anda.

6. Klik save template anda. :D

Selesai, disini adalah tutorial bagaimana membuat template anda menjadi bisa lebih seo friendly dengan menambahkan meta deskrisi dan keyword, menggunakan tag h2 untuk judul posting, dan mengoptimalkan judul posting.

Sekian and......

Cara Membuat Blog

2016-04-22T00:41:00.001+08:00

Cara Membuat Blog di Blogger

Baiklah, kita mulai saja panduan cara membuat blog di blogger/blogspot yang dilengkapi dengan "sedikit" tips SEO Blog-nya ini.

Tidak Perlu Email
Membuat blog di blogspot TIDAK MEMERLUKAN EMAIL karena pada dasarnya begitu SIGN UP Anda membuat email juga, yaitu email di gmail (Google Mail).

Makanya, yang sudah punya email di gmail, blognya tinggal bikin aja! Klik menu "More" dan pilih "Blogger", atau buka Tab baru dan ketik www.blogger.com.

TAHAPAN MEMBUAT BLOG
Ini dia langkah membuat blog di blogger/blogspot:
1. Buka www.blogger.com atau www.blogspot.com.
2. Klik tombol SIGN UP di sudut kanan.

3. Akan muncul halaman "Create your Google Account". Isi deh tuh "formulir" yang tersedia.
4. Jangan lupa centang "I Agree to Google Term of Service and Privacy Policy"
5. Klik "Next step".
6. Akan muncul halaman bertuliskan "Welcome!
Your new email address is namaemailanda@gmail.com

Ini artinya, Anda sudah membuat email di Gmail (punya email baru di Gmail) dengan password yang Anda isikan di "formulir" sebelumnya. Simpan tuh password di tempat paling aman.

7. Klik "Back to blogger".
8. Akan muncul halaman "Selamat di Datang di Blogger" atau "Welcome to Blogger".

Di sudut kanan atas, ada pilihan bahasa. Pilih bahasa yang Anda kehendaki. Bisa Bahasa Indonesia, bisa juga Bahasa Inggris. Kita pilih "Bahasa Indonesia" >Indonesian (Bahasa Indonesia).

9. Di bagian "Konfirmasikan Profil Anda", ada dua pilihan membuat profil, di Google Plus atau profil Blogger. Pilih aja "Profil Blogger" dengan nge-klik "Buat profil terbatas".

10. Isi deh kolom yang tersedia, yaitu "Nama Tampilan".

Di sini Anda bisa menentukan nama tampilan Anda sebagai blogger, misalnya nama Anda sendiri atau nama lain. Kayak di Facebook atau di Twitter gitu lho....!

11. Setelah diisi, klik "Lanjutkan ke blogger".
12. Maka... tampillah halaman Blogger Anda dengan nama "Blog <Profil Blogger/Nama Tampilan>".

13. Klik tombol "Blog baru" yang ada di samping kanan, bersebalahan dengan teks "Ciptakan blog Anda. Anda belum punya blog apa pun, buat satu sekarang juga dan mulai tulis pos Anda!"

14. Setelah diklik "Blog baru", akan muncul "formulir" pembuatan blog: "Daftar Blog › Buat blog baru"

15. Isilah kolom yang tersedia, yaitu Judul (nama blog Anda) dan Alamat (yaitu alamat URL blog Anda).

Usahakan Judul (nama blog) relevan dengan Alamat URL. Misalnya, Judul: Contoh Blog. Alamat URL: contohblognih.blogspot.com. Judul dan alamat blog yang selaras akan membuat blog cepat terindeks Google dan cepat populer. Istilahnya: akan SEO (Search Engine Optimization) banget!

16. Pilih salah satu template yang Anda sukai, misalnya Template "Sederhana" (Simple). Klik templatenya!
17. Klik tombol "Buat blog" (Create blog) dan.....
18. Akan muncullah... "Blog Anda telah dibuat!" dan terbukalah ini....

Cara membuat blog tahap awal sudah SELESAI. Anda sudah punya blog! Selamat! Happy blogging...!!!

Start Posting! Langkah Setelah Membuat Blog

19. Mulailah menulis posting (tulisan) di blog Anda yang baru saja dibuat. Caranya, klik teks "Mulai mengeposkan" atau tombol warna orange berlogo pena.

Tombol itu pula yang harus Anda klik setiap kali akan menulis posting baru.

20. Setelah tombol "warna orange berlogo pena" yang artinya "buat entri baru", maka akan muncul halaman untuk membuat posting/tulisan.

21. Isi "Judul Pos" dengan judul tulisan Anda.
22. Klik kolom gede yang ada di bawahnya, yaitu kolom naskah. Isilah, tuliskan posting Anda di sana.

Jika tulisan Anda sudah disiapkan di file MS Word, sebaiknya jangan langsung Copy-Paste (Copas), apalagi kalau ada bagan atau gambar. Copy Paste dulu ke NOTEPAD, lalu atur spasi antarparagrafnya dengan ENTER di setiap ujung paragraf. Ingat! Tulisan di blog tidak mengenal "tekuk ke dalam" (indent).

Tips SEO: Sebaiknya, posting pertama Anda berupa "Basic Article". Apa itu basic article, silakan baca Posting Pertama Blog yang Sering Dilupakan.

CATATAN:
Jangan lupa, isi kolom Label di sebelah kanan. Itu untuk membuat kategori tulisan. Jika dikosongkan, maka akan menjadi "unlabelled" atau "uncategorized" yang gak bagus buatSEO Blog.

Menambahkan Foto/Gambar di Posting Blog

23. Kalo sudah, dan mau memasukkan foto, klikkan cursor mouse Anda di depan huruf pertama naskah posting, di bagian paling kiri, ujung kiri, naskah yang baru saja Anda tulis.

24. Klik tombol kota bergambar latar belakang biru (di samping kanan teks Link).

Akan muncul halaman pop-up "Pilih file" atau "Choose files". Klik "Choose files" dan silakan klik foto/gambar yang ada di folder komputer Anda, dan klik "Open".

25. Klik "Add selected", maka foto akan masuk ke naskah.

26. Klik sekali foto yang sudah ada di naskah!

Di bagian bawah foto akan muncul menu kecil-kecil, yaitu ukuran foto yang akan ditampilkan (small - medium - large - X large -original size) dan posisi foto (left - center - right).

27. Juga ada "Add caption" (untuk menuliskan keterangan foto) dan "Properties".

28. Pilih "Small" atau "Medium"!

29. Klik "Propertis" dan isi "title text" (nama foto) dan "alt text" (alternative text). Selaraskan nama foto dan alt text dengan judul dan isi postingan (tulisan) Anda, lalu Klik "OK".

Deskripsi gambar (title & alt) ini WAJIB diisi. Jika tidak, gambar tidak seo friendly dan skor seo blog Anda akan berkurang...langsung dicoba...

Cara Membuat Gambar Slider di Blog

2016-04-21T01:17:00.001+08:00

Cara Membuat Gambar Slider di Blog

Berikut adalah kodenya

Kode warna

2016-04-20T01:34:00.003+08:00

Daftar Kode Warna HTML untuk mempercantik tampilan blog. HTML Color Codes for Blog.

#FOF8FF
Aliceblue

#FAEBD7
Antiquewhite

#00FFFF
Aqua

#7FFFD4
Aquamarine

#F0FFFF
Azure

#F5F5DC
Beige

#FFE4C4
Bisque

#000000
Black

#FFEBCD
Blanchedalmond

#0000FF
Blue

#8A2BE2
Blueviolet

#A52A2A
Brown

#DEB887
Burlywood

#5F9EAD
Cadetblue

#7FFF00
Chartreuse

#D2691E
Chocolate

#FF7F50
Coral

#64950
Cornflowerblue

#FFF8DC
Cornsilk

#DC143C
Crimson

#00FFFF
Cyan

#00008B
Darkblue

#008B8B
Darkcyan

#B8860B
Darkgoldenrod

#A9A9A9
Darkgray

#006400
Darkgreen

#8B008B
Darkmagenta

#BDB76B
Darkkhaki

#556B2F
Darkolivegreen

#FF8C00
Darkorange

#9932CC
Darkorchid

#8B0000
Darkred

#E9967A
Darksalmon

#8FBC8B
Darkseagreen

#483D8B
Darkslateblue

#2F4F4F
Darkslategray

#00CED1
Darkturquoise

#9400D3
Darkviolet

#FF1493
Deeppink

#00BFFF
Deepskyblue

#696969
Dimgray

#1E90FF
Dodgerblue

#B22222
Firebrick

#FFFAF0
Floralwhite

#228B22
Forestgreen

#FF00FF
Fuchsia

#DCDCDC
Gainsboro

#F8F8FF
Ghostwhite

#FFD700
Gold

#DAA520
Goldenrod

#808080
Gray

#008000
Green

#ADFF2F
Greenyellow

#F0FFF0
Honeydew

#FF69B4
Hotpink

#CD5C5C
Indianred

#4B0082
Indigo

#FFFFF0
Ivory

#F0E68C
Khaki

#E6E6FA
Lavender

#FFF0F5
Lavenderblush

#7CFC00
Lawngreen

#FFFACD
Lemonchiffon

#ADE8E6
Lightblue

#F08080
Lightcoral

#E0FFFF
Lightcyan

#FAFAD2
Lightgoldenrodyellow

#90EE90
Lightgreen

#D3D3D3
Lightgray

#FFB6C1
Lightpink

#FFA072
Lightsalmon

#20B2AA
Lightseagreen

#87CEFA
Lightskyblue

#778899
Lightslategray

#B0C4DE
Lightsteelblue

#FFFFE0
Lightyellow

#00FF00
Lime

#32CD32
Limegreen

#FAF0E6
Linen

#FF00FF
Magenta

#800000
Maroon

#66CDAA
Mediumaquamarine

#0000CD
Mediumblue

#BA55D3
Mediumorchid

#9370DB
Mediumpurple

#3CB371
Mediumseagreen

#7B68EE
Mediumslateblue

#00FA9A
Mediumspringgreen

#48D1CC
Mediumturquoise

#C71585
Mediumvioletred

#191970
Midnightblue

#F5FFFA
Mintcream

#FFE4E1
Mistyrose

#FFE4E1
Moccasin

#FFDEAD
Navajowhite

#000080
Navy

#FDF5E6
Oldlace

#808000
Olive

#6B8E23
Olivedrab

#FFA500
Orange

#FF100%0
Orangered

#DA70D6
Orchid

#EEE8AA
Palegoldenrod

#98FB98
Palgreen

#AFEEEE
Paleturquoise

#DB7093
Palevioletred

#FFEFD5
Papayawhip

#FFDAB9
Peachpuff

#CD853F
Peru

#FFC0CB
Pink

#DDA0DD
Plum

#B0E0E6
Powderblue

#800080
Purple

#FF0000
Red

#BC8F8F
Rosybrown

#4169E1
Royalblue

#8B4513
Saddlebrown

#FA8072
Salmon

#F4A460
Sandybrown

#2E8B57
Seagreen

#FFF5EE
Seashell

#A0522D
Sienna

#C0C0C0
Silver

#87CEEB
Skyblue

#708090
Slategray

#FFFAFA
Snow

#00FF7F
Springgreen

#4682B4
Steelblue

#D2B48C
Tan

#008080
Teal

#D8BFD8
Thistle

#FF6347
Tomato

#40E0D0
Turquoise

#EE82EE
Violet

#F5DEB3
Wheat

#FFFFFF
White

#F5F5F5
Whitesmoke

#FFFF00
Yellow

#9ACD32
Yellowgreen

Memasang kode Warna

2016-04-20T01:33:00.000+08:00

Home » Kode Warna HTML

KODE warna HTML adalah sebuah kode warna yang digunakan untuk membuat sebuah warna pada pembuatan script HTML.

Kode Warna HTML ini digunakan untuk warna tampilan, garis, latar belakang (background), warna huruf, warga garis, warna kotak, dan sebagainya.

Hindari penggunaan warna terang yang menyilaukan, seperti merah atau orange, kecuali untuk elemen tertentu yang kecil seperti "button" atau "menu". Warna yang ramah pengguna (user friendly) adalah biru, hitam, hijau, dan warna gelap lain.

Baca juga tips memilih warna yang baik dan "benar" untuk warna huruf, link, dan warna dominan di blog. (Panduan Warna dalam Desain Blog)

Di bawah ini ada tiga tools untuk memilih Kode Warna HTML.

Klik warna yang dikehendaki!
Akan muncul pilihan warna dan kodenya
Kode warna HTML Lainnya (Biar Lebih Mudah)

CARA MENGINTIP KODE WARNA BLOG

Jika Anda ingin mengetahui kode warna di blog Anda, atau ingin meniru warna yang ada di sebuah blog atau website lain, caranya:

1. Arahkan cursor ke warna elemen yang akan dilihat

2. Klik kanan dan pilih "Inspect Element"

3. Akan tampak kode warna HTML-nya yang diawali kode pagar (#).

cara mempercepat loading blog

2016-04-19T05:32:00.001+08:00

Membuat loading blog menjadi cepat

Kecepatan loading sesuatu blog amat berpengaruh pada pencarian melalui sesuatu search engine.Blog yang mempunyai banyak gambar akan melambatkan lagi proses loading sesuatu blog.Bagi mengatasi masaalah ini,kod skrip boleh dimasukkan bagi mempercepatkan loading blog

Cara membuatnya:
1.masuk ke dashboard blogger
2.Klik template dan pilih edit html
3.Cari kod </head> dan masukkan kod dibawah ini diatasnya:

4.Kemudian simpan template anda

widget recent comment

2016-03-30T05:54:00.001+08:00

Cara membuat widget recent comment

Widget recent comment adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget recent comment ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya.

Dan tentu saja, Agan juga dapat mengubah avatar defaultnya, menambahkan scroll dll.

Bagaimana cara membuat widget recent comment dilengkapi dengan avatar dan isi komentarnya, silahkan ikuti petunjuk dibawah ini.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript

3. Masukkan semua kode dibawah ini:

4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-http://cropozproject.blogspot.co.id/) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog untuk melihat hasilnya.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.

andipa resort galongkong

2016-03-05T02:24:00.002+08:00

type emerald

hunian exlusive modern dalam kota palopo.

graha permata mungkajang

2016-02-17T16:20:00.000+08:00

Kapan kiamat

2013-09-03T03:41:00.004+08:00

disain baju cropoz

cropoz

LOGO CROPOZ

2013-07-26T21:40:00.001+08:00

CROPOZ PROJECT

Membuat daftar isi slide

2013-01-19T12:58:00.000+08:00

Mungkin Anda tertarik membuat Daftar Isi Artikel yang anda posting ditampilkan secara slide in pada halaman layout anda.

Anda bisa menampilkan semua postingan anda, tanggal publish dan sekelumit informasi tentang artikel.

Untuk membuat Daftar isi Slide In Page, tidak terlalu sulit. Cukup menggunakan javascript. Dibawah ini adalah tag-tag scriptnya:

Langkah Pertama:

1. Login blog sobat
2. masuk ke Tata Letak >> Edit html
3. kemuadian sebelum tag </head> anda ketikkan script berikut

Lalu Tekan Simpan (Save)
Setelah itu :

1. Login blog sobat
2. Rancangan >> Elemen halaman >> tambah Gadget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini :

Selamat mencoba…

membuat translator pada blog

2013-01-16T21:57:00.001+08:00

bagi sobat blogger yang ingin memasang bendera translate diblog.Tips ini cocok untuk mempercantik blog dengan pemasangan bendera translate di blog,kegunaan dari translator ini utk menerjemahkan artikel dalam blog kita agar bisa di baca oleh pengunjung blog yang berbeda negara agar mereka juga bisa membaca isi blog kita.Selain juga sebagai salah satu cara utk mempercantik blog.
caranya sangat mudah tinggal copy paste code HTML translate flag ;Ikuti petunjuk pemasangan flag translator ke blog sobat ;

1-log in ke account blogger anda.
2-Klik lay out---->add new gadget---->Add HTML/JAVA SCRIPT.
3-Copy pastekan kode HTML dibawah ini;

Pengertian jQuery

2013-01-13T11:11:00.003+08:00

Sekarang kita menggunakan JQUERY sama halnya seperti yang lain, maka berikut ini adalah beberapa script fungsi JQuery yang sangat penting dan akan sering anda gunakan.

contoh lain

1. Script JQuery Merubah Properti CSS Script jquery berikut ini berfungsi merubah properti css ke dalam nilai yang anda tentukan.

//--- CHANGE AN ELEMENT'S CSS PROPERTY ---//
$("#DivID").css("background-color", "#000");
$("#DivID").css("border", "solid 2px #ff0000");

2 Script JQuery Toggle Menampilkan dan Menyembunyikan Elemen Script jquery toggle ini berfungsi menampilkan dan menyembunyikan elemen nilai html

//--- JQUERY TOGGLE/SHOW/HIDE ---//
// toggle hide/show of an element
$("#DivID").toggle(1000);
// do something when animation is complete
$("#DivID").toggle(1000, function () {
    alert("Toggle Complete");
});
// hide an element
$("#DivID").hide(1000);

// do something when animation is complete
$("#DivID").hide(1000, function () {
   alert("Hide Complete");
});
// show an element
$("#DivID").show(1000);
// do something when animation is complete
$("#DivID").show(1000, function () {
     alert("Show Complete");
});

3. Script JQuery Fungsi Animasi Slide Script Jquery fungsi animasi slide up dan slide down memungkinkan anda membuat animasi menggunakan fungsi ini.

//--- JQUERY SLIDE - SLIDE AN ELEMENT IN AND OUT ---//
// toggle slide up and down
$("#DivID").slideToggle(1000);

// do something when animation complete
$("#DivID").slideToggle(1000, function () {
   alert("Slide Toggle Complete");
});

// slide up
$("#DivID").slideUp(1000);

// do something when animation is complete
$("#DivID").slideUp(1000, function () {
    alert("Slide Up Complete");
});

// slide down
$("#DivID").slideDown(1000);

// do something when animation is complete
$("#DivID").slideDown(1000, function () {
    alert("Slide Down Complete");
});

4. Script JQuery Fungsi Animasi Fade Script Jquery animasi memungkinkan anda untuk membuat animasi fade seperti gambar muncul dari gradasi transparan ke solid.

//--- JQUERY FADE - FADE AN ELEMENT IN, OUT & TO ---//
// fade in
$("#DivID").fadeIn(1000);

// do something when animation complete
$("#DivID").fadeIn(1000, function () {
    alert("Fade In Complete");
});

// fade out
$("#DivID").fadeOut(1000);

// do something when animation is complete
$("#DivID").fadeOut(1000, function () {
    alert("Fade Out Complete");
});

// fade to (fades to specified opacity)
$("#DivID").fadeTo(1000, 0.25);

// do something when animation is complete
$("#DivID").fadeTo(1000, 0.25, function () {
    alert("Fade To Complete");
});

5. Script JQuery Fungsi Animasi – Animate Script Jquery untuk animasi anda dapat membuat animasi sesuai kreasi dengan menggunakan fungsi ini.

//--- ANIMATE (EXAMPLE USES OPACITY,

BUT CAN USE ANY CSS PROPERTY. ---//
//--- NOTE SOME MY REQUIRE THE USE OF

A PLUGIN SUCH AS JQUERY COLOR

ANIMATION PLUGIN. ---//
$("#DivID").animate({ opacity: 0.25 }, 1000);

// do something when animation complete
$("#DivID").animate({ opacity: 0.25 }, 1000, function

() {alert("Opacity Animation Complete");
});

6. Script JQuery Auto Focus Cursor Form Input Pertama Bonus, script Jquery ini berfungsi untuk auto focus cursor pada elemen form input yang pertama kali sehingga anda tidak perlu melakukan ekstra klik. Biasanya script jquery auto focus ini cocok diletakkan pada form login atau form-form entri data.

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
       // focus on the first text input field in

the first field on the page
       $("input:text:visible:first").focus();
    });
</script>

Mengetahui jumlah pengunjung

2013-01-12T10:01:00.000+08:00

Bagi yang ingin mengetahui jumah pengunjung yang sedang online. Ada beberapa tools tambahan (widget) yang boleh kita gunakan.

Berikut adalah beberapa website yang menyediakan widget khusus untuk memaparkan jumlah “user online” dengan berbagai bentuk yang menarik .

1. whos.amung.us

Kelebihan bagi widget ini adalah paparan pengunjung yang online secara real time dan juga dapat melihat apakah artikel yang sedang dilihat pengunjung serta negara asal web kita.Tidak memerlukan pendaftaran cuma salin kod yang disediakan pada blog atau web kita.

2. radarurl.com

Widget ini lebih kurang sama dengan Whos.among.us, Widget adalah setara dengan Whos. Among. US Cubalah dengan mendaftar di radarurl.com kemudian copy dan paste code html yang ada di halaman depan tersebut.

3.whosread.com

Widget ini amat mudah karena tidak perlu menyalin kod javascript di web kita.Tapi kekurangan widget ini ialah tidak realtime, perlu di refresh untuk melihat pengunjung yang baru datang.

Membuat border diseputar posting

2013-01-12T09:48:00.000+08:00

Untuk Membuat border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun template yang berwarna putih jarang jarang menggunakan border terpisah ini.Untuk contohnya boleh dilihat garisan biru disekeliling posting pada blog ini.

Cara membuatnya:

1.Log in ke blogger
2.pilih Design--->>Edit HTML

3.Cari kod ini:

.post {

Lebih mudah gunakan Ctrl + F untuk mencari kod

* diatas adalah kod yang telah ditambah pada template saya.

Kemudian letak kod berikut dibawahnya:

border: 1px solid #000000;

jika inginkan border yang berlainan gunakan kod ini:

border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;

Border boleh ditukar dari solid kepada dotted,dashed,outset,inset,groove,double dan ridge
Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:

background: #000000;

atau nak letak imej sebagai background masukkan kod ini:

background:url (url image anda disini);

Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik

Kemudian save template anda

Membuat recent posting dengan scroll

2013-01-12T07:47:00.002+08:00

Gadget recent post ini berfungsi menampilkan seluruh artikel yang pernah kita posting pada blog kita. Cara ini memang sudah tidak asing didunia blogger, dan jamak dilakukan oleh para blogger.

Gadget recent post ini bekeja menggunakan efek scroll, dan kita bebas menentukan jumlah artikel terbaru yang akan kita tampilkan pada gadget ini.

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

Catatan :

> Ganti URL BLOG dengan URL BLOG ANDA

> var nMaxPosts = 15; (Maksimal jumlah postingan yg tampil)

> var nScrollDelay = 175; (Nilai kecepatan scroll)

> var sDirection="left"; (Arah bisa diganti : right. up, bottom)

> var sOpenLinkLocation="N" ("N" = Link diarahkan dg buka tab baru, bisa diganti "Y")

> var sBulletChar="•"; (Tanda List, bisa diganti : "~ , @ , # , $ , ^ , * , + , atau yg lain)

5. Langkah yang terakhir...SIMPAN.

Selamat sampai tujuan..xixii

Tombol Show dan Hide

2013-01-09T09:51:00.002+08:00

Seperti biasa Masuk Ke blog Anda
Kemudian buat entri baru pada HTML
selanjutnya Masukan kode berikut :
<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
cropoz.com
Belajar blog
</div></div></div>

Catatan:
Warna Biru bisa di ganti dengan kata atau kode yang ingin anda masukkan.
Warna Merah di ganti dengan text yang ingin anda posting.

Jika langkah sobat benar maka hasilnya akan seperti ini:

Klik show untuk melihat

Menyusun logo gambar pada sidebar

2013-01-09T09:15:00.002+08:00

Bila anda ingi menyusun gambar pada sidebar agar ukurannya sama lebar dan sama tingginya Contoh susunan pada sidebar seperti dibawah .bahagian ujung tidak sama .

Kita dapat membuat ruang lagi dengan buat cara berikut;
Contoh ini bila kita hendak meletakkan button seperti diatas biasa kita akan dapat kode seperti ini:

<a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" /></a>

Kita Cuma perlu tambah kode untuk tinggi(height) dan lebar(width) seperti ini:

<a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a>

Border “0” bermakna tiada border ,boleh letak nilai jika hendak letak border disekeliling

Supaya kedudukanya berada ditengah tengah tambahkan kod seperti ini:

<a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a>
Untuk kod button /imej seterusnya letak disini…
………….
…………

</center>

Untuk letak dua baris kena sesuaikan lebarnya sahaja.Bila ruang dan saiz kena akan jadi baris seterusnya.Bila terlalu panjang akan ia akan turun kebawah.

Supaya nampak tersusun lagi letaklah dalam border:

<div style="width: 140px; height: 220px; border: 1px solid; padding: 2px; margin: 5px 0pt 0pt;">

Letak kod untuk imej disini

</div>

Cara memasang emotion pada blog

2013-01-09T08:19:00.003+08:00

Berikut adalah caranya:

1. Masukk ke Blogger -->> design -->> edit HTML

2. kemudian tandakan pada "Expand Widget Template",

3. Sekarang kembali ke template, cari kode ini :

</body>

4.Gunakan kemudahan search Ctrl +F untuk membuatn pencarian

5. salin kod dibawah dan letakkan diatasnya

<script src="http://oom.blog.googlepages.com/smiley.js" type="text/javascript"></script>
6. cari kode ini
<b:if cond='data:post.embedCommentForm'>

7.copas code dibawah ini

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>

<b>

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((

8.Preview dahulu hasilnya,jika tiada apa apa error,Klik butang save template.

Membuat widget muncul pada halaman tertentu

2013-01-09T07:44:00.002+08:00

Cara ini membuat widget hanya muncul pada halaman depan dan bila diklik pada judul posting atau read more untuk membaca artikel satu paparan lain akan muncul dan disini widget tersebut disembunyikan.Mungkin ada diantara widget yang dirasakan tidak perlu muncul ketika posting dibaca ,cuma melambat kan proses loading.Sebagai contoh cuba perhatikan widget Friend Banners pada sidebar yang disembunyikan bila read more diklik untuk membaca entri seterusnya.

Yang ingin membuatnya kita perlu pastikan widget mana yang hendak akan ditampilkan pada bahagian depan:

Misalnya kita hendak sembunyikan widget Shoutbox pada blog ini:

Seperti biasa pada design--pilih edit HTML--tandakan pada expand template widget
Gunakan Crtl +F taipkan pada find (widget id atau title tulisan warna oren ) untuk memudahkan pencarian dan kodnya adalah seperti dibawah ini pada template:

</b:widget>
</b:section-contents><b:section-contents id='sidebar-right-2-2'>
<b:widget id='HTML1' locked='false' title='Friend Banners' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>
<data:content/>
</div>

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

* cuma tambah kode yang berwarna merah saja
Jika widget tidak dinamakan kita cuma perlu buka widget tersebut dan dapatkan id nya:
Lihat bulatan pada gambar

Jika hendak menampilkan widget hanya pada halaman posting gantikan dengan kode ini:

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

Widget kode disini

</b:if>

Animated Blogger Recent Posts Widget

2013-01-09T05:46:00.002+08:00

In this post will help you to create a recent
post widget for your blogger. Its animated
widget with thumbnail and Include with nice
back ground. So you can try to add it to your
blog.

1. Log in to blogger Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>     
<style type="text/css" media="screen">      
<!-- 
#spylist {     
overflow:hidden;      
margin-top:5px;      
padding:0px 0px;      
height:350px;      
}      
.spydate{      
overflow:hidden;      
font-size:10px;  }

#spylist ul{      
width:350px;      
overflow:hidden;      
list-style-type: none;      
padding: 0px 0px;      
margin:0px 0px;      
}      
#spylist li {      
width:230px;      
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px; 
}     

#spylist li:hover { 
background: #84f6f5;

} 

#spylist li a {     
text-decoration:none;      
color:#4B545B;      
font-size:11px;      
height:18px;      
overflow:hidden;      
margin:0px 0px;      
padding:0px 0px 2px 0px;      
}      

#spylist li img {      
float:left;      
margin-right:5px;
margin-top:3px;       
background:none;      
border:0;      
}      

.spycomment{     
overflow:hidden;      
font-family:Tahoma,Arial,verdana, sans-serif;      
font-size:10px;      
color:#262B2F;      
padding:0px 0px;      
margin:0px 0px;      
} 
-->
</style>
 <script language='JavaScript'> 


imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://cropozproject.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://bloggertrix.com">Blogger widget</a>

After paste above code
* Replace http://cropozproject.blogspot.com/ with your Site URL

4. Now save your HTML/Javascript'.

You are done...

Multilevel Css3 Menu

2013-01-09T05:39:00.003+08:00

In this post, im gonna explain, how to add
Multilevel CSS3 Menu Bar With Icons for your
blog.This menu bar looks so attractive because,
it included small icons,If you want to change
icons according to your topic. You can change
icons link in HTML code. If you have problem
with this menu, Just contact me.i will help. you
can get my earlier menu bar form here.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Find this tag by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* icons Css3 menu www.bloggertrix.com*/

ul#navbt {
    display:block;
    float:left;
    font-family:Trebuchet MS,sans-serif;
    font-size:0;
    padding:5px 5px 5px 0;

    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */  
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */  
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
}
ul#navbt,ul#navbt ul {
    list-style:none;
    margin:0;
}
ul#navbt,ul#navbt .subs {
    background-color:#444;
    border:1px solid #454545;

    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
}
ul#navbt .subs {
    background-color:#fff;
    border:2px solid #222;
    display:none;
    float:left;
    left:0;
    padding:0 6px 6px;
    position:absolute;
    top:100%;
    width:300px;

    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
ul#navbt li:hover>* {
    display:block;
}
ul#navbt li:hover {
    position:relative;
}
ul#navbt ul .subs {
    left:100%;
    position:absolute;
    top:0;
}
ul#navbt ul {
    padding:0 5px 5px;
}
ul#navbt .col {
    float:left;
    width:50%;
}
ul#navbt li {
    display:block;
    float:left;
    font-size:0;
    white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
    margin:0 0 0 5px;
}
ul#navbt ul>li {
    margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
    outline-style:none;
}
ul#navbt a {
    border-style:none;
    border-width:0;
    color:#181818;
    cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:bold;
    padding:8px 18px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 1px 1px;
    vertical-align:middle;
}
ul#navbt ul li {
    float:none;
    margin:6px 0 0;
}
ul#navbt ul a {
    background-color:#fff;
    border-color:#efefef;
    border-style:solid;
    border-width:0 0 1px;
    color:#000;
    font-size:11px;
    padding:4px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 0 0;

    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#navbt li:hover>a {
    border-style:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
    border:none;
    margin-right:8px;
    vertical-align:middle;
}
ul#navbt span {
    background-position:right center;
    background-repeat:no-repeat;
    display:block;
    overflow:visible;
    padding-right:0;
}
ul#navbt ul span {
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYSlFmXyU7SKt8SOhb6zBAUsthgDo47rhD9visAcz-qp7FttfYLrRprocZmjySf402r00NWvdXuMDRqJcpChsdVg5ZPpJ8E6TTfl0G57ab4rvaYQc1LsTovnFJFNF_35e5RbL4x3QIhlA/s1600/bloggetrix-arrow.png");
    padding-right:20px;
}
ul#navbt ul li:hover>a {
    border-color:#444;
    border-style:solid;
    color:#444;
    font-size:11px;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
    background-color:transpa;
    height:25px;
    line-height:25px;

    border-radius:11px;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
    background-color:#313638;
    line-height:25px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul id="navbt">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVNbTDSCYqyH1p7o2GTu25tvAsdFwKCXNyeLnCTbjUAAGdKRUfCZJrysce1CI1OuEgDBIgXT1xIDYOcL_Ar1UtZbFF_Mw35PvYxv4zVXBQ9ICEJ969bXIKzHca95BKcyv3_Y0r2TF_zQ/s1600/bloggetrix-home.png" /> Home</a></li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhntCrqdYpN3OWwhEtRVjTi2dBwf1ycNzFxjlJrLN8ZVbC7IhKOFTqxTLp7rmB180xTgXje0RKKUJUJiN76Qh2JXU9ZlO-PbNPz1hK5ZEO7nl6sG43NgDl04i_6OpCgmSuQSVLTduPsuJQ/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Sublinks</span></a>
                                    <div class="subs">
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 41</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 42</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 43</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 44</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 45</a></li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 46</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 47</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 48</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 49</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMMq9rLA6hDFrq84r21PMZtzb_vMRIx5MvkMYcdvM7aH13tb78s4PsBGtuyZ7wCk0RkQq5Hdl0J0BjeUcK0HrH06lcZtXuK7oS53U6T_ld_S_I15vmPCZTBfVre6I4cEdXJn3Pl5yZSJM/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 5</a></li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_l-M0SORM10P359Av61qEoNe3vyTYKyImc1Cc7p6kCLNo5zfDYNGvD2wMKKVXpCpJ9dgl-JXGUweATM8CQkmhzmu5SSqFZVcaVDPJtiV5XHe-9SSTIOAPudKtK4SicbTap0VeEeVrY/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHMoRO7ADUrOLcRW6I9AFoyXyx2Sq9yEaM67fgs0Y-4CQc_CwJhfrCWGULUnq1oFlavpKrhyphenhyphenlTKVNFGPv0UYxEKWznOv5q5ny_UqJ0s_1rTfXn19BEBgQUC3SldpgQ-_4fJAn7I2KEDA/s1600/bloggetrix-top3.png" /> PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHe8mdEgYXyPw8W96s1YGq2DGZig772OgPQU9CzkDKu1euqJZxFi5BnDjzMTOGBRDKilU6lyQOPBg_c9GMoWJFT1-cNGmGQrM8BZtoI7jbtxdq2N5C5t-TfStfkrWj4n8WvvUYraSwARk/s1600/bloggetrix-top4.png" /> MySQL</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncroGWRwuXCyfbxEj0-Fa9IPR6MZPGG5po8LVaczmPjeds-5U0FspxPlzYv_O3x8r0SDnnNOREUBJyJ4oXj-miM2zI9ugn_NiB6UPbmevfoJ_tb1FIaAv1kruV69pjCPbZXVRUJWyzCo/s1600/bloggetrix-top5.png" /> XSLT</a></li>
            </ul>

Replace Title and # for links.
10. Now save your HTML/Javascript'.

You are done...

hasil copas dari bloggertrix.com