Cara Membuat Menu dengan Recent Post dan Comment

Ini adalah salah satu menu di blogspot yang jarang sekali kita temui di blog-blog berplatform blogpsot. Menu yang sangat unik karena dalam menu ini bisa menampilkan posting terbaru sobat dan juga komentar yang masuk di blog sobat. Okey, langsung saja, ini cara pasang di blog nya :

1. Klik Template ~> Edit HTML.
2. Cari kode </head>
3. Lalu paste kode dibawah ini, tepat di atas 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>
4. Setelah itu cari kode </body>
5. Lalu paste kode di bawah ini, tepat di atas kode </body>
<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://mahografauzan.blogspot.com/feeds/posts/default/?alt=json-in-script&callback=dropdownposts'></script> </ul></li><li><a href='#'>Komentar Terakhir</a> <ul class='json-dropdown subcomments'> <script src='http://mahografauzan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=dropdowncomment'></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>

Pengaturan :

• Tentukan jumlah posting menu recent post pada variabel numposts
• Tentukan jumlah posting recent comment pada variabel numcomment
• Tentukan label komentar pada variabel cmtext (misal: 17 Komentar)
• pBlank digunakan untuk menampilkan gambar cadangan pada recent post yang tidak memiliki gambar mini
• Tentukan jumah ringkasan komentar pada variabel cmsumm
• Ganti http://mahografauzan.blogspot.com dengan URL blog sobat

Jika Anda menyukai Artikel di blog ini. Silahkan klik disini atau masukkan email anda pada kolom di bawah untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Mahogra Fauzan.

Anda baru saja membaca artikel "Cara Membuat Menu dengan Recent Post dan Comment". Bagi sobat yang mau copas harap Cantumkan http://mahografauzan.blogspot.com/2013/06/cara-membuat-menu-dengan-recent-post.html sebagai Sumbernya, karena sebagai blogger yang baik tentu anda mengerti tata aturannya!
Hak Cipta di lindungi oleh Google, Copyscape, dan DMCA. Bagi siapapun yang copy paste tanpa mencantumkan SUMBERnya, akan saya laporkan ke DMCA Takedown.

Sekian Cara Membuat Menu dengan Recent Post dan Comment dari http://mahografauzan.blogspot.com
Semoga Bermanfaat bagi anda dan jangan lupa untuk meninggalkan jejak berupa komentar ✉.
Terima Kasih ^_^