Modifikasi Blog Anda Agar Memiliki Kecepatan Loading Yang Maksimal

Meningkatkan Kecepatan Blog merupakan bagian integral dari strategi menaikkan traffic sebuah blog. Blog yang memiliki loading yang lebih cepat dan memakan sedikit waktu untuk menampilkan semua elemen akan meningkatkan pembaca, search engine traffic, dan begitu pula pendapatan. Desain blog yang bagus tidak akan ada artinya jika waktu loading sangat lama dan membosankan. Tidak semua orang memiliki koneksi internet yang cepat seperti LAN atau Wi-Fi. Dengan munculnya teknologi smart phone, penggunaan internet Mobile meningkat setiap bulan dan meninggalkan koneksi internet komputer. Para developer browser telah menciptakan inovasi agar browsernya kompatibel dengan iPhone, Android, Windows Phone dan Blackberry. Masyarakat yang tinggal di Amerika Serikat adalah konsumen terbesar dari smart phone ini. Amerika Serikat masuk dalam tiga negara teratas yang memiliki pengguna internet terbesar. Dalam rangka untuk menarik lebih banyak lalu lintas dari Amerika Serikat serta Inggris, dan Asia Anda perlu memastikan bahwa Anda memiliki beban blog yang ringan dan desain yang kompatibel dengan browser-browser besar seperti Chrome, Firefox, dan Internet Explorer 8. Dalam seri ini saya akan berbagi beberapa rahasia desainer web menggunakan template yang dirancang untuk memastikan situs web mereka memiliki sedikit waktu untuk loading dan memaksa pengunjung untuk menunggu selama beberapa detik.

Waktu loading yang ideal adalah sekitar 5-8 detik tetapi jarang sekali mencapai waktu tersebut karena kita tidak bisa mengorbankan desain blog banyak demi mempercepat waktu loading. Oleh karena itu, kami akan memastikan untuk menjaga desain blog tetap rapi dan bersih dengan mengadopsi cara-cara cerdas dengan mengoptimalkan script dan gambar. Gambar grafis, widget pihak ketiga, plugin, JavaScript, dan JQuery bertanggung jawab atas 80% dari waktu loading yang lambat pada blogger dan Wordpress.

Beberapa Kerugian Jika Loading Blog Lambat

• Mengakibatkan pengunjung tidak betah dengan blog Anda sehingga meningkatkan tingkat bounching
• Mengurangi PageView, Orang tidak akan berselancar di blog Anda dan cenderung akan meningggalkan blog Anda sesegera mungkin
• Jika terjadi penurunan PageView maka juga akan pendapatan dari iklan.
• Anda tidak akan mendapatkan target sponsor jika tampilan halaman Anda kurang dari 2-3 ribu/hari
• Area iklan yang Anda sediakan tidak dapat dijual dengan harga yang lebih tinggi
• Pengunjung tidak akan membagikan konten Anda di jaringan media sosial
• Pengunjung tidak akan berubah menjadi pembaca dan dengan demikian tidak ada peningkatan jumlah pelanggan
• Follower Anda di Facebook, Twitter, dan Google+ akan meningkat dengan lambat
• Orang akan cenderung untuk membaca Feeds Anda dari pada memilih mengunjungu blog Anda sehingga akan berefek pada penolakan dari AdSense.
• Robot pencari akan melewati proses index halaman yang terlalu padat dan penuh dengan script grafis
• Peringkat pencarian halaman kami pikir juga akan menurun
• Google menyukai penggunanya yang memiliki situs dengan loading yang cepat dan memberikan hukuman pada situs berloading lama
• Lalu lintas pada Internet Explorer akan menderita karena browser mengalami crash. IE sering crash ketika membuka halaman yang memakan waktu lama
• Lalu lintas dari Smart Phone juga akan berkurang karena koneksi internet mobile tidak sangat cepat. Orang lebih suka mengunjungi situs yang mudah diakses dan cepat menggunakan telepon genggamnya

Apa Langkah Selanjutnya?

Setelah menyadari beberapa kelemahan terbesar dari faktor kecepatan blog, sekarang akan menarik untuk membahas cara-cara yang efektif untuk mengurangi jumlah elemen yang mungkin menyebabkan  waktu loading blog lebih lama. Kami akan berbagi tips untuk blogger blogspot mengenai cara-cara untuk meningkatkan kecepatan loading blog Anda. Saya yakin Anda akan belajar banyak dari artikel saya selanjutnya. Saya akan berbagi beberapa tips praktis lanjutan yang mudah diterapkan.

Nantikan kami selanjutnya... :) ^^

Kode Warna Generator

Kedua tool di bawah ini akan membantu Anda untuk mendapatkan 6 digit dari kode warna yaitu heksadesimal value. Tool ini akan banyak membantu Anda dalam menyesuaikan template Blogger Anda dan untuk menulis posting yang lebih menarik. Mohon Ikuti petunjuk untuk setiap tool sebelum menggunakannya.

Kode Warna Generator

• Pertama tarik bar pada selector "Hue" ke arah atas hingga warna yang Anda inginkan.
• Kemudian klik di dalam area Brightness/ Saturation dan tarik kursor sampai Anda mendapatkan warna yang Anda inginkan. Daerah "Swatch" bar adalah hasil warna akhir yang Anda dapatkan.
• Hasil kode warna heksadesimal akan ditampilkan dalam kotak "Hex". Cukup copy kode enam digit i.e # 000000
• Itu saja!

Color Wheel untuk Mendapatkan Warna Yang Cocok

Ini adalah alat yang sangat berguna untuk mendapatkan warna yang cocok atau kohesif untuk navigasi menu, latar belakang, hyperlink, header, dan sebagainya. Petunjuknya sebagai berikut:

• Cukup paste kode warna enam digit dalam formulir di bawah ini tanpa tanda (#) hash dan kemudian tekan Pembaruan
• Kode warna yang cocok akan muncul dalam empat kotak di sisi kanan.
• Anda kemudian dapat meng-copy nilai hex dan mulai menggunakannya!

Semoga bermanfaat.... :)

Akankah Google Menghentikan Layanan FeedBurner pada 2013 Ini?

Telah ada banyak pembicaraan mengenai FeedBurner baru-baru ini. FeedBurner merupakan  layanan email untuk berlangganan RSS yang digunakan oleh banyak blogger, terutama karena itu adalah layanan gratis. Beberapa atau bulan lalu, banyak blogger menyuarakan keprihatinan mereka ketika FeedBurner menunjukkan jumlah nol dari pelanggan untuk blog mereka. Sejak itu, rumor mengatakan bahwa Google akan mematikan layanan FeedBurner tahun 2013 (mungkin untuk selamanya, tapi kita belum bisa mengatakan apa-apa). Jadi, apakah itu benar? Dan apa yang akan terjadi pada penggunanya jika ini terjadi?
Nah dari yang kita lihat, rumor ini hanya setengah benar. Jadi mungkin ungkapan 'setengah-benar' adalah kata kunci yang tepat kita gunakan di sini. Google tidak sepenuhnya menghentikan seluruh layanan. Ia hanya menutup FeedBurner APIs. Kita akan berbicara lebih banyak tentang itu nanti di posting ini.

Kenapa Google Mematikan Produknya?

Untuk melihat apakah Google benar-benar akan mematikan FeedBurner, pertama-tama kita perlu melihat mengapa Google menutup produk di tempat pertama. Beberapa bulan yang lalu, Matt Cutts mengupload video, di mana ia mengungkapkan mengapa Google akan menutup beberapa produk. Singkat cerita, bisa ada berbagai alasan. Yang paling jelas adalah keterbatasan sumber daya. Perusahaan Sebesar Google tampaknya, masih memiliki keterbatasan dalam hal sumber daya. Dan jika proyek ini memakan terlalu banyak sumber daya tanpa pengisian mereka, maka itu harus ditutup.

Google juga akan menutup produk yang sudah ketinggalan jaman. Misalnya, Orkut yang sudah usang cukup lama, sehingga harus ditutup untuk memberikan ruang bagi Buzz dan Google+.

Jadi pertanyaan berikutnya adalah, apakah FeedBurner berharga bagi Google?

Bagaimana Google Memandang FeedBurner?

Oke, hal yang pertama. FeedBurner digunakan oleh banyak blogger di luar sana, terutama karena gratis. Mengingat profil Google yang sangat baik, tampaknya cukup masuk akal jika mereka akan menutup layanannya. Sekarang saya tidak mengklaim saya tahu bagaimana mereka berpikir, tapi satu hal yang pasti. Jika Google menutup FeedBurner tanpa adanya peringatan terlebih dahulu (dan memang kita tidak mendengar hal itu), maka akan mengakibatkan banyak blogger yang kesal. Bukan berarti Google peduli pada perasaan mereka semua, tapi jelas akan menjadi keputusan bisnis yang buruk, karena ada banyak kompetisi di luar sana, menunggu Google untuk membuat slip sehingga mereka bisa mendapatkan keuntungan dari itu.

Kedua, sebagian besar layanan Google yang gratis (seperti FeedBurner), seperti Google AdSense, Blogger, Webmaster Tools, Google +, dan sebagainya. Jika mereka menutup satu produk gratis, itu akan memunculkan bayangan keraguan atas produk gratis lainnya juga, dan keandalan produk ini di masa depan akan terancam. Kesimpulannya, jika salah satu layanan dimatikan, siapa yang tidak akan berpikiran bahwa layanan yang lain akan dimatikan juga?

Jadi Apa Masalahnya?

Google tampaknya telah berlari ke dalam masalah mengenai API FeedBurner. Tanda-tanda pertama adalah ketika jumlah feed direset ke nol. Jadi hanya meja memiliki masalah. Meskipun kesalahan ini diselesaikan, akhirnya nanti masalah lainnya masih akan tetap ada. Akibatnya, Google akhirnya memutuskan bahwa ia tidak ingin pengembang menggunakan semua API yang mereka miliki. (Catatan: Sebuah API memungkinkan pengembang berinteraksi dengan program. Dia dapat menggunakan API untuk mendapatkan data pengguna, fungsi panggilan, dan melakukan hal-hal seperti lainnya.).

Oleh karena itu, meskipun FeedBurner masih bekerja, API telah dinonaktifkan oleh Google. Anda dapat melihat hal ini dari kenyataan bahwa jumlah pelanggan Anda pada BuySellAds tidak diperbarui jika Anda menggunakan FeedBurner. Hal ini karena API tidak lagi ke BSA untuk mengambil data pengguna.

Jadi Apa Langkah berikutnya?

Tidak banyak: P. Anda dapat menggunakan FeedBurner untuk saat ini tanpa masalah. Tapi alangkah baiknya jika Anda memback-up daftar pelanggan Anda dari FeedBurner.

Anda juga mungkin berpikir ke dalam solusi alternatif, seperti aweber, FeedBlitz, dan sebagainya. Jika mampu mungkin nanti akan saya posting mengenai itu semua dan membagikannya. Tapi hanya jika saya mampu lhooo... :P Karena saya hanya blogger pemula yang perlu banyak belajar.

20 Teknik Blog Super Yang Harus Diketahui Setiap Blogger

Setiap pemilik website/ blog harus tahu tentang SEO (Search Engine Optimization). Kenapa? Karena Search Engine Optimization adalah pembentuk tulang punggung dari situs Anda. Jika dilakukan dengan benar maka dapat bekerja dengan baik pada blog Anda. Jika tidak, blog Anda tidak akan menjadi apa-apa kecuali hanya sebuah peternakan konten dengan banyak konten yang tidak dimanfaatkan dengan baik. Akibatnya, isi (posting) akan menua dan membusuk (menjadi usang). SEO itu ibarat transmisi mobil. Tidak peduli seberapa besar dan kuat mesin Anda, jika Anda memiliki transmisi yang rusak atau tidak ada transmisi sama sekali, Anda tidak akan pernah memenangkan kompetisi. Oleh karena itu, segala sesuatu untuk blog harus sempurna, bukan hanya perlakuan baik pada konten yang Anda tulis saja. Di sini, saya akan berbagi beberapa tips yang mudah-mudahan bermanfaat untuk para blogger. Tips-tips di bawah ini telah saya lakukan dan sangat berpengaruh pada peningkatan rangking blog saya. Mari kita simak 20 Teknik Blog Super Yang Harus Diketahui Setiap Blogger:

1. Title dan Meta Description

Title / Judul adalah raja dari konten Anda. Ini adalah hal pertama yang akan dilihat oleh peselancar web. Penulisan judul harus ringkas, informatif, dan eye catching. Google hanya menampilkan hingga 66 karakter dari judul. Oleh karena itu, itu ide yang baik adalah dengan menjaga judul Anda tetap pendek. Namun juga jangan membatasi diri untuk hanya 66 karakter saja. Cakupkanlah semua informasi yang diperlukan dalam judul Anda.

Sejauh Meta description berkaitan dengan blog, Google tidak lagi menggunakan Meta Keywords dalam kriteria peringkat. Namun, Meta description masih sama pentingnya. Setiap kali Anda berbagi posting Anda di media sosial, deskripsi meta muncul di samping judul. Deskripsi website Anda seharusnya tidak bertele-tele. Tetap ringkas, dan memberikan deskripsi singkat dari posting Anda di beberapa baris.

2. Sitemap

Peta Situs sangat penting dan saya dibuat stress oleh ini. Sebuah sitemap adalah daftar dari semua halaman yang ada pada website Anda untuk memudahkan mesin pencari mengindeks semua halaman Anda, Anda perlu membuat sitemap dari situs Anda dan mengirimkannya ke semua mesin pencari utama. Ada juga tool yang menghasilkan Sitemaps untuk memudahkan Anda dalam membuat sitemap.

3. Fokus pada Keyword

Keyword adalah dasar dari setiap mesin pencari. Setiap pencarian yang dilakukan berdasarkan kata kunci. Pengunjung biasanya hanya memasukkan kata kunci saja di bar pencarian untuk mencari konten yang mereka butuhkan. Untuk blog Anda, Anda perlu mencari tahu apa kata kunci yang orang cari. Ini akan menjadi sia-sia jika Anda memiliki konten yang baik tetapi hanya memiliki beberapa kata kunci untuk menampilkan posting Anda ke dalam daftar pencarian. Oleh karena itu, berkonsentrasilah pada penggunaan jumlah maksimum kata kunci dalam posting Anda, terutama di paragraf pengantar.

4. Tetaplah Fokus dan Dinamis

Blogging adalah semua tentang perubahan tren. Menjaga kesesuaian dengan tren saat ini adalah cara yang baik untuk mejaga pertemanan dengan mesin pencari. Search engine ingin melihat konten terbaru di blog Anda. Jadi lihatlah keluar pada kejadian terbaru di sekitar Anda, dan tulislah blog tentang mereka. Juga teruslah mengubah fokus kata kunci Anda. Pembaca mungkin tidak selalu memasuki istilah pencarian yang sama. Hal-hal seperti itu sangat dinamis dan dapat berubah. Mengubah persepsi yang sesuai dan mengantisipasi apa yang mungkin dicari oleh pembaca. Gunakan kata kunci yang sesuai dan pas.

5. Interlink

Interlinking adalah salah satu bagian terpenting dari SEO. Selalu lakukan link posting baru Anda dengan link yang relevan yang sudah ada. Jika halaman web Anda secara memadai ter-link ke postingan Anda yang lama yang telah terhenti dan mendapatkan traffic yang lebih rendah setiap hari maka akan mendapatkan dorongan hidup baru. Kedua, ketika sebuah mesin pencari melihat banyak link, ia tahu bahwa website tersebut memiliki banyak konten yang ditawarkan. Tetapi jika halaman Anda mandiri, dan tidak punya hubungan, maka mesin pencari mungkin melewatkan un-linked pada halaman Anda. Tidak melakukan link halaman menurut saya adalah praktik yang buruk dan harus dihindari. Baca artikel mengenai Meningkatkan Traffic dengan Interlink.

6. Pergilah Dimana Ada Persaingan Rendah

Menempatkan usaha Anda di pasar yang relatif baru bisa menuai hasil yang besar jika pasar itu tumbuh. Setiap orang menggunakan jaringan populer seperti Facebook dan Twitter untuk menyebarkan bisnis mereka. Jadi kemungkinan besar, Anda memiliki banyak persaingan di niche Anda. Jadi mengapa tidak mencoba sumber-sumber alternatif juga? Seperti situs Pinterest yang mulai memanas. Dan situs lain yang baru yang akan memberikan alasan yang sempurna untuk bersosialisasi pada pengunjung website Anda!

7. Lihatlah Konten Anda

Semua tips SEO mengajarkan konten Anda harus baik untuk dapat bertahan hidup dan tetap berada di  peringkat teratas. Tips SEO dapat melakukan begitu banyak hal, sisanya harus datang dari konten itu sendiri. Dengan menulis konten berkualitas baik dapat membentuk Search Engine Optimization dalam  tubuh konten itu sendiri, karena ini membantu dalam pemberian peringkat. Setelah Anda menulis beberapa konten, tanyakan pada diri Anda pertanyaan-pertanyaan berikut sebelum mempublikasikannya:

• Apakah konten saya masuk akal? 
• Apakah saya sudah menggunakan ejaan dan tanda baca yang benar?
• Apakah konten ini berguna? 
• Itu konten ini unik / original? 
• Apakah ini layak untuk di share?
• Apakah ada konten visual seperti gambar atau video? 
• Apakah ada contoh, referensi, atau ide-ide yang unik?
• Apakah cukup interaktif dengan pembaca? 
• Apakah konten saya memancing pertanyaan pembaca tentang pengalaman mereka sendiri?

Jika jawaban Anda untuk sebagian besar pertanyaan di atas adalah "Ya", maka Anda sudah mendapatkan konten yang baik.

8. Menamai File Anda dengan Baik
Ini adalah tip kecil, tapi sangat berguna. Kebanyakan orang mengabaikan hal ini. Berikan nama pada file gambar dan video yang sesuai sebelum meng-upload ke website Anda. Sebagai contoh, daripada menggunakan nama seperti "image007" untuk gambar intro, saya menamakannya "20 teknik blog". Hal ini membantu dalam peringkat pencarian yang lebih baik dan merupakan praktek SEO yang baik.

9. Bantu Mesin Pencari Mengindeks Halaman Anda
Untuk membantu mesin pencari mengindeks halaman web Anda dengan lebih baik, Anda dapat menambahkan sebuah file bernama robots.txt di direktori root situs Anda. Dalam file tersebut, tambahkan perintah "User-agent: *" (tanpa tanda kutip). Apa yang dilakukan adalah, mengundang bot untuk bebas menjelajah ke halaman di situs Web Anda.

10. Headings dan Sub Headings
Headings adalah cara yang baik untuk mengatur konten Anda. Sambil menulis artikel, ada pedoman W3C tertentu yang harus diikuti. Secara umum, Anda harus menggunakan hanya satu h1 heading. Ini adalah untuk judul. Jangan menggunakan h1 untuk setiap sub heading. Gunakan H2S untuk judul utama. Dan jika ada banyak judul utama, gunakan h3 untuk semuanya. Jika Anda ingin mereka terlihat lebih besar, gunakan CSS styling bukannya mengubah level heading.
Silahkan pelajari Cara Mengoptimalkan Judul Postingan Menggunakan Tag H3 dan H2.

11. Sosial Bookmarking
Sosial media adalah cara yang bagus untuk meningkatkan backlink dan lalu lintas ke blog Anda. Backlink memberikan peringkat mesin pencari yang lebih baik. Ini adalah praktek SEO yang baik untuk menambah tool bookmark untuk pembaca Anda. Tambahkan pilihan untuk like di Facebook atau Tweeting di Twitter sehingga pembaca Anda dapat me-reshare konten Anda dan menyebarkan berita. Lihat posting kami pada Widget Social Bookmarking Untuk Blogger untuk mempelajari lebih lanjut.

12. Anchor Teks
Anchor teks sama pentingnya dengan link sendiri. Gunakan kata kunci daripada menggunakan pernyataan seperti "klik di sini" untuk link. Ini adalah praktik SEO yang baik. Kedua, jika Anda menghubungkan ke halaman yang sama beberapa kali, gunakan anchor text yang berbeda setiap kali. Anchor teks yang sama memberikan kesan bahwa link telah otomatis. Search engine tidak suka auto-bot. Itulah alasan utama mengapa pembelian backlink tidak disarankan, karena mereka menggunakan Anchor teks yang sama untuk website Anda di mana-mana.

13. Sesuatu Mengenai "Nofollow"

No follow adalah cara yang baik penyaringan situs web berkualitas rendah yang Anda link, sehingga tidak terlihat seperti Anda memberikan backlink. Hal ini juga membantu dalam menjaga site-linking ke Anda / rasio situs yang Anda link. Rasio ini serius dapat mempengaruhi peringkat halaman Anda. Umumnya, menanamkan atribut rel = "nofollow" untuk link yang mengarah ke situs web berkualitas rendah. Juga jangan pernah menambahkan nofollow untuk setiap halaman Anda sendiri. Pelajari lebih lanjut tentang Kapan sebaiknya Anda menandai link eksternal sebagai nofollow.

14. Tag dan Kategori
Untuk membuat situs Anda mudah dinavigasi, jangan menggunakan terlalu banyak tag dan kategori. Aturlah beberapa kategori di niche Anda di awal, dan kemudian tempelkan pada kategori tersebut. Ini adalah praktik yang baik untuk hanya memberi satu kategori untuk setiap posting. Jangan menambahkan lebih dari satu. Itu SEO yang buruk.

