proBlogiz

Table of Contents (ToC) di Blogger

Tentu Anda semua tahu pentingnya membuat Daftar Isi Blog atau Table of Contents (ToC) atau juga disebut Sitemap pada blog/website. Table of Contents merupakan halaman sebuah blog yang berisikan semua link-link posting artikel atau konten yang telah diterbitkan selama ini. Daftar isi juga berupa link-link yang disusun sesuai dengan kategori atau jenis artikel pada sebuah blog. Sitemap atau daftar isi ini bisa dijadikan panduan atau navigasi bagi user atau pengunjung blog untuk mempermudah menemukan artikel atau posting di blog itu sendiri.

Hampir semua website atau blog profesional menyediakan link yang menuju ke halaman Daftar Isi di situs mereka. Bagaimana dengan blog Anda Sob? saya yakin semua sudah memilikinya. Ada banyak sekali tutorial cara membuat Table of Contents (ToC) di Blogger dengan desain dan kelebihan masing-masing. Nah, Desain Blog Problogiz kali ini, ingin juga membagi tutorial cara membuat Daftar Isi (Sitemap) Blog yang Keren untuk Anda sobat blogger.

So, seperti biasa langsung lihat DEMOnya terlebih dahulu :


Gimana Sob, tertarik untuk membuatnya?

Daftar Isi Blog seperti demo diatas (our blog ToC) dibuat dengan CSS dan jQuery yang ringan, dan bekerja secara otomatis memperbarui (update) semua posting artikel baru yang telah diterbitkan. Dengan ditambah lagi Javascript ringan untuk menampilkan semua artikel yang dikelompokkan sesuai dengan kategori atau label di blog. Adanya jQuery script membuat list daftar isi atau susunan artikel terlihat lebih rapi, apik dan tertata secara accordion (sliding) listing.

ToC dengan Accordion jQuery
ToC dengan Accordion jQuery script
ToC tanpa Accordion jQuery
ToC tanpa Accordion jQuery script
Lihat perbedaan tampilan gambar Table of Contents dengan Accordion style dan yang tidak, pada ToC tanpa accordion script hasilnya semua post akan tebuka sekaligus. Jika Anda lebih suka tampilan tanpa accordion dengan mudah Anda dapat menghapus scriptnya ( kode Javascript accordion yang berwarna merah)

 CSS

/*--------PROBLOGIZ TOC-----*/ 
.judul-label{ 
background-color:#E5ECF9; 
font-weight:bold; 
line-height:1.4em; 
margin-bottom:5px; 
overflow:hidden; 
white-space:nowrap; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 1px 1px 4px #AAAAAA; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
color: #e9e9e9; 
border: 2px solid white !important; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#0D0101), to(#575757)); 
background: -moz-linear-gradient(top,  #888,  #575757); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.data-list{ 
line-height:1.5em; 
margin-left:5px; 
margin-right:5px; 
padding-left:15px; 
padding-right:5px; 
white-space:nowrap; 
text-align:left; 
font-family:"Arial",sans-serif; 
font-size:12px; 
} 
.list-ganjil{ 
background-color:#F6F6F6; 
} 
.headactive{ 
    color: #E51E1E; 
    border: 2px solid white !important; 
    background: #1C8DFF; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
}

Disini Anda dapat memberi sentuhan sendiri seperti warna font, background-color, hover, gradient, dll. sesuaikan dengan blog atau selera Anda. Perhatikan kode-kode yang berwarna, keterangan dibawah ini dapat Anda gunakan untuk mempermudah edit CSS :
  • kode-kode yang diberi warna BIRU : warna-warna non aktif mode pada tab
  • kode-kode yang diberi warna MERAH : warna-warna aktif mode pada tab
  • kode warna PINK : warna background list yang bernomor ganjil
  • kode warna UNGU : ukuran font dan jenis huruf list konten
Ada 2 metode cara menempatkan CSS di blog, yang pertama letakkan di template langsung atau bisa juga di pasang sekaligus di laman Daftar Isi (mode HTML) di post editor.

Javascript dan jQuery

<script src="https://problogizjs.googlecode.com/files/problogiz.toc.js"></script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://problogizjs.googlecode.com/files/TOCaccordion.js" type="text/javascript"></script>

Pengunaan Javasript dan jQuery diperlukan untuk menampilkan Daftar Isi lebih menarik dan bekerja lebih baik, seperti menuyusun list-list artikel posting, memanggil data-data yang ada (json script), updating post-post baru, dan juga membuat accordion style atau sliding tab bekerja.

keterangan:
  • ganti kode berwarna hitam dengan Url alamat blog Anda
  • script yang berwarna biru berfungsi agar Table of Contents bekerja.
  • script yang berwarna hijau berfungsi untuk memanggil data-data yang ditampilkan dalam hal ini artikel postingan blog yang ada.
  • script yang berwarna merah adalah script accordion (tersusun ala sliding vertikal) untuk menu-menu tab daftar isi.

Langkah Memasang Daftar Isi Blog Keren di Blogger

Untuk metode pemasangannya, seluruh kode CSS diletakkan di template dan hanya Javascript di Laman Daftar Isi-nya.

Untuk CSS :

  1. Blogger > pilih Template > Edit HTML
  2. Control+F> cari kode ]]></b:skin>
  3. Copy semua kode CSS diatas dan pastekan tepat sebelum kode ]]></b:skin>
  4. Simpan template

Untuk Javascript

  1. Masuk ke Laman > pilih Laman baru > pilih Laman kosong > beri Judul Laman (terserah Anda bisa "Sitemap"; "Daftar Isi"; atau " Table of Contents")
  2. Kemudian klik HTML (tombol sebelah "Compose") > Copy semua kode javascript, jQuery diatas dan pastekan di area HTML tersebut.
  3. Klik Pratinjau > kalau semua OK > Publikasikan
Done!!

tambahan:
Jika Anda sudah mempunyai Laman Daftar Isi Blog, tinggal ganti CSS dan Javascriptnya dengan yang baru kemudian Perbarui Laman-nya.
Anda juga bisa memberi deskripsi penelusuran dan ingat biasanya Pilihan untuk komentar disembunyikan (jangan bolehkan).

Untuk metode kedua, Anda dapat langsung memasang seluruh kode CSS dan Javascript di area Laman (mode HTML) dan publikasikan. Jangan lupa beri tag tambahan <style> kode CSS </style> kemudian diikuti Javascript dibawahnya.

Selamat Mencoba Kawan!! Semoga Desain Table of Contents sederhana ini bisa berguna buat Anda yang membutuhkan.

Salaam,

Read More


proBlogiz


Rolling Door Menu Style atau Menu Pintu Garasi adalah sebuah menu navigasi dengan gaya seperti pintu rolling door (pintu garasi) di mana gambar "pintu" akan menggeser keatas (slide up) saat mouse diatasnya (hover) dan membuka sesuatu di baliknya. Desain menu navigasi ini akan dibuat dengan CSS3, dan dengan jQuery. Kemudian kita akan menggabungkan keduanya untuk menghasilkan menu navigasi yang cantik dan unik, Menu Navigasi Rolling Door.
Ok kita langsung saja lihat dahulu DEMOnya :

Menu navigasi keren tersebut sebenarnya saya adop dan saya sharing kembali dari tutorial aslinya di css-tricks.com dengan judul Garage Door Style Menu. Dengan harapan sobat Blogger dapat juga menikmati menu unik ini dan berguna untuk memberi sentuhan baru di blog Anda.

Langkah Membuat Menu Nav Rolling Door

1. Mempersiapkan Gambar

Disini akan diperlukan tiga macam gambar yang berbeda, pertama adalah gambar untuk seluruh background menunya sendiri. Anda dapat membuatnya sendiri gambar atau image yang dibutuhkan dengan Photoshop atau Corel. Gambar ini nantinya digunakan latarbelakang menu, yang akan nampak setelah door (pintu) terbuka.

Contoh gambar yang telah disediakan:


Gambar Background Menu
Background Menu
Gambar diatas menggunakan file JPeg, dengan lebar 800 px dan tinggi 100 px, tentu Anda dapat merubahnya sesuai blog. Dan juga menggunakan CSS Sprite agar lebih ringan dan menghemat permintaan HTTP.

Yang kedua adalah membuat gambar untuk pintu garasinya (rolling door) itu sendiri, yang akan kita sebut dengan nama "shutter" atau jendela. Ini dibuat terpisah dan masing-masing gambar menu dengan pintu yang berbeda pula. Contoh pintu sebagai berikut:

pintu menu african plains
pintu menu repltiles
pintu menu aviary
pintu menu arctic zone


Masing-masing menu akan mempunyai pintu sendiri, seperti menu ular akan masuk ke pintu Reptiles. Anda bisa membuatnya yang lain dengan Photoshop, dengan ukuran masing-masing 200 x 100 px.

Terakhir, kita juga akan membuat sebuah jendela yang akan bertindak sebagai kerangka (frame) garasi. Ini akan terlihat unik, seuntuhan akan nampak indah seperti pintu rolling door saat animasi (hover). Tentu Anda juga sudah melihatnya di DEMO diatas bukan? Frame untuk garasi akan seperti ini jadinya :

frame window

Buatlah ukuran dimension untuk kerangka window diatas menjadi 200 x 103 px, dengan type PNG file.

2. HTML Markup

Nah sekarang kita mulai menulis kode HTML untuk memberikan link-link URL pada menu diatas. Markup HTML cukup sederhana, namun harus semantik dan bersih, seperti beikut:
<ul id="garagedoor">
  <li id="shutter1"><a href="#1">Link 1</a></li>
  <li id="shutter2"><a href="#2">Link 2</a></li>
  <li id="shutter3"><a href="#3">Link 3</a></li>
  <li id="shutter4"><a href="#4">Link 4</a></li>
 </ul>
ID pada menu akan memberi semua spesifikasi yang kita butuhkan, juga setiap item menu dapat memiliki gambar grafis pintu masing-masing, jadi kita akan menggunakannya sebagai hook.

3. CSS3 dan jQuery

Cara yang paling baik untuk mencapai teknik seperti demo menu diatas, adalah dengan menggunakan CSS3 dimana telah didukung dan fallback dengan metode JavaScript. Penggunaan "modernize enable"! sangat membantu, Modernizr adalah JavaScript library yang dapat membantu menangani masalah browser handle, khusunya csstransitions.
Pada code CSS akan dikombinasi dengan jQuery, hal ini untuk memastikan browser yang tidak mendukung transisi akan melakukan jQuery-based fallback dan hanya jika diperlukan saja.

So, ga usah bingung Sob, nanti kode CSS keseluruhan sudah disediakan.
CSS3 kode :
<style>
* { margin: 0; padding: 0; }
#garagedoor {
 margin: 10px auto;
 list-style: none;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUeGuroqVTjSCrzVM2wjJxAeVVbUDYS3PajpYW3sMWt4YybG2ZItVhTLnWnHhYFCtm0vQBFgKCwp0_ciqOdPw8KRPwemw20JeVjF-cRnAjBiKTVuXusbiEc5EIL7bNHiK-DkTVS4ICjX6j/s1600/menu-bg.jpg) no-repeat;
 width: 800px;
 overflow: auto; 
}
#garagedoor li {
 width: 200px;
 height: 100px;
 display: block;
 float: left;
}

/* Modernizer Enabled */
.csstransitions #garagedoor li {
 -webkit-transition: background-position 0.6s ease;
 -moz-transition: background-position 0.6s ease;
 -o-transition-property: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
 background-position: 0 -100px !important;
}

#garagedoor li#shutter1 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d6dELnazn-oEZkNRabHVftPmYiKkDySl3ktb6Z_hcBTT9C6yBG6cARPYuez_Jh6gHzfQ2nFpjyW4B56kN8gJrLiuAGd2V-kYFmvnaJeHlXZhYvBkpOR4G5QPekbFdQ7IWkpZn2hBW9Zu/s1600/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkjydR4LV5c6M3eQclt39w7Ro4RUlUKKcX4vVHJ69Xs7fumGkL0GDS53biKQl3mlZFosPdaPFBvaWultpwHMzSWQwvmToqRl88RcPFhrK6WogxuC4-uVd0gQu1dQ904nPtzbf-w6MBOMb/s1600/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qe1ptRbUFa5bjEVzcvIVXKgdW3E057ZBzeSAflbm66kFLPRw-MRqPPaSEVCS3IHxrJin3f39LhSshKs_lqi0AFU394pHCkIXGWZorebzVZp-y6h18cBTnHl-vUU0FAIZlZYZKHX2TDOj/s1600/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-TgUu8phDUaN091foy6TJ-xmidl6vlP9Fu7NFz-LjC-0djurxwqpK249cNbIxnjeBgfXg-tNjzmKVLNBWLJPEHSd4arOuktTHBYZN_TKw7gg0xsFgK9WG497u0P582ri76Bjh1DzeBhO/s1600/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOa9ipHXDsPQloroNuf_cqx-P41rpsxl3rLb6_uyqmmP7H2G8zfouT_wq1Oj8RwC_SPwl1mjQ1blRWd897osG2XRMVgOOOlo-II-4OHeA6tG2ViTcox17rZqsvXI-1EppiWBDEziF9vSB/s1600/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>
note: 
  • kode yang berwarna merah adalah URL gambar-gambar
  • lebar keseluruhan menu adalah 800 px (width: 800px;)
  • dan pintu menu 200 x 100 px

4. Javascript dan jQuery

Kita memerlukan Javascirpt modernizr-1.5.min.js untuk animasi dan transisi effect dan jQuery background position script, jadi ada dua script yang akan kita tempatkan bersama-sama sebagai widget menu rolling door ini.
<script src="https://problogizjs.googlecode.com/files/modernizr-1.5.min.js"></script>
<script src="https://problogizjs.googlecode.com/files/jquery.backgroundPosition.js"></script>

Final Kode HTML+ CSS + Js keseluruhan akan menjadi seperti berikut:
<ul id="garagedoor">
  <li id="shutter1"><a href="#1">Link 1</a></li>
  <li id="shutter2"><a href="#2">Link 2</a></li>
  <li id="shutter3"><a href="#3">Link 3</a></li>
  <li id="shutter4"><a href="#4">Link 4</a></li>
 </ul>
<script src="https://problogizjs.googlecode.com/files/modernizr-1.5.min.js"></script>
<script src="https://problogizjs.googlecode.com/files/jquery.backgroundPosition.js"></script> 

<style>
* { margin: 0; padding: 0; }
a { outline: 0; }
h1 { text-align: center; margin: 0 auto; font: bold 32px Helvetica, Arial, Sans-Serif; margin: 70px auto 10px; letter-spacing: -1px; }
h2 { text-align: center; padding: 5px; margin: 10px; background: #fff2b6; color: #398138; }
 
#garagedoor {
 margin: 10px auto;
 list-style: none;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUeGuroqVTjSCrzVM2wjJxAeVVbUDYS3PajpYW3sMWt4YybG2ZItVhTLnWnHhYFCtm0vQBFgKCwp0_ciqOdPw8KRPwemw20JeVjF-cRnAjBiKTVuXusbiEc5EIL7bNHiK-DkTVS4ICjX6j/s1600/menu-bg.jpg) no-repeat;
 width: 800px;
 overflow: auto; 
}
#garagedoor li {
 width: 200px;
 height: 100px;
 display: block;
 float: left;
}

/* Modernizer Enabled */
.csstransitions #garagedoor li {
 -webkit-transition: background-position 0.6s ease;
 -moz-transition: background-position 0.6s ease;
 -o-transition-property: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
 background-position: 0 -100px !important;
}

#garagedoor li#shutter1 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d6dELnazn-oEZkNRabHVftPmYiKkDySl3ktb6Z_hcBTT9C6yBG6cARPYuez_Jh6gHzfQ2nFpjyW4B56kN8gJrLiuAGd2V-kYFmvnaJeHlXZhYvBkpOR4G5QPekbFdQ7IWkpZn2hBW9Zu/s1600/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkjydR4LV5c6M3eQclt39w7Ro4RUlUKKcX4vVHJ69Xs7fumGkL0GDS53biKQl3mlZFosPdaPFBvaWultpwHMzSWQwvmToqRl88RcPFhrK6WogxuC4-uVd0gQu1dQ904nPtzbf-w6MBOMb/s1600/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qe1ptRbUFa5bjEVzcvIVXKgdW3E057ZBzeSAflbm66kFLPRw-MRqPPaSEVCS3IHxrJin3f39LhSshKs_lqi0AFU394pHCkIXGWZorebzVZp-y6h18cBTnHl-vUU0FAIZlZYZKHX2TDOj/s1600/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-TgUu8phDUaN091foy6TJ-xmidl6vlP9Fu7NFz-LjC-0djurxwqpK249cNbIxnjeBgfXg-tNjzmKVLNBWLJPEHSd4arOuktTHBYZN_TKw7gg0xsFgK9WG497u0P582ri76Bjh1DzeBhO/s1600/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOa9ipHXDsPQloroNuf_cqx-P41rpsxl3rLb6_uyqmmP7H2G8zfouT_wq1Oj8RwC_SPwl1mjQ1blRWd897osG2XRMVgOOOlo-II-4OHeA6tG2ViTcox17rZqsvXI-1EppiWBDEziF9vSB/s1600/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>

Copy semua kode diatas dan gunakan sebagai widget Menu Navigasi Rolling Door pada blog Anda. Letakkan widget tersebut tepat dibawah Header atau Judul Blog kamu.

adding HTML and Javascript


Browser Support
Menu Pintu Garasi ( Rolling Door Menu) ini bekerja baik dengan pada Chrome, Firefox 4+. Pada IE akan maksimal dengan IE 10+ dan Opera 11.6 +.

Catatan Tambahan:
Menu ini juga akan berhasil dan tidak crash jika template Anda sudah menggunakan jQuery1.2.6 atau jQuery1.6.1 atau 1.6.2  dan jQuery 1.5.2 atau jQuery versi 1.8.3. Ini berdasarkan test yang telah saya lakukan dibeberapa template berbeda. Mungkin akan crash pada jQuery versi lain namun saya belum mencobanya, Selamat Mencoba Kawan semoga berhasil:)


So Enjoy it Sobat:)
Read More


proBlogiz

Menu Accordion Vertikal dengan CSS3 dan jQuery

Simple Menu Accordion Vertikal dibuat dengan menggunakan CSS3 serta memakai jQuery minimalis untuk menggeser daftar link-link. Menu akordion ini sangat tepat bagi yang ingin menghemat space atau ruang di blog Anda. Tutorial Desian Blog kali ini membahas cara membuat menu accordion (menu sliding) vertikal yang sederhana dan ringan, yang dapat Anda gunakan sebagai menu navigasi di sidebar atau juga sebagai widget lainnya.

Simple Menu Accordion Vertikal keren dan simple ini juga kompatibel pada semua major browser termasuk IE8 (best on Mozilla Firefox and Chrome). Penggunaan CSS3 dan HTML yang sederhana memudahkan Anda berkreasi sendiri dengan warna, background, font serta merubah link-link daftar menu sesuai kebutuhan Anda. jQuery dibutuhkan untuk membuka (menggeser) menu dan sub menu pada Menu Accordion tersebut.

Ok, sebelum lebih jauh membahasnya coba lihat dulu demo menu keren ini :

Langkah Membuat Menu Accordion Vertikal

1. HTML

Pertama-tama kita membuat kode HTML sederhana untuk daftar menu sebagai berikut:

<div id="accordian">
<ul>
<li>
   <h3>NAMA MENU</h3>
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
<li><a href="#">LINK4</a></li>
</ul>
</li>
</div>

Contoh diatas menu yang sangat sederhana, kode HTML dapat Anda rubah sendiri nama-nama menunya seperti NAMA MENU, link-link LINK1, LINK2, dll. sesuai dengan niche Blog Anda. Jika Anda ingin menambah link menu cukup tambah kode berikut :
<li><a href="#">LINK</a></li>


Saya sendiri membuat daftar menu sesuai dengan blog Problogiz, seperti contoh Demo diatas. Tentu Anda dapat merubahnya sendiri sesuai blog Anda. Kode menu HTML final akan terlihat seperti dibawah ini:
<div id="accordian">
<ul>
<li>
   <h3>TUTORIAL</h3>
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li>
   <h3>OPTIMASI BLOG</h3>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO on Page</a></li>
<li><a href="#">Pagerank</a></li>
<li><a href="#">ALEXA Rank</a></li>
<li><a href="#">Speed Test</a></li>
</ul>
</li>
<li>
   <h3>BLOG TOOLS</h3>
<ul>
<li><a href="#">Kode Warna HTML</a></li>
<li><a href="#">Check SERP</a></li>
<li><a href="#">Check Pagerank</a></li>
<li><a href="#">CSS Editor</a></li>
<li><a href="#">HTML Editor</a></li>
<li><a href="#">Parse HTML</a></li>
<li><a href="#">Analisa Blog</a></li>
</ul>
</li>
<li class="active">
   <h3>LABEL</h3>
<ul>
<li><a href="#">Tutorial Blogger</a></li>
<li><a href="#">Tutorial SEO</a></li>
<li><a href="#">Desain Blog</a></li>
<li><a href="#">Tip dan Trik</a></li>
<li><a href="#">Search Engine</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Informasi</a></li>
</ul>
</li>
</ul>
</div>

  • Anda dapat mengedit nama menu : <h3>TUTORIAL<h3>, LABEL....dst sesuai keinginan.
  • Menu item atau link-link juga sesuaikan dengan kebutuhan Anda.
  • Perhatikan kode yang berwarna pink : <li class="active">
  • Ini berarti menu akan dibiarkan tetap terbuka, seperti contoh DEMOnya. Jika ingin menutupnya hapus saja kode class="active" dan gantikan dengan kode <li> saja.

