ILMU 212: Daftar Artikel Terbaru Dalam Menu Navigasi

Setelah sukses memodifikasi beberapa menu Navigasi dengan berbagai efek FIXED (melayang) pada artikel sebelumnya, kali ini SAHABAT BLOGGER 77 kembali berbagi dan bercerita tentang Daftar Artikel Terbaru Dalam Menu Navigasi. Namun pada menu navigasi kali ini saya menggunakan JASON Script Code untuk mendesain tampilan menunya dengan mengambil kode script artikel terbaru (up-date new Article) dan menampilkan komentar pada artikel terbaru, dan semuanya itu akan ditampilkan secara otomatis dalam menu navigasi menggunakan JASON Script Code

DEMO SHOW

Seperti yang kita ketahui, hampir semua tampilan blog menggunakan menu navigasi pada desain template-nya, akan tetapi tampilan menu navigasi pada blog tersebut terbilang biasa saja (default), sehingga dari sana ada ide untuk memodifikasi menu yang biasa menjadi sedikit luar biasa, hehe..!!. Pada menu navigasi kali ini, saya menyisipkan update-an posting terbaru beserta komentar pembaca terbaru, singkatnya setiap kali Anda buat artikel baru, maka secara otomatis artikel tersebut akan tampil pada menu navigasi di blog Anda, sehingga Anda tidak repot-repot lagi harus menuliskan link secara manual pada menu navigasi blog Anda, dan komentar pembaca dapat Anda update selalu. Artikel sebelumnya tentang Menu Navigasi lihat pada TAB dibawah ini

Bagaimana?, sudah bosan dengan menu navigasi blog Anda saat ini, dan ingin mencoba sesuatu yang baru dan lebih fresh mungkin.? hehe.. Silahkan Tinggal di-Copy Paste saja kode berikut

#autonav {
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  margin-top:20px;
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:white;}

#autonav ul {
  margin-top:-2em;
  padding:0;
  height:40px;
  background-color:#080;}

#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0;
  padding:0;
  position:relative;}

#autonav ul li a {
  display:block;
  line-height:40px;
  height:40px;
  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,
#autonav ul li:hover > a {
  background-color:red;
  border-right-color:#082434;
  text-decoration:none;}

#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  margin-top:-0.8em;
  left:0;
  z-index:9999;
  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:none;
  color:#ccc;}

#autonav ul ul ul {
  top:0;
  left:100%;}

#autonav li:hover > ul {
  display:block;
  border-left:3px solid red}

#autonav ul.json-dropdown {overflow:hidden}
#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0;
  overflow:hidden;
  border-left:0.5px solid red;}

#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0;}

#autonav ul.json-dropdown li a:hover {
  text-decoration:none;
  background:transparent;}

#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {background-color:#080;}

#autonav ul.json-dropdown img.rp-thumb {
  padding:0;
  outline:none;
  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,Tahoma,Helmet,Freesans,Sans-Serif;
  color:orange;
  font-size:9px;}

#autonav .wide {width:400px}

<script>
//<![CDATA[
var numpost = 7,
    numcomment = 8,
    cmtext = "Komentar",
    cmsumm = 100,
    pBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
//]]>
</script>

Keterangan Pada HTML

Untuk penerapan kode HTML berikut, tampilan nama-nama menu saya menggunakan default name, jika ingin menggantinya silahkan sesuaikan dengan selera Anda
Ganti Kode yang saya beri warna Orange Dengan URL blog Anda

Sabtu, 26 Juli 2014

Daftar Artikel Terbaru Dalam Menu Navigasi

Artikel Terkait:

Tidak ada komentar:

Posting Komentar