How to Create Fixed Popup Tex Box

Fixed Popup Text Box sebenarnya tak jauh berbeda dengan tooltip, hanya pada fixed popup text box tips yang muncul akan selalu berada di tengah-tengah halaman blog. Untuk membuatnya diperlukan sebuah javascript dan beberapa kode CSS serta sebuah xHTML. Anda harus meletakkan xHTML-nya tepat di atas javascript, sehingga secara otomatis peyimpanan harus dilakukan di antara tag pembuka body dan tag penutupnya. Agar lebih mudah lakukan melalui "Add a Gadget".

Fixed Popup Tex Box diaktifkan melalui "onmouseover" dan "onmouseout". Ketika mouse berada di atas link Popup Text Box akan bekerja untuk menampilkan teks debfab posisi di tengah-tengah halaman blog dan akan segera menghilang ketika mouse dilepaskan.

D E M O : Fixed Popup Text Box

Kode CSS, xHTML dan Javascript :

<style type="text/css">
.popup{
        font-family:Arial; /* edit jenis font */ 
        font-size:18px; /*edit ukuran font */ 
        color:#033;  /* edit warna font */   
        background:#eee;  /*edit warna latar box - background */ 
        width:500px;  /* edit lebar box */  
        text-align:justify;  /* edit text-align */ 
        padding:10px 6px;
        font-weight:500;  /* edit tebal huruf */ 
        border:5px double #888;  /* edit border */ 
        border-radius:6px;
        text-shadow:2px 2px 2px #888;
}
#popuptextbox {
        position:fixed;
        top:25%;  /* edit posisi popup text box - vertical */ 
        left:25%;  /* edit posisi popup text box - horizontal */ 
        visibility:hidden;
        z-index:200;
}
</style>

<div id="popuptextbox"></div>

<script type="text/javascript">
//<![CDATA[
var old, skn, iex = (document.all);
var ns4 = document.layers
var ns6 = document.getElementById && !document.all
var ie4 = document.all
if (ns4) skn = document.popuptextbox
else if (ns6) skn = document.getElementById("popuptextbox").style
else if (ie4) skn = document.all.popuptextbox.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
 skn.visibility = "visible"
 skn.display = "none"
}
document.onmousemove = get_mouse;
function popup(msg) {
 var content = "<div class=popup>" + msg + "</div>";
 if (ns4) {
  skn.document.write(content);
  skn.document.close();
  skn.visibility = "visible"
 }
 if (ns6) {
  document.getElementById("popuptextbox").innerHTML = content;
  skn.display = ''
 }
 if (ie4) {
  document.all("popuptextbox").innerHTML = content;
  skn.display = ''
 }
}

function remove_popup() {
 if (ns4) {
  skn.visibility = "hidden";
 }
 else if (ns6 || ie4) skn.display = "none"
}
//]]>
</script>

Cara Menggunakan :

Buatlah link dalam bentuk seperti ini :

Kode link Fixed Popup Text Box:

<a href="http://gubhugreyot.blogspot.com" onMouseOver="popup('Popup Text Box mempunyai fungsi hampir sama dengan tooltip, hanya pada popup text box, tips akan dimunculkan ditengah-tengah halaman blog. Ini berbeda dengan tooltip yang selalu mengikuti cursor.')"; onMouseOut="remove_popup()">D E M O : Popup Text Box</a>

Create Simple Animated CSS3 Tooltip

membuat Tooltip tak harus menggunakan javascript. Kini, bahkan anda bisa membuat tooltip yang disertai animasi hanya menggunakan kode css3. Sangat simple dan mudah juga menggunakannya. Anda hanya perlu menambahkan tag span di antara tag pembuka dan penutup "a".

Tooltip animasi css3 bisa tercipta berkat penggunaan css3 transition yang dipadukan dengan beberapa kode css lain, seperti margin, padding, width serta opacity effect. Anda bisa membandingkan bagaimana bentuk tooltip yang hanya menggunakan kode css dan yang menggunakan kode css3. Ini tooltip yang dibuat hanya menggunakan kode cssTooltip yang hanya dibuat menggunakan kode css juga mempunyai fungsi sama dengan tampilan tak berbeda juga jika dibandingkan dengan tooltip javascript. Hanya saja tooltip seperti ini tak punya efek-efek khusus. Tampila apa apa adanya, gitu, lhoh...!!, sedang tooltip yang ini dibuat menggunakan kode css3Tooltip css3 mempunyai efek tertentu bergantung desain yang direncanakan. berbagai bentuk animasi dapat kita ciptakan. Tootip ini tanpa satupun javascript. yang dipadukan juga dengan beberapa kode css. Dalam 2 demo tersebut terlihat jelas bahwa sebenarnya ke 2 macam tooltip tersebut mempunyai desain dasar yang sama namun menjadi terlihatberbeda karena pengarush css3.

Kode CSS :

a.GRttips{
        font-weight:bold;
        position:relative;
        color:#0000CC;
        text-decoration:none;
}
a.GRttips:hover{
        color:#FF0000;
}
a.GRttips span{
        transition:1s 0.5s ;
        -o-transition:1s 0.5s;
        -moz-transition:1s 0.5s;
        -webkit-transition:1s 0.5s;
        -ms-transition:1s 0.5s;
        opacity:0;
        filter:alpha(opacity=0);
        text-align:center;
        font-weight:600;
        position:absolute;
        bottom:0;
        left:10px;
        font-size:12px;
        font-family:Arial;
        z-index:-10;
        width:180px;
        overflow:hidden;
        border:4px double #999;
        color:#000;
        text-shadow:1px 1px 1px #000;
}
a.GRttips:hover span{
        z-index:999;
        opacity:1.0;
        filter: alpha(opacity=100);
        display:block;
        bottom:30px;
        color:#eee; /* original code by : gubhugreyot */
        padding:10px;
        border-radius:6px;
        background:#a86b78;
        background:linear-gradient(top, #a86b78 0%,#3f0108 9%,#910221 98%);
        background:-o-linear-gradient(top, #a86b78 0%,#3f0108 9%,#910221 98%);
        background:-ms-linear-gradient(top, #a86b78 0%,#3f0108 9%,#910221 98%);
        background:-moz-linear-gradient(top, #a86b78 0%, #3f0108 9%, #910221 98%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a86b78), color-stop(9%,#3f0108), color-stop(98%,#910221));
        background:-webkit-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a86b78', endColorstr='#910221',GradientType=0);
}

xHTML css3 Tooltip :

<a class="GRttips" href="http://gubhugreyot.blogspot.com">gubhugreyot<span>Panduan dan Tutorial Blogger</span></a>

Keterangan :

• Gunakan class="GRttips" untuk menampilkan tootip.
• Kode berwarna biru = URL
• Sisipkan tag span di dalam link.
• Letakkan teks tooltip yang berwarna orange dalam tag span.
• Text Link berwarna kuning.
• Tooltip dapat digunakan di halaman posting atau bagian blog yang lain.

Cara Menggunakan :

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard):
   Cari dan klik "Rancangan (Design)".
3. Setelah halaman baru terbuka, klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode ]]></b:skin>
6. Copy dan paste-kan kode css di atas kode ]]></b:skin>
7. Klik "Simpan Template (Save Template).
8. Lanjutkan untuk menggunakn xHTML css tooltip.

Lengkapi Blog dg Simple jQuery Tooltip

Menggunakan tooltip disamping berguna untuk membuat tips dalam blog bisa diatur agar terlihat lebih maksimal, di sisi yang lain bermanfaat untuk membuat blog lebih keren serta terlihat profesional. Anda dapat menggunakan tooltip sederhana yang hanya menampilkan teks hingga yang lebih kompleks dengan kemampuan menampilkan teks, URL dan image. Tentu saja azas manfaat harus diperhitungkan. Menggunakan tooltip dengan kode css atau javascript terlalu berlebihan tentu tak akan tak ada untungnya jika penggunaanya tidak maksimal. Ya..., karena semakin banyak javascript atau kode lain digunakan maka beban loading juga akan terus bertambah.

Setelah memperbandingkan dan mempertimbangkan, membuat tooltip dengan jQuery adalah pilihan terbaik yang mungkin dilakukan. Melalui jQuery berbagai desain menarik lainnya (selain tooltip) dapat dengan mudah dibuat tanpa perlu kode atau script tambahan yang berderet-deret dengan beban yang berkilo-kilo. ya..., ini adalah satu nilai lebih jQuery yang hingga detik ini belum mampu ditandingi oleh javascript manapun.

D E M O
Anda bisa melihat bentuk dan tampilan tooltip melalui link demo di bawah ini.
Arahkan cursor pada daftar posting di Arsip blog (sebelah kanan/sidebar kanan)!

Demo Simple jQuery tooltip GRtipz

Cara membuat Simple jQuery Tooltip

1. Login ke Blogger
2. Beberapa saat setelah login anda akan menjumpai Halaman Dasbor (Dasboard)
   Pilih dan klik Rancangan (Design).
3. Pilih dan klik Edit HTML.
4. Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template), simpan file template di folder PC. Jika terjadi kerusakan tempate akibat beberapa penambahan atau pengurangan kode, gunakan Browse dan Upload yang ada didekatnya, maka template (blog) akan pulih kembali seperti sebelum perubahan dilakukan.
5. Cari kode ]]></b:skin> (gunakan Ctrl + F). Latakkan kode CSS di atasnya.
6. Cari kode <head> kemudian letakkan javascript di bawahnya.
7. Klik Simpan Template (Save Template).
8. Gunakan class="GRtipz" pada tag a untuk menampilkan tooltip. Lihat contohnya pada box xHTML.

Kode CSS:

#GRtipz{
        min-width:150px;
        max-width:200px;
        border:1px solid #eee;
        border-radius:8px;
        line-height:16px;
        box-shadow:0 0 3px #000;
        background:#5f5e5e url(http://gubhugreyotprojects.googlecode.com/svn/gubhugreyot_bg-GRtipz5.jpg) top right no-repeat;
        padding:8px;
        color:#000;
        font-family:Arial;
        font-size:13px;
        font-weight:600;
        display:none;
        text-shadow:1px 1px 1px #fff;
        position:absolute;
}

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
this.GRtipz = function(){  
        xOffset = 10;
        yOffset = 20;    
    $("a.GRtipz").hover(function(e){             
        this.t = this.title;
        this.title = "";           
        $("body").append("<p id='GRtipz'>"+ this.t +"</p>");
        $("#GRtipz")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");  
    },
    function(){
        this.title = this.t;  
        $("#GRtipz").remove();
   }); 
    $("a.GRtipz").mousemove(function(e){
        $("#GRtipz")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
   });   
};
$(document).ready(function(){
    GRtipz();
});
</script>

xHTML:

<a class="GRtipz" href="Your URL" title="Write a tooltip text here!">Link Here!</a>

<a class="GRtipz" href="http://gubhugreyot.blogdetik.com" title="Tutorial, Tips, Tricks Blogger & Blogdetik">gubhugreyot - Blogdetik</a>

Catatan/Keterangan:

1. Untuk merubah ukuran font dan tebal font, lakukan perubahan nilai pada font-size:13px; dan font-weight:600;.
   Nilai font-size: 10px, 11px, 12px, 13px atau 14px;
   Nilai font-weight: normal, bold, bolder, 400, 500, 600, 700 atau 900
2. Anda ingin cara yang lebih praktis dan tinggal pasang? Kode yang sudah terupload di file hosting? Jika ini yang anda mau, silahkan gunakan yang ini!
   

   Kode Siap Pakai:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script src="http://gubhugreyotprojects.googlecode.com/svn/GR_jQuerytooltiptip.js" type="text/javascript"></script>

3. Dengan javascript di atas, anda tak perlu lagi menggunakan kode CSS. Langsung saja tulis xHTML anda agar tooltip segera terlihat!
4. Jika dalam blog anda sudah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js maka anda tak perlu lagi menambah jQuery yang sama dari tutorial ini!