Novelist Fantasies

Thursday, December 5, 2013

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... :) ^^

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 == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VMlH_wPKZuL_ccHjVnLRGeLtd6tlZQ7OgJTOQ7CmL8SidrPaB6cJhu3A1fTwWphW-IIhPgieyBONDbVvoF74DhLQyGVRPXKW8DxQCjKU16waWz9a5SvWqM4ILAE8tbtNTtqKKceyuMfx/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VMlH_wPKZuL_ccHjVnLRGeLtd6tlZQ7OgJTOQ7CmL8SidrPaB6cJhu3A1fTwWphW-IIhPgieyBONDbVvoF74DhLQyGVRPXKW8DxQCjKU16waWz9a5SvWqM4ILAE8tbtNTtqKKceyuMfx/s400/gc_social_sprite.gif') !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/AVvXsEj4Z2KmMd1QNynhVl1vTz2d0K3_FYb7f8LUv8SkSDIPNP9nbzj4LKYPlZWjF5ijoBJcP1FTB2VFJdlYdjlFGgjHJ43GOX7h7V_-58LCMwAj0zIQuQNpJ9M7q9sqniwsdFUYSYdnNEvhtRLB/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: "D-GENERA BLOG",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":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

Cara Membackup Daftar Email Pelanggan FeedBurner Anda Dengan Aman

Melanjutkan postingan saya sebelumnya mengenai isu bahwa Google akan menutup layanan FeedBurner pada 2013 ini, maka saya akan memposting bagaimana cara membackup daftar email pelanggan FeedBurner Anda dengan Aman. FeedBurner adalah layanan untuk berlangganan melalui email yang banyak digunakan oleh blogger, kecuali Anda menggunakan layanan premium seperti aweber, kemungkinan bahwa Anda menggunakan FeedBurner juga. Untuk beberapa orang, FeedBurner mungkin segala sesuatu yang mereka butuhkan. Tapi untuk blogger yang lebih canggih di luar sana, beberapa layanan premium tampaknya menawarkan fitur lebih banyak. Dan fakta membuktikan bahwa FeedBurner berada dalam masalah beberapa bulan yang lalu bahwa layanannya tidak berjalan dengan sangat baik. Terserah apapun kasusnya, melakukan backup saya pikir merupakan salah satu ide yang baik. Apakah Anda ingin memindahkan pelanggan Anda ke layanan lain, atau Anda hanya ingin membuat cadangan, Anda hanya perlu untuk men-download daftar pelanggan FeedBurner Anda. Di sini, kami akan memberitahu Anda bagaimana untuk membackup daftar Email Pelanggan FeedBurner Anda.

FeedBurner tidak begitu terkenal karena beberapa alasan. Padahal layanan ini memiliki banyak fitur yang ditawarkan, seperti subscription management, email branding, customizable delivery and communication preferences, serta banyak lagi. Anda dapat melihat dan mengurutkan daftar pelanggan Anda, mengaktifkan/ menonaktifkan dan menghapus email individu, dan menerima email ketika orang berhenti berlangganan. Selain itu, FeedBurner memiliki pilihan ekspor, sehingga Anda dapat mengekspor daftar untuk format excel atau csv.

Download Email Pelanggan FeedBurner Anda

Untuk mendownloadnya, login dulu ke akun FeedBurner Anda. FeedBurner sebelumnya memiliki masalah menampilkan jumlah pelanggan, tetapi tampaknya baik-baik saja bagi kebanyakan orang saat ini. Setelah login, cukup klik pada nama blog yang ingin Anda backup daftar pelanggan Anda.

Anda kemudian akan diarahkan ke dashboard. Klik pada tab Publicize pada dashboard Anda.

Di bawah tab publicize, Anda akan melihat pilihan Email Subscriptions di sidebar kiri. Setelah Anda klik, Anda akan melihat beberapa opsi lebih lanjut. Sekarang klik pada Subscription Management.

