كود تابعنا علي تويتر و فيس بوك و جوجل + بشكل جديد 2012

السلام عليكم

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

بشكل جديد

صورة الكود



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



الكود :

رمز Code:

<!-- 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: {
               shell: {
                 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

رمز Code:

<script type="text/javascript" src="http://localhost/vb4/jquery.js"></script>

حيث نعدل http://localhost/vb4

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

مثال

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

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

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

في السطر رقم 122

رمز Code:

}(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

رمز Code:

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

حيث سنعدل علي

http://localhost/vb4/widget.js

مثال

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

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

في السطر 157

رمز Code:

}).render().setUser('*****').start();

مكان النجوم يتم وضع اسم المستخدم في تويتر

في السطر 166

رمز Code:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"><iframe src ="*****" width="2" height="2">

مكان النجوم اسم الحساب او الصفحة علي جوجل بلس +


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

رمز Code:

<!-- 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=****&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 -->

تويتر فقط

رمز Code:

<!-- 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: {
               shell: {
                 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 -->

جوجل بلس +

رمز Code:

<!-- 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>

<!-- google_1 -->

مع تعديل ما يلزم

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

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

يوجد مثال مباشر

الموقع في المثال تابع الأكواد علي الجانب الأيمن في المنتدي

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

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

هل أعجبك الموضوع ؟

Share

Tweet

كاتب الموضوع : أيوب امزيل

مدون مهتم بجديد التكنولوجيا و التقنيات كما أنني محب للتصميم، مزداد سنة 1998 بالمغرب وأدرس الان تقني متخصص في الشبكة العنكبوتية يمكنك متابعتي على الفايسبوك