Cara Membuat Header Melayang 2 Ala kaskus

Nah mungkin pada artikel sebelumnya saya pernah membuat header melayang namun sekarang akan ada perubahan dan sudah diterapkan di blog ini.berbeda dengan sebelumnya saya sengaja membuat bergaya kaskus karena saya suka dengan warna biru.

Sekarang to the point saja Copy Paste code ini dibawah code <div id="header-wrapper"> atau sejenisnya.

	<style type="text/css">
	/* ====== BAR ATAS ====== */
	.topbar {
	width: 100%;
	min-width: 900px;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 30px;
	background-color: rgb(20, 132, 206);
	background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, rgb(18, 116, 181) 100%);
	box-shadow: 0px 2px 0px rgb(14, 90, 140);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	z-index: 99999;
	}
	.topbar_jb{
	width: 100%;
	min-width: 900px;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 30px;
	background-color: rgb(108, 179, 0);
	background-image: -moz-linear-gradient(center top , rgb(108, 179, 0) 20%, rgb(78, 129, 0) 80%);
	box-shadow: 0px 2px 0px rgb(78, 129, 0);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	z-index: 99999;
	}
	#topbar_absolute {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	height: 30px;
	width: 100%;
	min-width: 900px;
	}
	.topbar_lay {
	width: 900px;
	margin: auto;
	transition: all 0.2s linear 0s;
	}
	.topbar_lay1 {
	width: 650px;
	float: left;
	display: inline;
	}
	.topbar_lay2{
	float: right;
	right: 0;
	}
	.meta-header-bar {
	margin: -12px -40px;
	}
	.meta-header-bar ul li:first-child {
	border-left: 1px solid rgba(30, 30, 30, 0.125);
	}
	.meta-header-bar ul li {
	float: left;
	position: relative;
	}
	.meta-header-bar ul li a {
	display: inline-block;
	padding: 6px 10px;
	text-decoration: none !important;
	position: relative;
	border-right: 1px solid rgba(30, 30, 30, 0.125);
	box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
	border-top-color: transparent !important;
	border-left-color: transparent !important;
	border-bottom-color: transparent !important;
	color: rgb(255, 255, 255) !important;
	}
	.meta-header-bar > ul > li > a {
	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
	}
	.topbar a {
	color: rgb(240, 240, 240);
	}
	.meta-header-bar ul li a:hover, .topbar .meta-header-bar ul li a:focus {
	background-color: rgba(255, 255, 255, 0.125);
	}
	.meta-header-bar > ul > li > a:hover, .meta-header-bar > ul > li > a:focus {
	color: rgb(255, 255, 255) !important;
	}
	.meta-header-bar-lay2 {
	margin: -5px 0px;
	}
	.meta-header-bar-lay2 ul li:first-child {
	border-left: 1px solid rgba(30, 30, 30, 0.125);
	}
	.meta-header-bar-lay2 ul li {
	float: left;
	position: relative;
	}
	.meta-header-bar-lay2 ul li a {
	display: inline-block;
	text-decoration: none !important;
	padding-top: 1px;
	position: relative;
	border-right: 1px solid rgba(30, 30, 30, 0.125);
	box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
	border-top-color: transparent !important;
	border-left-color: transparent !important;
	border-bottom-color: transparent !important;
	}
	.meta-header-bar-lay2 > ul > li > a {
	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
	}
	.meta-header-bar ul li a:hover, .topbar .meta-header-bar ul li a:focus {
	background-color: rgba(255, 255, 255, 0.125);
	}
	.meta-header-bar-lay2 > ul > li > a:hover, .meta-header-bar-lay2 > ul > li > a:focus {
	color: rgb(255, 255, 255) !important;
	}
	.topbar_log{
	font-family:Arial Unicode MS;
	font-size: 16px
	text-decoration: none;
	background: none;
	float:right;
	margin-right: 3px;
	margin-top: -5px;
	}
	.topbar_log a:link{
	color:#fff;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	text-shadow:-1px -1px #0F6FBA;
	}
	.topbar_log a:visited{
	color:#C5F9F9;
	text-decoration: none;
	text-shadow:-1px -1px #0F6FBA;
	}
	.topbar_log a:hover, .topbar_log a:active{
	color:#FFFF03;
	padding: 5px 10px 5px 10px;
	border-radius:5px;
	text-decoration: none;
	background:#065B93;
	text-shadow:-1px -1px #0F6FBA;
	}
	</style>
	<div id="topbar_absolute">
	<div class="topbar">
	<div class="topbar_lay">
	<div class="topbar_lay1">
	<div class="meta-header-bar">
	<ul>
	<li><a href="http://trevolutions.blogspot.com"><img src="home.png" alt="Home"></a></li>
	<li><a href="http://trevolutions.blogspot.com/search/label/Software">Software</a></li>
	<li><a href="http://trevolutions.blogspot.com/search/label/MyBB">MyBB</a></li>
	<li><a href="http://trevolutions.blogspot.com/search/label/Template">Templates</a></li>
	<li><a href="http://trevolutions.blogspot.com/search/label/Tips And Trik">Tips And Trik</a></li>
	<li><a href="#">WebCorner</a></li>
	</ul>
	</div>
	</div>
	</div>
	</div>

Jika sudah mungkin hasilnya tidak akan melayang namun jika anda ingin agar bisa melayang selipkan code ini diantara code diatas :

<div style="position:fixed;">
Code diatas
</div>

Sekarang bagaimana gampang kan Selamat mencoba