FacebookProduk KesehatanMy Dollar $$$
Gratis berlangganan Artikel Satria PC, join here!
.
.
Satria PC is Dofollow Blog. Sertakan link sumber bila ingin Copy artikel Satria PC
Saturday, July 16, 2011

6
Cara Buat Menu Bar Melayang dengan tombol close

Share this artikel on :
Hai sobat SP dimanapun anda berada, hehe.. Apa kabar kalian semua? Pastinya dalam keadaan sehat wal'afiat dong. Pada postingan kali ini saya akan menjawab pertanyaan dari sobat Virtual Forest tentang "Cara Buat Menu Bar Melayang dengan tombol close" seperti yang anda lihat pada blog ini. Di bawah ini screenshootnya :


floating menu bar
Satria PC (klik gambar untuk perbesar)

Bagaimana? Tertarik pengen masang Menu Bar melayang juga?
Baiklah kalau anda pengen memasang-nya. Ikuti langkah di bawah ini :
Jangan lupa sebelum anda melakukan ini "Download Template Lengkap" terlebih dahulu hal ini untuk mencegah dari hal-hal yang tidak di inginkan.

1. Masuk (Sign In) ke blogger
2. Pilih menu Dashboard
3. Rancangan > Edit HTML > Download template lengkap terlebih dahulu.
4. Checklist / beri tanda centang "Expand Widget Templates"
5. Cari kode <body> (agar pencarian lebih cepat tekan Ctrl + F, ketikkan <body>)
6. Udah ketemu kodenya? kalo udah, copy paste kode dibawah ini di bawah kode <body>

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/Forum.SatriaPC'>Facebook</a><a href='http://satria-pc.blogspot.com/2011/06/produk-kesehatan.html'>Produk Kesehatan</a><a href='http://satria-pc.blogspot.com/2011/06/my-dollar.html'>My Dollar $$$</a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=SatriaPc' target='_blank;'>Ayo langganan artikel terbaru Satria PC. Gratis via Email, join here!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;asrizalwahdanwilsa&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_mWNaJ9OwpbA/TFQz3m9CBzI/AAAAAAAAAhU/3whudNQNZEg/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
  <div id='wrapper'></div>
Keterangan : code yang berwarna merah, ganti dengan menu sobat, dan kode yang warna biru ganti dengan alamat feedburner sobat. (kalo gak di ganti juga gak apa-apa,, hehe)

7. Upss, belum selesai gan, cari lagi kode "]]></b:skin>"
8. Kemudian letakkan kode di bawah ini tepat di atas code "]]></b:skin>"

/* bottom
---------------------------- */
#bottom{background:#444 url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:center; padding:25px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#fff; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
h2 {font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:28px; color:#fff; padding-bottom:6px; }
h2 a:link, h2 a:visited{color:#666666; font-size:11px;}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both;line-height:1.3em; letter-spacing:.0em; font-size:90%; border-top:1px solid #c0c0c0; padding-top:10px;padding-bottom:20px;}
#footer-wrapper{height:0px; clear:both; margin:0 auto; text-align:left; padding:1px}
.credits{margin:0; width:900px; padding:0px 0px 0px; font-size:95%}
/* -- LABEL CLOUD -- */
.cloud-label-widget-content {background-color: #555; padding:10px; border:solid 1px #555;-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px;}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover { color:#fff; text-decoration:none }
.label-size a:hover{-moz-border-radius-bottomleft:3px; -moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; background-color:#FF9900; color:#fff; padding:2px 2px 2px 2px}
.label-size a{padding:2px 2px 2px 2px}
/*-- (Menu/Nav) --*/
#nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center;margin-left:10px;}
#nav{background:#fff url(http://3.bp.blogspot.com/_C6KkooKXCEw/TICgsEwQ6VI/AAAAAAAAGzc/uKEKlKRK6mY/s1600/topmenu-c.png) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
#nav-left{float:left; display:inline; width:700px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:170px;  padding-top:3px; padding-right:20px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif; font-weight:bold}
#nav ul li{float:left;  list-style:none}#nav ul li a, #nav ul li a:visited{ display:block; color:#fff; margin:1px 4px; padding:4px 2px; text-decoration:none;}
#nav ul li a:hover{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 2px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 2px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
/* SEARCH */
#src-m{border:1px solid #999;  height:18px; width:180px; padding-top:0px;  background:#f6f4f4; }
#src-m input{border:0;  background:none;  color:#777}
#s-m{font-size:12px; width:180px; padding-left:4px;  margin:0;  background:none}
#tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #000000; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{width:155px}
/*-- (mta bar) --*/
#mta_bar{background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/TIChde9sutI/AAAAAAAAGzk/5DJ4Cbds91E/s200/topnavbar-c.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:55%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:30%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#fff; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
#left_bar a{background:url('http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar2 a{background: url(http://2.bp.blogspot.com/_C6KkooKXCEw/TICuIqKZqRI/AAAAAAAAG0E/hfkQzQz7h20/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px}
.small-comment{
    background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) no-repeat;
    padding-left:8px;
    height:20px;
    line-height:14px;
    float:right;
    color:#FFF;
    font-weight:bold;
    font-size:11px;
    margin-top:3px;
    margin-left:10px;
}.small-comment div{
    background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) top right no-repeat;
    padding-right:8px;
    height:20px;
}
#left_bar2 a:hover{text-decoration:underline; color:#fff}
#left_bar3 a{background: url(http://3.bp.blogspot.com/_C6KkooKXCEw/TIBf2gtK0UI/AAAAAAAAGwE/Wml7-gPP17U/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
.feed-small-right-feed,.small-right{font-size:11px;float:right;font-weight:700;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png) right 0 no-repeat;padding-right:20px;padding-bottom:15px}
#crosscol-wrapper{margin:0 20px;padding:10px 0 0}
#jarak_atas {width:2px;height:20px;}

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;


/*-- (mta bar) --*/
#mta_bar{background:#444 url('http://i726.photobucket.com/albums/ww267/asrizalwahdanwilsa/C-OM%20Blogz/wow.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;
z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}

* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}

#mta_bar .center{float:left; text-align:center; font-family:Arial; font-size:12px; font-style:normal; color:#FFF; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; font-style:normal; color:#FFF; width:20%}

#mta_bar .right{font-family:Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}

#mta_bar .right a{font-size:10px; color:#FFF; text-decoration:none;}

#mta_bar .right a:hover{font-size:10px; color:#FFF; text-decoration:none;}

#left_bar a{background:url('http://i726.photobucket.com/albums/ww267/asrizalwahdanwilsa/C-OM%20Blogz/stripead-feed.png') no-repeat; text-decoration:none; color:#FFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{color:#FFF; text-decoration:none;}

#left_bar2 a{background: url() no-repeat 2px; color:#FFF; text-decoration:none; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar2 a:hover{text-decoration:underline; color:#FFF}
 9. Save Template

Gimana gan, mudah kan. . . Good luck ya.

6 komentar: — Skip to Comment.

Virtual Forest said...

Waw! Cepat juga penyajian hidangannya gan. Makasih banget nih. Sangat-sangat bermanfaat. Ane Control+D dulu yaa.

Makasih gan. Mmmmmmucah!

Satria PC said...

Sama2 gan,, terima kasih gan kunjungannya. :)

Virtual Forest said...

Ane lagi coba-coba nih gan. Tapi kok icon dan backgroundnya beda ya? Gak kayak punya agan. Terus lebarnya beda juga.

Satria PC said...

mohon maaf gan sebelumnya, karna ada kode yang ketinggalan. Dan sudah saya perbaiki. Silahkan dicoba lagi gan :)

Virtual Forest said...

Ok gan .... Nanti ane coba lagi. Makasih banyak yaa :)

Muhammad Muchlis said...

bookmark dulu,,, nanti dicoba... makasih share nya,,

Post a Comment — or Back to Content

Silahkan berikan komentar, kritikan atau saran yang membangun untuk mendapatkan backlink gratis dari Blog Dofollow ini. Komentar yang tidak sesuai topik, SPAM, penghinaan etc. tidak akan saya tampilkan !

 

Statistik Pengunjung