Sekarang, Anda dapat melihat jumlah pelanggan email Anda. Ketika Anda pertama kali login ke FeedBurner, apa yang Anda lihat adalah jumlah total dari pelanggan email dan RSS digabungkan. Tapi apa yang Anda butuhkan adalah hanya daftar Email pelanggan bukan daftar pelanggan RSS. Pada halaman Subscription Management, jika Anda gulir ke bawah sampai ke bagian bawah, Anda akan melihat jumlah total Pelanggan Anda, yang hanya menghitung pelanggan email Anda.

Jika Anda klik pada pilihan View Subscriber Details (ditunjukkan pada gambar di atas), akan ada pilihan untuk mengekspor daftar.

Cukup klik pada Export: CSV, dan Anda sudah menyelesaikannya! Anda akan diminta untuk menyimpan file, yang berisi semua email pelanggan Anda. Anda dapat melakukan apa saja dengan file ini, baik menyimpannya di komputer Anda, atau meng-upload ke cloud storage misalnya Dropbox atau yang lainnya.

Sementara itu, jika Anda memiliki pertanyaan, jangan ragu untuk bertanya. Good luck :)

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.

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/AVvXsEiIJl41J_Pd5S2eyvouDJSAsZCwDR2mPUkNrw94EFwzKjcqWJ4KOS4geaPD-HqMkxKpUY7n1ure7041M4d2yxaCv1ZkS15z0L8h3IWnJUuOxwvrQuwHs68kzQs23NkZSCRstPfHKnfDLiI/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJl41J_Pd5S2eyvouDJSAsZCwDR2mPUkNrw94EFwzKjcqWJ4KOS4geaPD-HqMkxKpUY7n1ure7041M4d2yxaCv1ZkS15z0L8h3IWnJUuOxwvrQuwHs68kzQs23NkZSCRstPfHKnfDLiI/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/AVvXsEg6zqTypOUpyZ-VoTSuMgYe-RuQ9bADBam7kJWXHDtAZxSONL91WDqzVKui9uWTgqMF8q7em-92mneijP_hyiKRtSV94jUrx4jmiSndOP1jvW-51Y8JYH3a0HFCLW1t8iwElGfCKwvXPGM/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/AVvXsEg6zqTypOUpyZ-VoTSuMgYe-RuQ9bADBam7kJWXHDtAZxSONL91WDqzVKui9uWTgqMF8q7em-92mneijP_hyiKRtSV94jUrx4jmiSndOP1jvW-51Y8JYH3a0HFCLW1t8iwElGfCKwvXPGM/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/AVvXsEi-8o8OSCzc2hGlQw3su32Nzxio_imLBP8ek2rDAXk1HPQURGIEs66nFhxec4oOepR_8vJnpyX_8Uq3K4pCOBOZ6FPTNYDr0xBf7SAOjCMBMeuQomRlaxx6I3ohX4qG4xx2II8lgeqW2B0/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8o8OSCzc2hGlQw3su32Nzxio_imLBP8ek2rDAXk1HPQURGIEs66nFhxec4oOepR_8vJnpyX_8Uq3K4pCOBOZ6FPTNYDr0xBf7SAOjCMBMeuQomRlaxx6I3ohX4qG4xx2II8lgeqW2B0/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/AVvXsEjJzLk0_ta60uSEyxH2RIrue7HFG-mplRyYp0668r98itMO4nR7XMfQfVf-I4opFaVR4dQJIdUkEFqlGvy2k1E7SMymN1M4oqDdtNJmH3LUMDZjuHcZNwMtckpSra26JpmIld4m1380-Rw/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/AVvXsEjJzLk0_ta60uSEyxH2RIrue7HFG-mplRyYp0668r98itMO4nR7XMfQfVf-I4opFaVR4dQJIdUkEFqlGvy2k1E7SMymN1M4oqDdtNJmH3LUMDZjuHcZNwMtckpSra26JpmIld4m1380-Rw/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/AVvXsEhUwTGQFHR_EkAvp3XkmjI8hsCc8hMcMvX15fiDXO31XxoR-s0LUhp-11uC2BXZFJKsXsMgtLS-fJl_rGSGZvY9YLzqlE21fBzdR7enAmiF6BByY5Gx2dncvb0FJw4WHmZIVO7QdZ3u2Kc/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/AVvXsEhUwTGQFHR_EkAvp3XkmjI8hsCc8hMcMvX15fiDXO31XxoR-s0LUhp-11uC2BXZFJKsXsMgtLS-fJl_rGSGZvY9YLzqlE21fBzdR7enAmiF6BByY5Gx2dncvb0FJw4WHmZIVO7QdZ3u2Kc/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/AVvXsEgE1iLtOvMZ4nYU6oSG1ai59ZNTrI1mOgsYWyTDCLf0Je-Z9jq4Uhfzs9Vf8DZ-pwn_aPCEa28n29XBh7nR-dUhNPIPbcMN2HV1YvOUXURA0tWl8RvJebyapTxvcNGIz615y2c3ZWeqkXQ/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1iLtOvMZ4nYU6oSG1ai59ZNTrI1mOgsYWyTDCLf0Je-Z9jq4Uhfzs9Vf8DZ-pwn_aPCEa28n29XBh7nR-dUhNPIPbcMN2HV1YvOUXURA0tWl8RvJebyapTxvcNGIz615y2c3ZWeqkXQ/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/AVvXsEhEeCzbvAeM8dAh7FPF0yToVIFeh4mNJ9Q0TtjRZoHNgiXI07DG-OmRNfdjw9NXgl4isP4UfHquMOQCtTKy3zCBB3Lb3FDM6c24w6pBQ3lT6YjYxWZdvvNBfoido7sfF6cLiyVCsE9jn9g/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/AVvXsEhEeCzbvAeM8dAh7FPF0yToVIFeh4mNJ9Q0TtjRZoHNgiXI07DG-OmRNfdjw9NXgl4isP4UfHquMOQCtTKy3zCBB3Lb3FDM6c24w6pBQ3lT6YjYxWZdvvNBfoido7sfF6cLiyVCsE9jn9g/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/AVvXsEhEeCzbvAeM8dAh7FPF0yToVIFeh4mNJ9Q0TtjRZoHNgiXI07DG-OmRNfdjw9NXgl4isP4UfHquMOQCtTKy3zCBB3Lb3FDM6c24w6pBQ3lT6YjYxWZdvvNBfoido7sfF6cLiyVCsE9jn9g/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/AVvXsEgdKJZsm_yiLFSrN2ATKynbpVIRHvxCpgXpjbC0futqAiwWatMkPrdUB4C5elLYfK1vtm2Xe2lJVYSAMm1h6xwb9esqG2T4rl4YNraceTBWy3qM8YEIjfL2GOLbSJfUq6MxciOzNem6xk0/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/AVvXsEgdKJZsm_yiLFSrN2ATKynbpVIRHvxCpgXpjbC0futqAiwWatMkPrdUB4C5elLYfK1vtm2Xe2lJVYSAMm1h6xwb9esqG2T4rl4YNraceTBWy3qM8YEIjfL2GOLbSJfUq6MxciOzNem6xk0/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/AVvXsEgdKJZsm_yiLFSrN2ATKynbpVIRHvxCpgXpjbC0futqAiwWatMkPrdUB4C5elLYfK1vtm2Xe2lJVYSAMm1h6xwb9esqG2T4rl4YNraceTBWy3qM8YEIjfL2GOLbSJfUq6MxciOzNem6xk0/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/AVvXsEhqwEtsqS6708P2a5QCb9qAGchkFe8KqRaT5j3kuJlTL1MvA79qGi87rL2Hodrm5Cbkja2GAF6VwizfTCPCnvSCuHhRPFi9EbVtqqNlTTAZXVEoq8IdNDkhDVQoS5e185Fx2TOiDHeJtY0/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwEtsqS6708P2a5QCb9qAGchkFe8KqRaT5j3kuJlTL1MvA79qGi87rL2Hodrm5Cbkja2GAF6VwizfTCPCnvSCuHhRPFi9EbVtqqNlTTAZXVEoq8IdNDkhDVQoS5e185Fx2TOiDHeJtY0/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/AVvXsEjL7szQ-4oIAlcMp16KGSWfHHIatLZGvekxU_5DBOLSg9jHCjX0WzWslXv1xMGEeaGBnazwl1GTNKxbamQaIzSuU_GIsJfza49XzU7_GvUH4uITelB6zXIHMWprX3QuW-z5Y5AhVyWU1U0/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7szQ-4oIAlcMp16KGSWfHHIatLZGvekxU_5DBOLSg9jHCjX0WzWslXv1xMGEeaGBnazwl1GTNKxbamQaIzSuU_GIsJfza49XzU7_GvUH4uITelB6zXIHMWprX3QuW-z5Y5AhVyWU1U0/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/AVvXsEjfGJExYwWXabXrwYB0boHw8ciejsVtNA8o2C1AFvHLZD_Yd31wJLfqt_mCSi9GQdAhUt2syew-g6VFW10miWju2kJ4oG4a3XimPx7PoI2rlyDl4MkYVDjfI2Wvigr6aOhr8zUZrirEHL4/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/AVvXsEjfGJExYwWXabXrwYB0boHw8ciejsVtNA8o2C1AFvHLZD_Yd31wJLfqt_mCSi9GQdAhUt2syew-g6VFW10miWju2kJ4oG4a3XimPx7PoI2rlyDl4MkYVDjfI2Wvigr6aOhr8zUZrirEHL4/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/AVvXsEjfGJExYwWXabXrwYB0boHw8ciejsVtNA8o2C1AFvHLZD_Yd31wJLfqt_mCSi9GQdAhUt2syew-g6VFW10miWju2kJ4oG4a3XimPx7PoI2rlyDl4MkYVDjfI2Wvigr6aOhr8zUZrirEHL4/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/AVvXsEgS6fABPOLKnehQsjKcat6le5o6pSFitPRwECN2ba1y4ZFkYO_IB6isTelbvjGnKPAyH1qbz22rvub8Z2j1fsNRGOZ9D_leHFo3MpyK7BYok16NWF37i6Q8MIBw-RWapFySA11SCv_cvEs/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/AVvXsEgS6fABPOLKnehQsjKcat6le5o6pSFitPRwECN2ba1y4ZFkYO_IB6isTelbvjGnKPAyH1qbz22rvub8Z2j1fsNRGOZ9D_leHFo3MpyK7BYok16NWF37i6Q8MIBw-RWapFySA11SCv_cvEs/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/AVvXsEgS6fABPOLKnehQsjKcat6le5o6pSFitPRwECN2ba1y4ZFkYO_IB6isTelbvjGnKPAyH1qbz22rvub8Z2j1fsNRGOZ9D_leHFo3MpyK7BYok16NWF37i6Q8MIBw-RWapFySA11SCv_cvEs/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/AVvXsEjZ99sdwcDZJUF1YLsaf8iqKfUaKmC0vfbZfIqtxvzeRVpCbobS8_BhfgHo7_GsJWcKsVFmx2F2QspGRHeQO5i7yoxgqnYzlTXBVDwGhGwhxFbpv748tiWhXQnNFC-MLcaGNcvxvQLb-9Q/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ99sdwcDZJUF1YLsaf8iqKfUaKmC0vfbZfIqtxvzeRVpCbobS8_BhfgHo7_GsJWcKsVFmx2F2QspGRHeQO5i7yoxgqnYzlTXBVDwGhGwhxFbpv748tiWhXQnNFC-MLcaGNcvxvQLb-9Q/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/AVvXsEisrtPuDbmOeo-xl4kLX6ZvHdNhDRywVWJkCmL2TkGorSdXPSKZzhfIcpHa1UJIyDa3qF03CIouHp0aVi9zcL9XN2t9xLOlcY2R5525_rs_Mzpdwg3kW-IadfvdR4pJh8_E3MmJthwNdj4/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisrtPuDbmOeo-xl4kLX6ZvHdNhDRywVWJkCmL2TkGorSdXPSKZzhfIcpHa1UJIyDa3qF03CIouHp0aVi9zcL9XN2t9xLOlcY2R5525_rs_Mzpdwg3kW-IadfvdR4pJh8_E3MmJthwNdj4/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/AVvXsEjCiFXdHpJUlA-CGhUuYcY6h2oJZB-2W3agdAsQPuKYmf_uX1nWnzVcaEKBuGND5qtmR_xy-8cqpmsJUOUsqvNGohI_1WekrTUrzQA_wuDDnuQz3EW2upqOWm9s0BKqPgq9vyAPGoSk8UY/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCiFXdHpJUlA-CGhUuYcY6h2oJZB-2W3agdAsQPuKYmf_uX1nWnzVcaEKBuGND5qtmR_xy-8cqpmsJUOUsqvNGohI_1WekrTUrzQA_wuDDnuQz3EW2upqOWm9s0BKqPgq9vyAPGoSk8UY/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/AVvXsEhu9mK_5fxya_5EmWvmrwqEcVEyjWIK33aHCyr3GanKzwib112DZ6G0VQyWB3puJ87ausd4gW20SbZNpdX5ojbbHwHGRbbpKrE6vrLtJzXh65UrZP5tIw4gQnRcZ22r-imWjUzywiVyppA/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9mK_5fxya_5EmWvmrwqEcVEyjWIK33aHCyr3GanKzwib112DZ6G0VQyWB3puJ87ausd4gW20SbZNpdX5ojbbHwHGRbbpKrE6vrLtJzXh65UrZP5tIw4gQnRcZ22r-imWjUzywiVyppA/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/AVvXsEg9tZ1QpGF2UySkMmyudw8gDT0_lDjoDW6lWdICuSsvCFj7RoVS2AhYDRQ2oPNrabm53X_zafrYFxE5MP2otXUKSyV_xR8giCt2abCRi0TKPCmSxdJsBVlIj09vTNlGg01AhUnbIwozI2k/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/AVvXsEg9tZ1QpGF2UySkMmyudw8gDT0_lDjoDW6lWdICuSsvCFj7RoVS2AhYDRQ2oPNrabm53X_zafrYFxE5MP2otXUKSyV_xR8giCt2abCRi0TKPCmSxdJsBVlIj09vTNlGg01AhUnbIwozI2k/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/AVvXsEg9tZ1QpGF2UySkMmyudw8gDT0_lDjoDW6lWdICuSsvCFj7RoVS2AhYDRQ2oPNrabm53X_zafrYFxE5MP2otXUKSyV_xR8giCt2abCRi0TKPCmSxdJsBVlIj09vTNlGg01AhUnbIwozI2k/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/AVvXsEjoLqjSt5-q6aKC-1TK8fRNaEArtIgZW3i6wg_pUoGyBFUTDnWykZqvdHCMxQirPxqJRgTOge6q1a1xGJ3txE6IUykQEl2L1LaywC6PF1mYCC9GMuQlCITQ-C38XakaB4bcF40VVHzhyS8/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLqjSt5-q6aKC-1TK8fRNaEArtIgZW3i6wg_pUoGyBFUTDnWykZqvdHCMxQirPxqJRgTOge6q1a1xGJ3txE6IUykQEl2L1LaywC6PF1mYCC9GMuQlCITQ-C38XakaB4bcF40VVHzhyS8/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/AVvXsEhCr4NcGtGOEwhRTDH9jK3Mb9JNbFnrE5X6s0_bjb3JguYgIZx-7V3ywicOJpDjSqpN4UaeHWnm-8nno_nPvAX7vXPNCKuOBPSuE3Wyh0rO9H6KG22q4m4dS-GfUhxe3Ez0GoEdKrtdTMg/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/AVvXsEhCr4NcGtGOEwhRTDH9jK3Mb9JNbFnrE5X6s0_bjb3JguYgIZx-7V3ywicOJpDjSqpN4UaeHWnm-8nno_nPvAX7vXPNCKuOBPSuE3Wyh0rO9H6KG22q4m4dS-GfUhxe3Ez0GoEdKrtdTMg/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/AVvXsEhCr4NcGtGOEwhRTDH9jK3Mb9JNbFnrE5X6s0_bjb3JguYgIZx-7V3ywicOJpDjSqpN4UaeHWnm-8nno_nPvAX7vXPNCKuOBPSuE3Wyh0rO9H6KG22q4m4dS-GfUhxe3Ez0GoEdKrtdTMg/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/AVvXsEgRs6_3hzK6MiPrUoia3sqV6oXAXgBN2Tva7d9fCyX5mZm7f4lFcXONO9K4RoUag8WPdHKDFz2SM1fQ_KQkwnP33pWUvlR8twOYXmoNvGrOdKgxCn6EyYr3Bb8FtZOjQWvDqi9W6s5TMvc/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRs6_3hzK6MiPrUoia3sqV6oXAXgBN2Tva7d9fCyX5mZm7f4lFcXONO9K4RoUag8WPdHKDFz2SM1fQ_KQkwnP33pWUvlR8twOYXmoNvGrOdKgxCn6EyYr3Bb8FtZOjQWvDqi9W6s5TMvc/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/AVvXsEhhhlrbbdpCS_QGMrH3IRzbQKN-nDdMuhMKjnt4VnhIPkhw6rHWsnEaYtXo6g_CfC7sFO_fGwX9UeqWMsuUWNyauVnvX1xjoBf-opBkxqYE_-Cj2UXZng85cpNFJxxsxaJ3f1-eVZ9H2nQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhlrbbdpCS_QGMrH3IRzbQKN-nDdMuhMKjnt4VnhIPkhw6rHWsnEaYtXo6g_CfC7sFO_fGwX9UeqWMsuUWNyauVnvX1xjoBf-opBkxqYE_-Cj2UXZng85cpNFJxxsxaJ3f1-eVZ9H2nQ/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/AVvXsEheN6jbchqKIJW49FE8N5m0LdYPvgyY8CLROK3ktD1FM_Qi2JsrzmW_OOBtvHOL8-6rHdGU4Nws0qhmD_J9rtO9oyd1Uh0Kn-LTC_oHd4SI1Fihhha16NsJVoKwMKRXtyVuqmaZ0nR6q_o/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheN6jbchqKIJW49FE8N5m0LdYPvgyY8CLROK3ktD1FM_Qi2JsrzmW_OOBtvHOL8-6rHdGU4Nws0qhmD_J9rtO9oyd1Uh0Kn-LTC_oHd4SI1Fihhha16NsJVoKwMKRXtyVuqmaZ0nR6q_o/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

Novelist Fantasies

Blogger templates

Blogroll

Labels

About

About Me

Thursday, December 5, 2013

Hope For Another Of This :'(

Hope For Another Of This :'(

SS 02

Hope For Another Of This :'(

Hope For Another Of This :'(

SS 02

SS 01

SS 01

Hope For Another Of This

Hope For Another Of This

Tuesday, December 3, 2013

a

a

Tuesday, November 12, 2013

My Masterpiece

My Masterpiece

Thursday, November 7, 2013

Modifikasi Blog Anda Agar Memiliki Kecepatan Loading Yang Maksimal

Memasang Tombol Share Pinterest, Facebook, Twitter Melayang di Blogger

Cara Membackup Daftar Email Pelanggan FeedBurner Anda Dengan Aman

11 Tips Penting Untuk Mengurangi Waktu Loading Blog Anda

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

Time Has Come

Popular Posts

Blogger news

Labels

Blog Archive