Trik menu ini yang saya suka dari master www.dte.web.id, saya phuliskan kembali di blog saya karena buat, koleksi,,,, ,, nyo kita langsung ket intinya saja
Solusi Saya adalah dengan cara meletakkan menu navigasi ini pada bagian paling bawah, tepatnya di atas
</body>
sehingga kita harap widget ini akan memulai proses pemuatan posting saat elemen-elemen di atasnya sudah cukup siap. Dan untuk mengangkat menu navigasi yang berada di bawah menuju ke atas, Saya menggunakan posisi absolute
dengan nilai top
sebesar 0
:
Masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan kode ini:
</head>
Salin kode 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 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>
Setelah itu temukan kode ini:
</body>
Salin kerangka menu 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&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&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>
- 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 URL yang Saya beri tanda dengan URL blogmu.
0 komentar:
Posting Komentar