حالة الموضوع:
مغلق
  1. عنكبوت النت

    عنكبوت النت Developer

    الأنتساب:
    ‏7 مارس 2012
    المشاركات:
    5
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الإقامة:
    لبنان
    السلام عليكم

    أقدم لكم كود تابعنا علي تويتر و الفيس بوك و جوجل بلس بتقنية Css3

    بشكل جديد

    صورة الكود

    [​IMG]

    و صورة من النافذة عندما تنفتح

    [​IMG]

    الكود :

    كود PHP:
    <!-- content table -->
    <!-- 
    open content container --><div align="center">
        <
    div class="page" style="width:100%; text-align:right">
            <
    div style="padding:0px 2px 0px 2px">
     


    <
    script type="text/javascript" src="http://localhost/vb4/jquery.js"></script>
    <style type="text/css">
    img, a { border: 0; }
    #likebox_1 {
        z-index: 10005;
       border:2px solid #3c95d9;
       background-color: #fff;
       width:196px;
       height: 353px;
       position: fixed;
       top: 18%;
       right: -200px;
    }

    #likebox_1_1 {
       width:196px;
       height: 353px;
       overflow: hidden;
    }

    #likebox_1 img {
       position: absolute;
       top: -2px;
       left: -35px;
    }

    #likebox_1 iframe {
       border:0px solid #3c95d9;
       overflow: hidden;
       position: static;
       height: 360px;
       left:-2px;
        top:-3px;
    }
    #polecam_1 {
        z-index: 10004;
       border:2px solid #6CC5FF;
       background-color: #6CC5FF;
       width:246px;
       height: 353px;
       position: fixed;
       top: 35%;
       right: -250px;
    }

    #polecam_1_1 {
       width:246px;
       height: 353px;
       overflow: hidden;
    }

    #polecamy_img {
       position: absolute;
       top: -2px;
       left: -35px;
       border: 0;
    }
    #google_1 {
        z-index: 10003;
       border-top:2px solid #0056a0;
       border-bottom: 2px solid #0056a0;
       border-right:2px solid #0056a0;
       border-left: hidden;
       background-color: #006ec9;
       width:152px;
       height: 97px;
       position: fixed;
       top: 52%;
       right: -154px;
    }

    #google_1_1 {
       width:152px;
       height: 97px;
       overflow: hidden;
    }

    #google_img {
       position: absolute;
       top: -2px;
       left: -33px;
       border: 0;
    }
    #youtube_1 {
        z-index: 10003;
       border:2px solid #cb1c0e;
       background-color: #fff;
       width:196px;
       height: 353px;
       position: fixed;
       right: -200px;
    }

    #youtube_1_1 {
       width:196px;
       height: 353px;
       overflow: hidden;
    }

    #youtube_1 img {
       position: absolute;
       top: -2px;
       left: -35px;
    }

    </style>

    <!-- facebook --><div id="likebox_1"><div id="likebox_1_1">
    <img src="http://i44.servimg.com/u/f44/12/54/23/70/fb110.png" alt="" />
    <script>(function(d){
      var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
      d.getElementsByTagName('head')[0].appendChild(js);
    }(document));</script><div class="FB_Loader"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/*****1&amp;width=190&amp;colorscheme=dark&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=362" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:356px;" allowTransparency="true"></iframe></div>
    </div>
    </div>
    <!-- facebook -->


    <!-- twitter -->
                <div id="polecam_1"><div id="polecam_1_1">
                    <img id="polecamy_img" src="http://i44.servimg.com/u/f44/12/54/23/70/twitte10.png" />

                <script src="http://localhost/vb4/widget.js"></script>

                <script>
                new TWTR.Widget({
                  version: 2,
                  type: 'profile',
                  rpp: 3,
                  interval: 1000,
                  width: 246,
                  height: 265,
                  theme: {
                   *****: {
                     background: '#63BEFD',
                     color: '#FFFFFF'
                   },
                   tweets: {
                     background: '#FFFFFF',
                     color: '#000000',
                     links: '#47a61e'
                   }
                  },
                  features: {
                   loop: false,live: true,
                scrollbar: false,hashtags: false,timestamp: true,
                    avatars: true,behavior: 'default'              }
                }).render().setUser('arabseed1').start();
                </script>
                </div></div>
    <!-- twitter -->


    <!-- google_1 --><div id="google_1"><div id="google_1_1">
    <img id="google_img" src="http://i44.servimg.com/u/f44/12/54/23/70/google10.png" /><div style="color:#999;font-size:11px; padding-top: 15px;
    padding-right:30px; margin:5px; width:98px; height:97px;">
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"><iframe src ="http://forum.arabseed.com" width="2" height="2">
    </iframe></script>
    <g:plusone size="tall"></g:plusone>
    </div></div></div>

    <!-- google_1 -->
    نأتي لشرح الكود

    الكود سهل جدآ حيث يعتمد علي تقنية ال JavaScript , ال Jquery

    يوجد ملفين مرفقين بتم رفعهم علي أي مسار

    شرح التعديل علي الكود

    في السطر ال 8

    كود PHP:
    <script type="text/javascript" src="http://localhost/vb4/jquery.js"></script>
    حيث نعدل http://localhost/vb4

    الي المسار اللي نريد

    مثال

    http://www.****.com/jquery.js

    النجوم هي رابط الموقع تبعك

    و نرفع الملف الي هذا المسار

    في السطر رقم 122

    كود PHP:
    }(document));</script><div class="FB_Loader"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/****&amp;width=190&amp;colorscheme=dark&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=362" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:356px;" allowTransparency="true"></iframe></div>
    سنعدل التالي

    href=http://www.facebook.com/****

    النجوم هي رابط صفحتك أو حسابك في الفيس بوك

    مثال سيكون كذلك

    href=http://www.facebook.com/traidnt

    هذا مجرد مثال للتوضيح

    في السطر رقم 132

    كود PHP:
    <script src="http://localhost/vb4/widget.js"></script>
    حيث سنعدل علي

    http://localhost/vb4/widget.js

    مثال

    http://******/widget.js

    النجوم هي رابط الموقع و نرفع الملف الي هذا المسار

    في السطر 157

    كود PHP:
    }).render().setUser('*****').start();
    مكان النجوم يتم وضع اسم المستخدم في تويتر

    في السطر 166

    كود PHP:
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"><iframe src ="*****" width="2" height="2">
    مكان النجوم اسم الحساب او الصفحة علي جوجل بلس +

    لاستخدام كود الفيس بوك فقط

    كود PHP:
    <!-- facebook --><div id="likebox_1"><div id="likebox_1_1">
    <
    img src="http://i44.servimg.com/u/f44/12/54/23/70/fb110.png" alt="" />
    <
    script>(function(d){
      var 
    jsid 'facebook-jssdk'; if (d.getElementById(id)) {return;}
      
    js d.createElement('script'); js.id idjs.async true;
      
    js.src "http://connect.facebook.net/en_US/all.js#xfbml=1";
      
    d.getElementsByTagName('head')[0].appendChild(js);
    }(
    document));</script><div class="FB_Loader"><iframe src="http://www.facebook.com/plugins/likebox.php?href=****&amp;width=190&amp;colorscheme=dark&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=362" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:356px;" allowTransparency="true"></iframe></div>
    </div>
    تويتر فقط

    كود PHP:
    <!-- twitter -->
                <
    div id="polecam_1"><div id="polecam_1_1">
                    <
    img id="polecamy_img" src="http://i44.servimg.com/u/f44/12/54/23/70/twitte10.png" />

                <
    script src="http://localhost/vb4/widget.js"></script>

                <script>
                new TWTR.Widget({
                  version: 2,
                  type: 'profile',
                  rpp: 3,
                  interval: 1000,
                  width: 246,
                  height: 265,
                  theme: {
                   *****: {
                     background: '#63BEFD',
                     color: '#FFFFFF'
                   },
                   tweets: {
                     background: '#FFFFFF',
                     color: '#000000',
                     links: '#47a61e'
                   }
                  },
                  features: {
                   loop: false,live: true,
                scrollbar: false,hashtags: false,timestamp: true,
                    avatars: true,behavior: 'default'              }
                }).render().setUser(***').start();
                </script>
                </div></div>
    <!-- twitter -->
    جوجل بلس +

    كود PHP:
    <!-- google_1 --><div id="google_1"><div id="google_1_1">
    <
    img id="google_img" src="http://i44.servimg.com/u/f44/12/54/23/70/google10.png" /><div style="color:#999;font-size:11px; padding-top: 15px;
    padding-right:30px; margin:5px; width:98px; height:97px;"
    >
    <
    script type="text/javascript" src="https://apis.google.com/js/plusone.js"><iframe src ="*****" width="2" height="2">
    </
    iframe></script>
    <g:plusone size="tall"></g:plusone>
    </div></div></div>
    مع تعديل ما يلزم

    الكود ليس بجديد و لكن الفكرة جديدة و حركة كتير حلوة

    الملفات المرفوعة يتم رفعها علي أي مسار بعد التعديل في الكود

    [DOWNLOAD]http://www.mediafire.com/?abncetqxuyw6h6t[/DOWNLOAD]

    كل المطلوب منكم هو الدعاء لي و لوالدي

    و اي استفسار في الخدمة

    التركيب في أسفل قالب الهيدر header

    اة في ال FORUMHOME

    اذا كنت تريد ان يكون في الصفحة الرئيسية فقط

    الكود سهل التعديل اذا كان عندك فكرة عن ال CSS

    الكود يصلح للجيل الرابع و الجيل الثالث أيضآ
     
  2. τєғα сσđ

    τєғα сσđ ExpErt DeveloPer

    الأنتساب:
    ‏8 مارس 2012
    المشاركات:
    54
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الوظيفة:
    ĿĘåяמ ҺāĆҝĕĐ
    الإقامة:
    من تراب
    رد: كود تابعنا علي تويتر و فيس بوك و جوجل + بشكل جديد 2012

    تسلم يا غالى
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة