Membuat Banner melayang

Oleh Putra

Oct 10, 2011

Bagikan :

Tweet

Sebuah pertanyaan menarik yang saya dapatkan dari pengunjung blog ini,dia bertanya bagaimana membuat baner melayang di blog. Pada dasarnya yang namanya banner adalah gambar.jadi kita harus membuat sebuah gambar yang akan kita gunakan untuk dijadikan banner tersebut. Terus bagaimana kita membuat banner tersebut? Kamu bisa menggunakan software editing image seperti Photoshop, Photobie, atau software lainnya.

Setelah gambar dibuat silahkan unggah gambar tersebut ke blog atau layanan penyedia upload gambar favorit anda. kemudian salin url gambar tersebut. Sebagai contoh Lihat gambar di bawah ini.

Setelah itu masuk ke dasbor blog kamu kemudian ke Rancangan tambahkan element baru dan pilih Html/javascript,copy Html di bawah ini dan paste di element yang akan kamu buat tadi..

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGbE-iCFkEuiDeN0KX0-8IEhWNFYFgBQ2YKlfrQ3EZk40-hZSoBuJSHICfbJ4g9qdLDZQvrb5_DbRBL4N5H_FyqJZXFrltpJnJdI0XFgvEV7c8c6ypNfj0ti-aFopP-YMsdG3tdRLzSE/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGbE-iCFkEuiDeN0KX0-8IEhWNFYFgBQ2YKlfrQ3EZk40-hZSoBuJSHICfbJ4g9qdLDZQvrb5_DbRBL4N5H_FyqJZXFrltpJnJdI0XFgvEV7c8c6ypNfj0ti-aFopP-YMsdG3tdRLzSE/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

<div class="separator" style="clear: both; text-align: center;">
<a href="Url Tujuan setelah baner di klik" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="Url gambar baner kamu" /></a></div>


</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Ganti Tulisan berwarna biru dengan Url gambar dan Url yang dituju. Setelah itu silahkan kamu save dan lihat hasilnya.

Tag : blog, tips dan triks, tutorial