Jenis jenis menu Dropdown

Ke Anjeun Bakal didirect ka link batur.. soalna ieu th sumberna mnang ti Dieu


Menu ini akan membuat tampilan blog anda semakin profesional. Dan berikut 9 jenis menu horizontal drop down untuk blog.

Cara Membuat Daftar Isi Otomatis

Cara Membuat Daftar Isi Keren di Blog - Kali ini saya akan berbagi Tips dan Tutorial Blog yaitu Cara Membuat Daftar Isi Keren di Blog, daftar isi kali ini lain dari yang sebelumnya lebih bagus, keren dan praktis, juga bisa kamu bikin di Halaman Penuh.Jika kamu memasang Daftar isi kaya gambar di bawah ini maka akan tampil berupa Label nya setelah di Klik Judul Label nya maka akan terbuka bagian isi Label tersebut berupa judul posting nya.

Jika sobat berminat silahkan kamu Copy kode di bawah ini.

<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEVHEaC0QA5kh7pnG83FjMbX29bJyMW2Yqq5JD06DifDai4FyuuKH8y6f9r6Vtx74rmv781WpGKGCWuULMNkP0ooa_WrqlSGQTLVzSBFipr-1biQU53QolsfNwigvNajXyOWeN397q68/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:ccc; repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background:#ccc; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://infonetmu.googlecode.com/files/Acc1.js" type="text/javascript">
</script>
<script src="http://blazerracing.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Kamu ganti kode yang berwarna merah dengan alamat Blog kamu.
Kalau mau di Halaman Penuh.

• Pilih Posting Baru.
• Pilih Edit Html yang ada di samping Compose.
• Lalu copy kode yang di atas.
• Dan lihat hasilnya. 

Gimana mudah kan Cara Membuat Daftar Isi Keren.

SELAMAT MENCOBA

Percepat Loading Blog

Percepat Loading Blog dengan Optimalisasi/Kompres CSS

Apa hubungan CSS dengan load time (waktu muat) halaman blog? Yang paling sederhana, ukuran file CSS menentukan berapa banyak bagian yang harus dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang. Anda dapat menggunakan website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda.

Setelah ganti template beberapa waktu yang lalu, masalah loading blog yang cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja hal ini berefek tidak baik. Yang pertama efeknya adalah ketidaknyamanan pengunjung. Terlebih lagi apabila muncul ketidaksabaran dan  kemudian diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!". Yang kedua, Google saat ini telah melakukan penalti bagi website/blog yang memiliki waktu load yang terlalu lama. Walhasil, peringkat dalam indeks pencarian bisa turun, dengan kata lain SEO lemah.

Salah satu usaha yang saya lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet. Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Selain itu, dilakukan pula  beberapa langkah lain, salah satunya: melakukan perampingan CSS. Mudah-mudahan saat ini loadtime sudah berkurang meskipun belum maksimal (mudah-mudahan ga kelamaan ya).

Kembali ke CSS. File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML, XML, maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, pada bagian ini, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file.

Lalu bagaimana cara mengurangi ukuran file CSSnya?

1. Lakukan Editing CSS Secara Manual.

Ada beberapa contoh aturan berikut ini:

Misalnya aturan pada header-wrapper,

#header-wrapper {

background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

Contoh di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:

#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

Pada contoh styling berikut:

{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }

Style margin di atas dapat kita rampingkan dengan CSS short-hand dan mengurangi spacenya:

{Margin:15px 10px;}

Karena nilai margin atas dan bawah sama serta nilai kanan dan kiri sama, kita dapat merampingkan dengan cara di atas, dimana 15px mewakili ukuran atas-bawah dan 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: {margin:10px}. Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

Ehm, sudah mulai pusingkah? Tidak kan? Bukankah belajar itu menyenangkan? ^^ Untuk melakukan cara-cara lain dan jika tertarik anda dapat mengunjungi W3 School.

2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online

Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:

-CSS Drive Gallery

-CSS Compressor

-Online CSS Optimiser/Optimizer
-Minify CSS

-CSSTidy Online

Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkahnya:

a. Copy semua aturan CSS dari template HTML/XML.

b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lains ebagainya.

c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman.

d. Download backup template terlebih dahulu pada halaman edit HTML.

e. Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut.

f. Preview dan jika tidak ada masalah lagi, save.

Clue: 

Seluruh code CSS terletak di bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.

Pilih jenis/opsi kompresi 'standard'  atau sejenisnya pada tool kompresi CSS yang anda gunakan.

Semoga bermanfaat dan Good luck.

sumber meunang ti dieu