15. Optimasi Gambar
Optimasi gambar merupakan bagian penting dari SEO juga. Orang mencari gambar hampir sebanyak mereka mencari teks. Oleh karena itu sangat penting bahwa Anda membuat gambar pada situs Anda agar lebih mudah untuk ditemukan. Selalu berikan judul untuk gambar-gambar Anda. Search Engine itu sebenarnya akan mencari judul dan tidak mencari gambar. Tambahkan tag ALT juga. Ini membantu dalam pengguna-aksesibilitas. Orang yang tunanetra menggunakan browser khusus untuk menggunakan internet. Browser ini menguraikan deskripsi alt gambar untuk orang-orang seperti mereka. Oleh karena itu, gunakan atribut ini untuk membantu rekan-rekan kita yang cacat.

16. Update Secara Teratur

Search engine menyukai konten yang segar. Orang-orang mencari konten baru setiap kali mereka mengunjungi situs web Anda. Setiap kali saya mengunjungi situs manapun, hal pertama yang saya cari adalah cap waktu di bawah posting terakhir. Berikan ide yang sangat baik dan seberapa sering sebuah situs web diperbarui. Situs layanan tidak perlu diperbarui begitu sering. Tapi situs terkait konten dan blog harus sering diperbarui. Untuk blog, frekuensi posting minimal satu posting per hari adalah sangat penting. Semakin banyak, semakin meriah. Tapi cobalah untuk menulis minimal satu posting per hari. Itu akan membuat situs Anda terlihat segar, dan juga meningkatkan peringkat Alexa Anda. Dan semakin banyak topik yang Anda tulis maka semakin banyak lalu lintas yang akan Anda dapatkan.

17. Periksalah Waktu Loading Blog Anda
Sebuah blog dengan loading lambat tidak berpengaruh baik bagi pembaca. Anda berpikir robot pencari akan tidak punya masalah dengan hal ini. Tapi sayangnya, itu tidak benar. Dan itu logis juga. Google harus menemukan jutaan hasil pencarian dalam hitungan detik. Jadi waktu loading juga mempengaruhi search engine. Jangan meng-upload file berat terlalu banyak ke blog Anda. Sebaliknya, uploadlah file besar di situs sharing, dan memberikan pembaca Anda dengan link download. Untuk informasi lebih lanjut tentang cara untuk mengurangi waktu beban blog, silahkan bacalah artikel 11 Tips Penting Untuk Mengurangi Waktu Loading Blog Anda.

18. Mengurangi Tingkat Bouncing
Mengurangi tingkat bouncing adalah kunci keberhasilan blog Anda. Tingkat bouncing adalah jumlah orang yang meninggalkan situs web Anda selama beberapa detik pertama dari kunjungan mereka. Semakin rendah, semakin baik. Waktu loading blog juga dapat mempengaruhi hal ini. Namun faktor yang paling penting adalah desain website. Desain yang menarik dan elegan akan mempertahankan pengunjung, sementara situs yang sulit untuk dinavigasi, berantakan dengan iklan, atau memiliki kesalahan desain akan kehilangan pengunjung dengan cepat. Tentu saja, kualitas konten dan frekuensi juga memainkan peran. Jadi perbaikilah masing-masing itu untuk mengurangi tingkat bouncing Anda.

19. Tipografi
Tipografi mengacu pada styling konten Anda. Siapa yang tidak menghargai styling yang baik? Baik mencakup hal-hal seperti tulisan bercetak miring atau huruf tebal teks, spasi baris yang tepat, judul, padding, dll. Perhatikanlah hal tersebut untuk membuat konten Anda terlihat baik dan mudah dibaca.

20. Memeriksa Validitas
Setelah Anda selesai dengan beberapa dasar SEO, Anda perlu memvalidasi dan memeriksa apakah ada kesalahan. Mulailah dengan memeriksa setiap link yang rusak. Ada plugin Blogger dan Wordpress yang dapat membantu Anda melakukan hal ini. Tapi Anda bisa melakukannya secara manual maupun dengan mengunjungi W3C Link Checker.

Selanjutnya, Anda perlu untuk mengunjungi W3C HTML Validation Tool dan W3C CSS Validation Tool untuk memvalidasi HTML dan CSS untuk setiap kesalahan. Setelah itu, Anda dapat memvalidasi SEO Anda dengan menggunakan plugin SEO yang baik. Plugin tersebut tersedia untuk Blogger dan Wordpress.

Itu saja tips dari saya, mudah-mudahan bisa sangat bermanfaat bagi Anda sekalian. Keep Smile.. :D

Cara Membuat Link Read More Dengan Gambar Thumbnail Yang Keren

Seorang blogger yang baik dapat diidentifikasi dengan cara dia mengelola blog dan mengatur posting-nya. Homepage adalah bagian paling penting dari setiap blog. Homepage harus berisi 5 hingga 6 posting dalam rangka untuk merebut daya tarik pembaca sebanyak mungkin. Menjaga pembaca sibuk untuk waktu yang lama adalah apa yang saya sebut blogging yang sukses. Menampilkan 5-6 posting  selain akan mempercepat waktu loading blog, hal ini juga akan membuat pemandangan yang indah di blog Anda dan menunjukkan ringkasan dari setiap posting. Pada homepage saya, Anda akan melihat link Read More beserta gambar thumnail yang sesuai, dengan mengkliknya maka akan membuka seluruh posting. Lihatlah screenshot di bawah ini:

Untuk membuat link Read More dengan gambar thumnail pada blog Anda, langkahnya sangat sederhana dan mudah untuk diterapkan oleh Anda semua. Silahkan ikuti langkah-langkah di bawah ini dengan hati-hati dan teliti:

• Pertama masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang kotak Expand Widget Templates di pojok kiri atas
• Cari kode ini (gunakan fitur search Ctrl + F untuk memudahkan pencarian)

<data:post.body/>

• Ganti kode di atas dengan kode di bawah ini

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

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

• Sekarang carilah kode </head>, lalu letakkan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

Keterangan:
summary_noimg = 430; Adalah ukuran tinggi potongan artikel jika tanpa thumbnail/gambar.
summary_img = 340; Adalah ukuran tinggi potongan artikel jika terdapat gambar/thumbnail.
img_thumb_height = 100; Adalah ukuran tinggi gambar/thumbnail.
img_thumb_width = 120; Adalah ukuran lebar gambar/thumbnail.

Begitulah tutorial singkat mengenai cara membuat link Read More dengan gambar thumbnail di blogger, semoga bisa bermanfaat bagi sobat blogger. :)

25 Menu Navigasi "Vertikal" Untuk Blogger - Kode CSS dan HTML

Pada postingan saya kali ini, saya akan menyediakan 25 Tab Menu Navigasi Vertikal yang menggunakan kode CSS dan HTML. Saya sudah memeriksa dan mencoba kode yang diambil dari Christopher dan Highdots dan hasilnya semuanya kompatibel dengan Blogger karena ada sebagian yang saya modifikasi. Saya berharap koleksi ini akan menarik bagi sebagian besar dari Anda karena tab menu navigasi ini bisa dengan mudah dapat Anda diinstal, disesuaikan dan dicopy! Saya berharap ini akan sangat membantu untuk desainer baru seperti saya :)

Bagaimana Cara Menambahkan Menu Navigasi Vertikal di Blogger?

Nah, proses ini sangat sederhana dan cukup mengikuti langkah-langkah berikut ini dengan hati-hati:

• Masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang Expand Widget Templates
• Paste kode CSS dari Menu yang Anda pilih tepat di atas kode ]]></b:skin>
• Untuk kode HTML bisa ada 2 posisi yang baik yaitu di sidebar kanan atau kiri. Tergantung berapa banyak kolom yang Anda miliki:
• Jika Anda memiliki sidebar di kanan, paste kode HTML di bawah kode <div id='sidebar-wrapper'>  atau <div id='sidebar-wrapper-right'>
• Jika Anda memiliki sidebar di kiri, paste kode HTML di bawah kode <div id='sidebar-wrapper-left'>
• Anda juga bisa langsung memasukkannya melalui gadget dengan cara masuk ke Layout > Add a Gadget > HTML/JavaScript, pastekan script HTML dari menu yang Anda pilih di dalamnya.
• Terakhir, simpan template Anda dan lihatlah perubahan yang terjadi

Catatan: Karena kebanyakan template menggunakan coding yang berbeda dan apabila Anda tidak dapat menemukan kode di atas maka silahkan tulis pesan di kotak komentar. Mungkin saya bisa membantu Anda.

Cara Mengedit Link Dalam Menu Navigasi

Untuk mengubah Link Tab Menu dan Judul, cukup mengedit bagian yang bercetak tebal dari kode HTML seperti contoh ini:

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link 5</a></li>

Ganti # 1, # 2, # 3 dll dengan URL/Link Anda dan ganti Link1, Link2, Link3 dll dengan Judul Halaman Anda. Jika Anda ingin menambah atau menghapus tab maka cukup menambahkan atau menghapus baris dari kode HTML berikut:

<li><a href="#" >Link</a></li>

25 Menu Navigasi Vertikal

Menu #1

Kode CSS

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_uGKtvxxbrretk2PrpDHtnLVLdtZkoeYAAOWAAXtW8jNt0UCnR7vJziLKWd2Z_0B50CWkyZMluYDfL90bXx3BsVh7h-hDmMFJ5SHAEOh9l5f95ZLxaLt8sKgBxmlTIcVGloFteLEx58/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_uGKtvxxbrretk2PrpDHtnLVLdtZkoeYAAOWAAXtW8jNt0UCnR7vJziLKWd2Z_0B50CWkyZMluYDfL90bXx3BsVh7h-hDmMFJ5SHAEOh9l5f95ZLxaLt8sKgBxmlTIcVGloFteLEx58/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; } 

Kode HTML

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #2

Kode CSS

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzO_T6d9VXOM4Gm3vphN9NwMz7ixAR8DCidGCoy4SDujiwP8VExBEUse8lXh5EAVlTnU9SQKcneKB9NbBO1yDJoGBDDdEjNT70mzlQ_WidiqMfW5EA7Qs3ti5T9C4LIdrpmfX2X9EEVU/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzO_T6d9VXOM4Gm3vphN9NwMz7ixAR8DCidGCoy4SDujiwP8VExBEUse8lXh5EAVlTnU9SQKcneKB9NbBO1yDJoGBDDdEjNT70mzlQ_WidiqMfW5EA7Qs3ti5T9C4LIdrpmfX2X9EEVU/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #3

Kode CSS

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xlXlzgAMddYLUUez7genHwZkoZt2ZEYw0RDNjOwjAhw6X010oOvPgahbwpBwUCi_Dz3P18vxUkYOSazJNYwmdYnGTfiqYo1uIypOG30nSwd6HsLJZCp7rsjJZ8OIn65Q0ysCiO13dy8/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xlXlzgAMddYLUUez7genHwZkoZt2ZEYw0RDNjOwjAhw6X010oOvPgahbwpBwUCi_Dz3P18vxUkYOSazJNYwmdYnGTfiqYo1uIypOG30nSwd6HsLJZCp7rsjJZ8OIn65Q0ysCiO13dy8/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Kode HTML

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #4

Kode CSS

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpHmC8vpHjx7J2QjUIJpQy6UAu0PGE4ZqbC-_dsZyvsuyyAC46O_BKSscCX7y6m33QQNrD4tOgyB5Y47J9oBMmey56DEBFsS74nrmKoyayaLLWRzmW6odvyiI4Er3d_jZYlOqI-u7Z8qg/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpHmC8vpHjx7J2QjUIJpQy6UAu0PGE4ZqbC-_dsZyvsuyyAC46O_BKSscCX7y6m33QQNrD4tOgyB5Y47J9oBMmey56DEBFsS74nrmKoyayaLLWRzmW6odvyiI4Er3d_jZYlOqI-u7Z8qg/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #5

Kode CSS

 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMLtF6DOVOjMq94joJtZM_FZaoZuvcf1XcsKolBg-iWhzj3IEjXetmX3EF-Jhp532vzjv_pxuSg61CBeyCU8negl_siavNleveYczV12KkOSgyvDObeLr3GMqP7jRmH5uo7xD4PR0MgY/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMLtF6DOVOjMq94joJtZM_FZaoZuvcf1XcsKolBg-iWhzj3IEjXetmX3EF-Jhp532vzjv_pxuSg61CBeyCU8negl_siavNleveYczV12KkOSgyvDObeLr3GMqP7jRmH5uo7xD4PR0MgY/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #6

Kode CSS

 #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXD6gse2GyUN7fVd1YMClmfbRBlMk2QaS3rWxRvUOK-h3eDBwbgHH2FMZEpHZNtVWOwKNrcHjcxEv5OOTmJltRKbBMltKtioInnMc9Un9n5oAPrmGoG0aiWZUGLHjpJD6begDDMbg8t4/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXD6gse2GyUN7fVd1YMClmfbRBlMk2QaS3rWxRvUOK-h3eDBwbgHH2FMZEpHZNtVWOwKNrcHjcxEv5OOTmJltRKbBMltKtioInnMc9Un9n5oAPrmGoG0aiWZUGLHjpJD6begDDMbg8t4/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #7

Kode CSS

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMMzmdkyiAsrpjOjLD93TmLiKTBh7ZbRjGeq4V8j8udnMGVNlz7Y3-uV6bKfZj03v2I8SlC5_ILxUH7AHSxEZ3FY7Aihi9OKKYPucg1-PBhyphenhyphen4HdOtk_nz6RaZ-8Ki4vxyoj-gQCYJmtw/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMMzmdkyiAsrpjOjLD93TmLiKTBh7ZbRjGeq4V8j8udnMGVNlz7Y3-uV6bKfZj03v2I8SlC5_ILxUH7AHSxEZ3FY7Aihi9OKKYPucg1-PBhyphenhyphen4HdOtk_nz6RaZ-8Ki4vxyoj-gQCYJmtw/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMMzmdkyiAsrpjOjLD93TmLiKTBh7ZbRjGeq4V8j8udnMGVNlz7Y3-uV6bKfZj03v2I8SlC5_ILxUH7AHSxEZ3FY7Aihi9OKKYPucg1-PBhyphenhyphen4HdOtk_nz6RaZ-8Ki4vxyoj-gQCYJmtw/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #8

