27.3.14
48
Menu Navigasi
Setelah sukses memodifikasi beberapa menu Navigasi dengan berbagai efek FIXED (melayang) pada artikel sebelumnya, kali ini SAHABAT BLOGGER 77 kembali berbagi dan bercerita tentang Daftar Artikel Terbaru Dalam Menu Navigasi. Namun pada menu navigasi kali ini saya menggunakan JASON Script Code untuk mendesain tampilan menunya dengan mengambil kode script artikel terbaru (up-date new Article) dan menampilkan komentar pada artikel terbaru, dan semuanya itu akan ditampilkan secara otomatis dalam menu navigasi menggunakan JASON Script Code



DEMO SHOW



Seperti yang kita ketahui, hampir semua tampilan blog menggunakan menu navigasi pada desain template-nya, akan tetapi tampilan menu navigasi pada blog tersebut terbilang biasa saja (default), sehingga dari sana ada ide untuk memodifikasi menu yang biasa menjadi sedikit luar biasa, hehe..!!. Pada menu navigasi kali ini, saya menyisipkan update-an posting terbaru beserta komentar pembaca terbaru, singkatnya setiap kali Anda buat artikel baru, maka secara otomatis artikel tersebut akan tampil pada menu navigasi di blog Anda, sehingga Anda tidak repot-repot lagi harus menuliskan link secara manual pada menu navigasi blog Anda, dan komentar pembaca dapat Anda update selalu. Artikel sebelumnya tentang Menu Navigasi lihat pada TAB dibawah ini
















Bagaimana?, sudah bosan dengan menu navigasi blog Anda saat ini, dan ingin mencoba sesuatu yang baru dan lebih fresh mungkin.? hehe.. Silahkan Tinggal di-Copy Paste saja kode berikut


#autonav {
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  margin-top:20px;
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:white;}

#autonav ul {
  margin-top:-2em;
  padding:0;
  height:40px;
  background-color:#080;}

#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0;
  padding:0;
  position:relative;}

#autonav ul li a {
  display:block;
  line-height:40px;
  height:40px;
  overflow:hidden;
  margin:0;
  padding:0 15px;
  border-left:1px solid #155F90;
  border-right:1px solid #082E46;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  color:white;
  font-weight:bold;}

#autonav ul li a:hover,
#autonav ul li:hover > a {
  background-color:red;
  border-right-color:#082434;
  text-decoration:none;}

#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  margin-top:-0.8em;
  left:0;
  z-index:9999;
  background-color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.7);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
  overflow:visible !important;
  display:none;}

#autonav ul ul:before {
  content:"";
  width:0;
  height:0;
  border:7px solid transparent;
  border-bottom-color:#111;
  position:absolute;
  top:-14px;
  left:24px;}

#autonav ul ul li {
  display:block;
  float:none;}

#autonav ul ul li a {
  border:none;
  color:#ccc;}

#autonav ul ul ul {
  top:0;
  left:100%;}

#autonav li:hover > ul {
  display:block;
  border-left:3px solid red}

#autonav ul.json-dropdown {overflow:hidden}
#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0;
  overflow:hidden;
  border-left:0.5px solid red;}

#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0;}

#autonav ul.json-dropdown li a:hover {
  text-decoration:none;
  background:transparent;}

#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {background-color:#080;}

#autonav ul.json-dropdown img.rp-thumb {
  padding:0;
  outline:none;
  border:2px solid #333;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0 10px 0 0;
  width:40px;
  height:40px;}

#autonav .subposts span,
#autonav .subcomments span {
  font-family:Verdana,Tahoma,Helmet,Freesans,Sans-Serif;
  color:orange;
  font-size:9px;}

#autonav .wide {width:400px}

<script>
//<![CDATA[
var numpost = 7,
    numcomment = 8,
    cmtext = "Komentar",
    cmsumm = 100,
    pBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
//]]>
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/navigasi-jason.js"></script>


Keterangan Pada HTML
  1. Untuk penerapan kode HTML berikut, tampilan nama-nama menu saya menggunakan default name, jika ingin menggantinya silahkan sesuaikan dengan selera Anda
  2. Ganti Kode yang saya beri warna Orange Dengan URL blog Anda

<nav id='autonav'>
      <ul>
           <li><a href='/'>Beranda</a></li>
           <li><a href='#'>Profile</a>
                <ul>
           <li><a href='#'>Google +</a></li>
           <li><a href='#'>Twitter</a></li>
           <li><a href='#'>Facebook</a></li>
     </ul>
          </li>
           <li><a href='#'>Up-date Article</a>
<ul class='json-dropdown subposts wide'>
<script src='http://URL-Anda.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;callback=dropdownposts'></script>
</ul>
         </li>
          <li><a href='#'>Comment Today</a>
<ul class='json-dropdown subcomments'>
<script src='http://URL-Anda.blogspot.com/feeds/comments/summary?alt=json-in-script&amp;callback=dropdowncomments'></script>
</ul>
          </li>
           <li><a href='#'>Category</a>
                <ul>
           <li><a href='#'>Label 1</a></li>
           <li><a href='#'>Label 2</a></li>
                </ul>
           </li>
      </ul>
</nav>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Daftar Artikel Terbaru Dalam Menu Navigasi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

48 komentar

  1. Keren yah Mbak Devy Menu Navigasinya
    Ada widget lagi di dalam menu tersebut
    ijin coba makasih atas tutorialnya Mbak Devy :)

    BalasHapus
  2. wah makin cantik saja nih..

    BalasHapus
    Balasan
    1. apanya neh yang makin cantik, hehe

      Hapus
    2. orangnya bos, hehehe.....

      Hapus
    3. pasti attuh bos,kan cewek kagak mungkin kan ganteng :)

      Hapus
  3. wow...keren banget bos... tapi kalo boleh tau ini mempengaruhi loading apa ga bos?

    BalasHapus
    Balasan
    1. apapun itu yang kita tambahkan dalam blog,saya rasa pasti ada pengaruhnya terhadap loading blog, namun jika berbicara tentang speed load, semua tergantung pada data penyimpan cookie pada browser, misalnya kita baru pertama sekali membuka suatu halaman, pasti halaman akan lama terbuka, namun semakin sering kita membukanya, maka halaman akan semakin cepat terbuka, karena alamat halaman sudah tersimpan terlebih dahulu pada cookie,

      Hapus
    2. oh begitu yia bos. oya kalo boleh oot, cara agar gambar pada artikel jadi responsive gimana caranya bos, kalo si bos tau bikin tutorialnya yia bos, hehehe...

      Hapus
    3. hehe..biasanya teman-teman tanya bagaimana mendesain template yang belum responsive menjadi responsive,tapi ini membuat gambar yang responsive, mungkin karena saya ketinggalan berita kali ya, sampai-sampai ada cara membuat gambar yang responsive,
      kalau masalah mengubah gambar agar responsive saya kurang paham bos, karena selama ini yang saya lakukan bagaimana membuat muat gambar open speed pada artikel, dan yang bos minta baru saya dengar, hehe,,tetapi ntar saya coba uraiannya bagaimana.

      Hapus
    4. itulah alasan kenapa saya tanya bos, karena saya cari2 tutorialnya belum ada yang pas agar gambar yang di sisipkan pada artikel jadi responsive. template yang saya pake memang bisa dikatakan sudah responsive, tapi gambar pada artikel keika di akses menggunakan hp denan width:240px dan 320px tidak kelihatan semua, sepert ini bos http://4.bp.blogspot.com/-tqupzVh-kCE/UzeiMdV0H4I/AAAAAAAAEHo/1xOn7ZR0dgI/s1600/Untitled.png

      Hapus
  4. weeh weeh weeh,, keren sekali mbak (h)

    BalasHapus
    Balasan
    1. cuma dikit kok mas kerennya..
      inipun pekerjaannya 2 hari baru kelar, maklum masih newbie, hehehe

      Hapus
  5. menu top navigasinya keren juga,, boleh ane minta script-nya sob????

    jawab diblog ane ya => http://indexiapk.blogspot.com

    BalasHapus
    Balasan
    1. menu -top di blog ini ada 2 model sob,yang mana satu
      yang fixed rorateX atau yang efek rolling sob..

      Hapus
  6. wihh keren :D makin kreatif aja nih mba Devi ngutak ngatik kode-nya :D

    BalasHapus
    Balasan
    1. lebih ke segi petualangan mas, karena dengan utak-atik sesuatu apalagi tentang perkodean seperti ini, ada suatu keistimewaan, terkadang gagal total,belum sempurna dan terkadang 2-3hari baru mendapat tampilan yang sempurna, kalau sudah OK, baru dech dishare,,hehe

      Hapus
  7. Keren Mbak boleh di coba nich :)

    BalasHapus
  8. Keren ya mbak menunya..
    pengen coba juga di blog ane yang satu
    trims

    BalasHapus
  9. keren tapi kok agak rumit ya mbak..saya lagi pengen merubah navigasi blog saya biar kelihatan agak keren ..hehe..saya simpan dan pelajari dulu mbak

    BalasHapus
    Balasan
    1. katanya malu bertanya pasti jalan-jalan,hehe...
      jika mbak merasa rumit akan kode-kode diatas, ada yang bisa saya bantu gitu?

      Hapus
  10. wih keren nih tutor nya, buat yang suka modifikasi blognya :D

    BalasHapus
  11. wow, keren tutorialnya, sangat bermanfaat :)

    BalasHapus
  12. saya langsung coba aja nih kodenya
    pas banget buat blogg saya
    thanks mbak :)

    BalasHapus
  13. sangat bermanfaat mbak..
    ditunggu posting selanjutnya

    BalasHapus
  14. Trims mas sharenya...:)
    kapn2 ane coba..:)

    BalasHapus
  15. Sepertinya menarik dcoba nih mbak tutor nya..
    Dan terima kasih ya udah berbagi kekita2 :)

    BalasHapus
  16. (h) kreatif juga idenya ya Mba..!, ane lebih trtarik dgn penyembuyian komentarnya..:)

    BalasHapus
    Balasan
    1. semua ada pada selector tag kondisional, jika kita mengedit element-elemen pada lahan kondisional,maka yang akan terjadi hanya pada halaman itu saja, jadi apapun bisa kita sembunyikan,kita tampilkan jika kita memahami tag kondisional,
      nah kalau saya sendiri masih newbie tentang kondisional tag ini, hanya belajar sedikit demi sedikit dan coba praktekkin,gitu sob..hehe

      Hapus
  17. Mau saya pelajari dulu

    BalasHapus
  18. Asyiik kg siii. Tp skalian iklan pekerjaan yaaaa

    BalasHapus
  19. Asyiik kg siii. Tp skalian iklan pekerjaan yaaaa

    BalasHapus
  20. wah jadi tambah keren ya kalau daftar postingan terkini bisa muncul di menu navigasi, jadi bisa lebih menghemat space di blog kita. Tapi lumayan banyak juga ya kode nya hehehe tapi harus dicoba nih tutorialnya keren soalnya ;)

    BalasHapus
    Balasan
    1. sebenarnya kodenya ringkas kok mbak, kode diatas sengaja saya uraikan satu persatu elemen agar dapat memudahkan mereka yang mungkin ingin mengedit tampilan yang berbeda dari yang saya tampilkan, misalnya dari segi warna,dominan saya menggunakan hijau karena memang suka dengan yang hijau-hijau, tetapi jika ingin membuat warna yang lain kan dengan mudah mengeditnya, kalau tampilan sudah pas, tinggal dikompres kodenya biar ringkas
      begitu mbak..hehehe

      Hapus
  21. weh weh,. Keren Mbak Devy Menu Navigasinya, Top dah pokoknya

    BalasHapus
  22. kayaknya saya baru lihat deh menu seperti ini keren banget berwarna gitu ,,sip abis mbak Devy....

    BalasHapus
    Balasan
    1. sebenarnya sudah banyak kok kang, hanya menu ini sedikit beda saja, disatu sisi saya menghilangkan elemen tag <ul> dan menyisipkan sedikit scrip untuk memanggil updatean artikel terbaru serta komentar terbaru dengan Jason

      Hapus
  23. keren sob daftar menunya , emang benar - benar kreatip :) bisa dicoba nih buat di blogs saya...

    BalasHapus
    Balasan
    1. seip dech sob, lebih ke hasil akhirnya ada sesuatu kebanggaan dari modifikasi yang ada menjadi sesuatu yang baru, hehe

      Hapus
  24. keren juga yah mbak, tapi kode scriptnya banyak juga yah hehe...

    BalasHapus
    Balasan
    1. kayaknya saya hanya menggunakan kode script pemanggil numpost dan comment saja kok bang, kok dibilang banyak scriptnya, script yang mana ya..??

      Hapus
  25. wah mbak ini jago sekali dalam hal css, izim boorkmark mabk, sekalian mau utak-atik

    BalasHapus
  26. saya dulu pernah mencoba tutorial ini,

    namun sekarang sudah saya hapus, karena sudah bosan :)

    sukses selalu mbk :))

    BalasHapus
  27. hai... terima kasih banyak informasinya :)

    BalasHapus
  28. saya beruntung menjadikan blog anda sebagai bahan bacaan, infonya mak nyuus.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK