contoh image
!doctype>
/*-----Responsive Menu ----*/
#menu{background: red;color: #fff;height: 40px;border-bottom: 2px solid black;border-top: 2px solid black; } #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:100%;border-bottom:5px solid #097279;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: aqua ;font-weight:bold;}
#menu li a:hover{color: yellow;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: red ;}
#menu input{display:none;margin:0 0;padding:0 0;width:50px;height:40px;opacity:0;cursor:pointer;type: button;}
#menu label{font:bold 30px Arial;display:none;width:50px;height:100%;line-height:38px;text-align:center; background:#0B1E30;
}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #FF0000 ;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;
text-shadow: none;border-bottom: 1px dashed #FF1000 ;}
#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB ;color: #FFF;-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}
@media screen and (max-width: 800px){
#menu, .swarch-from{position:relative}
#menu ul{background: #111 ;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:-20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block;}
#menu input{z-index:4}
#menu input:checked + label{color:white;background: #660099 ;}
#menu input:checked ~ ul{display:block;} .tombol-other {float:left;margin-right:1px} .tombol-other a, .tombol-other select{ color: #4B0082 ;background:yellow ;line-height:30px;display:inline-block;padding:0 11px;border-radius:5px;border: 1px solid ;text-decoration:none; }
.tombol-other a:hover, .tombol-other select:hover {background:black;color:red}
.recent th{background:black ;line-height:2;width:100%;display:inline-block;padding:0 11px;margin: 2px; margin:0;color:red;font-size:15px;padding:0 0px; line-height:3;border-bottom:4px solid;font-weight:700;text-transform:uppercase;text-align: left;}
.recent td{background: blue; width:100%; }
.recent { border-collapse: collapse; border-spacing: 0; }
.recent tr:nth-of-type(2n) td { font-weight: bold; background-color: #E6E6E6 ;color: black; text-align: left; padding: 3px 7px;border-bottom: } .recent { border-bottom: 5px solid red; padding: 3px 10px; red; padding: 3px 10px; }
/*Search Box*/
#search-box{position:relative;padding:5px; width: 250px;}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:95%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:55px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0;font-size: 12px;}
#search-button:hover{background:#333}
#search-form, #search-button, #search-text {float:right;}
#search-form{background: #2F4F4F ;float:right;margin:0 0;border-radius: 5px;}
#search-form{background: #4B0082 ;margin:0 0; border-radius: 3px; margin : 0;}
#search-form td.search-box{padding-right:15px}
#search-form input#search-box[type="text"]{background:#ffffff;height:30px;line-height:30px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color: #666666 ;border:none}
#search-form input#search-button[type="submit"]{font-family:FontAwesome;background: #B22222 ;color:#ffffff;height:30px;line-height:30px;margin:2px 5px 5px 0;padding:0 10px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s;font-weight: bold; border-radius: 5px;}
#search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
!doctype>
| Info tentang blog : |
|---|
| Mohon maaf jika mungkin ada kesalahan di blog ini. Admin sedang melakukan perbaikan dan update postingan. Jika ada link mati/kerusakan di blog ini lapor admin via FP/komen. |
/*-----Responsive Menu ----*/
#menu{background: red;color: #fff;height: 40px;border-bottom: 2px solid black;border-top: 2px solid black; } #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:100%;border-bottom:5px solid #097279;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: aqua ;font-weight:bold;}
#menu li a:hover{color: yellow;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: red ;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:50px;height:100%;line-height:38px;text-align:center; background:#0B1E30;
}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #FF0000 ;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;
text-shadow: none;border-bottom: 1px dashed #FF1000 ;}
#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB ;color: #FFF;-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}
@media screen and (max-width: 800px){
#menu, .swarch-from{position:relative}
#menu ul{background: #111 ;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:-20px}
!doctype>
| Info tentang blog : |
|---|
| Mohon maaf jika mungkin ada kesalahan di blog ini. Admin sedang melakukan perbaikan dan update postingan. Jika ada link mati/kerusakan di blog ini lapor admin via FP/komen. |