Buron SSH: Cara Membuat Menu Stripe-Ad

Beberapa waktu yang lalu ada kawan saya yang bertanya bagaimana Cara Membuat Menu Stripe-Ad,
untuk itu sekarang akan saya tunjukan Cara Membuat Menu Stripe-Ad yang sangat mudah diterapkan pada blog sobat semua.

Ini adalah contohnya,

Cara Membuat Menu Stripe-Ad

Masuk ke Blogger lalu klik Tata Letak, kemudian klik Edit HTML.
Cari kode ]]></b:skin> lalu letakan kode dibawah ini tepat dibawah ]]></b:skin>.

/* mta bar */ #mta_bar{background:#444 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CE9x_6V5eF87aoIZcjPDlDDeRmYm63fybbuPJmvW6xfrYIXyN_2X-rSgJRv876_o54bRtMbXIXAkVncuKG5iFlKUSTh9FKldLIA6u7dmAf2drM48fTY7vybd5F85nHNePZmaJBRDzQg/s1600/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:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%}  #mta_bar .left{float:left; text-align:left; font-family:Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%}  #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:#FFFFFF; text-decoration:underline}  #mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none} #left_bar a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yIYNFLQNcEtXFHYiY1vq8_yC85aMTG78qjY7Yfq7Dz52NN_vBXBElktEIj0ccgTxSWsryBnJSSVAItkFGSEi6H6ObH6Q5xtHLy3kZ86Xdsz4qrs6yWiebjbj_0aENNZvOuWzF4Hnr3zb/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/AVvXsEiSWxI_Nv8sahTH-dJs9Gq0Jvtk4Yb96InJkPHfD-i_QW7AUkmw9gRdEAMABF0IEpVNvxHV-oS5oZGJWa0TLS4L2C_wb2tjy_rztZTu3i2bWmc4dQCYhE0d3cdtuU3F1EtS_w3KzR2RlKCM/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/AVvXsEgeP3eSXd6NXeHhbd2Wloz-HqSSENrBchGlbFPSZ6Q02Db1mACXryIUnBEdCb6pVjlAGVDWF0TQ-60WNJphd_vHHz1dMWp8dF4OEGZwxuwNtPmXJcdbW3Enw2-O_M49oukdf2-UJ2l2JuCe/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}  #to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1f5KsZthxgM97yfCbozvke9d6YzTnHYAeX1gikSbYUucpkenL8cFNQEwTtdx6mokqPup6qXpUBRe5whruT9304mJvfcxJvnOyaw6wpgNIwBUdQdow82JLwg4borDDbqjbWVnW1j1GMNC-/) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}  #to_top a{padding:8px}

Cari kode </head> dan letakan kode ini tepat diatasnya,

Kemudian letakan kode dibawah ini dan letakan tepat dibawah <body>,

<div id="mta_bar"><div id="left_bar2"><span class="left"><a href='http://www.facebook.com/dhetughi' rel='nofollow' target='_blank' title='Add me as friend on Facebook'>Facebook</a><a href='http://twitter.com/dhemrsimple' rel='nofollow' target='_blank' title='Follow me on Twitter'>Twitter</a><a href='http://www.facebook.com/groups/und3rgr0und' rel='nofollow' target='_blank' title='My Group'>Join Here !</a></span></div><div id='left_bar'><span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=TrikDanInformasi&loc=en_US' rel='nofollow' target='_blank'>Gratis Berlangganan artikel via email, join sekarang! </a></span></div><span onmouseout="self.status=''" onmouseover="self.status='asrizalwahdanwilsa';return true;" class="right"> <img onclick="closeTopAds();return false;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1f5KsZthxgM97yfCbozvke9d6YzTnHYAeX1gikSbYUucpkenL8cFNQEwTtdx6mokqPup6qXpUBRe5whruT9304mJvfcxJvnOyaw6wpgNIwBUdQdow82JLwg4borDDbqjbWVnW1j1GMNC-/" style="cursor:hand;cursor:pointer;" align="absmiddle" border="0" /></span></div>

Simpan template dan lihatlah hasilnya.

Ubah "dhetughi" dengan ID Facebook anda.

Ubah "dhemrsimple" dengan ID Twitter anda.

Selebihnya silakan anda edit sendiri.

Bagaimana??
Sangat mudah bukan?!

Saran dari saya sebelum melakukan Edit HTML biasakan untuk melakukan Backup Template terlebih dahulu, agar apabila terjadi error anda bisa melakukan Restore dengan mudah.

Sekian Cara Membuat Menu Stripe-Ad, semoga bermanfaat...

Buron SSH

Jumat, 12 April 2013

Cara Membuat Menu Stripe-Ad

Cara Membuat Menu Stripe-Ad

Tidak ada komentar:

Posting Komentar