Menempatkan Recent Post dan komentar di Menu Navigasi

adscblog

Pada postingan sebelum nya mungkin anda pernah membaca bagaimana cara membuat Recent post di Widget atau juga komentar yang di tempat kan di widget blog,mungkin menurut anda itu semua adalah sudah biasa dan sudah aneh lagi bukan,tetapi bagaimana apakah anda pernah di coba dengan cara menempatkan Recent post atau artikel terbaru dan juga hasil komentar di daerah Menu Navigasi.

Kalo menurut saya tipe penempatan recent post dan komentar di bagian menu navigasi ini tidak banyak di pakai oleh para blogger salah satu nya oleh saya sendiri,namun saya pernah melihat di salah satu blogger menggunakan menu navigasi ini,dan dia merubah penampilan nya juga menyesuaikan dengan template nya,dan kelihatan nya juga bagus dan juga menarik.

Apakah anda tertarik dengan penempatan recent post atau artikel terbaru dan juga komentar terbaru yang di tempatkan di menu navigasi?,jika anda tertarik dengan penempatan ini,anda bisa mengikuti langkah langkah pembuatan nya di bawah artikel ini.

Tetapi tampilan Recent post yang berada di bagian widget dengan di tempatkan di Menu Navigasi lebih baikan yang di tempatkan di widget ketimbang di menu navigasi menurut saya,karen akalu recent post atau komentar baru di tempatl\kan di widget dengan begitu para pengunjung blog dapat melihat secara langsung.

Sedangkan Recent Post atau komentar terbaru yang di tempatkan di Menu Navigasi seperti ini,apabila di klik maka deretan recent post dan komentar terbaru tersebut akan terlihat,tetapi apabila para pengunjung tidak mengklik nya maka tidak akan terlihat dengan begitu para pengunjung blog tidak akan tau artikel mana yang baru ataupun postingan mana yang lagi hangat di perbincang kan,tetapi itu semua tergantung pada pemilik blog sendiri dan di bawah adalah kode nya

Cara Pembuatan Recent Post dan Komentar berada di bagian menu navigasi

Jika anda tertarik dengan pembuatan Recent post dan juga komentar berada di bagian menu navigasi silahkan anda ikuti langkah langkah di bawah ini

• Masuk ke blogger
• pilih template lalu edit html
• Kemudian silahkan anda cari kode </body> agar memudahkan pencarian anda silahkan anda tekan CTRL+F secara bersamaan

<nav id='autonav'>
      <ul>
        <li><a href='/'>Beranda</a></li>
        <li><a href='#'>Profil</a></li>
        <li><a href='#'>Terbaru</a>
          <ul class='json-dropdown subposts wide'>
            <script src='http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;callback=dropdownposts'></script>
          </ul>
        </li>
        <li><a href='#'>Komentar Terakhir</a>
          <ul class='json-dropdown subcomments'>
            <script src='http://nama_blog.blogspot.com/feeds/comments/summary?alt=json-in-script&amp;callback=dropdowncomments'></script>
          </ul>
        </li>
        <li><a href='#'>Kontak</a>
          <ul>
            <li><a href='#'>Lorem Ipsum</a></li>
            <li><a href='#'>Dolor Sit Amet</a></li>
          </ul>
        </li>
      </ul>
    </nav>

• Langkah selanjutnya setelah anda menempatkan kode tersebut,kemudian silahkan anda cari lagi kode </head> dan kemudian silahkan anda tempatkan kode berikut sebelum kode </head>

<style>
    #autonav {
      position:absolute;
      top:0;
      right:0;
      left:0;
      z-index:9999;
      margin:0;
      padding:0;
      font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
      color:white;
      border-bottom:2px solid #333;
      -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
      -moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
      box-shadow:0 1px 7px rgba(0,0,0,.4);
    }

    #autonav ul {
      margin:0;
      padding:0;
      height:30px;
      background-color:#0F5079;
    }

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

    #autonav ul li a {
      display:block;
      line-height:30px;
      height:30px;
      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:#0F486C;
      border-right-color:#082434;
    }

    #autonav ul ul {
      position:absolute;
      width:220px;
      height auto;
      top:100%;
      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:#999;
    }

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

    #autonav li:hover > ul {display:block}

    /* Khusus JSON */
    #autonav ul.json-dropdown {overflow:hidden}

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

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

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

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

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

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

    /* Drop down menu untuk ukuran yang cukup lebar */
    #autonav .wide {width:400px}
    </style>
    <script>
    //<![CDATA[
    var numpost = 7,
        numcomment = 7,
        cmtext = "Komentar",
        cmsumm = 100,
        pBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
    //]]>
    </script>
    <script src='http://dte-project.googlecode.com/svn/trunk/json-dropdown.js'></script>

• Setelah itu silahkan anda Save template dan lihat hasilnya

Nah itulah cara pembuatan Recent Post atau postingan terbaru dan komentar terbaru di bagian menu navigasimselamat mencoba.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 06 Oktober and have 0 komentar