Mengenal dan Membuat jQuery Slick Tab

Emmm..

Hallo sobat semua, akhir-akhir ini saya jarang posting tutorial. Saya lebih sering posting tentang keanehan dan keajaiban di dunia ini, karena posting yang aneh-aneh seperti itu lebih meningkatkan traffic saya. hhe

Ya sudahlah ...

Yang penting, sekarang saya akan mulai posting tutorial blogging lagi. Kali ini saya akan mengenalkan yang namanya Simple jQuery Slick Tab. Tab ini seperti pada umumnya tab lain, hanya saja tab ini diberi efek sehingga terlihat lebih elegant dan meyakinkan. Efeknya terlihat ketika mengklik dari satu tab ke tab lainnya, akan terlihat perpindahannya yang secara halus. Sebenarnya Trick ini saya dapatkan dari Mas Hendriono, tetapi telah saya rubah lagi sedemikian rupa.

Demonya bisa sobat lihat pada blog ini, pada sidebar

Benar-benar Elegant bukan ...

Oke, skenario pembuatannya cukup mudah. Ini dia kode-kodenya

1. Kode HTML

Ini nih skenario dasar dalam pembuatan jQuery Slick Tab, semisal kita akan memasukan 3 buah konten kedalam slick tab, maka kode HTML ditulis sebagai berikut:

 Judul Konten

<ul class="slick">
    <li title="terbaru" class="slick active">Terbaru</li>
    <li title="komentar" class="slick">Komentar</li>
    <li title="shout" class="slick">Shout Me</li>
  </ul>

 Isi Konten 

<div id="terbaru" class="content-slick">

<ul>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
 </ul>
</div>

<div id="komentar" class="content-slick">
 <ul>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title herem</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
 </ul>
</div>

<div id="shout" class="content-slick">
 <ul>
  <li><a href="yourlinkhere">your title here</a></li>

<li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
 </ul>
</div>

   2.  Kode CSS
Setelah skenario kode HTML kita buat, maka berikutnya kita harus tuliskan kode CSS untuk menyusun tampilan Slick Tab menjadi lebih tersusun rapi dan elegant, kode CSS ditulis sebagai berikut:

#slick_area {
 border:1px solid #000;
 background-color:#000;
 padding:0px; 
 margin:0px 0;
 line-height:18px;width:355px; 

}
#slick_area a{
 color:#FFF;
 text-decoration:none;
}
.slick_area a:hover{
 color:#FF0000;
}
ul.slick {
 margin:2px 5px 8px 0;
 padding:0px;
}
ul.slick li {
 list-style:none;
 display:inline;
 background-color:#000;
 padding:5px 14px;
 text-decoration:none;
 font-size:10px;
 font-weight:bold;
 text-transform:uppercase;
 cursor:pointer;
 border:1px solid #585858;
}
ul.slick li:hover {
 color:#1E90FF;
}
ul.slick li.active {
 background-color:#181818;
 border:1px solid #282828;

}
.content-slick {
 background-color:#000;
 border:1px solid #282828;
 color:#fff;
 min-height:40px;
 padding:0px 0px 5px;
 text-align:justify;
} 
.content-slick ul {
 margin:2px;
 padding:0;
}
.content-slick ul li {
 list-style:none;
 border-bottom:1px dashed #282828;
 padding:4px;
}
.content-slick ul li:last-child {
 border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
 display:block;
 background-color:#181818;
}
.content-slick ul li a {
 text-decoration:none;
 color:#fff;
 display:block;
}

 Sampai pada kode CSS seharusnya Slick Tab sudah terlihat Rapi dan Elegant walaupun konten belum bisa ditampilkan semua, hanya konten yang pertama saja yang tampil.


   3. Kode jQuery
Ini dia kode yang membuat Slick Tab terlihat Elegant, kode ini akan memberikan efek animasi kepada Slick Tab, kodenya seperti ini:

$(document).ready(function(){
 $('#komentar, #shout').hide(); 
 $("ul.slick li").click(function () {
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".content-slick").slideUp();
  var content_show = $(this).attr("title");
  $("#"+content_show).slideDown();
 });
});

Script diatas untuk memberikan efek slide down pada konten tertentu yang memiliki identitas (makanya ada simbol #, #=id) sesuai dengan title (content_show). Perhatikan kode HTML dituliskan sama antara title pada judul konten dengan id pada konten (title="terbaru" - id="terbaru" | title="komentar" - id="komentar" | title="shout" - id="shout"). jQuery akan membandingkan antara title dengan id, jika sama maka konten akan di berikan efek slide down.
Baik, itulah kode-kodenya. Sobat tinggal mengatur-ngaturnya lagi sesuai keinginan

Masih banyak cara untuk mempercantiknya

Thanks

UnoZoneu™

Read more »

Membuat Readmore Nakal

Hallo sobat semua ...
Setelah sekian lama saya tidak posting tutorial lagi karena saya sibuk posting yang aneh-aneh di Blog ini. Nah, sekarang saya akan sharing tentang cara membuat Auto Readmore.
Tetapi Auto Readmore ini berbeda dengan yang lainnya, pasti bingung deh. Bedanya dari mananya sih..
Perbedaan dari Auto Redmore ini yaitu pada Readmore Contentnya, Auto readmore ini di beri efek Hover yang menurut saya 'nakal'. Kok aneh nakal? Ya yang saya maksudkan nakal itu karena Readmore contentnya tidak bisa diam saat mouse berada diatasnya, Readmore Content ini malah bergerak menjauh dari Cursor ketika kita hendak mengkliknya ..
Sebenarnya sama saja dengan Readmore Content yang saya gunakan, akan tetapi saya hanya menggunakan efek bounce mendatar.
Sungguh-sungguh nakal menurut saya ....
HHha


Ya sudah lah,  mari kita langsung saja ke tahap-tahap pembuatannya .

1. Seperti biasa, login ke Blogger
2. Pilih Rancangan > edit HTML
3. Lalu, Expand Template Widget (saya sarankan untuk Download Template Lengkap terlebih dahulu)
4. Cari kode seperti ini <div class='post-body entry-content'> 
5. Lalu Taruh Script dibawah ini dibawahnya

<p><script type='text/javascript'>
summary_noimg = 650;
summary_img = 500;
img_thumb_height = 125;
img_thumb_width = 240;
</script>
<script type='text/javascript'>
//<![CDATA[


function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); }}
strx =  s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }




function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");< var summ = summary_noimg;
if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

  6. Setelah itu, cari kode ini <data:post.body/>, lalu ganti kode itu dengan script dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 7. Belum selesai lho, sekarang kita mulai setting Readmore content nakalnya. 
     cari ]]></b:skin> dan masukan Kode CSS ini di atasnya

.readmorecontent{text-align:right;height:15px;width:140px;position:relative;bottom:13px;left:35px;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;}
.readmorecontent a{padding:4px 15px;background:#3366CC;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;color:#fff;text-decoration:none;}
.readmorecontent:hover{-webkit-transform: translate(540px,-350px);}
.readmorecontent a:hover{color:#fff;background:#3366CC;text-decoration:none;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}

 8. Selesai ....Nikmati kenakalan Readmorenya yang sungguh mengerikan.


Keterangan:

summary_noimg = 650; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 125; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 240; (Thumbnail 'lebar dalam piksel).

imgtag = '<span style="float:left; ....., (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

intinya, Sobat-sobat harus bisa mengeditnya lagi ...
semoga bermanfaat

happy blogging ..

UnoZoneu™

Read more »

Membuat Random Post

Hallo sobat-sobat blogger...
Kembali saya membuat posting Tutorial.
Kali ini saya akan menerangkan cara-cara membuat Random Post pada Blog. Yah... singkatnya Random post adalah suatu widget/konten untuk menampilkan posting secara acak agar posting-posting yang telah lalu kita posting dapat dilihat/dibaca kembali oleh pengguna lain, selain itu dengan menggunakan ini sobat-sobat Blogger bisa memudahkan pengunjung Blog sobat untuk melihat postingan-postingan yang telah lalu tersebut. Tapi, yang membuat Random Post ini berbeda yaitu, Random Post ini memakai efek Marquee. Jadi Random post ini terlihat berjalan.


Untuk mempersingkat waktu, langsung saja deh ...
begini caranya ......

1. (Tidak lupa untuk mengingatkan sobat Blogger) Login seperti biasa ke akun Blogger sobat
2. Lalu, klik Rancangan
3. Klik Tambah Gadget di bagian manapun sesuka sobat(saya sarankan menambahkan diatas atau dibawah posting)
4. Pilih HTML/Javascript
5. Lalu masukan kode dibawah ini

<!--Random Posts by UnoZoneu™-->


<div style="border: 0px dashed black; background: #000000; padding:2px; width:1095px; font-size: 11px; color:#ffffff;">
<b><!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee scrollamount="2">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');


}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.unozoneu.co.cc
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json" 
type="text/javascript"></script>
<!-- Alphabetical Post Title Listing End --></b></div>

 6. Terakhir, Klik Simpan.
Selesai deh ....


Keterangan: Teks yang berwarna kuning ganti dengan URL Blog sobat
thank ...

UnoZoneu™

Read more »

Floating Menu dengan Sentuhan jQuery

Satu lagi trik yang akan saya berikan kepada sobat-sobat Blogger, Blogger Indonesia maupun Blogger Mancanegara yaitu Floating Menu dengan Sentuhan jQuery. Okay dah, sekarang saya akan menjelaskan dan memberikan cara-cara membuat Float Menu Melayang.
Demonya bisa sobat lihat pada Blog Saya ini, pada pojok kanan atas.
Keren kan? terlihat Elegant kalau menurut saya. hhaha ...
Sebenarnya trik ini berkaitan juga dengan posting Cara Membuat Menu Melayang yang dulu. Atau sama saja dengan Membuat Float Box dengan Efek Opacity. Hanya saja postingan ini adalah gabungan antara keduanya, meskipun agak beda-beda dikit kodenya. hhha..
ya langsung sajalah, ini dia ...
jreeng ... jrenngg ..

1. Seperti biasa, Login dulu ke Blogger sobat
2. Pilih Rancangan
3. Lalu Pilih tambah Gadget > Pilih tamabah HTML/Javascript
4. lalu masukan kode berikut 

   <style type="text/css">

   #hitsukeFX{

   position:fixed;

   top:20px;

   z-index:+1000;

   }

   .hitsukeFXtab{

    height:100px;

    width:55px; float:left;

    cursor:pointer;

    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzvmpPAfHh3FGTieyUsIcmlE4JlAzHw9UK6Sjf2TUchFq1pzOG_i7RLVOkMbbuv-JRg3dHNwk4-D-OlaimugNm_MndEk-Auo_f5P0hhebe4zc5SQYUPuqFrcg3rKhs8xC0_n4ngyWqfGH/') no-repeat;

    }

   .hitsukeFXcontent{ float:left;

   border:2px solid tranparent;

   -moz-border-radius-topleft: 20px;

   -moz-border-radius-bottomleft: 20px;

   -webkit-border-top-left-radius: 20px;

   -webkit-border-bottom-left-radius: 20px;

   background: #000000;

   padding:2px;

   opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);

   }

   .hitsukeFXcontent:hover {

   opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);}

   
   

   </style> <script type="text/javascript">

   function showHidehitsukeFX(){

   var hitsukeFX = document.getElementById("hitsukeFX");

    var w = hitsukeFX.offsetWidth;

    hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);

    hitsukeFX.opened = !hitsukeFX.opened;

    }

   function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }

   </script>

   <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>

    <div class="hitsukeFXcontent"> 

   Kode Widget/konten kamu disini

   <div style="text-align:right">

    <a href="javascript:showHidehitsukeFX()"> [close!] </a>

    </div>

    </div>

    </div>

    <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

5. Lalu klik Simpan
6. Jadi deh menu melayang sobat ,...

Catatan: Kode yang berwarna merah bisa sobat rubah dengan sesuka hati asal jangan terlalu berlebih.

ya mungkin itu saja yang bisa saya posting tentang Float Menu ini..

Jika ada hal yang kurang jelas saya rekomendasikan untuk bertanya melalui kotak komentar atau pada chatbox blog ini.

terima kasih sobat ....

UnoZoneu™ 

Read more »

Cara Membuat Mouse Position di Blog

jQuery membuat mendeteksi posisi mouse mudah. Kamu cuma harus belajar bagaimana cara membaca pageX dan pageY , dan mereka akan memberitahu kamu dimana mouse (dalam piksel) hanya pada saat mouse kamu aktif.


buat saya sih ini sesuatu yang keren, tapi ga tau lah buat sobat-sobat blogger lain.
coba perhatikan contoh dibawah ini 


ini contohnya:

0, 0

ini kode untuk yang diatas ini

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>
<h2 id="status">
0, 0
</h2>
</body>
</html>

sobat tinggal otak-atik lagi lah, cukup mudah ....

Bisa juga pelacakan dengan mengklik suatu objek, lalu kamu pasti tau posisi mouse berada.

Sebagai contohnya dibawah ini:

0, 0

klik dimana saja

yang diatas ini kodenya ini nih..

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>

<h2 id="status2">
0, 0
</h2>
<div style="width: 100px; height: 100px; background:#ccc;" id="special">
Click me anywhere!
</div>
</body>
</html>

catatan: Perhatikan bahwa nilai-nilai piksel memberikan relatif terhadap seluruh dokumen. JikaAnda ingin menghitung posisinya dalam elemen tertentu, atau dalam viewport, Andadapat melihat offsetY dan offsetX, dan melakukan sedikit aritmatika untuk menemukannilai relatif .

Berikut adalah contoh untuk menemukan posisi dalam elemen tertentu daripadahalaman:

$("#special").click(function(e){

 var x = e.pageX - this.offsetLeft;
 var y = e.pageY - this.offsetTop;

      $('#status2').html(x +', '+ y);
   });

perhatian juga, kode-kode yang saya berikan bukan sebagai kode tetap ya, sobat juga bisa mengedit lagi jika merasa kurang.
yahh itulah yang bisa saya posting, kalau ada komentar silahkan lah komentar sesuka kamu. Asal jangan spam. salam blogger UnoZoneu™
thankss

Read more »

Membuat Elemen Footer Menjadi 3 Kolom

Sebenarnya ini versi lain dari postingan sebelumnya yaitu Membuat 3 Kolom Elemen di Bawah Posting, ya maksud saya supaya sobat-sobat Blogger lebih memahami kode-kode CSS yang sebenarnya begitu-begitu saja. Hanya saja id-nya mungkin yang berbeda.
Yahhh sudahlah langsung saja ke caranya, biar saya ga banyak wekwwekk lagi

Caranya sebagai berikut :

1. Login ke Blogger.
2. Klik Layout -> Edit HTML
3. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.
4. Kalau sudah, cari kode ]]></b:skin>
5. Tambahkan kode di bawah ini :
   

   #footer-column-divide {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }

   di atas kode ]]></b:skin>
6. Kalau sudah cari kode dibawah ini :
   

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

7. Hapus kode <b:section class='footer' id='footer'/> lalu ganti dengan kode dibawah ini :
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 30%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 40%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer3' style='width: 30%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

8. Kalau sudah klik Save Template. 
9. Lalu klik Page Element.

Semoga Bermanfaat sobat UnoZoneu™

Read more »

Membuat Float Box Dengan Efek Opacity

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>

6. Setelah periksa dengan teliti, simpan CSS dan javascript dengan cara KLIK Simpan Template. Tunggu beberapa saat hingga proses penyimpanan selesai.
7. 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="http://lh3.ggpht.com/_O1QXT0it8EE/TNal8VEL4fI/AAAAAAAAAOY/LHjkQaDHTyg/icon.gif" 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

Read more »