Kode CSS

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYSkCL3XtlLj8uiSFx4ItVZJT6W_EA7h6brABTYx2jhaPFzqYxJ6aFcniw0BwIw8Q_E1q2UKLWuL0fjmVQuX5mvsqJMAmymFoktNMx-M8ISAAFAliZu0FOSO1GpRqChi8FqIGjzDpAms/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYSkCL3XtlLj8uiSFx4ItVZJT6W_EA7h6brABTYx2jhaPFzqYxJ6aFcniw0BwIw8Q_E1q2UKLWuL0fjmVQuX5mvsqJMAmymFoktNMx-M8ISAAFAliZu0FOSO1GpRqChi8FqIGjzDpAms/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYSkCL3XtlLj8uiSFx4ItVZJT6W_EA7h6brABTYx2jhaPFzqYxJ6aFcniw0BwIw8Q_E1q2UKLWuL0fjmVQuX5mvsqJMAmymFoktNMx-M8ISAAFAliZu0FOSO1GpRqChi8FqIGjzDpAms/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #9

Kode CSS

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43En8ZVQndjSQAVIgIH8XEQ4NRcMIwxonNfVaFiO-pHbu6PnQmwjbxqbVlQDmJ8Vf5HYScpAIFGOY4MWBqsTgQd-ZDhx8BbxK7LxYfjhcZznnG7oOPrT6NYrFl8eewQF8A7TsP2wJs-E/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43En8ZVQndjSQAVIgIH8XEQ4NRcMIwxonNfVaFiO-pHbu6PnQmwjbxqbVlQDmJ8Vf5HYScpAIFGOY4MWBqsTgQd-ZDhx8BbxK7LxYfjhcZznnG7oOPrT6NYrFl8eewQF8A7TsP2wJs-E/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } 

Kode HTML

 <div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #10

Kode CSS

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9oZWhyphenhyphenqvO5SXrNHJMhebKbzIHX68VJ1-69JSrxgBcakCrbjdOOQxtQBPr7VNA5aJwGh4Vf2OdR1gl9lYSqlSrTWKEgUeG9dKc0IFUWNuXKplrPD2mEJ7C1baNC1MPqQkL18LYKuhfb4/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9oZWhyphenhyphenqvO5SXrNHJMhebKbzIHX68VJ1-69JSrxgBcakCrbjdOOQxtQBPr7VNA5aJwGh4Vf2OdR1gl9lYSqlSrTWKEgUeG9dKc0IFUWNuXKplrPD2mEJ7C1baNC1MPqQkL18LYKuhfb4/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #11

Kode CSS

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXLFfVl99n28B5X9Bo28UYDKH-ot2_7gcvPbd0pvdL5GW7t-zCB0u2HlS_wGA-YxAuITnIXpFOp6S02_PlV2sfJO3nUsAd8ACsJJ3Jkd07DW774nfhdYhs7dhz9PUH0lWZyam6RdJE3c/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXLFfVl99n28B5X9Bo28UYDKH-ot2_7gcvPbd0pvdL5GW7t-zCB0u2HlS_wGA-YxAuITnIXpFOp6S02_PlV2sfJO3nUsAd8ACsJJ3Jkd07DW774nfhdYhs7dhz9PUH0lWZyam6RdJE3c/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXLFfVl99n28B5X9Bo28UYDKH-ot2_7gcvPbd0pvdL5GW7t-zCB0u2HlS_wGA-YxAuITnIXpFOp6S02_PlV2sfJO3nUsAd8ACsJJ3Jkd07DW774nfhdYhs7dhz9PUH0lWZyam6RdJE3c/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #12

Kode CSS

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Kode HTML

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #13

Kode CSS

 #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQNbE3Yv0JOM8c2UwkT7wBhIV5e888juyrlKk7VaOlJFXeIHh6fZdBu3Y1IXuqlULTe7hqMN8jpRW6g0OVdcrjsGR6wFhcKR09x6PVAGOsSXFGxavLO_4bY_arCogwruoTZzcvbejFZY/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQNbE3Yv0JOM8c2UwkT7wBhIV5e888juyrlKk7VaOlJFXeIHh6fZdBu3Y1IXuqlULTe7hqMN8jpRW6g0OVdcrjsGR6wFhcKR09x6PVAGOsSXFGxavLO_4bY_arCogwruoTZzcvbejFZY/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQNbE3Yv0JOM8c2UwkT7wBhIV5e888juyrlKk7VaOlJFXeIHh6fZdBu3Y1IXuqlULTe7hqMN8jpRW6g0OVdcrjsGR6wFhcKR09x6PVAGOsSXFGxavLO_4bY_arCogwruoTZzcvbejFZY/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Kode HTML

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #14

Kode CSS

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Qx32uWo7BxM12d3cFZ8Q853w58mUH6tfpXQidkWXz5xi1U3MTtdU3iBlq1wNfR5jeoJPjukUUmx4_hqDOAleHwwxMlTnWYmXvpgVkQY8rsskJ-cfx_RaNMaECDWr8Geydz526kN2kzA/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Qx32uWo7BxM12d3cFZ8Q853w58mUH6tfpXQidkWXz5xi1U3MTtdU3iBlq1wNfR5jeoJPjukUUmx4_hqDOAleHwwxMlTnWYmXvpgVkQY8rsskJ-cfx_RaNMaECDWr8Geydz526kN2kzA/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #15

Kode CSS

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbENIVpsONvl2EwOpia7aEADNKH8CMV0VrGBkPzajQkZdmSz-q84IkrAySOlPxOhvZD8W_ViGdUplQ130krxpULrJOwdU7-yVfDToNsCUZ1RQiPI5aYqCY48g83oMLj0dDtN4zHWuxWE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbENIVpsONvl2EwOpia7aEADNKH8CMV0VrGBkPzajQkZdmSz-q84IkrAySOlPxOhvZD8W_ViGdUplQ130krxpULrJOwdU7-yVfDToNsCUZ1RQiPI5aYqCY48g83oMLj0dDtN4zHWuxWE/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #16

Kode CSS

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Kode HTML

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #17

Kode CSS

 #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLB50TUiXQo128LEVKGlauWQajuiHav28C3uD9ulMiMwgfJ9KnfOI8s3mO5Ijo53vyIEDzSAULSEEahzLtHGQa8ymX68e1BUnqFtUbotc6BPaeId3ZqjTCcokLJ7XKNhW12ClyCvwmkk/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLB50TUiXQo128LEVKGlauWQajuiHav28C3uD9ulMiMwgfJ9KnfOI8s3mO5Ijo53vyIEDzSAULSEEahzLtHGQa8ymX68e1BUnqFtUbotc6BPaeId3ZqjTCcokLJ7XKNhW12ClyCvwmkk/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #18

