Membuat Recent Post dan Recent Comment Dengan Dropdown Menu

Untitled+picture
Widget ini sangat praktis dan keren untuk anda terapkan di blog anda.

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas kode </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 :
- numcomment = 7 adalah kode untuk menampilkan jumlah komentar terbaru.
- varnumpoosts = 7 adalah untuk menentukan jumlah posting terbaru yang akan ditampilkan pada menu dropdown.

8. Selanjutnya cari kode </body>
9. Masukkan script dibawah ini tepat diatas kode </body>
<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://dhecun.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://dhecun.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='#'>Download</a></li>
            </ul>
        </li>
    </ul>
</nav>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-recent-post-dan-recent-comment.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
Keterangan :
- Ganti http://dhecun.blogspot.com dengan URL blog anda.
- Tulisan warna pink dan biru adalah nama tampilan link dan widget , ganti sesuai keinginan anda.
- Tulisan warna oranye ganti dengan URL yang anda inginkan.

Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge