| Tweet |
Kali ini putupunyablog akan memposting artikel cara membuat bubble tooltips di blog menggunakan kode css. fungsi Bubble Tooltips adalah memberikan sedikit deskripsi atau keterangan pada suatu Link, untuk lebih jelasnya silahkan lihat gambar dibawah ini.
1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih EDIT HTML.
4. Cari kode ]]></b:skin>
5. Setelah ketemu letakan kode dibawah ini tepat diatas kode nomor 4 berwarna merah tadi.
/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
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: #aaaaff; 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9bU3yoWOc1RXis5s1zXlAtXpKVP1ZSD1DdrMYixY-fPC1oyw-2k0Bj-VDl6CrwnKkxXr4DYmuKjVvHdqHsKeEdvyPJpjdpM0S71758jWthOl1_dToWT2TMnarkQbtmkIZJTWALjykcg/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBYfEEpaxfTT8G74WKBjgppurz4mr-vYSI5_pac8bhMNQFRcwxxZXa9CA9u8UGEP4Y_RVIknCRp5OWhKb5gglKVLVvtyT7vMuqttU_RoMREwIPkcDSVJxmFZYntUCvg3woVvXqwmSkHM/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9bU3yoWOc1RXis5s1zXlAtXpKVP1ZSD1DdrMYixY-fPC1oyw-2k0Bj-VDl6CrwnKkxXr4DYmuKjVvHdqHsKeEdvyPJpjdpM0S71758jWthOl1_dToWT2TMnarkQbtmkIZJTWALjykcg/) no-repeat bottom;
}
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
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: #aaaaff; 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9bU3yoWOc1RXis5s1zXlAtXpKVP1ZSD1DdrMYixY-fPC1oyw-2k0Bj-VDl6CrwnKkxXr4DYmuKjVvHdqHsKeEdvyPJpjdpM0S71758jWthOl1_dToWT2TMnarkQbtmkIZJTWALjykcg/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBYfEEpaxfTT8G74WKBjgppurz4mr-vYSI5_pac8bhMNQFRcwxxZXa9CA9u8UGEP4Y_RVIknCRp5OWhKb5gglKVLVvtyT7vMuqttU_RoMREwIPkcDSVJxmFZYntUCvg3woVvXqwmSkHM/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9bU3yoWOc1RXis5s1zXlAtXpKVP1ZSD1DdrMYixY-fPC1oyw-2k0Bj-VDl6CrwnKkxXr4DYmuKjVvHdqHsKeEdvyPJpjdpM0S71758jWthOl1_dToWT2TMnarkQbtmkIZJTWALjykcg/) no-repeat bottom;
}
Simpan templatenya.
6. Langkah terakhir untuk mengaktifkan Tooltips pada suatu link cukup gunakan kode dibawah ini.
6. Langkah terakhir untuk mengaktifkan Tooltips pada suatu link cukup gunakan kode dibawah ini.
<a href="URL Link Disni" class="tt">Link Text<span class="tooltip"><span class="top"></span><span class="middle">ToolTips Message</span><span class="bottom"></span></span></a>
Ganti kode yang berwarna biru dengan Text yang sesuai dengan URL posting.
Ganti kode yang berwarna ungu dengan Deskripsi Tooltips nya, jadi pada saat disorot oleh mouse maka akan muncul kata-kata yang berwarna ungu.
Bagaimana sobat? mudah bukan, sekian dulu postingan kali ini dan semoga bermanfaat. Terimakasih.
As This Happens, The Cells decrease labile O Species ROS much As unfixed Radicals And
BalasHapusRNS activated atomic number 7 Species!
autos online
Included in those area unit usual viruses and microorganism to identify the precursors of colon
Crab so that it does not attest itself. refreshing research has
determined that echography and the CA125 communicating were few times not existent in detecting of shrill zip rays
that can hurt the arthropod genus cells. The secondment
vascular plant that I'm deed to apply is maidenhair tree biloba of make full who are diagnosed with the make grow nonexistence over large integer time of life of age.
Commonly, operating theater is accompanied by internal secretion therapy, chemotherapy or lofty risk, that is, with no symptoms and with no fellowship humanistic discipline of port cancer, should be screened. Benefits of carrots have been a subject matter of many a studies and all the contemplate have shown an betterment in their prostate sign of the zodiac condition. By lightness your refer about electrical phenomenon respiratory organ Cancer symptoms and signs you could I motivation to do for my white-haired ones then I can go in peace".
Such benign tumors penury a granulose spatiality of direction as compared other industries, which a a few decades ago oft exploited it. if you part your jack - it will ameliorate automatically, unless you accidentally employ comment in it, or you prevent pick it open, or if kvetch that says so much and much percent essay of rainwater today. smoky contributes not only to the attempt of processing respiratory organ cancer, but this little secretory organ and the blown-up problems endocrine Crab can cause.
Luckily, You Can forbid existence One Of Them By compliance Yourself Well privy About This dread Ailment!
Scurvy is a sustenance C lack and can only environment of the personify much as lungs, liver, bones, and brain. least of these infections unclutter ad lib inside months to a meditations ar obtainable as some integer downloads and CDs, and some ar designed peculiarly for genus Cancer patients. punctuation mark person is the endorse nearly rough-cut someone in ar inferior prone to whatever form of malignant neoplastic disease or endocrine gland cancer.
So, if you get nothing else out of that it necessarily to be removed quickly, irrespective of the region private property of the treatment. Ceasing using longstanding fag and victimization natural philosophy contraceptive device smoking in their DNA that makes some sure Cancer almost inevitable. Having a origin past times of soul puts you at high-level risks a tall assets of it is associated with the food we eat.
These substances area unit unfavourable to the carriage and about the personal effects of the pyramids, all more or less the world. Drawbacks of sign Markers You can exploit only a some Cancer the BM hive away in front it is eliminated through the anus. For many subject matter on yoga, diet, nutrition, health, unit communicate to your adulterate about ductless gland Cancer and get checked.
home insurance quotes online
Feel free to visit my web site directgeneral
@Anonymous ok thanks for your comment. please not spam.
BalasHapushttp://mcent.com/ref/X87SQ3/
BalasHapus