twitter
    Find out what I'm doing, Follow Me :)

Senin, 31 Agustus 2009

Tutorial pasang link dua target plus tooltip dan pop up window pada blogger

panjang amat judulnya, ya memang panjanglah kan disini mengungkapkan sebuah pembelajaran yang telah di rangkum menjadi satu.
kode ini saya temukan dengan menggabungkan semuanya yang ada pada link dua target, tooltip, dan pop up window.
5 langkah yang merupakan di butuhkan untuk membuat sebuah link yang mempunyai dua target untuk membuka jendela sebut saja Pop UpCari lagi dengan
Query: Pop Up
si eneng, bukan hanya itu saja kita juga bisa menampilkan sebuah ToolTipCari lagi dengan
Query: ToolTip
yang sexy nan cantik, hehehe.
tanpa basa-basi langsung saja ke TKP. ok

setep by step :
1. bawa browser kamu ke tempat edit HTML, bagi yang masih lom tahu, tanya aja yang lain, hahahaha.
copy script pop up dibawah dan letakkan tepat di bawah dubur <head>
<SCRIPT language='JavaScript1.2'>
function openwindow()
{
window.open(&quot;http://blogads2.blogspot.com&quot;,
&quot;mywindow&quot;,&quot;location=1,statusbar=yes,menubar=yes,resizable=yes,toolbar=yes,scrollbars=yes,width=605,height=255,left = 276,top = 307&quot;);
}
</SCRIPT>

Nama Tagketerangan
blogads2ganti dengan nama blog kamu, yang merupakan blog anda yang akan muncul nantinya pada pop up window, jangan sampe di ganti dengan nama papa mama kamu ok, hikshiks.
statusbar, menubar, resizeable, toolbar, scrollbars.
bisa anda edit sendiri dengan mengetikkan yes atau no, apabila yes: fitur tersebut akan di tampilkan, sedangkan no: tidak ditampilkan.
width=605lebar jendela baru dari sebuah pop up yang akan muncul nantinya, bisa kamu atur sendiri dengan sesuka hatimu, pokoknya jangan egois aja sama si eneng yang sedang pake pop up ini, hihi.
height=255sama dengan yang atas pada width, males aku neranginnya, hehehe.
left = 276merupakan jarak pop up pada browser kamu mulai dari kiri.
top = 307jarak pop up pada browser kamu mulai dari atas.

2. jangan kemana-mana kalau tidak mau tempat duduk anda di tempati orang lain, hehehe. maksud saya diam di tempat edit HTML dan cari kode ]]></b:skin> setelah itu copy kode Css dibawah dan letakkan tepat diatas kode ]]></b:skin> kode Css dibawah merupakan kode dari tampilan Tooltip tersebut.
/*---------- bubble tooltip blogging-goblog.blogspot.com-----------*/
a.tt{
position:relative;
z-index:24;
color:#cc0000;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #cc0000; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://1.bp.blogspot.com/_camK6MacbVQ/SmNbQ-VEh2I/AAAAAAAAAOU/qiVSMin-U6k/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat bottom;
}
kali ini aku males memberi keterangan, dan jika ada pertanyaan beri aja komentar jika kurang jelas, ntar semoga saja saya bisa jawab.

3. SIMPAN TEMPLATE / SAVE TEMPLATE

4. inilah kode link yang harus anda pakai, agar Script Pop Up si eneng dan Tooltip bisa bekerja dengan maksimal, dengan begitu service yang diberikan bisa memuaskan untuk anda, (motto: anda puas kami senang, hahaha).
<a class="tt" href="javascript:%20openwindow()" onclick="window.location.replace('http://funnyfunniest.blogspot.com/search/label/Humor%20photos')">Nama sebuah link<span class="tooltip"><span class="top"></span><span class="middle">keterangan pada link anda (terserah anda, bukan terserah saya, hihihi)</span><span class="bottom"></span></span></a>
yang berwarna merah ganti dengan nama URL anda (Url ini merupakan bukan sebuah pop up)
yang berwarna biru : merupakan keterang pada link yang anda taruh pada warna merah.
yang berwarna hijau : anchor text link atau nama link yang anda buat dari warna merah.

5. lihat hasilnya apa anda puas atau tidak.
Example Contoh Click here-nya di bawah sini
Nama sebuah linkketerangan pada link anda (terserah anda, bukan terserah saya, hihihi)

Nb: Url pada script pop up di atas no.1 hanya bisa di tampilkan hanya satu Url, sedangkan Url yang ada pada no.4 berwarna merah bisa anda ganti-ganti sesuai selera anda.

besok akan saya posting lanjutan dari postingan ini.
jika ada kekurangan atau ada yang perlu di tanyakan komen saja, ntar saya akan bantu.
READ MORE - Tutorial pasang link dua target plus tooltip dan pop up window pada blogger