Memasang Menu Meta Bar Pada Blog

Tweet

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSM9JPrpIKDZzL3gWfOz2tVBe-e1Cq1UINPCf4iCFa9tkCjN8-g_JYHtJtzFeCB1qI5OLiOcNcKO9lWU-bASF6f6eVyChOV85FqzM7B_bBna5xVAyj8tGPm27-SGgGOPq5zqnCvdKCSE_/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCKtEMOuqyGEyVTwf6xpkwsN8wgc5EMutaRhgp5cNjcCaei5XMu3s9ztVakLQ3Q4iBjwkRAafHrIVtAXz1PDEwyarcDJ4ZHmlpamMBGmfClDR_OaXDJaW9osdgl11eMtOZYlieMEEHQ6ZY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUPxZ-NdWMKXFKHYnPOIGmtNeCf1m-s57aOSNVaTFviuLtDMuKeOeNAI8pskyTZY-9wRC-uIjs9-VzOzHIx9vaiTFy9FCOdVyGIXTl5ClLOmSVG8EcDRAKFVV5ols7hSOj6TKCkl930Px/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOwrbzL_csUp-83BjwRtb5H4ORlRKOAyxIDicfN7GWgOIFx0HwQgxFTusxtYygGF5RlO8jjanMz1aL25nINQOGkQAr9Frhgnc8xL5_zxCkP4eZToNjyFlaCLldzMGGi3E9NVi8RxXpNFd/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSCKPWpDwzpQlpNtc9rjcfx5rquSj-pHQw1i4zgW_ccltzrcMZDO9Yd0RcHNbQ6PXM1ufGgeTMSFHljKKnrToAyi2Lonmi3sJt5EGK11s9X-He3qrlGOPbXgVx2mOh2lfXWsrjE72XtYJV/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.

1. Ganti huruf yang berwarna merah sesuai dengan kebutuhan serta kesukaan anda
2. Silakan modifikasi kode CSS-nya untuk lebih menarik perhatian pengunjung.

Selamat mencoba and Happy Blogging.....!!!!

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: