Daftar Artikel Terbaru Dalam 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

Model Navigasi

• Wrapper Fixed
• Full RotateX
• BreadCrumb
• Double Navigasi

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>