Buat Recent post dan recent comment pada dropdown menu

  Posting pertama saya pada siang hari ini adalah MemBuat Recent Post dan Recent Comment pada menu dropdown/menu navigation blogspot. Widget ini sangat praktis, dan keren untuk anda terapkan diblog anda. Ok, tidak usah basa-basi lagi. Langsung saja, go to tkp!

1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang Expand Template widget, jangan lupa gunakan ctrl dan f atau f3.
4. Cari kode </head>. Lalu, pastekan kode dibawah ini diatas </head>.

<style type='text/css'> #autonav { position:absolute; top:0px; right:0px; left:0px; z-index:9999; margin:0px 0px; padding:0px 0px; font:normal 11px Arial,Sans-Serif; color:white; border-bottom:2px solid #333; -webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4); -moz-box-shadow:0px 1px 7px rgba(0,0,0,.4); box-shadow:0px 1px 7px rgba(0,0,0,.4); } #autonav ul { margin:0px 0px; padding:0px 0px; height:30px; background-color:#0F5079; } #autonav ul li { list-style:none; display:inline; float:left; margin:0px 0px; padding:0px 0px; position:relative; } #autonav ul li a { display:block; line-height:30px; height:30px; overflow:hidden; margin:0px 0px; padding:0px 15px; border-left:1px solid #155F90; border-right:1px solid #082E46; text-decoration:none; text-shadow:0px -1px 0px rgba(0,0,0,.4); color:white; font-weight:bold; } #autonav ul li a:hover { background-color:#0F486C; } #autonav ul ul { position:absolute; width:220px; height:auto; top:100%; left:0px; z-index:99; background-color:#111; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7); -moz-box-shadow:0px 1px 3px rgba(0,0,0,.7); box-shadow:0px 1px 3px rgba(0,0,0,.7); overflow:visible !important; display:none; } #autonav ul ul:before { content:""; width:0px; height:0px; 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:0px; 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:0px 0px; overflow:hidden; } #autonav ul.json-dropdown li a { line-height:14px; height:auto !important; padding:0px 0px; } #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:#222; } #autonav ul.json-dropdown img.rp-thumb { padding:0px 0px; outline:none; border:2px solid #333; background-color:#02406C; display:block; float:left; margin:0px 10px 0px 0px; width:40px; height:40px; } #autonav .subposts span, #autonav .subcomments span { font-family:Verdana,Arial,Sans-Serif; color:#666; font-size:9px; } 

/* Drop down menu untuk ukuran yang cukup lebar */ #autonav .wide { width:400px; } </style> <script type='text/javascript'> //<![CDATA[ var numposts = 7, cmtext = "Komentar", pBlank = "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png", numcomment = 7, cmsumm = 100; //]]> </script> <script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>

Keterangan :
a). Num comment adalah kode untuk menampilkan jumblah komentar terbaru (Recent comment).
b). Var Num Posts berguna untuk menentukan jumblah posting terbaru yang akan ditampilkan pada menu dropdown.

5. Cari lagi kode </body>. Pastekan kode berikut diatasnya.

<nav id='autonav'>

    <ul>

        <li><a href='/'>Home</a></li>

        <li><a href='#'>Profil</a></li>

        <li><a href='#'>Updates</a>

            <ul class='json-dropdown subposts wide'>

                <script src='http://infoiki.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>

            </ul>

        </li>

        <li><a href='#'>Comment Updates</a>

            <ul class='json-dropdown subcomments'>

                <script src='http://infoiki.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>

            </ul>

        </li>

        <li><a href='#'>Kontak</a>

            <ul>

                <li><a href='#'>Facebook</a></li>

                <li><a href='#'>Mindtalk</a></li>

            </ul>

        </li>

    </ul>

</nav>

Keterangan :
a). Ganti http://infoiki.blogspot.com menjadi url blog anda.
b). Kode berwara hijau dan biru adalah nama tampilan link dan widget.
c). Ganti kode pagar berwarna Oranye, dengan url yang anda tuju.

6. Save template and you are done! :)