Konuyu Oyla:
  • Toplam: 10 Oy - Ortalama: 3.3
  • 1
  • 2
  • 3
  • 4
  • 5
   
Konu: Css Açıklamalı Link
KuraLsız
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 4
Yaşam Puanı: 1 / 82
Deneyim: 31 / 100
Rep Sayısı: 0
Mesaj Sayısı: 31
Üyelik Tarihi: 10.06.2013
     
Yorum: #1
Css Açıklamalı Link
14.06.2013 12:10
Css özelliğini kullanarak, web bloglarınızda link‘in üzerine gelince, web sitenizin sağ en alt’a duruyu kutusu çıkıyor. Bu özellik aslında bizim için çokta işe yarayabiliyor. Özellikle; linklerin üzerine açıklamalar yazıp uzun uzun satırların oluşmasına sebep oluyordu.

Bu özellik sayesinde bu kadar uğraşıma gerek kalmıyacaktır. Kısa bir yazı üzerine link verdiğiniz taktirde, web sitenizin sağ en alta duyuru panosu şeklinde görülüp link hakkında bilgi verebileceksiniz.

Hem sizi uzun uzun satırlardan kurtarmış oluyor hemde sitenizin daha da şık ve modern+ gösteriyor (: Bütün platformlarda çalışır mı demiyorum ama denemekte fayda var diyorum (:

Hemen nasıl kuracak ve kullanacaksınız anlatayım…

Duyuru şeklinde ki bu kutuyu göstermek için, “Css” ve “Html” e ihtiyacımız var. İlk olarak, bunu sitenizde gösterebilmeniz için, link‘in üzerine imleç ile geldikten sonra sağ en alta görünür olucaktır.

Css (.css Dosyasına Yerleştirin )

Kod:
<pre><em id="__mceDel">#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

Html ( Açıklamalı Link’in Nerde Gözükmesini İstiyorsanız Oraya Ekleyin)

Kod:
<pre><em id="__mceDel"><script type="text/javascript">
var floattext=new Array()
floattext[0]='- <a href="http://cyberizm.org/">KuraLsız</a><br>- <a href="http://cyberizm.org/">KuraLsız</a><br>- <a href="http://cyberizm.org/">KuraLsız</a><br>- <a href="http://cyberizm.org/">KuraLsız</a><br><div align="right"><a href="javascript:hidefloatie()">Kapat</a></div>'
floattext[1]='Some other floatie text'

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}

</script>
<div id="dhtmlfloatie">&nbsp;</div>
<a onMouseout="hidefloatie()" onMouseover="showfloatie('cyberizm.org / Bu Bölüme Duyuru,Tanitim,Mesaj Gelebilir', event)" href="#">KuraLsız;</a> | <a onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100)" href="#">KuraLsız;</a><br />
Alinti
#H4CK4L
*
avatar
#R00T
Durum: Çevrimdışı
Seviye Puanı: 43
Yaşam Puanı: 1,050 / 1,050
Deneyim: 1 / 100
Rep Sayısı: 1038
Mesaj Sayısı: 2996
Üyelik Tarihi: 04.05.2013
      
Yorum: #2
Cvp: Css Açıklamalı Link
14.06.2013 12:14
eline sağlık

Çocukken her akşam yatmadan önce Tanrı'ya bana bir bisiklet vermesi için dua ederdim. Bir gün Tanrı'nın çalışma tarzının bu olmadığını anladım. Ertesi gün gittim kendime yeni bir bisiklet çaldım ve her akşam yatmadan önce Tanrı'ya günahlarımı affetmesi için dua ettim.
Alinti
RuzGaR
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 1
Yaşam Puanı: 0 / 0
Deneyim: 2 / 100
Rep Sayısı: 0
Mesaj Sayısı: 2
Üyelik Tarihi: 14.06.2013
     
Yorum: #3
Cvp: Css Açıklamalı Link
14.06.2013 22:17
teşekkürler
Alinti
Asil_Mehmet
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 15
Yaşam Puanı: 54 / 366
Deneyim: 65 / 100
Rep Sayısı: 2
Mesaj Sayısı: 280
Üyelik Tarihi: 23.09.2013
     
Yorum: #4
Cvp: Css Açıklamalı Link
22.10.2013 14:04
Saolasın Bro Exciting
Alinti
DaRKNeSS
*
avatar
Binbaşı
Durum: Çevrimdışı
Seviye Puanı: 53
Yaşam Puanı: 1,315 / 1,315
Deneyim: 60 / 100
Rep Sayısı: 121
Mesaj Sayısı: 5584
Üyelik Tarihi: 11.08.2013
     
Yorum: #5
Cvp: Css Açıklamalı Link
23.10.2013 01:02
Eline saglik


Alinti



1 Ziyaretçi