contoh menu 1
Menu utama 1Menu utama 2
Menu utama 3
Menu utama 4
contoh menu 2
Menu utama 1Menu utama 2
Menu utama 3
Menu utama 4
contoh menu 3
Menu utama 1Menu utama 2
Menu utama 3
Menu utama 4
Sumber :
<script type="text/javascript">
var showPostDate_g = true,
showComm_g = true,
slideOpenNewTab = true,
idMode = true,
slidebyLabels = false,
slideLabelName = "Mengenai",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoe0Pw4_DWKVFwJhFReII2IVJQe2ktzCdP3xBClPbyXh5-0FEPKe5NNoMMTzfHmhC-JNRYCsoLhDpHtYuZ9_Z3Equ-HfgxJKH9pIij2IzoFGuSAzjYei6GsDheUQ0nIkzn8atvpE9Wfr5/s259/images.jpg",
text = "Komentar",
numposts_g = 30,
numchars_g = 100,
showText = "Menampilkan",
postText = "Posting",
tinyprevNav = "<",
tinynextNav = ">",
home_page = "http://www.alizainsyahab.co.cc/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>
<script src='http://myjavascriptslibrarry.googlecode.com/files/jquery.min.tinycrousel.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
start : 5,
display : 5,
axis : 'x',
interval : false,
intervaltime: 5000,
animation : false,
duration : 2000,
callback : null
});
});
//]]>
</script>
<script src='http://myjavascriptslibrarry.googlecode.com/files/jquery.tinycarousel-custom.js' type='text/javascript'></script>
<style>
/**
* Custom TinyCarousel by Ali Zain Syahab
* Visit: http://www.alizainsyahab.co.cc/
*/
#tinycarousel {
width:532px; /* Lebar Slideshow */
height:1%;
overflow:hidden;
font:normal 10px/12px Arial,Sans-Serif;
color:#666;
margin:30px auto;
}
#tinycarousel .viewport {
height:337px;
overflow:hidden;
position:relative;
background-color:#eee;
border:1px solid #ccc;
}
#tinycarousel ul.overview {
list-style:none !important;
position:absolute;
padding:0px 0px !important;
margin:0px 0px !important;
width:240px;
left:0px;
top:0px;
}
#tinycarousel ul.overview li {
list-style:none !important;
float:left;
margin:5px 0px 5px 5px !important;
padding:0px 0px !important;
height:auto !important;
width:168px; /* Lebar satu unit slide */
background-color:white;
color:#666;
border:1px solid #ccc;
}
#tinycarousel .inner {
margin:10px;
height:260px;
overflow:hidden;
}
#tinycarousel img {
width:auto !important;
height:170px !important;
border:none;
outline:none;
padding:0px 0px;
margin:0px 0px;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#tinycarousel h6 {
border-top:1px solid #ddd;
font:bold 11px/12px Verdana,Arial,Sans-Serif;
color:#39f;
margin:9px 0px 5px;
padding:10px 0px 0px;
backgorund:transparent;
overflow:hidden;
}
#tinycarousel h6 a {
color:#39f;
text-decoration:none;
border:none;
}
#tinycarousel p {
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}
#tinycarousel em {
font-style:normal;
color:#aaa;
background-color:#333;
background-image:-webkit-linear-gradient(top,#555,#333);
background-image:-moz-linear-gradient(top,#555,#333);
background-image:-ms-linear-gradient(top,#555,#333);
background-image:-o-linear-gradient(top,#555,#333);
background-image:linear-gradient(top,#555,#333);
display:block;
padding:5px 10px;
margin:0px 0px;
}
#tinycarousel #tinyarrow {
display:block;
background-color:white;
border:1px solid #ccc;
padding:5px;
margin:2px 0px 0px;
overflow:hidden;
}
#tinycarousel #tinyarrow .buttons {
background-color:#666;
border:none;
outline:none;
display:block;
padding:2px 5px;
overflow:hidden;
position:relative;
float:left;
margin:0px 1px;
color:white;
text-decoration:none;
font-weight:bold;
}
#tinycarousel #tinyarrow .disable {
display:none;
}
#tinycarousel #tinyarrow .buttons:active {
background-color:#900;
position:relative;
top:1px;
}
#tinycarousel #tinyarrow span {
float:right;
font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
display:block;
margin:2px 5px 0px 0px;
}
/*
* Orientasi Vertikal
* CSS diatur secara manual pada versi aslinya
* tapi di sini semuanya sudah cukup teratur
*/
#tinycarousel.vertical {
width:242px;
}
#tinycarousel.vertical ul.overview li {
float:none;
display:block;
width:230px;
margin:5px auto 10px !important;
}
/* End Slideshow */
</style>
| Opsi | Keterangan |
|---|---|
| showPostDate_g | Jika bernilai true, bulan terbit artikel akan ditampilkan. Jika bernilai false, bulan terbit artikel akan disembunyikan. |
| slideOpenNewTab | Jika bernilai true, setiap link akan terbuka di tab/jendela baru. Jika bernilai false, setiap link akan terbuka di tab/jendela yang sama. |
| idMode | Jika bernilai true, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai false, sistem penanggalan akan berubah menjadi berbahasa Inggris. |
| slidebyLabels | Ubah nilainya menjadi true jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel slideLabelName. |
| slideLabelName | Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai slidebyLabels menjadi true. |
| pBlank | Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar. |
| text | Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar). |
| numposts_g | Digunakan untuk menentukan jumlah slide. |
| numchars_g | Digunakan untuk menentukan jumlah karakter ringkasan artikel. |
| showText & postText | Digunakan untuk mengubah teks "Menampilkan" N "Posting". |
| tinyprevNav | Digunakan untuk menentukan simbol navigasi mundur pada slideshow. |
| tinynextNav | Digunakan untuk menentukan simbol navigasi maju pada slideshow. |
| home_page | URL blog Anda. |
| Opsi | Nilai | Keterangan |
|---|---|---|
| start | 1, 2, 3, ... (urutan) | Digunakan untuk menentukan slide nomor ke berapa yang akan tampil terlebih dulu saat halaman dikunjungi. |
| display | 1, 2, 3, ... (jumlah) | Digunakan untuk menentukan berapa banyak slide yang akan bergeser dalam sekali klik navigasi/sekali animasi. |
| axis | 'x' | Nilai 'x' akan membuat orientasi slideshow menjadi horizontal, nilai 'y' akan membuat orientasi slideshow menjadi vertikal. |
| 'y' | ||
| interval | true | Nilai true akan membuat slideshow bergerak secara otomatis, nilai false akan membuat slideshow mati dan hanya bisa bergerak jika Anda mengeklik tombol navigasi. |
| false | ||
| intervaltime | 500, 3000, ... (kecepatan) | Digunakan untuk menentukan lama waktu slide berhenti diantara animasi (hanya berlaku untuk animasi otomatis). |
| animation | true | Nilai true akan membuat slideshow bergerak dengan efek animasi, nilai false akan membuat slideshow bergerak kaku dan tampak meloncat. |
| false | ||
| duration | 500, 3000, ... (kecepatan) | Digunakan untuk menentukan kecepatan animasi perpindahan slide. |
| callback | null | Digunakan untuk menerapkan fungsi tambahan yang akan dieksekusi setiap kali slide berpindah. |
| function() { ... } |

