Menu Horisontal Dengan Fasilitas Recent Post dan Recent Comment

D

unia design memang ngak ada habisnya setiap hari nya ada ada saja yang baru buat tampilkan website/blog menjadi nampak keren seperti halnya pada pertemuan kali ini kang mahfid akan share sebuah tutorial tentang menu horisontal ,akan tetapi menu horisontal kali ini akan kang mahfid berikan fasilitas Recent Comment Dan Resent Post.Wah dari kata-kata nya nampak keren nanti hasilnya ,makanya ikuti terus tutorialnya yach .

Mungkin sobat penasaran dengan hasir akhir tutorial ini oke silahkan sobat liha demonya disini  coba sobat arahkan cursor ke arah menu horisontal atau jika sobat malas ngeklik silahkan lihat screenshot nya di bawah ini .

gimana sobat sudah lihat demonya ,nah jika sobat ingin menu horisontal Dengan Fasilitas Recent Post dan Recent Comment di blog sobat berikut caranya

1. Loggin dulu ke blogger.com
2. setelah masuk ke dasboard pilih template lalu pilih Edit Html
3. Jangan lupa download lengkap dulu template untuk menjaga kemungkinan terjadi kesalahan saat pengeditan
4. cari kode  ]]></b:skin> lalu taruh css kode berikut tepat di atas kode ]]></b:skin> berikut kode CSS nya:

   #autonav{width:910px;height:30px;border-bottom:2px solid #000;border-top:1px solid #000;margin:0 auto;padding:0 auto}.topbar ul{padding-left:0;color:#fff;text-transform:uppercase;list-style-type:none;font:bold 11px Arial;text-shadow:1px 1px 1px #000;margin:0}#autonav ul{margin:0;padding:0;height:30px;background:#0b559e}#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{background:#61380b}#autonav 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}#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:0;color:#999}#autonav ul ul ul{top:0;left:100%}#autonav li:hover>ul{display:block}#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:#222}#autonav ul.json-dropdown img.rp-thumb{padding:0;outline:0;border:2px solid #333;background-color:#02406c;display:block;float:left;margin:0 10px 0 0;width:40px;height:40px}#autonav .subposts span,#autonav .subcomments span{font-family:Verdana,Arial,Sans-Serif;color:#666;font-size:9px}#autonav .wide{width:400px}

5. Selanjutnya cari kode </head> sobat taruh kode di bawah ini tepat di atas kode </head> berikut kodenya :

   <script type='text/javascript'>
   //<![CDATA[
   var numposts   = 7,
       cmtext     = "Komentar",
       pBlank     = "http://masmahfid-project.googlecode.com/files/NO%20IMAGE2.png",
       numcomment = 7,
       cmsumm     = 100;
   //]]>
   </script>
   <script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>

6. Nah proses yang terakhir silahkan sobat cari kode <div id='main-wrapper'> lalu taruh kode di bawah in tepat di atas kode <div id='main-wrapper'> berikut kodenya :

   <nav id='autonav'>
       <ul>
           <li><a href='/'>Beranda</a></li>
           <li><a href='#'>Profil</a><ul><li><a href='#'>Google +</a></li><li><a href='#'>Facebook</a></li><li><a href='#'>Twetter</a></li></ul>
           </li>
           <li><a href='#'>Artikel Terbaru</a>
               <ul class='json-dropdown subposts wide'>
                   <script src='http://karinafotocollection.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
               </ul>
           </li>
           <li><a href='#'>Komentar Terakhir</a>
               <ul class='json-dropdown subcomments'>
                   <script src='http://karinafotocollection.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
               </ul>
           </li>
           <li><a href='#'>Kontak</a>
               <ul>
                   <li><a href='#'>Kode Warna</a></li>
                   <li><a href='#'>Buku Tamu</a></li>
               </ul>
           </li>
       </ul>
   </nav>

7. Jangan Lupa Preview dulu jika sudah benar silahkan save template

NB : silahkan ganti text yang berwarna merah dengan alamat blog sobat,Selamat mencoba semoga berhasil.
Sumber Info : http://www.dte.web.id