Cara Menciptakan Sajian Dengan Recent Post Dan Comment

Cara Membuat Menu Lengkap Dengan Recent Post dan Comment - Ini yaitu salah satu hidangan di blogspot yang jarang sekali kita temui di blog-blog berplatform blogpsot. Menu yang sangat unik alasannya yaitu dalam hidangan ini dapat menampilkan posting terbaru teman dan juga komentar yang masuk di blog sobat. Untuk lebih jelasnya silahkan lihat Live demonya :

Okey, eksklusif saja, ini cara install di blog nya :

1. Temukan kode </head> Salin isyarat ini dan letakkan di atasnya :

<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 hidangan 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>

2. Setelah itu temukan isyarat ini </body> dan Salin kerangka hidangan ini dan letakkan di atasnya :

<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://hompimpaalaihumgambreng.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://hompimpaalaihumgambreng.blogspot.com/feeds/comments/default?alt=json-in-script&amp;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 hidangan recent post pada variabel numposts
• Tentukan jumlah posting recent comment pada variabel numcomment
• Tentukan label komentar pada variabel cmtext (misal: 17 Komentar)
• pBlank dipakai untuk menampilkan gambar cadangan pada recent post yang tidak mempunyai gambar mini
• Tentukan jumah ringkasan komentar pada variabel cmsumm
• Ganti URL yang Saya beri tanda dengan URL blog sobat

3. Kalau semua sudah selesai, save dan lihat hasilnya.

Source

Share this post