#slidearea{height:150px;overflow:hidden;margin:-20px 0px 0 2px;position:relative;width:965px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDdSS-xau0sI65aZGbijYGjur2AfpG2e6L-VO5QzcZYPARd44u18pBmScB-huGmzI20_MhRRG0RWKmloemfvgZ6uXbtIn-PvmSiT2WWrj2KYcibP84I0LHsLFvCXtqGHOH9pL5Orf97lp/s0/header-background.png) repeat-x;border:5px ridge #052844;}
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'> <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoNJys8kBVVddbZ1-HEDuIoPSsvG38-BwMqWtQabLoXeZvvTBBqWAz8xK2ffjl-erFftruMLsTARBwA632QHzQIbNKJzQY4I-2ghr8GrO957vCLj1W-LyH4tr3s0cm_JN71sowCGba67w/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoNJys8kBVVddbZ1-HEDuIoPSsvG38-BwMqWtQabLoXeZvvTBBqWAz8xK2ffjl-erFftruMLsTARBwA632QHzQIbNKJzQY4I-2ghr8GrO957vCLj1W-LyH4tr3s0cm_JN71sowCGba67w/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a> <div class='clear'/>
<h2><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></h2>
<p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....</p>
</div>
</li>

Untuk Memahami Kode di Atas:<script src='http://dropdownlevel.googlecode.com/files/dropdownddlevel.js.txt' type='text/javascript'></script> <style> /* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/ font: normal 13px Verdana; margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; background: white; border: 1px solid black; border-bottom-width: 0; visibility: hidden; z-index: 100; }
.ddsubmenustyle ul{ margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; border: 0px none; }
.ddsubmenustyle li a{ display: block; width: 170px; /*width of menu (not including side paddings)*/ color: black; background-color: lightyellow; text-decoration: none; padding: 4px 5px; border-bottom: 1px solid black; }
* html .ddsubmenustyle li{ /*IE6 CSS hack*/ display: inline-block; width: 170px; /*width of menu (include side paddings of LI A*/ }
.ddsubmenustyle li a:hover{ background-color: black; color: white; }
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/ padding-left: 4px; border: 0; }
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/ position: absolute; padding-top: 3px; left: 100px; border: 0; }
.ddiframeshim{ position: absolute; z-index: 500; background: transparent; border-width: 0; width: 0; height: 0; display: block; }
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{ margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; border-bottom: 1px solid gray; background: #414141; overflow: hidden; width: 100%; }
.mattblackmenu li{ display: inline; margin: 0; }
.mattblackmenu li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 6px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; }
.mattblackmenu li a:visited{ color: white; }
.mattblackmenu li a:hover{ background: black; /*background of tabs for hover state */ }
.mattblackmenu a.selected{ background: black; /*background of tab with "selected" class assigned to its LI */ }
</style>
<div id="ddtopmenubar" class="mattblackmenu"> <ul> <li><a href="#">LINK1</a></li> <li><a href="#" rel="ddsubmenu1">LINK2</a></li> <li><a href="#" rel="ddsubmenu2">LINK3</a></li> <li><a href="#">Link4</a></li> <li><a href="#" rel="ddsubmenu3">LINK5</a></li> </ul> </div>
<script type="text/javascript"> ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") </script>
<ul class='ddsubmenustyle' id='ddsubmenu1'> <li><a href='#'>LINK2 ITEM 1</a></li> <li><a href='#'>LINK2 ITEM 2</a> <ul> <li><a href='#'>LINK2 ITEM 2.1</a></li> <li><a href='#'>LINK2 ITEM 2.2</a></li> </ul>
</li> <li><a href='#'>LINK2 ITEM 3</a> <ul> <li><a href='#'>LINK2 ITEM 3.1</a></li> </ul>
</li> <li><a href='#'>LINK2 ITEM 4</a></li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'> <li><a href='#'>LINK3 ITEM 1</a></li> <li><a href='#'>LINK3 ITEM 2</a></li> <li><a href='#'>LINK3 ITEM 3</a> <ul> <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li> <li><a href='#'>LINK3 ITEM 3.3</a></li> <li><a href='#'>LINK3 ITEM 3.4</a></li> </ul> </li> <li><a href='#'>LINK3 ITEM 4</a></li> <li><a href='#'>LINK3 ITEM 5</a> <ul>
<li><a href='#'>LINK3 ITEM 5.1</a></li> <li><a href='#'>LINK3 ITEM 5.2</a> <ul> <li><a href='#'>LINK3 ITEM 5.2 1</a></li> <li><a href='#'>LINK3 ITEM 5.2 2</a></li> <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
</ul> </li> </ul> </li> <li><a href='#'>LINK3 ITEM 6</a></li> </ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'> <li><a href='#'>LINK5 ITEM 1</a></li> <li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li> <li><a href='#'>LINK5 ITEM 4</a></li> <li><a href='#'>LINK5 ITEM 5</a></li> </ul>
Introduction This is the third in my Security Series of Connect articles. For more information on how to keep your enterprise environm...