Membuat Float Box Dengan Efek Opacity

Written by RA_Syihan on Saturday, December 04, 2010 | Category: , ,

Panduan BloGGeR dan Tutorial BloGGeR yang sangat spesial untuk membangun dan membuat blog di BlogSPOT sampeyan semua semakin cantik dan pastinya akan membuat banyak pengunjung blog penasaran. Floating Transpaerent Box di desain dengan hanya sedikit javascript tapi mampu memberikan sebuah penampilan berbeda. Sampeyan bisa tambahkan foto ganteng sampeyan atau foto cantik sampeyan biar pada "dlongap-dlongop" dan tak beranjak ke blog lain. Atau mungkin sampeyan mau tawarkan iklan di sini. Iklan pabrik songkel gigi misalnya ... Ha ..... Hooo ... jangan ketawa .... wong aku sendiri jadi ketawa kok .... he ....ha ....ha .... Onde ... Lihat saja demonya dulu, baru nanti pikir mo buat apa.
 Demonya bisa anda lihat pada kanan atas Blog saya ini, terdapat gambar headphone. Anda klik saja gambar itu maka akan terlihat contoh Box dengan Opacitynya.

Langkah pembuatan Floating Box with Opacity Effect :
  1. Login : Login ke Blogger dengan tuliskan User Name atau alamat email, kemudian tulis juga nomor rahasia simpanan sampeyan.
  2. Tata Letak : KLIK link "Tata Letak".
  3. Edit HTML : KLIK link "Edit HTML".
  4. ]]></b:skin> : Cari KODE "]]></b:skin>".
  5. KODE CSS - Javascript : Letakkan KODE CSS di atasnya dan Javascript di sebelah bawahnya.
    KODE CSS
#topbar {
       position:absolute;
       border:4px double #ffcc00;
       padding:10px;
       background:#000;
       width:885px;
       visibility:hidden;
       z-index:100;
       text-align:justify;
       font-size:12px;
       font-family:cursive;
       font-weight:800;
       color:#66ccff;
       margin:0 20px;
       opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);
       }
#topbar:hover {
       opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
       }
     Javascript
<script type="text/javascript">
//<[CDATA[
/* Floatingbox.js -- bloggerstars -- gubhugreyot */
var persistclose=0
var startX = 30
var startY = 5
var verticalpos="fromtop" //"fromtop" or "frombottom"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function get_cookie(Name) {var search = Name + "="
var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search)
if (offset != -1) { offset += search.length
end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))}}
return returnvalue;} function closebar(){ if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"}
function staticbar(){barheight=document.getElementById("topbar").offsetHeightvar ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;var d = document;
function ml(id){var el=d.getElementById(id);if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible"
if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;if (verticalpos=="fromtop") el.y = startY;else{el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;el.y -= startY;}return el;}
window.stayTopLeft=function(){if (verticalpos=="fromtop"){var pY = ns ? pageYOffset : iecompattest().scrollTop;ftlObj.y += (pY + startY - ftlObj.y)/8;}
else{var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;ftlObj.y += (pY - startY - ftlObj.y)/8;}
ftlObj.sP(ftlObj.x, ftlObj.y);setTimeout("stayTopLeft()", 10);}
ftlObj = ml("topbar");stayTopLeft();}
if (window.addEventListener)window.addEventListener("load", staticbar, false)
else if (window.attachEvent)window.attachEvent("onload", staticbar)
else if (document.getElementById)window.onload=staticbar//]]>
</script>
    1. Setelah periksa dengan teliti, simpan CSS dan javascript dengan cara KLIK Simpan Template. Tunggu beberapa saat hingga proses penyimpanan selesai.
    2. Gunakan KODE HTML berikut di bagian body di bawah tag <body> .
    Kode HTML :
<div id="topbar"><img src="image.jpg" width="100" height="85" style="border:4px solid #fff; float:left; margin: 0 10px;" />
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUD-mQPzTkP3rsIiYrWMHLU9s-9ZsyMSOH8eSMQZuaATFCPq-AmK9UtjfbmAVtAVjOWjaqFdCrN92SHYjwHTbqcpwQAMczGsLO8LtYvopAZfPfpBCb9BWEPq7lXLtfdWPdyljZnvNPchrw/" border="0" width="50" height="30" style="float:right; margin:8px;" /></a>
</div>
Download Javascript Floating Box With Opacity Effect
 Kamu bisa juga membuatnya dengan download javascript yang tinggal pasang (berbentuk link dan telah di upload di javascipt hosting). Javascript juga telah disertai kode css dan contoh pemasangan teks dan gambar (link gambar), sehingga tinggal di coba kemudian ganti teks dan URL gambarnya dan lanjutkan buka blog untuk nikmati hasilnya.

Download

Share Artikel ini ke teman-temanmu

Lihat Artikel Lainnya disini