Tooltip efekli 125x125 Reklam alanı Kodu

Aralık 2013 | Tolga Gönül, Bayan Kuaförü
Merhaba arkadaşlar bugun kendim düzenlediğim bir 125x125 reklam alanı kodunu paylaşıcam sizlerle bugun bir yarım saatlik boş vaktim oldu. Ve oturup ufak bir kod düzenledim.

Herkezin sitesinde vardır genelde sidebar kısmında reklam kodu bende bu reklam alanı kodunu farklı şekilde düzenlemek istedim Reklam alanına Border ve Tooltip ekleyip hover efekti verdim.

Reklam aldığınız kişilerin veya sitelerin isimlerinide daha düzenli çıkması için Tooltip ekledim
Normalde mausla reklam üzerine geldiğiniz zaman. Sıradan bir görüntüyle o reklamın açıklamasını veya titlesini gösteriyordu Ben biraz şekillendirip hem renkli hemde iyi görünmesi için bu şekilde ayarladım. Umarım beğenirsiniz. Diğer reklam kodlarından daha iyi göründüğünü söylüyebilirim :)

Bu reklam alanı koduda diğerleri gibi sadece gadget olarak ekliyoruz yerleşim bölgesini açıp sidebar kısmına gadged olarak eklemek hepsi bu kadardır

Demoyu en aşağıdaki videoyu izleyerek nasıl çalıştığını görebilirsiniz. Konumuzu fazla uzatmadan
kodları ekliyelim

koduları burdan alabilirsiniz.

sohetc.eblog.net/2013/12/tooltipli-efekt...

videosunu izlemek için üsteki linke tıklayıp incileyebilirsiniz buraya video ekliyemedim

Code< style type=" text/css" > 

. Reklam-Banner:hover . Small-image > img {
opacity: 0;
margin-top: -167px;
}
. Banner-alanı {
top: 0;
z-index: 10;
}
. Banner-alanı a {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px 0 #333333 inset;
display: block;
float: left;
margin: 4px;
padding: 4px;
position: relative;
text-decoration: none;
width: 125px;
height: 125px;
-moz-transition: all 850ms ease-in-out;
-w bk. t-transition: all 850ms ease-in-out;
-o-transition: all 850ms ease-in-out;
transition: all 850ms ease-in-out;
}
. Banner-alanı a:hover {
background: #07aaee;
}
. Reklam-Banner . Banner-alanı a strong {
background-color: rgba(32, 62, 126, 0. 87) ;
border-radius:4px;
-moz-border-radius: 4px;
-w bk. t-border-radius: 4px;

-moz-box-shadow: 5px 5px 8px #A71515;
-w bk. t-box-shadow: 5px 5px 8px #911212;
box-shadow: 5px 5px 8px #A71515;
color: #FFFFFF;
font-weight: normal;
right: 10px;
padding: 3px 6px;
position: absolute;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0. 75) ;
top: 95;
z-index: 9999;
}
. Reklam-Banner . Banner-alanı a strong {
opacity:0;
-w bk. t-transition-property: opacity, center;
-w bk. t-transition-duration: 850ms;
-moz-transition-property: opacity, center;
-moz-transition-duration: 850ms;
-o-transition-property: opacity, center;
-o-transition-duration: 850ms;
transition-property: opacity, center;
transition-duration: 850ms;
}
. Banner-alanı a:hover strong {
opacity:1;
top: 95px;
}
< /style>

< div class=" Reklam-Banner" >
< div style=" position:relative" >
< div class=" Banner-alanı" >
< a target=" _blank" href=" soh etc. eblog.net/" >
< img src=" lh3.googleusercontent.com/-dgbecwp2roe/u... vb. /AAAAAAAAFeA/Q_3rAhGGX34/s125-no/tnmkh.gif" width=" 125px" height=" 125px" border=" 0" />
< strong> Tooltip denemesi falan işte< /strong>
< /a>
< a target=" _blank" href=" soh etc. eblog.net/" >
< img src=" lh3.googleusercontent.com/-dgbecwp2roe/u... vb. /AAAAAAAAFeA/Q_3rAhGGX34/s125-no/tnmkh.gif" width=" 125px" height=" 125px" border=" 0" />
< strong> Tooltip denemesi 3< /strong>
< /a>
< a target=" _blank" href=" soh etc. eblog.net/" >
< img src=" lh3.googleusercontent.com/-dgbecwp2roe/u... vb. /AAAAAAAAFeA/Q_3rAhGGX34/s125-no/tnmkh.gif" width=" 125px" height=" 125px" border=" 0" />
< strong> Tooltip 2 denemesi< /strong>
< /a>
< a target=" _blank" href=" soh etc. eblog.net/" >
< img src=" lh3.googleusercontent.com/-dgbecwp2roe/u... vb. /AAAAAAAAFeA/Q_3rAhGGX34/s125-no/tnmkh.gif" width=" 125px" height=" 125px" border=" 0" />
< strong> Tooltip 1 denemesi< /strong>
< /a>
< /div>
< center>
< /center>
< /div>
< /div>