ALAT OPTIK

LENSA

CERMIN

PANDCO 2019

Perjuangan ke 2 ananda M. Arif Hidayat setelah dari Semarang untuk memperjuangkan Bonus nya di SMKN 5 Surabaya.
Loh ..... koq Bonus .. ?
Iyalah, ananda kan belajar di SMKN 5 mengambil Jurusan Teknik Kimia Industri, baru kelas X TKI 2.
Nah ....... Ilmu yang akan di cari adalah Kimia Industri, sedang Debat Bahasa Inggris adalah Bonusnya, karena mendapatkan kesempatan untuk mengembangkan bakat cas cis cus nya. He he he ...
Congratulatian My Son, Good Job.

OPTIK

UN FISIKA 2000

UN FISIKA 1992

UN FISIKA 1991

UN FISIKA 1990

Mancing di Sumenep

Hobby mancing memang MAHAL.

Bayangin brow, perjalanan ke spot mancingnya jauuuuuh ....

Pasti harus siap tenaga dan perbekalannya.

Dari perjalan daratnya, makannya, nginapnya dan sewa perahu hingga ke titik spotnya. Hhmmm...

Belum lagi BONCOS nya ....... wwwkkk

Membuat menu versi 2

.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: #333;
}
ul.menu-horizontal {
width:100%;
position: relative;
z-index:999;
}
ul.menu-horizontal li {
list-style: none;
}/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}

/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}

/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

ini kode HTML nya

<div class=”menu-wrapper”>
<ul class=”menu-horizontal”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3 <span class=”arrow”></span></a>
<ul class=”submenu level-1″>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1 <span class=”arrow”></span></a>
<ul class=”submenu level-2″>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2  <span class=”arrow”></span></a>
<ul class=”submenu level-3″>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Cara Membuat Sub Menu versi 1

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara membuat menu dropdown / sub menu di blogspot.

Demo Menu Horizontal

• Home
• Menu 1
• Menu + Sub Menu
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu + Sub
  • Sub 1
  • Sub 2
  • Sub 3
  • Sub 4
  • Sub 5
  • Sub 6
• Menu

Cara Membuat Menu Dropdown / Sub Menu pada Blogspot 

• Login pada Blogger
• Masuk mode Rancangan kemudian Edit HTML
• Beri centang pada Expand Template Widget
• Cari kode <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>
• Jika sudah ketemu, letakan kode berikut diatas kode tadi dengan tekan F3

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:relative; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Home</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu + Sub Menu</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu 1</a></li>

<li><a href='#'>Sub Menu 2</a></li>

<li><a href='#'>Sub Menu 3</a></li>

</ul>

</li>

<li><a href='#'>Menu</a></li>

<li><a href='#'>Menu + Sub</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub 1</a></li>

<li><a href='#'>Sub 2</a></li>

<li><a href='#'>Sub 3</a></li>

<li><a href='#'>Sub 4</a></li>

<li><a href='#'>Sub 5</a></li>

<li><a href='#'>Sub 6</a></li>

</ul>

</li>

<li><a href='#'>Menu</a></li>

<li><a href='http://blogtutorials-01.blogspot.com'><b><blink>Blogger Tutorial</blink></b></a></li>

</ul>

</div>