Kode CSS

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUJsW5eglBDNVtaVl-AQDkBKYTJHhbjZ8mjiPMKUdWUB4hgifl-LIiMr73Du6bckAkA8mmLUCKPs21tuQYsbxxOzQYVr5LmYPL2YdI0x0I93ZyV4B8_Yusjk2IKd89MiZG6jO1jdn23g/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUJsW5eglBDNVtaVl-AQDkBKYTJHhbjZ8mjiPMKUdWUB4hgifl-LIiMr73Du6bckAkA8mmLUCKPs21tuQYsbxxOzQYVr5LmYPL2YdI0x0I93ZyV4B8_Yusjk2IKd89MiZG6jO1jdn23g/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Kode HTML

<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #19

Kode CSS

 #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Kode HTML

 <div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #20

Kode CSS

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUV0J2GVPR_ZFep7xMdmG9hhixJgc8I0PILv8s8__98Qw-qJWEph1Q5aNFInKPjv18fRc3B5HRPzkOZaCMTZcnTKuqax2WJM0PolRtkggwUZD6pRpAVa2dQhrsPG7hy5EKa-DzKYe_GQ/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUV0J2GVPR_ZFep7xMdmG9hhixJgc8I0PILv8s8__98Qw-qJWEph1Q5aNFInKPjv18fRc3B5HRPzkOZaCMTZcnTKuqax2WJM0PolRtkggwUZD6pRpAVa2dQhrsPG7hy5EKa-DzKYe_GQ/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUV0J2GVPR_ZFep7xMdmG9hhixJgc8I0PILv8s8__98Qw-qJWEph1Q5aNFInKPjv18fRc3B5HRPzkOZaCMTZcnTKuqax2WJM0PolRtkggwUZD6pRpAVa2dQhrsPG7hy5EKa-DzKYe_GQ/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #21

Kode CSS

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Q-7FpZJimaOGABPsHeDr6P1Jdy4dAsoYGtvs3Ibq9uv_8bzE9GATaYx4icPqXORlgUWxmbZl54xyvY2BwA6nf7UU9KrM8E4fRNzUy7qSVyPjEXt0xLal2MeV-HBBDFpqVcGmOTupjJo/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Q-7FpZJimaOGABPsHeDr6P1Jdy4dAsoYGtvs3Ibq9uv_8bzE9GATaYx4icPqXORlgUWxmbZl54xyvY2BwA6nf7UU9KrM8E4fRNzUy7qSVyPjEXt0xLal2MeV-HBBDFpqVcGmOTupjJo/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Kode HTML

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #22

Kode CSS

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbK4_B3L2dHXoMtlHGMJA-K6Yiqw9TWMnezSDF_3Q5obg4OYFRKlF0VxVFVKXFSeAb4fKHY_Y15BohyphenhyphengMGv0ccktHr2X9wbGCS03spXUjYXugpCxfCWFsyzrIgPQKmfAoLCh_zauW0pTk/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbK4_B3L2dHXoMtlHGMJA-K6Yiqw9TWMnezSDF_3Q5obg4OYFRKlF0VxVFVKXFSeAb4fKHY_Y15BohyphenhyphengMGv0ccktHr2X9wbGCS03spXUjYXugpCxfCWFsyzrIgPQKmfAoLCh_zauW0pTk/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbK4_B3L2dHXoMtlHGMJA-K6Yiqw9TWMnezSDF_3Q5obg4OYFRKlF0VxVFVKXFSeAb4fKHY_Y15BohyphenhyphengMGv0ccktHr2X9wbGCS03spXUjYXugpCxfCWFsyzrIgPQKmfAoLCh_zauW0pTk/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Kode HTML

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #23

Kode CSS

 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitC00mwFFOQkMhA3Nt32WkagFatK03tMsJKrYubDzX_LTjkL-_yKxvwxNvZU_pYjd5Soy4vJpFGjwkcZCSTy-OLYBTxfJCuE_xs6N7MGnXh3wRwRWMgfSkfnwBdPHTZZYGADy6bMx47o/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitC00mwFFOQkMhA3Nt32WkagFatK03tMsJKrYubDzX_LTjkL-_yKxvwxNvZU_pYjd5Soy4vJpFGjwkcZCSTy-OLYBTxfJCuE_xs6N7MGnXh3wRwRWMgfSkfnwBdPHTZZYGADy6bMx47o/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #24

Kode CSS

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57zQ-WiJx6Wt-09tVbZwSeT8zPWj_rfPjqrcVpO-8ERvHscYka_aFnVIsjRXzCCssQI-4aGySAlEu4TRS46QlHe99_xL4AwKMvm354RuPH6kV6zdwD2bd7L5VnUzGARNeMnpdNBSwI68/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57zQ-WiJx6Wt-09tVbZwSeT8zPWj_rfPjqrcVpO-8ERvHscYka_aFnVIsjRXzCCssQI-4aGySAlEu4TRS46QlHe99_xL4AwKMvm354RuPH6kV6zdwD2bd7L5VnUzGARNeMnpdNBSwI68/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #25

Kode CSS

 #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrplGIh8TK_wJ4aloeafQlm9KsakmIIarRuM90Yz7tCJIJ6dx4tFbCTubE-ILTRURqTnzWgYQzl8JetGNJ-J0B_CUwoHs3bKUAhbIz8XG0g9e_NUlsJUdZ0F0BT0jQWJo5qkb4z0BnXo/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrplGIh8TK_wJ4aloeafQlm9KsakmIIarRuM90Yz7tCJIJ6dx4tFbCTubE-ILTRURqTnzWgYQzl8JetGNJ-J0B_CUwoHs3bKUAhbIz8XG0g9e_NUlsJUdZ0F0BT0jQWJo5qkb4z0BnXo/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Nah itulah 25 kode menu navigasi yang bisa saya persembahkan untuk Anda. Nantikan informasi menarik lainnya dari D-Genera Blog.. ^^ 2XFUZ2E47HKU

11 Tips Penting Untuk Mengurangi Waktu Loading Blog Anda

Hampir setiap blogger pemula sering gagal untuk mengurangi waktu loading blog. Sebagian besar tutorial yang tersedia untuk mengurangi waktu yang dibutuhkan untuk memuat sebuah website sering kurang jelas atau tidak lengkap. Kami memutuskan untuk berbagi cara kita memecahkan masalah ini. Berikut adalah 12 tips yang benar-benar menarik dan penting untuk mengurangi waktu loading blog Anda hampir 90%.

1. Ubah Link Semua Gambar dalam Template Anda Dari Blogger

Sebagian besar dari Anda menggunakan template yang tidak resmi disediakan oleh Blogger. Template ini sering mengandung gambar yang disimpan pada layanan seperti TinyPic atau photobucket. Ketika blog Anda memaksa browser harus terhubung ke semua server yang di-link ke gambar Anda, dan akibatnya menyebabkan delay besar dalam waktu loading blog Anda. Apa yang harus Anda lakukan adalah mengganti semua gambar tersebut dengan gambar yang sudah Anda simpan di dalam blogger. Keuntungan melakukannya ini bahwa browser hanya perlu menghubungkan ke blogger saat memuat gambar Anda. Sehingga akan menghemat waktu.

2. Simpan Semua Gambar dalam Format GIF atau PNG

