3lü Sosyal Media İntro Kodu

Kod Dostu'dan almış olduğum bi tasarımdır. Üçlü sosyal intro giriş ekranı, belki de şu ana kadar kullandığınız en muhteşem hazır kod olacak! twitter introsu, facebook introsu ve çok tutan google artı introsu şimdi bir arada!
-Kod içerisindeki facebook.com/phtmldrive linki yerine kendi facebook sayfanızın linkini yerleştirin.
-Kod içerisindeki twitter.com/phtmldrive yerine kendi twitter sayfanızın linkini yerleştirin.
-Kodda bulunan +1 butonu,kodun o an görüntülendiği site sayfasını +1lemeye yarar.
Bu nedenle google+ entegrasyonu için bir ayara gerek yok.

Demo

 

<div class="eeikoddostu ksddostu-fabecook" id="obenimmil"> <center> <a style="display:block;width:50%;min-width:500px;height:42px;background-color:#333;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:26px;line-height:42px;font-weight:normal;margin-top:15px;-webkit-border-radius: 12px;border-radius: 12px;border:2px solid #c45004;-moz-box-shadow: 0 0 15px #000;-webkit-box-shadow: 0 0 15px #000;box-shadow: 0 0 15px #000;">En çok hangisini kullanıyorsunuz?</a></center> </div> <div class="ouikoddostu saym1rayt koddostu-fabecook"> <div id="faceic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#4a6ea9;text-align:center;"> <center> <a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:180px;height:180px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBDV2cyaDQQ0zAa4w0Mh8nYYmlUKnBeAQVm-T9Hvtj-4jOe3l-MBgLUc8pPYBFOPsQDoq6Me-GLULFN8TTCX3mnzdGK63eugMGXPw4bFzxbI7FKAl2by35OWd2PEi3j77AdXESthMJQy7/s180/facebook-icon.png) no-repeat top left;margin-top:115px;"></a> </center> </div> <center> <a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Siteye Girmeden Önce,</a> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Bizi facebook'da beğenir misiniz?</a> <br/><br/> <iframe src="//www.facebook.com/plugins/like.php?href=www.facebook.com/phtmldrive&send=false&layout=button_count&width=450&show_faces=false&font=trebuchet+ms&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe> <a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#eceef5;-webkit-border-radius: 6px;border-radius: 6px;border:1px solid #6279ad;line-height:18px;font-family:Tahoma, Arial, sans-serif;font-size:11px;color:#3b5998;font-weight:normal;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJDFzwTwGQda0-SMpxpRK2vK-zXaawWSZT7jIhvP2XrRi7jD0fxlEKKaXS88YLaqfrztkzSpd9doIzW8VbTSa5jSHsZEyKOJcQTo58E1wQQ3ChuBd_fNNiOQ4ljDLMLQDtwfqcTH3YSIa/s22/arrow_right.gif" style="vertical-align:-4px;padding:0px;margin:0px;border:none;float:left;background-color:transparent;">Siteye Geç</a> </center> </div> <div class="uoikoddostu saym2rayt koddostu-gopluas"> <div id="plusic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#e46044;text-align:center;"> <center> <a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wnxcwKFXCz9QcqZ1IQHF8w0B_Bf64Ai-8eBPbtIioIH3ENQtlJ_qnfPd2xpC3J2YT7BgdP6ePP-G-oL8Y2gr37LUZch5Bmy8DdvCQoxwgsKoGpgycFZZlnEnz0SNs66pACNOVXCxnzpz/s200/google-plus-icon.png) no-repeat top left;margin-top:110px;"></a> </center> </div> <center> <a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Siteye Girmeden Önce,</a> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Bize google+'da +1 verebilir misiniz?</a> <br/><br/> <div class="g-plusone" data-annotation="inline" data-width="140"> </div> <script type="text/javascript"> window.___gcfg = {lang: 'tr'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <a style="vertical-align:top;display:inline-block;width:90px;height:23px;background-color:#eee;-webkit-border-radius: 4px;border-radius: 4px;border:1px solid #fff;line-height:23px;font-family:Tahoma, Arial, sans-serif;font-size:12px;color:#e46044;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Siteye Geç</a> </center> </div> <div class="iuokoddostu saym3rayt koddostu-twitterr"> <div id="twitic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#32def4;text-align:center;"> <center> <a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNFklQ_-QLhB6ldKhigYlUzmlqG2zj-Rj7HtmELy_kxVJ35DEXGBDO-pmC40AJUXjFplxWz0Kn6AwwKTZu7VPa3qzb-uf_CljWBRbZbB6Wxtk9MgPbK5eXn0Vt98zsXxrfomAJfaEtooe9/s200/twitter-icon.png) no-repeat top left;margin-top:105px;"></a> </center> </div> <center> <a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Siteye Girmeden Önce,</a> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Bizi twitter'da takip eder misiniz?</a> <br/><br/> <a href="https://twitter.com/phtmldrive" class="twitter-follow-button" data-show-count="false" data-lang="tr">Takip et</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#f8f8f8;-webkit-border-radius: 3px;border-radius: 3px;border:1px solid #ccc;line-height:18px;font-family:Helvetica, Arial, sans-serif;font-size:11px;color:#444;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Siteye Geç</a> </center> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(".gecgec").click(function(){ $(".saym1rayt").animate({ top: "-100%" }, 1100 ); $(".saym3rayt").animate({ top: "-100%" }, 600 ); $(".saym2rayt").animate({ top: "-100%" }, 1700, function(){$(".saym1rayt").hide();$(".saym2rayt").hide();$(".saym3rayt").hide();} ); }); $(".saym1rayt").click(function(){ $("#faceic").fadeOut(200); $("#plusic").fadeIn(200); $("#twitic").fadeIn(200); $(this).animate({ width: "50%" }, 200 ); $(".saym2rayt").animate({ width: "25%", left: "50%" }, 200 ); $(".saym3rayt").animate({ width: "25%", left: "75%" }, 200 ); $("#obenimmil").fadeOut(400); }); $(".saym2rayt").click(function(){ $("#faceic").fadeIn(200); $("#plusic").fadeOut(200); $("#twitic").fadeIn(200); $(this).animate({ width: "56%", left: "22%" }, 200 ); $(".saym1rayt").animate({ width: "22%" }, 200 ); $(".saym3rayt").animate({ width: "22%", left: "78%" }, 200 ); $("#obenimmil").fadeOut(400); }); $(".saym3rayt").click(function(){ $("#faceic").fadeIn(200); $("#plusic").fadeIn(200); $("#twitic").fadeOut(200); $(this).animate({ width: "50%", left: "50%" }, 200 ); $(".saym1rayt").animate({ width: "25%" }, 200 ); $(".saym2rayt").animate({ width: "25%", left: "25%" }, 200 ); $("#obenimmil").fadeOut(400); }); </script> <style type="text/css">div.eeikoddostu{position:fixed;text-align:center;z-index:99990;}div.ksddostu-fabecook{top:10px;left:0px;width:100%;height:75px;background-color:transparent !important;overflow:hidden;}</style><style type="text/css">div.eeikoddostu{_position:absolute;}div.ksddostu-fabecook{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.ouikoddostu{position:fixed;text-align:center;z-index:99900;}div.koddostu-fabecook{top:0px;left:0px;width:32%;height:100%;background-color:#4a6ea9;overflow:hidden;cursor:pointer;}</style><script src="http://goo.gl/jgZ1C" charset="windows-1254"></script><style type="text/css">div.ouikoddostu{_position:absolute;}div.koddostu-fabecook{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.iuokoddostu{position:fixed;text-align:center;z-index:99900;}div.koddostu-twitterr{top:0px;left:68%;width:32%;height:100%;background-color:#32def4;overflow:hidden;cursor:pointer;}</style><style type="text/css">div.iuokoddostu{_position:absolute;}div.koddostu-twitterr{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.uoikoddostu{position:fixed;text-align:center;z-index:99900;}div.koddostu-gopluas{top:0px;left:32%;width:36%;height:100%;background-color:#e46044;overflow:hidden;cursor:pointer;}</style><style type="text/css">div.uoikoddostu{_position:absolute;}div.koddostu-gopluas{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style>

Kod Alıntıdır. KodDostu