Thursday, September 2, 2010

Cara Membuat Header Bar Untuk Berlangganan Artikel

Posted by bob
Tips kali ini adalah cara membuat header bar untuk berlangganan artikel, ide ini saya dapatkan ketika saya blogwalking dan mampir di blognya mas agus ramadhani. Pasti anda pemblogger pasti sudah kenal blog nya o-om atau yang biasa di kenal Agus Ramadhani. hehe
Coba perhatikan header bar nya blog o-om, atau seperti gambar di bawah ini.


(klik gambar untuk memperbesar). Apakah anda ingin membuatnya ? Anda memasuki wilayah yang sangat tepat. Langsung saja saya berikan caranya.

1. Login dulu ke blog anda, Masuk ke Rancangan > Edit HTML.
2. Pertama kita akan memasukan kode CSS nya, perhatikan kode di bawah ini. Lalu letakkan tepat di atas : ]]></b:skin>.
/*-- (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}
3. Anda simpan dulu juga boleh, Lalu Cari kode di ini : <body>. Jika sudah, letakkan kode di bawah ini tepat di bawah kode tersebut.
<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/inferno.angga' target='_blank'>My Facebook</a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://feeds2.feedburner.com/BlogGecok' target='_blank;'>Dapatkan artikel Dari Blog Gecok secara gratis via mail, 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCF49MSeka3Bw3VdmiX6IPMY_v4tmmZZHUasB78sxan6w8edDddN5RkqGeK1qs5LBj4LzKPoVW41TST5QISh2bRwisY2TsekuZqowNZnSlGmgdEEvk6yxy_RfKNxUeiU3J23VsVHqIW0xX/' style='cursor:hand;cursor:pointer;'/></span></div>

 Nb: Teks yang di beri warna dan di cetak tebal itu bisa anda ganti sesuka anda.


jika ada kesalahan atau berguna buat anda, mohon berkomentar di bawah ini.
Semoga Bermanfaat!
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)