GIF singkatan dari "Graphics Interchange Format" dan PNG singkatan dari "Portable Network Graphics" keduanya adalah format dengan kompresi yang baik, memiliki ukuran dan luas yang lebih kecil serta didukung oleh semua browser. Tapi ukuran kompresi PNG jauh lebih baik daripada GIF. Dalam kasus tipikal hingga 5-25%. Menggunakan salah satu dari format gambar ini sangat akan mengurangi waktu loading blog Anda hingga 60% i.e 70-90KB. Ukurannya adalah perkiraan untuk blog saya dan ukuran sebenarnya tergantung pada jumlah gambar yang Anda gunakan.

3. Berikan Dimensi Yang Pas Untuk Image

Memberikan setiap gambar dengan lebar dan tinggi tertentu akan memudahkan browser untuk memuat gambar dengan cepat. Selalu kurangi ukuran gambar jika ukuran aslinya lebih besar. Kode HTML yang umum untuk gambar terlihat seperti di bawah ini:

<img width=”...” height=”...” src=”URL gambar” />

Lebar dan tinggi gambar akan memerlukan nilai dalam piksel. Satu pixel sama dengan sebuah titik pada layar. Sebuah gambar dengan ukuran penuh di blog saya akan memiliki lebar sekitar "590px" dan tingginya bisa sepanjang yang saya inginkan. 590px hampir sama dengan lebar posting saya. Mudah-mudahan ini akan memberi Anda gambaran tentang bagaimana memilih nilai lebar dan tinggi untuk gambar Anda. Browser akan mudah untuk memuat dimensi gambar yang ditentukan. Jadikan hal ini menjadi kebiasaan Anda untuk menentukan ukuran gambar Anda dengan tepat.

4. Jangan Menggunakan Gambar Untuk Background Blog Anda

Jika Anda menggunakan gambar apapun sebagai latar belakang maka silakan menghapusnya. Sebuah Gambar latar belakang akan berpengaruh terhadap waktu loading hingga 50% lebih lambat.  Coba Anda hapus dan lihat perbedaannya. Untuk menghapus gambar background hanya dengan mencari kode CSS dalam template Anda (Biasanya terletak pada bagian atas blog Anda pada bagian body):

body { background: #7AA1C3 url(http://xyz.com/blabla.jpg);
width: 980px;
color: #333;
font-size: 14px;
font-family: Georgia;
margin: 0 auto 0;
padding: 0; }

Kode ini mungkin juga akan terlihat berbeda dalam template Anda, tetapi Anda harus "menandai" hanya pada teks yang bercetak hitam tebal. Cukup Hapus url (http://xyz.com/blabla.jpg) dan simpan template Anda. Berikan warna yang sederhana pada latar belakang Anda. Misalnya #7AA1C3 mungkin cocok dijadikan Warna Background. Anda dapat mengubahnya dengan menggunakan Bagan Warna Heksadesimal saya.

5. Selalu Mempertahankan Kualitas dan Script Template Blog Yang Baik
Kesalahan utama kebanyakan blogger adalah meng-upload setiap template yang menarik menurut mereka. Kebanyakan Blogger template tidak resmi yang tersedia di blogosphere sering dibuat oleh orang-orang yang tidak menyadari dengan penggunaan HTML dan JavaScript yang tepat. Ada juga sebuah script template yang tidak tepat dengan tag kosong, tag yang tidak diinginkan dan Broken JavaScript sering membuat pekerjaan spider mesin pencari kesulitan untuk menjelajah isi dari weblog Anda. Browser juga akan membuang waktu yang berharga dalam membaca script yang rusak. Jika JavaScript atau kode tidak dioptimalkan dengan baik dapat menyebabkan PC pembaca menjadi hang! Bayangkan ini terjadi pada pembaca yang mengakses blog Anda. Singkat cerita, gunakanlah template dari pihak yang benar di blogosphere dan dari orang-orang yang bersertifikat profesional.

6. Gunakan Iklan Yang Terbatas
Jika Anda melakukan blogging hanya untuk mendapatkan bayaran dengan menampilkan potongan besar iklan dari beberapa sumber maka Anda akan melewatkan pengalaman indah dari blogging. Jangan membuat blog seperti Pasar Ikan. Tampilkanlah beberapa iklan di daerah utama di blog Anda. Melakukan hal ini akan membuat antarmuka blog Anda bersih serta mudah dijelajahi dan ditelusuri. Setiap Anda menambahkan dan menampilkan penggunaan JavaScript, maka akan memperpanjang waktu beban halaman blog Anda. Pastikan Anda membatasi semua iklan sampai tiga.

7. Jangan Me-Link ke Blog Direktori
Ini adalah persepsi yang salah bahwa jika menghubungkan blog ke beberapa blog direktori akan memberikan traffic besar bagi blog Anda. Sebenarnya, bila Anda me-link beberapa blog direktori ke homepage Anda, search engine akan kehilangan kepercayaan pada blog Anda karena berlebihan link-out dan browser akan kesulitan untuk menelusuri gambar-gambar kecil yang ter-link ke blog direktori. Semua direktori blog meminta Anda untuk menghubungkan kembali dengan menggunakan link gambar kecil di blog Anda, tetapi melakukannya hanya akan merusak keberhasilan blog Anda. Saya percaya hanya pada BlogCatalog dan mybloglog sebagai otoritas yang relevan untuk mengharapkan traffic. Jika Anda benar-benar ingin beberapa jumlah traffic dari direktori blog mungkin saran saya gunakanlah BlogCatalog dan mybloglog. Apalagi hanya menggunakan meta tag kecil dari mereka yang menghubungkan ke mereka.

8. Jangan Menggunakan Widget dari Blog Direktori yang Menggunakan Gambar
Saya mengacu pada widget  recent viewers dari BlogCatalog dan mybloglog. Widget ini menggunakan JavaScript yang me-link ke situs-situs tersebut dan juga menampilkan gambar yang akan menambah waktu buka blog Anda. Saya menggunakan meta tag yang disediakan oleh mereka tapi tidak menggunakan widget mereka. Hal ini membantu dalam mengurangi waktu yang dibutuhkan blog saya untuk menampilkan semua elemen pada halaman blog saya. Jika Anda benar-benar ingin menggunakan widget ini kemudian mencoba menampilkan beberapa gambar dari mereka, jangan lebih dari 10.

9. Ringkas Postingan Anda Menggunakan Link Read More
Tulisan Panjang yang penuh pada homepage adalah salah satu alasan terbesar mengapa blog memiliki waktu beban tinggi. Rangkum semua posting Anda dengan menggunakan Read More atau Baca Lebih Lanjut agar proses load blog Anda lebih cepat. Untuk membuat link 'read more' pada blog Anda, bacalah postingan saya mengenai Menambahkan Link Read More Pada Blog.

10. Tampilkan Hanya Empat - Lima Tulisan Di Home Page Anda
Jangan menampilkan lebih dari 4-5 posting di Homepage. Melakukan hal ini akan membuat pembaca Anda sibuk membaca tulisan yang berbeda dan mereka juga akan menemukan hal baru yaitu seberaca cepat loading blog Anda.

11. Menghilangkan Link Eksternal
Jangan gunakan widget yang berasal dari situs eksternal selain blogger. Singkirkan counter stat dan gunakanlah Google Analytics. Jangan menyimpan gambar pada layanan lain selain Blogger. Simpan semua kode JavaScript di dalam blogger. Jangan tambahkan link dari direktori blog, mereka tidak membawa Lalu Lintas kecuali BlogCatalog dan mybloglog.