Recent Posts And Recent Comments on Dropdown Menu

Saturday, October 20, 2012

Bisakah Menu Blog dipasang recent posts dan recent comments? Jelsa bisa, untuk membuktikannya dengan Anda bisa langsung menerapkan dalam blog kesayangan Anda sendiri atau membuat blog baru untuk eksperimen (coba-coba lo...!!!). Ini paling tidak sebagi opsi sebelumnya yang menerapkan menu dropdown dengan multilevel. Serta didesign yang simple tapi menarik. Biar tidak terlalu lama ngelanturnya silakan ikuti langkahnya pada artikel ini.

Dropdown Menu

Lihat Demonya Langsung

Silakan login blog Anda, Edit HTML dan klik Lanjutkan:

Mengedit HTML

Jika masih kebingungan letaknya dimana, Anda baca dulu tentang pemahaman halaman blogger dan emukan kode ini: </head> serta salin kode dibawah ini.

<style type='text/css'>
#menudrop {
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  margin:0 0;
  padding:0 0;
  font:normal 11px Arial,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);
}

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

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

#menudrop ul li a {
  display:block;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:0 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;
}

#menudrop ul li a:hover {
  background-color:#0F486C;
}

#menudrop ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  left:0;
  z-index:99;
  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;
}

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

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

#menudrop ul ul li a {
  border:none;
  color:#999;
}

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

#menudrop li:hover > ul {
  display:block;
}

#menudrop ul.json-dropdown {
  overflow:hidden;
}

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

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

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

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

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

#menudrop .subposts span,
#menudrop .subcomments span {
  font-family:Verdana,Arial,Sans-Serif;
  color:#666;
  font-size:9px;
}

#menudrop .wide {
  width:400px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts   = 7,
    cmtext     = "Comment",
    pBlank     = "https://cdn.staticaly.com/gh/idtutorplus/images/b085015c/no-images.gif",
    numcomment = 7,
    cmsumm     = 100;
//]]>
</script>
<script src='https://cekidot.96.lt/file/js/posts-comments-menu.js' type='text/javascript'></script>

Setelah itu temukan kode ini </body> dan salin kode HTML dibawah ini sebelum kode </body>

<nav id='menudrop'>
    <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='#'>Profile</a></li>
        <li><a href='#'>Recent Posts</a>
            <ul class='json-dropdown subposts wide'>
                <script src='https://idtutorplus.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
            </ul>
        </li>
        <li><a href='#'>Recent Comments</a>
            <ul class='json-dropdown subcomments'>
                <script src='https://idtutorplus.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
            </ul>
        </li>
        <li><a href='#'>Contact</a>
            <ul>
                <li><a href='#'>IdTutorPlus</a></li>
                <li><a href='#'>ITP +]</a></li>
            </ul>
        </li>
    </ul>
</nav>

Catatan :

1. Untuk mengatur jumlah posting menu recent post pada variabel numposts
2. Untuk mengatur jumlah posting recent comment pada variabel numcomment
3. Tentukan label komentar pada variabel cmtext (misal: 20 Comments)
4. pBlank digunakan untuk menampilkan gambar cadangan pada recent post yang tidak memiliki gambar mini
5. Untuk mengatur jumah ringkasan komentar pada variabel cmsumm
6. Ganti URL yang beri tanda dengan URL blogmu.

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini