Sabtu, 27 Maret 2010

Membuat "Bubble Tool Tips" 100% menggunakan CSS


Penulis: Eldo A Pradana | dindingcoret.com





Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan.

Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya.

Untuk lihat live previewnya silahkan klik aja link ini .






 


Penerapan trik ini pake CSS, dan ini dia codenya:


/*---------- balon tips -----------*/

a.bt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}



a.bt span{ display: none; }



/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/

a.bt:hover{ z-index:25; color: #aaaaff; background:;}



a.bt:hover span.balontips{

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.bt:hover span.atas{

display: block;

padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGW-ux3ezK-MQoPrMWYDug_HliI9CFtUOtf0Tx543lOZ-RU9r3seaGYfBwWSuZs_jQVeMg8e5FzDhyphenhypheneofSndIiUois5sA1tm3SPaZaeuYqeuAqiLxY__kbciESJ0YO7QHOtj7Yy6y2PY/)
no-repeat top;

}



a.bt:hover span.tengah{

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0sG_iTp0et7DkezXiVwe_z6zJEExH2r-qJk9-WS1HkFqxhj2vDfpL9NEwS-VlMMZZ68Z2_V6iD1zuStMTd4dTu8t5oBxn6Synhxf1Rq2jiEyJSkL_CzwEQUo712LgrgsICQrxQiw4Byw/)
repeat bottom;

}



a.bt:hover span.bawah{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGW-ux3ezK-MQoPrMWYDug_HliI9CFtUOtf0Tx543lOZ-RU9r3seaGYfBwWSuZs_jQVeMg8e5FzDhyphenhypheneofSndIiUois5sA1tm3SPaZaeuYqeuAqiLxY__kbciESJ0YO7QHOtj7Yy6y2PY/)
no-repeat bottom;

}



/*---------- balon tips END-----------*/


 


Untuk penggunaannya:


 


1. Link yang udah dibuat di kasih deklarasi class="bt".


Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a>
Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>



 


2. Deklarasikan balontips. Panggil code balontips dengan menuliskan
<span="balontips"></span>. Masukkan diantara code link.



 


3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".



 


4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.



 


5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".



 


Contoh penulisan code bisa dilihat disini:


<a class="bt" href="URL
SOBAT
">

kata-kata terserah deh..

<span class="balontips">

<span class="atas">

</span>

<span class="tengah">

Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon

</span>

<span class="bawah">

</span>

</span>

</a>



Kamis, 11 Maret 2010

Blogger Support Template Designer


Inilah yang ditunggu-tunggu para pengguna blogger selama bertahun-tahun, akhirnya
sampai juga saatnya dimana  blogger meluncurkan cara termudah bagi
penggunanya untuk mendesain template sendiri secara online yang ditanam langsung
pada halaman dashboard. Berita yang baru saja om terima dari

blogger in draft
tentu saja membawa angin segar buat yang kesulitan untuk
men-custom tampilan blognya agar bisa tampil lebih menarik dan berbeda.


 


Selain menambahkan fitur terbaru pada template desainer, blogger juga dengan
senang hati menyediakan 15 pilihan template terbaru. Disitu pula
tersedia pilihan layout colom mulai dari 1-3 pilihan colom yang dapat rekan
pilih langsung. Dan yang lebih menyenangkan, blogger juga menyediakan ratusan
background dan beberapa pola siap pakai. Biar gak penasaran, rekan lihat saja videonya langsung dibawah ini:





 


Untuk bisa mencoba layanan ini, karena masih dalam tahap uji coba, rekan
seperti biasa harus login dulu melalui blogger draft di alamat ini
http://draft.blogger.com







Selama mencoba aja :)

Rabu, 10 Maret 2010

Cara Mendeteksi Mobile User Agents dan Browsers (bag 2)

Seperti janji saya pada akhir post sebelumnya tentang merangcang RSS FEED
untuk versi mobile phone
, sekarang saya coba langsung membahas bagaimana cara
mendeteksi program yang kita buat apakah hanya dapat ditampilkan khusus untuk
versi mobile phone atau dapat juga dilihat pada standar dibrowser.


 


untuk memahami maksud artikel ini, sekarang coba rekan mengakses
m.o-om.net,  sudah jelas ya
alamat ini masih leluasa dapat ditampilkan pada halaman standar browser pada
versi dekstop. Nah, untuk contoh lainnya sekarang saya minta rekan untuk mencoba
mengakses halaman kaskus versi mobile dialamat ini
m.kaskus.us  apa yang
terjadi? ya, kita tidak bisa mengakases kaskus  mobile langsung dari
browser dekstop, tapi kita langsung diredirect ke situs utamanya.


 


Sekarang yang jadi pertanyaan gimana programmer kaskus bisa membuat redirect
seperti itu? ternyata caranya tidak terlalu sulit, walaupun saya sendiri tidak
pernah melihat langsung script dari mobile kaskus paling tidak logika
progammingnya sama saja :)


 


Cara yang paling mudah yaitu menggunakan script PHP yang sudah disediakan
pihak ketiga, saya biasa menggunakan script dari
detectmobilebrowsers.mobi,
atau silakan download source codenya
disini.


Saya beri sedikit gambaran bahwa script ini mempunyai fungsi terdiri dari 8
pilihan parameter untuk membuatnya bekerja. jadi bisa dikatakan setiap 8
parameter menangani skenario yang berbeda pula. namun yang perlu diingat jangan
lupa untuk memanggil fungsi ini terlalebih dahulu agar semua fungsi pendukung
bisa berkerja dengan baik.


 


include ( 'mobile_device_detect.php');

$ mobile = mobile_device_detect ();


 


Jika rekan masih bingung untuk setting setiap paramater, sebenarnya ada yang
lebih mudah lagi dengan menggunakan fungsi generator yang juga sudah disediakan
oleh situs diatas. silahkan dicoba saja. oh iya, untuk scipt pilihan bahasa
program lainnya bisa langsung pelajari saja disitus ini
detectmobilebrowser.com


 


Sebenarnya sampai disini saja penjelasan diatas sudah bisa saya katakan
selesai, memang untuk kali ini rekan paling tidak harus sedikit mengerti tentang
PHP, jadi tidak terlalu sulit untuk menerapkannya.


 


Semoga artike ini bermanfaat :)