Memasang Tombol Share Pinterest, Facebook, Twitter Melayang di Blogger

Ini adalah salah satu dari beberapa widget social sharing yang paling saya sukai karena tampilannya yang rapi dan tidak berantakan. Anda telah melihat tren dari jumlah tombol share melayang di blog-blog populer. Pengembang telah menciptakan versi yang berbeda dari bar ini dan menerapkan efek Jquery dan gaya CSS3 tapi widget ini berbeda karena mengandung kustom Pinterest, Facebook, Twitter, dan tombol Email. Layanan seperti Addthis dan ShareThis keduanya melakukan pekerjaan yang besar, tetapi mereka masih perlu bekerja pada beberapa masalah integrasi plugin mereka. Pinterest pin it button lah yang menyebabkan masalah besar dan kegagalan dalam mengambil gambar thumbnail yang benar. Dalam kebanyakan kasus, bahkan tidak menampilkan gambar sehingga membuat konsep pinning terasa hambar. Namun bar ini didesain ulang dari widget yang disediakan oleh ShareThis untuk membuat yang baru dengan memperbaiki semua kekurangan. Tombol share ini akan melayang di sebelah kiri posting blog Anda dan akan melayang mengikuti scroll pengunjung ke atas atau ke bawah postingan. Widget ini berisi counter dari situs jejaring sosial yang memiliki potensi untuk membawa traffic blog Anda dengan cara mensirkulasi konten Anda ke khalayak yang lebih luas. Kami telah menguji widget ini pada beberapa browser seperti IE8+, Firefox, Google Chrome, dll dan semuanya bekerja dengan baik tanpa masalah kompatibilitas atau konflik desain. Marilah kita bekerja sekarang!

Tombol Sosial Share yang Mana yang Harus Digunakan?

Prioritas pertama yang harus ada adalah Facebook, Google +, Twitter, Linkedin dan Sekarang Pinterest. Semua sosial share ini memainkan peranan dengan baik dalam sirkulasi konten Anda melalui banyak pengunjung. Social Media adalah mesin yang bekerja non-stop, yang jika didorong dengan benar dan hati-hati dapat memberikan berton-ton traffic dan juga dapat menghasilkan dolar juga dari website Anda. Setelah menampilkan banyak tombol share pastinya akan mempengaruhi waktu loading blog Anda, karena itu saya telah menambahkan tombol share AddThis yang menyediakan pengunjung dengan lebih dari 330+ pilihan sosial sharing semua di satu tempat.

Kenapa Tidak Menggunakan JQuery?

Abaikan penggunaan JavaScript dan Jquery sebanyak mungkin. Browser seperti Internet Explorer masih kekurangan dukungan untuk semua fungsi yang ditawarkan oleh jquery. Apalagi JavaScript bertanggung jawab untuk persentase besar dari waktu beban blog Anda secara keseluruhan. Oleh karena itu tidak ditambahkan efek smooth sliding untuk plugin ini.

Bagaimana Cara Kerjanya?

Saya telah mengintegrasikan Addthis dan layanan ShareThis di dalamnya. Dalam rangka untuk menyesuaikan tombol twitter dan lain-lain saya mengambil kode default ShareThis dan menyesuaikannya untuk mengubah gambar tombol, ukuran gelembung dan count text. Widget yang sejak awalnya kita kembangkan memang terlihat lebih menarik dibanding yang satu ini. Anda dapat melihat versi draft pertama yang dirancang pada gambar di bawah ini:

Jika Anda lihat gambar di atas, tombol-tombol share kurang rapat dan menghabiskan banyak ruang di blog Anda. Berbeda dengan ini yang terlihat lebih rapat dan seksi, juga tidak menghabiskan banyak ruang blog.

Cara Memasang Tombol Share Melayang

Langkah-langkahnya sangat mudah untuk diterapkan. Yang Anda butuhkan hanya mengcopy dan paste potongan panjang kode yang ada di bawah ini ke template Anda. Ikuti langkah-langkah berikut ini:

• Masuk ke Blogger > Template
• Backup dulu template Anda
• Klik Edit HTML
• Klik Expand Widget Templates
• Kemudian cari kode berikut ini:

<b:includable id='post' var='post'>

• Letakkan kode di bawah ini tepat di bawah kode tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.gnr_social_floating{
    position:fixed; bottom:6%; margin-left:-72px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.gnr_social_floating .gnr_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.gnr_social_floating .st_twitter_vcount, .gnr_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.gnr_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.gnr_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.gnr_social_floating .chicklets, .gnr_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyZueiPAcDVHjmTbEYreqfavf4A46M3y58J1R-sbfLgj7SM6sL-FWJrY4VWpTPB0vRMUDiryuBmtbsCofD0tPO4iZ_0fP82iHr9z_nfe7u-Y6tgXYWbDf4309VH49-HiGEdWk2ZJ0GaOg/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyZueiPAcDVHjmTbEYreqfavf4A46M3y58J1R-sbfLgj7SM6sL-FWJrY4VWpTPB0vRMUDiryuBmtbsCofD0tPO4iZ_0fP82iHr9z_nfe7u-Y6tgXYWbDf4309VH49-HiGEdWk2ZJ0GaOg/s400/gc_social_sprite.gif&#39;) !important;
}
.gnr_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.gnr_social_floating  .stButton_gradient{
    border:none !important;
}
.gnr_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.gnr_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}
.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}

.gnr_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.gnr_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.gnr_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0AImiuoKsJgEF69arXgxC0tofAfY3zHCpZNEYxrm_aBHLKiq1xHEvXSXLzleLJksOOPNnL8wAlr3Ci-lLHfzMW2T7BtLC3THmEvaLVTtXXUUk0zTx36YBSXyqjPPi8Gdh-sWniw8WXbh/s400/bubble_arrow_pinterest.png') !important;
}

.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='gnr_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='DGeneraBlog'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;D-GENERA BLOG&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5064705719d41eef' type='text/javascript'/>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://d-genera.blogspot.com/2013/01/memasang-tombol-share-pinterest.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Keterangan:
position:fixed; bottom:10% : Untuk mengatur tinggi rendah widget.
margin-left:-60px; float:left; : Untuk mengatur jarak kiri kanan windet.
background-color:#f7f7f7; : Untuk mengganti warna background widget.
DGeneraBlog : Gantilah dengan username Twitter Anda.

• Simpan perubahan yang telah Anda lakukan.

Kesimpulan

Widget share melayang ini akan ditampilkan pada halaman posting saja dan tidak akan ditampilkan pada homepage. Widget ini memiliki latar belakang putih dan melayang di sebelah kiri posting blog. Jika Anda ingin membuat widget ini melayang di sebelah kanan maka yang Anda butuhkan adalah mengedit bagian dari kode yang sudah saya tandai. Jika ada tambahan atau koreksi silahkan tulis di kotak komentar yang tersedia.

Salam damai sobat blogger..!! :D

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/AVvXsEj27KBo26PQikWAVVO2BKDUXq7o4s5XHRUNe7PImsvM_V75lraF9x1Zerd-DG5VVwgSXrrqEJ1zPwsWeF9aQwvBJOmPhcmQCIIMxTbaq4F3IsLx6ngpS0jwlPHaJtuP5d0poI7YK8LGUvA/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj27KBo26PQikWAVVO2BKDUXq7o4s5XHRUNe7PImsvM_V75lraF9x1Zerd-DG5VVwgSXrrqEJ1zPwsWeF9aQwvBJOmPhcmQCIIMxTbaq4F3IsLx6ngpS0jwlPHaJtuP5d0poI7YK8LGUvA/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/AVvXsEhVr3MjNGFlIg-XMCBjCNzKDmNK-9hTIWluIYtnuOzOZCI3GpMR_biHFBU0XNc8VlfHb7Iv9V5AqfK-8H7t2Z4aUhvZgmDuclPnpT2a2qq1t6oLW_oyv38XjPJiQ8LdycR-S8iiWrGfEZA/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/AVvXsEhVr3MjNGFlIg-XMCBjCNzKDmNK-9hTIWluIYtnuOzOZCI3GpMR_biHFBU0XNc8VlfHb7Iv9V5AqfK-8H7t2Z4aUhvZgmDuclPnpT2a2qq1t6oLW_oyv38XjPJiQ8LdycR-S8iiWrGfEZA/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/AVvXsEgxjrrzmD9I_cXKO_inPyTDCD4G5C_7G8AIW9Fg3X3J-F-VnQKmM9Zz0peFEJFbvFIIjZP8c4gQOs0E3wKD_XHGbERoosFBdtoAaFuyZ3GnrA3mT5Aze4QpYM43uHqhc9ao6eO9mXOlUVo/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxjrrzmD9I_cXKO_inPyTDCD4G5C_7G8AIW9Fg3X3J-F-VnQKmM9Zz0peFEJFbvFIIjZP8c4gQOs0E3wKD_XHGbERoosFBdtoAaFuyZ3GnrA3mT5Aze4QpYM43uHqhc9ao6eO9mXOlUVo/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/AVvXsEins7uf-EHax2Ku0cd61TulEoiIiq81AjazaRI90LmlRKxIL6kRmsrHlhZRCZik6MlbsuTwhrasq5q6vExnmWGyNzbrzcktceTu0OjErUTTpwJRJGjle8-zf74Ih5h60j0lxSUyfcHLpPc/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/AVvXsEins7uf-EHax2Ku0cd61TulEoiIiq81AjazaRI90LmlRKxIL6kRmsrHlhZRCZik6MlbsuTwhrasq5q6vExnmWGyNzbrzcktceTu0OjErUTTpwJRJGjle8-zf74Ih5h60j0lxSUyfcHLpPc/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/AVvXsEid7oQ-H5ViphQV71ZITHZcBPoLgv__OrkKzteoQ1dCApbE5-WCFcdXE1Scg6SouNXw6elzkI2K516SFeueFfFq1YcDdFfEHFANsJ9ErDxQC32OO07OLK6bbt7sQ26WedeLka0gXHUIrng/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/AVvXsEid7oQ-H5ViphQV71ZITHZcBPoLgv__OrkKzteoQ1dCApbE5-WCFcdXE1Scg6SouNXw6elzkI2K516SFeueFfFq1YcDdFfEHFANsJ9ErDxQC32OO07OLK6bbt7sQ26WedeLka0gXHUIrng/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/AVvXsEgnIhfUbxZ6Y3kJ2ues3fWL6wYhD_DmKXgz9u3e2h4l9McgZO4TzMog7hoG8_upyOsY9smwoxNR24QqVlmZFMvC5wqh9haR-1K0dARUfs6WYpWMWXWL1jEfQqx80LOVAE7F9Em7lK8wE1Q/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnIhfUbxZ6Y3kJ2ues3fWL6wYhD_DmKXgz9u3e2h4l9McgZO4TzMog7hoG8_upyOsY9smwoxNR24QqVlmZFMvC5wqh9haR-1K0dARUfs6WYpWMWXWL1jEfQqx80LOVAE7F9Em7lK8wE1Q/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/AVvXsEi3lNFabFXReG-LsmxZMcLBmMVliB1_zD1g29CFjZrOVl7efln6ZmLBqCfA8p69mdTOHZwHK1FHRXxwhpUkCebIT_3OHSYOxgjQS4w3OGkcgI8n5RAUJEbJUVyCssHaYVmPNEaDfop8X68/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/AVvXsEi3lNFabFXReG-LsmxZMcLBmMVliB1_zD1g29CFjZrOVl7efln6ZmLBqCfA8p69mdTOHZwHK1FHRXxwhpUkCebIT_3OHSYOxgjQS4w3OGkcgI8n5RAUJEbJUVyCssHaYVmPNEaDfop8X68/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/AVvXsEi3lNFabFXReG-LsmxZMcLBmMVliB1_zD1g29CFjZrOVl7efln6ZmLBqCfA8p69mdTOHZwHK1FHRXxwhpUkCebIT_3OHSYOxgjQS4w3OGkcgI8n5RAUJEbJUVyCssHaYVmPNEaDfop8X68/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/AVvXsEgq7bQscMszVTyo46MvMDKB0CanzOjDhfNe5YzOW10Ge17amnJKpKtrMFJEohiaCYTdLkcr-YDdTQnKBGncmuHyaffj9-NFw-SrKXn0VbSEv_rkpv68gXsMl8oQ8DHs7O2smu8AfJF2QLY/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/AVvXsEgq7bQscMszVTyo46MvMDKB0CanzOjDhfNe5YzOW10Ge17amnJKpKtrMFJEohiaCYTdLkcr-YDdTQnKBGncmuHyaffj9-NFw-SrKXn0VbSEv_rkpv68gXsMl8oQ8DHs7O2smu8AfJF2QLY/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/AVvXsEgq7bQscMszVTyo46MvMDKB0CanzOjDhfNe5YzOW10Ge17amnJKpKtrMFJEohiaCYTdLkcr-YDdTQnKBGncmuHyaffj9-NFw-SrKXn0VbSEv_rkpv68gXsMl8oQ8DHs7O2smu8AfJF2QLY/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/AVvXsEhEMvWR3tiC6v0PgljZaoXRjmCv9OxY1c9seTi3L1gRsDEcGCHSjKQakh6kcRu0fjnWd7x5JZGzivrahVbzc-25GYM972st-IpkmxYclQ9mLxFnRq52t2XWFn7t7LkYRuZ05HNd32SpDV4/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMvWR3tiC6v0PgljZaoXRjmCv9OxY1c9seTi3L1gRsDEcGCHSjKQakh6kcRu0fjnWd7x5JZGzivrahVbzc-25GYM972st-IpkmxYclQ9mLxFnRq52t2XWFn7t7LkYRuZ05HNd32SpDV4/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/AVvXsEiwD5NLspPvQAbM91Qsz8L1t7qQtGhRxVOZ87EG0zUz9hBAXo9HPa2uElagHLgjpA6NVuzuhHSR1wVEOAOS4mdFcZ8yFofXa1SoH-FqiHd1KyMNDH0MrQZbKEAuglTSmV05FgBNvCPZAqU/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwD5NLspPvQAbM91Qsz8L1t7qQtGhRxVOZ87EG0zUz9hBAXo9HPa2uElagHLgjpA6NVuzuhHSR1wVEOAOS4mdFcZ8yFofXa1SoH-FqiHd1KyMNDH0MrQZbKEAuglTSmV05FgBNvCPZAqU/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/AVvXsEgffMFrOMzAiRW_arJYPS1v5tInAgOMYGXPoXjMDBWT5OlOfywK6UDWcjvhkorLpP1ZEryGBIomjttEL5nifZwS69pqeV1X6bGTB0Rm4meR4L-iw8TQ5c7D2MGfGt0OK7npo9-ICXO8eyI/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/AVvXsEgffMFrOMzAiRW_arJYPS1v5tInAgOMYGXPoXjMDBWT5OlOfywK6UDWcjvhkorLpP1ZEryGBIomjttEL5nifZwS69pqeV1X6bGTB0Rm4meR4L-iw8TQ5c7D2MGfGt0OK7npo9-ICXO8eyI/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/AVvXsEgffMFrOMzAiRW_arJYPS1v5tInAgOMYGXPoXjMDBWT5OlOfywK6UDWcjvhkorLpP1ZEryGBIomjttEL5nifZwS69pqeV1X6bGTB0Rm4meR4L-iw8TQ5c7D2MGfGt0OK7npo9-ICXO8eyI/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/AVvXsEhfUU28FyCOVTE7pE66UmzANTlbwmLlPlAuwl3_by9ZptxFmIn3ynCIA9zoktHmcuRLhiY9trxumYn9YVDsDFK6jUhSjBsVhtplTUZO4zuTHDWwmSmwSN7twSq0SoYMHSRbBElZeTt6kWY/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/AVvXsEhfUU28FyCOVTE7pE66UmzANTlbwmLlPlAuwl3_by9ZptxFmIn3ynCIA9zoktHmcuRLhiY9trxumYn9YVDsDFK6jUhSjBsVhtplTUZO4zuTHDWwmSmwSN7twSq0SoYMHSRbBElZeTt6kWY/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/AVvXsEhfUU28FyCOVTE7pE66UmzANTlbwmLlPlAuwl3_by9ZptxFmIn3ynCIA9zoktHmcuRLhiY9trxumYn9YVDsDFK6jUhSjBsVhtplTUZO4zuTHDWwmSmwSN7twSq0SoYMHSRbBElZeTt6kWY/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/AVvXsEjTeClWgCEtRSyJPMSi10V-GaoUtElWGXJ9CnI14uHQ10vtH-iWhn1Cwbkk1ckwzIp74UYVRJWFhyphenhyphenPgO1UXQn8NA5VSMcuciQ-asLJVeNk7YjBtqUHaE1HEu9Vym9UmLZ7POeynNllAXu4/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTeClWgCEtRSyJPMSi10V-GaoUtElWGXJ9CnI14uHQ10vtH-iWhn1Cwbkk1ckwzIp74UYVRJWFhyphenhyphenPgO1UXQn8NA5VSMcuciQ-asLJVeNk7YjBtqUHaE1HEu9Vym9UmLZ7POeynNllAXu4/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/AVvXsEhuH9NoxrGKwEHkw3UkHTgP4gKnRi7Nw7PPlKcdgwA1giLPBHsVJncXL0ht8xrnt3IgXv4ZEl-_gttRs_DL4cNLY-zq-Qjosv_qzhXAOQSV2XSoMgczXR8Ltn0veTgwjGcakk_tYX5nrOE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuH9NoxrGKwEHkw3UkHTgP4gKnRi7Nw7PPlKcdgwA1giLPBHsVJncXL0ht8xrnt3IgXv4ZEl-_gttRs_DL4cNLY-zq-Qjosv_qzhXAOQSV2XSoMgczXR8Ltn0veTgwjGcakk_tYX5nrOE/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/AVvXsEjgpTQIwjt1E2Ne40oRE3wlz8trhKwfvz7uMk4YKNOkhAtwvf09oPvtUpG-sQYeD_zzV8c481-YXFw8fsIyUgWvdT1iP5tUfbPN059issx2s2rLzGI5MghS0_jd_wsnZcU1YWAxMDgK0g8/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgpTQIwjt1E2Ne40oRE3wlz8trhKwfvz7uMk4YKNOkhAtwvf09oPvtUpG-sQYeD_zzV8c481-YXFw8fsIyUgWvdT1iP5tUfbPN059issx2s2rLzGI5MghS0_jd_wsnZcU1YWAxMDgK0g8/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/AVvXsEi14oTGn3eimEu3skZRPWnVrOR1ErnMM6v-_HwnRtoMfHD4DjSnAvP5QOrJJBKrv9ap-om62Hxf0OfZotOv6jrgGRT18fg-n2i2Bp5h1psagXk1CQY1r3xlfOhFA44Qef8LoaEbejFzt5Q/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14oTGn3eimEu3skZRPWnVrOR1ErnMM6v-_HwnRtoMfHD4DjSnAvP5QOrJJBKrv9ap-om62Hxf0OfZotOv6jrgGRT18fg-n2i2Bp5h1psagXk1CQY1r3xlfOhFA44Qef8LoaEbejFzt5Q/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/AVvXsEg-HAu85etLjxLwR_TzKBaTFz3yA5vyu7KARxerAJFK-lbgn7vq6O_uEt_Ui9v4vvH2tovEcSFyfIxcLDg04b5Dbi8VXXVMFSCE9sNS3OyBgLEC7Ii67wv_E_OLWTbSewbyGW9lw37Dyro/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/AVvXsEg-HAu85etLjxLwR_TzKBaTFz3yA5vyu7KARxerAJFK-lbgn7vq6O_uEt_Ui9v4vvH2tovEcSFyfIxcLDg04b5Dbi8VXXVMFSCE9sNS3OyBgLEC7Ii67wv_E_OLWTbSewbyGW9lw37Dyro/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/AVvXsEg-HAu85etLjxLwR_TzKBaTFz3yA5vyu7KARxerAJFK-lbgn7vq6O_uEt_Ui9v4vvH2tovEcSFyfIxcLDg04b5Dbi8VXXVMFSCE9sNS3OyBgLEC7Ii67wv_E_OLWTbSewbyGW9lw37Dyro/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/AVvXsEgL9wyDK6pRjegVullB7gsixqJv5zSBtyOMSijt3p-EtvV7FJcD4JD63t2LpQt4yZLJFpUaj2ggmWElbWkUmNxVlB_9_5BjsnLQvz9x9OR8n_8uK-GuYIEpgi_73x7QAJQwslJG8zojLwY/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL9wyDK6pRjegVullB7gsixqJv5zSBtyOMSijt3p-EtvV7FJcD4JD63t2LpQt4yZLJFpUaj2ggmWElbWkUmNxVlB_9_5BjsnLQvz9x9OR8n_8uK-GuYIEpgi_73x7QAJQwslJG8zojLwY/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/AVvXsEjIcIQt5LKawhWbaDoKTP_rDawYw4jtu1lohuZYTglraI6RHW-28nAHJCuP2PYp0IqwYutUPqXYyOLTLx_VgijEBbpaPrgXMazV23ZMQiGpavCj7nMCrfFeo1jWku0C7bAaH8FPcDGKe6c/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/AVvXsEjIcIQt5LKawhWbaDoKTP_rDawYw4jtu1lohuZYTglraI6RHW-28nAHJCuP2PYp0IqwYutUPqXYyOLTLx_VgijEBbpaPrgXMazV23ZMQiGpavCj7nMCrfFeo1jWku0C7bAaH8FPcDGKe6c/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/AVvXsEjIcIQt5LKawhWbaDoKTP_rDawYw4jtu1lohuZYTglraI6RHW-28nAHJCuP2PYp0IqwYutUPqXYyOLTLx_VgijEBbpaPrgXMazV23ZMQiGpavCj7nMCrfFeo1jWku0C7bAaH8FPcDGKe6c/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/AVvXsEirSt9U5zaiFFNrXR6H5SgCaJ66oa75oi2wMvImGcJJ3qK-1-GwsHRINhUIRCqJbdloXE60w3dUCeDoTyWXSxEw-Uki98pq1t6kOqi4RtPhOfET6ohT-0sYkZ6Zg0ed6KoVpkZorJQy7gM/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSt9U5zaiFFNrXR6H5SgCaJ66oa75oi2wMvImGcJJ3qK-1-GwsHRINhUIRCqJbdloXE60w3dUCeDoTyWXSxEw-Uki98pq1t6kOqi4RtPhOfET6ohT-0sYkZ6Zg0ed6KoVpkZorJQy7gM/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/AVvXsEhMnAenfNmQHeRkTmut0gy_0OqEtMRLOmCQF3y3IhCzYargqfu5z5kRE2NVFsL3MOiArTj6n7Kw5hvLzyiJhm1h7JpaMIRHujRp-1AhPAlhctTbpwhEGnsO4mE0XdMG6P9ibvX01Too9eA/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMnAenfNmQHeRkTmut0gy_0OqEtMRLOmCQF3y3IhCzYargqfu5z5kRE2NVFsL3MOiArTj6n7Kw5hvLzyiJhm1h7JpaMIRHujRp-1AhPAlhctTbpwhEGnsO4mE0XdMG6P9ibvX01Too9eA/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/AVvXsEgY_rJcfQA645twwtY1hmuXF8Y4dyHa-VfHMqpGOWYr7GLJBXlS_Pft88n2_M6yHcDLj1sncatJlX2mYn9ZE6eKa8qr1Liu6Fm3PzqBn8jNQy0BQm-00au53bGuVn-VeGvls6qxFnxd2wo/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_rJcfQA645twwtY1hmuXF8Y4dyHa-VfHMqpGOWYr7GLJBXlS_Pft88n2_M6yHcDLj1sncatJlX2mYn9ZE6eKa8qr1Liu6Fm3PzqBn8jNQy0BQm-00au53bGuVn-VeGvls6qxFnxd2wo/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