10-22-2013, 03:35 PM
Kod:
<!-- Uses Robert Penners easing equations for the transitions. --><!-- http://www.robertpenner.com/easing/ --><script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://plusoid.com/jea.js"></script><div id="koddostupanel" style="text-align:left !important;position:relative;width:420px;height:100px;background-color:#444;-webkit-border-radius: 12px;border-radius: 12px;overflow:hidden;"><div style="display:none;position:absolute;top:16px;left:16px;background-color:transparent;width:329px;height:144px;font-family:Verdana, sans-serif !important;font-weight:bold;text-decoration:none !important;font-size:12px !important;color:#fff;" id="koddostudetay"></div><a class="koddostu-uye ekip1uyesi"></a><a class="koddostu-uye ekip2uyesi"></a><a class="koddostu-uye ekip3uyesi"></a><a class="koddostu-uye ekip4uyesi"></a><a class="koddostu-uye ekip5uyesi"></a><a class="koddostu-uye ekip6uyesi"></a><a class="uye3no" style="display:none; width: 92px; height: 18px; background: url(http://4.bp.blogspot.com/-jXlziTHBcAY/UB-64fgX_kI/AAAAAAAAMfk/tZeFE3oQ0kA/s1600/kd35.png) no-repeat scroll left top transparent; position: absolute; bottom: 0px; right: -64px;z-index:600" href="http://www.koddostu.com/2013/02/sitene-ekip-uyeleri-ksm-muhtesem-kod.html" onmouseout="this.style.right='-64px'" onmouseover="this.style.right='0px'" target="_blank"></a><a class="koddostu-tiklayin" style="position:absolute;bottom:0px;left:0px;width:100%;height:30px;font-size:14px;font-weight:bold;color:#fff;font-family:Verdana, sans-serif;text-align:center;">Bir ekip üyesinin resmine tıklayın.</a><button id="tacmibeybe" style="cursor:pointer;display:none;position:absolute;top:70px;right:12px;border:1px solid #777;background:#222;width:57px;-webkit-border-radius: 5px;border-radius: 5px;color:#fff;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:12px;">Geri</button><div style="display:none;position:absolute;bottom:0px;left:0px;width:100%;height:65px;z-index:500" id="teyntidlav"></div></div><style>.koddostu-uye{background-size:55px 55px !important;cursor:pointer;display:inline-block;width:55px;height:55px;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center;border:2px solid #222;-webkit-border-radius: 10px;border-radius: 10px;}.ekip1uyesi{position:absolute;top:8px;left:5px;z-index:100;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center !important;background-size:55px 55px !important;}.ekip2uyesi{position:absolute;top:8px;left:75px;z-index:100;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center !important;background-size:55px 55px !important;}.ekip3uyesi{position:absolute;top:8px;left:145px;z-index:100;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center !important;background-size:55px 55px !important;background-size:55px 55px !important;}.ekip4uyesi{position:absolute;top:8px;left:215px;z-index:100;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center !important;background-size:55px 55px !important;}.ekip5uyesi{position:absolute;top:8px;left:285px;z-index:100;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center !important;background-size:55px 55px !important;}.ekip6uyesi{position:absolute;top:8px;left:355px;z-index:100;background:#222 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/48/red-cross-icon.png) no-repeat center center !important;}</style><script>$(".koddostu-uye").click(function(){
document.getElementById('teyntidlav').style.display='block';
var $koddostu4 = $(this);
if($(this).position().left=='5'){document.getElementById('koddostudetay').innerHTML='<span style="font-size:14px;">Ekip Üyesi: Ahmet Bilmemkim</span><br/><br/><span style="font-size:14px;">Hakkında: </span> Bu üyemiz çok şöyledir,çok böyledir. Şundan şundan sorumludur ve sitemizin şusudur. Falan filan<br/><br/>İletişim adresi:bilmemne@gmail.com'};
if($(this).position().left=='75'){document.getElementById('koddostudetay').innerHTML='<span style="font-size:14px;">Ekip Üyesi: 2. Ekip Üyesi</span><br/><br/><span style="font-size:14px;">Hakkında: </span> Bu üyemiz çok şöyledir,çok böyledir. Şundan şundan sorumludur ve sitemizin şusudur. Falan filan<br/><br/>İletişim adresi:bilmemne@gmail.com'};
if($(this).position().left=='145'){document.getElementById('koddostudetay').innerHTML='<span style="font-size:14px;">Ekip Üyesi: 3. Ekip Üyesi</span><br/><br/><span style="font-size:14px;">Hakkında: </span> Bu üyemiz çok şöyledir,çok böyledir. Şundan şundan sorumludur ve sitemizin şusudur. Falan filan<br/><br/>İletişim adresi:bilmemne@gmail.com'};
if($(this).position().left=='215'){document.getElementById('koddostudetay').innerHTML='<span style="font-size:14px;">Ekip Üyesi: 4. Ekip Üyesi</span><br/><br/><span style="font-size:14px;">Hakkında: </span> Bu üyemiz çok şöyledir,çok böyledir. Şundan şundan sorumludur ve sitemizin şusudur. Falan filan<br/><br/>İletişim adresi:bilmemne@gmail.com'};
if($(this).position().left=='285'){document.getElementById('koddostudetay').innerHTML='<span style="font-size:14px;">Ekip Üyesi: 5. Ekip Üyesi</span><br/><br/><span style="font-size:14px;">Hakkında: </span> Bu üyemiz çok şöyledir,çok böyledir. Şundan şundan sorumludur ve sitemizin şusudur. Falan filan<br/><br/>İletişim adresi:bilmemne@gmail.com'};
if($(this).position().left=='355'){document.getElementById('koddostudetay').innerHTML='<span style="font-size:14px;">Ekip Üyesi: Örnek Üye6</span><br/><br/><span style="font-size:14px;">Hakkında: </span> Bu üyemiz çok şöyledir,çok böyledir. Şundan şundan sorumludur ve sitemizin şusudur. Falan filan<br/><br/>İletişim adresi:bilmemne@gmail.com'};
$(".koddostu-tiklayin").fadeOut(300, function() {
$(".uye3no").fadeIn('300');
var koddostu5 = $koddostu4.position().left;
$(".koddostu-uye").not($koddostu4).animate({ top: "135px", opacity: "0.1" }, 1000 );
$("#tacmibeybe").fadeIn('100');
$koddostu4.animate({left: "350px"
}, 1000, 'easeOutBounce');
$("#koddostudetay").fadeIn(1500);
$("#koddostupanel").animate({
height: "200px"
}, 1000, 'easeOutBounce' );
});
});
$("#tacmibeybe").click(function(){
$("#koddostudetay").fadeOut(500, function(){document.getElementById('koddostudetay').innerHTML='';});
document.getElementById('teyntidlav').style.display='none';
document.getElementById('tacmibeybe').style.display='none';
$(".ekip1uyesi").animate({top: "8px", left: "5px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip2uyesi").animate({top: "8px", left: "75px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip3uyesi").animate({top: "8px", left: "145px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip4uyesi").animate({top: "8px", left: "215px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip5uyesi").animate({top: "8px", left: "285px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip6uyesi").animate({top: "8px", left: "355px", opacity: "1"
}, 1200, 'easeOutBounce');
$("#koddostupanel").animate({
height: "100px"
}, 1200, 'easeOutBounce', function(){$(".koddostu-tiklayin").fadeIn(300);} );
});
$("#teyntidlav").click(function(){
$("#koddostudetay").fadeOut(500, function(){document.getElementById('koddostudetay').innerHTML='';});
document.getElementById('teyntidlav').style.display='none';
document.getElementById('tacmibeybe').style.display='none';
$(".ekip1uyesi").animate({top: "8px", left: "5px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip2uyesi").animate({top: "8px", left: "75px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip3uyesi").animate({top: "8px", left: "145px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip4uyesi").animate({top: "8px", left: "215px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip5uyesi").animate({top: "8px", left: "285px", opacity: "1"
}, 1200, 'easeOutBounce');
$(".ekip6uyesi").animate({top: "8px", left: "355px", opacity: "1"
}, 1200, 'easeOutBounce');
$("#koddostupanel").animate({
height: "100px"
}, 1200, 'easeOutBounce', function(){$(".koddostu-tiklayin").fadeIn(300);} );
});
</script>Kod yukarıdaki şekildedir ancak aşağıdaki linkten kodu kendinize göre düzenleyip yeniden kod oluştur tuşuna basınız..
http://www.koddostu.com/2013/02/sitene-ekip-uyeleri-ksm-muhtesem-kod.html
Yeni Kodu oluşturduktan sonra sitenize ekleyiniz...
kaynak: koddostu.com