2. CSS

Menu accordion (menu sliding) ini didesain tampak apik dengan menggunakan CSS3, dan memudahkan untuk berkerja dengan warna-warna, ukuran menu untuk menyesuaikan blog (sidebar), memungkinkan memberi sentuhan selera Anda bahkan Anda juga dapat mengimpor jenis font yang Anda mau atau menambahkan icon pada menu.

note: untuk menambahkan icon atau font sendiri Anda dapat mencarinya di http://fortawesome.github.io/Font-Awesome.

<style>
/*Basic reset*/
* {margin: 0; padding: 0;}

#accordian {
 background: #AF5224;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #A71C0C; 
 background: linear-gradient(#A71C0C, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 12px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #4D1A0A;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}
</style>

Kostum CSS yang mungkin Anda bisa rubah:

  • background: #AF5224;- warna background menu
  • width: 250px;- lebar menu
  • background: #A71C0C; 
  • background: linear-gradient(#A71C0C, #002535);-warna gardient background pada nama menu
  • font-size: 12px;-ukuran font
  • background: #4D1A0A;- warna hover menu item link
  • color: white;-warna font

3.jQuery

Nah bagian ini kita menempatkan fungsi jQuery untuk membuat list menu dapat membuka dan menutup jika di klik atau menggeser keatas dan kebawah (slide up and slide down). Berikut script jQuery sliding sederhana :
<script>
/*jQuery time*/ $(document).ready(function(){ $("#accordian h3").click(function(){ //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) }) </script>

Selesai!! Nah sekarang Anda hanya menggabungkan semua kode-kode diatas (HTML, CSS dan jQuery) jadi satu, dan masukkan/letakkan sebagai widget, seperti final kode dibawah ini.

Final Kode Menu Accordion Vertikal

Complete Code:
<div id="accordian">
<ul>
<li>
   <h3>TUTORIAL</h3>
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li>
   <h3>OPTIMASI BLOG</h3>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO on Page</a></li>
<li><a href="#">Pagerank</a></li>
<li><a href="#">ALEXA Rank</a></li>
<li><a href="#">Speed Test</a></li>
</ul>
</li>
<li>
   <h3>BLOG TOOLS</h3>
<ul>
<li><a href="#">Kode Warna HTML</a></li>
<li><a href="#">Check SERP</a></li>
<li><a href="#">Check Pagerank</a></li>
<li><a href="#">CSS Editor</a></li>
<li><a href="#">HTML Editor</a></li>
<li><a href="#">Parse HTML</a></li>
<li><a href="#">Analisa Blog</a></li>
</ul>
</li>
<li class="active">
   <h3>LABEL</h3>
<ul>
<li><a href="#">Tutorial Blogger</a></li>
<li><a href="#">Tutorial SEO</a></li>
<li><a href="#">Desain Blog</a></li>
<li><a href="#">Tip dan Trik</a></li>
<li><a href="#">Search Engine</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Informasi</a></li>
</ul>
</li>
</ul>
</div>
<style>
/*Basic reset*/
* {margin: 0; padding: 0;}

#accordian {
 background: #AF5224;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #A71C0C; 
 background: linear-gradient(#A71C0C, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 12px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #4D1A0A;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}
</style>
<script>
/*jQuery time*/
$(document).ready(function(){
 $("#accordian h3").click(function(){
  //slide up all the link lists
  $("#accordian ul ul").slideUp();
  //slide down the link list below the h3 clicked - only if its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})
</script>

Cara Pasang Menu Accordion Vertikal di Blogger 

  • Masuk Blogger > pilih Tata Letak
  • Klik Add a Gadget atau Add a Page element
  • Pilih HTML/JavaScript widget
  • Paste semua kode Menu Accordion Vertikal tersebut (kode CSS + HTML+jQuery) dalam HTML/JavaScript widget
  • Klik Save
  • Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan di sidebar kanan atau kiri
  • lihat gambar dibawah :
Read More


proBlogiz

Page Loading TimeTingkatkan Kecepatan Loading Blog Anda: Apa saja yang mempengaruhi Page Loading Time sebuah website atau blog? Hal- hal yang perlu diperhatikan agar “page-load-time”- waktu loading blog minimum (kecepatan meningkat), mengurangi waktu loading time halaman blog untuk mempertahankan Traffic (visitor) blog Anda. Tips tutorial Cara Meningkatkan Kecepatan Loading Blog.


Salam Blogger, setelah sekian lama saya "vacum" mengurus dan updating blog Problogiz ini, baru kali ini ada kesempatan kembali bertemu dengan Anda para Blogger dan kembali sharing artikel, tip yang semoga bermanfaat. Apa kabar semua?.....

Kali ini saya ingin membuka topik pertama saya tentang Loading Time Speed, atau lebih tepatnya adalah Apa Saja Yang Dapat Mempengaruhi Kecepatan Loading Blog/Website Anda?. Tentu ini sangat penting untuk diperhatikan sebab akan berkaitan secara langsung dengan Traffic Blog ( banyaknya visitor) Anda. Visitor atau pengujung blog/web menurut sebuah riset hanya rela menunggu waktu loading blog/website pada browser dibawah kisaran 10-15 detik, diatas itu mereka akan pergi meninggalkan Anda.

Pada sebuah riset yang pernah dilakukan oleh sebuah website terkemuka menghasilkan beberapa kategori tentang berapa lama waktu yang dibutuhkan bagi loading blog pada sebuah browser. Mungkin Anda sendiri mempunyai opini sendiri tentang waktu loading blog yang normal (cepat), mungkin jawaban Anda: "hanya beberapa detik? 10 detik? 15 detik? atau 30 detik? "

Dalam pengelompokan atau kategori kecepatan waktu loading sebuah blog, dapat dibagi menjadi sebagai berikut:
  • Kategori 1 - Dibawah 2 detik
  • Kategori 2 - Di bawah 4 detik
  • Kategori 3 - Di bawah 10 detik
  • Kategori 4 - Di bawah 15 detik
  • Kategori 5 - Di bawah 30 detik
catatan: untuk mengetahui kecepatan blog, Anda dapat menggunakan tool Pingdom
           
Jika Anda termasuk Kategori 1, 2 atau 3 Anda aman, jika kecepatan loading blog Anda diatas itu, Anda mungkin harus melihat kembali atau mendesain ulang template Anda segera.

Hampir semua pakar web-design setuju bahwa “page-load-time” adalah sesuatu yang harus dijaga seminimal mungkin, apapun platform desain blog/website Anda. Baik itu penggunaan CSS, HTML, Javascript atau Flash atau apapun pada template blog, waktu page loading sebuah blog/website adalah tetap diharuskan atau diusahakan agar optimal dibawah 4 detk (ukuran cepat/normal). Betapapun kerennya desain atau template harusnya dapat menjaga kecepatan waktu loading maksimal 4 detik.

Biasanya, orang menghitung waktu loading page dari perasaan "feeling" saja, sebenarnya pemakaian cara ini membuat Anda tidak pernah bisa memahami tentang “page-load-time” Anda yang sebenarnya.
Alasannya adalah penggunaan "feeling" atau perasaan akan berbeda pada berbagai lingkungan dan kondisi, kecepatan internet dan penggunaan pada beberapa browser yang berbeda akan tidak sama dengan perasaan atau "feel" tiap orang. Oleh karena itu ide pengoptimalan tentang loading time dibutuhkan agar mencapai waktu loading halaman blog/website seminimal mungkin di semua platform, environments dan kondisi.

Hal-hal yang menentukan waktu loading halaman “page-load-time” blog/website di browser dan bagaimana kita dapat menjaganya tetap minimum.

Jumlah Link

Usahakan jumlah link-link situs yang ada diblog seperti pada blogroll tidak lebih dari kisaran 10-15 link. Blogroll yang panjang bukan hal yang perfect tapi beban loading blog semakin bertambah Sob!!

Jumlah Gambar

Hindari penggunaan image (gambar) yang banyak usahakan seminimum mungkin. Jika kondisinya Anda mengharuskan menampilkan banyak gambar setidaknya optimasi ukuran file gambar-gambar tersebut sekecil mungkin. Gunakan file Gif lebih baik daripada JPEG, Bmp atau lainnya. 

Basic Layout Blog

Pastikan tata letak template atau layout blog tidak rusak, bersih, dan efisien. Cek kembali template Anda jika ada tags yang terbuka (belum ditutup). Ini biasanya terjadi pada saat Anda mulai memasang widget atau plugin baru ke blog, baik pada Blogger Template atau Wordpress template.

Penggunaan Javascript yang berlebihan

Pemuatan snippets (potongan) javascript berlebihan dapat meningkatkan waktu loading halaman Anda, seperti kode script iklan, google analytics, technorati dan skrip sistem komentar dan lainnya.

Hotlink dan Script Sourcing ke situs lain

Jika Anda mempunyai hotlink gambar atau widget (dengan memuat javascript dari situs lain seperti technorati), maka waktu yang dibutuhkan untuk menghubungkan dan load dari website tersebut akan menambah waktu buka (loading) halaman website/blog Anda.So Usahakan hindari hal ini sebanyak mungkin atau pada kasus blog, usahakan memberi link pada halaman artikel internal daripada halaman arahan ( eksternal link).

Penggunaan elemen AJAX (jQuery script)

Penggunaan berlebihan elemen AJAX hanya akan meningkatkan waktu loading halaman blog/website. Bila Anda harus menggunakan AJAX, upayakan seminimal mungkin dan jika mungkin letakkan script di akhir blog template atau sebelum tag </body>.Jika Anda menempatkan sebuah elemen AJAX di bagain head, atau sidebar template, maka kemungkinan semua elemen lain akan dimuat setelah elemen AJAX selesai dimuat.

Penggunaan animasi Flash

Beberapa orang suka menggunakan Flash animasi pada header atau pada teks judul artikel. Ini sangat disayangkan. Walaupun penggunaan elemen flash animasi memberikan pengalaman bagi pengguna yang menarik tapi dilain-hal Anda mempertaruhkan pada faktor useablity. Bijaklah menggunakan segala macam Flash animasi, usahakan seminim mungkin, dan jika mungkin tidak menggunakan elemen yang besar, cobalah yang sederhana dan kecil.

Hindari penggunaan Frame

Ini juga sangat disarankan untuk dihindari penggunan Frame script (contoh pada Facebook XML Like Box), karena hal ini membutuhkan banyak waktu load adapun konsep ini (Frame) sudah usang sejak adanya HTML 5. Satu hal lagi penggunaan Frame tidak Search Engine Friendly.

Meminimalkan HTTP requests.

Pemanggilan stylesheet, JavaScript libraries, gambar, dan halaman tertanam atau "embedded pages" dari situs-situs lain dapat menghasilkan peningkatan drastis pada loading time halaman blog. Anda tidak dapat sepenuhnya mengontrol atas situs-situs eksternal tersebut oleh karena itu mengurangi jumlah konten yang dimuat dari sumber eksternal pada blog Anda adalah satu-satunya cara agar waktu loading blog Anda minimal.

Kode Optimization

Optimasi kode sangat penting untuk membantu situs/blog Anda loading dengan cepat. Kode JavaScript dan CSS yang banyak (membengkak) akan meningkatkan lama waktu loading, karena akan memperlambat database pada halaman dinamis (dynamic page) serta penulisan HTML yang buruk dengan tag berlebihan. Salah satu faktor penting pada optimasi SEO on page adalah perampingan semua kode HTML, script, dan database reguests. Untuk HTML, W3C HTML Validator adalah alat penting untuk membantu memvalidasi kode HTML website/blog Anda. Beberapa alat-alat lain untuk memeriksa kinerja halaman dinamis (dynamic page) berdasarkan panggilan database adalah Pingdom dan Google PageSpeed ​​Tools.

Kompresi dan Manajemen Cache

Penggunaan kompresi pada server dapat membantu mengurangi ukuran data yang harus dikirim dari server ke user, otomatis akan membantu mempercepat load halaman. Selain itu, menyimpan salinan file di komputer pengguna dalam cache browser mereka secara signifikan meningkatkan respon website.


Ok Sob, itulah beberapa tip mejaga agar loading page time blog tetap serendah mungkin atau meningkatkan kecepatan waktu loading halaman blog/website dari kami. Tentu hal-hal tersebut bukan satu-satunya metode ada banyak metode bisa Anda lakukan, misalnya bisa Anda temukan cara lain seperti artikel Problogiz : Analisa Dan Optimalkan Blog Dengan Google PageSpeed Tools, disini Anda akan menemukan banyak tip dan saran yang bisa kamu pertimbangkan dari arahan Google Developer Tool atau jika ingin mengetahui seberapa cepat loading time blog Anda, langsung saja coba di Ayo Cek Kecepatan Loading Blog Anda

Salaam, keep in touch:)

Read More

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

artikel terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|