Memasang Menu Meta Bar Pada Blog adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Memasang Menu Meta Bar Pada Blog ini.
Memperindah tampilan blogger adalah impian para blogger sebab salah satu penunjang traffick rank dan SEO pada blog kita, because harus diingat apakah dengan menambah tampilan blog yang menggunakan CSS ataupun Javascript akan memperlambat loading blog kita. So pasti, kita harus pilah pilih untuk menggunakan sesuatu yang tidak memberatkan loading blog.
Carilah berbagai informasi untuk memodifikasi blog anda, saya recomendation anda untuk mengunjungi blog Kang Rohman dan Kang Onk Design untuk belajar blogging demi terciptanya blog yang menarik pengunjung yang nota bene akan meningkatkan traffic rank pada blog kesayangan kita.
Do not be too long, intinya pada tutorial kali ini saya akan membagikan informasi seputar blogger tentang cara memasang menu meta bar (kata Kang Fathur, gak tau kalau kata para webmaster blog) dan bisa hidden. Perhatikan pada gambar berikut yang ditandai garis tepi berwarna merah.
Langkahnya untuk membuatnya adalah :
- Login Blogger yang anda buat;
- Klik tombol Rancangan dan pilih Edit HTML;
- Cari kode ]]></b:skin>
- Jika ketemu copy paste kode dibawah sebelum kode diatas ( ]]></b:skin> )
#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}
#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}
.paging-control-container
{float: right;
margin-top: 0pt;
margin-right: 6px;
margin-bottom: 0pt;
margin-left: 0pt;
font-size: 11px;
font-weight:bold;}
- Setelah itu pilih </head>
- Copy paste kode berikut diatas kode tadi,
<script type='text/javascript'>
//<![CDATA[
var mta_arr=new Array();var mta_clear=new Array();function mtaFloat(mta){mta_arr[mta_arr.length]=this;var mtapointer=eval(mta_arr.length-1);this.pagetop=0;this.cmode=(document.compatMode&&document.compatMode!="BackCompat")?document.documentElement:document.body;this.mtasrc=document.all?document.all[mta]:document.getElementById(mta);this.mtasrc.height=this.mtasrc.offsetHeight;this.mtaheight=this.cmode.clientHeight;this.mtaoffset=mtaGetOffsetY(mta_arr[mtapointer]);var mtabar="mta_clear["+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';mtabar=mtabar;eval(mtabar)}function mtaGetOffsetY(b){var c=parseInt(b.mtasrc.offsetTop);var a=b.mtasrc.offsetParent;while(a!=null){c+=a.offsetTop;a=a.offsetParent}return c}function mtaFloatInit(a){a.pagetop=a.cmode.scrollTop;a.mtasrc.style.top=a.pagetop-a.mtaoffset+"px"}function closeTopAds(){document.getElementById("mta_bar").style.visibility="hidden"};
//]]>
</script>
- Simpan Template.
Langkah selanjutnya sebagai berikut :
- Pilih tab Rancangan pada dasbor blogger anda;
- Klik tab Tambahkan Elemen atau Gadget;
- Pilih HTML/JavaScript
- Copy paste kode dibawah kedalam gadget yang baru dibuat;
<div id="mta_bar">
<div id="left_bar2">
<span class="left">
<a href="URL facebook anda" rel="nofollow" target="_blank">Facebook</a>
<a href="URL twitter anda" rel="nofollow" target="_blank">Twitter</a>
<a href="URL friendfeed anda" rel="nofollow" target="_blank">Friendfeed</a>
</span>
</div>
<div id="left_bar">
<span class="center"><a href="URL mail feedburner anda" rel="nofollow" target="_blank">Gratis berlangganan artikel Kang Fathur via mail, join sekarang!</a>
</span></div>
<span class="right" onmouseout="self.status=''" onmouseover="self.status='onkdesign.com';return true;">
<img onclick="closeTopAds();return false;" src="http://3.bp.blogspot.com/_C6KkooKXCEw/TIBiP3D5kBI/AAAAAAAAGw0/coyjcdUCnn0/s200/delete-c.png" style="cursor: pointer;" align="absmiddle" border="0" /></span></div>
<div id="outer-wrapper" style="margin-top: 0px;"><div id="wrap2"></div></div>
Lalu Save Template, selesai.
- Ganti huruf yang berwarna merah sesuai dengan kebutuhan serta kesukaan anda
- Silakan modifikasi kode CSS-nya untuk lebih menarik perhatian pengunjung.
