• أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
  • بادئ الموضوع عنكبوت النت
  • تاريخ البدء
الحالة
مغلق و غير مفتوح للمزيد من الردود.
غير متصل

Developer
إنضم
7 مارس 2012
المشاركات
5
الإعجابات
0
النقاط
5
العمر
25
الإقامة
لبنان
الإجابات المقدمة: 0
#1
السلام عليكم

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

بشكل جديد

صورة الكود



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



الكود :

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>
حيث نعدل
الروابط تضهر للاعضاء فقط سجل دخولك أو قم بالتسجيل الآن.


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

مثال

الروابط تضهر للاعضاء فقط سجل دخولك أو قم بالتسجيل الآن.


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

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

في السطر رقم 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>
حيث سنعدل علي

الروابط تضهر للاعضاء فقط سجل دخولك أو قم بالتسجيل الآن.


مثال

الروابط تضهر للاعضاء فقط سجل دخولك أو قم بالتسجيل الآن.


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

في السطر 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 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>
تويتر فقط

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]
الروابط تضهر للاعضاء فقط سجل دخولك أو قم بالتسجيل الآن.
[/DOWNLOAD]

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

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

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

اة في ال FORUMHOME

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

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

الكود يصلح للجيل الرابع و الجيل الثالث أيضآ
 


غير متصل

ExpErt DeveloPer
إنضم
8 مارس 2012
المشاركات
47
الإعجابات
0
النقاط
30
العمر
26
الإقامة
من تراب
الإجابات المقدمة: 0
#2
رد: كود تابعنا علي تويتر و فيس بوك و جوجل + بشكل جديد 2012

تسلم يا غالى
 


الحالة
مغلق و غير مفتوح للمزيد من الردود.
كود تابعنا علي تويتر و فيس بوك و جوجل + بشكل جديد 2012