ظƒظˆط¯ طھط§ط¨ط¹ظ†ط§ ط¹ظ„ظٹ طھظˆظٹطھط± ظˆ ظپظٹط³ ط¨ظˆظƒ ظˆ ط¬ظˆط¬ظ„ + ط¨ط´ظƒظ„ ط¬ط¯ظٹط¯ 2014



السلام عليكم

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

بشكل جديد

صورة الكود code



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



الكود code :



رمز Code:
<!-- content table --> <!-- open content container --><div align=&quot;center&quot;> <div class=&quot;page&quot; style=&quot;width:100%; text-align:right&quot;> <div style=&quot;padding:0px 2px 0px 2px&quot;> <script type=&quot;text/javascript&quot; src=&quot;http://localhost/vBulletin 4/jquery.js&quot;></script> <style type=&quot;text/css&quot;> 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=&quot;likebox_1&quot;><div id=&quot;likebox_1_1&quot;> <img src=&quot;http://i44.servimg.com/u/f44/12/54/23/70/fb110.png&quot; alt=&quot;&quot; /> <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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script><div class=&quot;FB_Loader&quot;><iframe src=&quot;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&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:200px; height:356px;&quot; allowTransparency=&quot;true&quot;></iframe></div> </div> </div> <!-- facebook --> <!-- twitter --> <div id=&quot;polecam_1&quot;><div id=&quot;polecam_1_1&quot;> <img id=&quot;polecamy_img&quot; src=&quot;http://i44.servimg.com/u/f44/12/54/23/70/twitte10.png&quot; /> <script src=&quot;http://localhost/vBulletin 4/widget.js&quot;></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=&quot;google_1&quot;><div id=&quot;google_1_1&quot;> <img id=&quot;google_img&quot; src=&quot;http://i44.servimg.com/u/f44/12/54/23/70/google10.png&quot; /><div style=&quot;color:#999;font-size:11px; padding-top: 15px; padding-right:30px; margin:5px; width:98px; height:97px;&quot;> <script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;><iframe src =&quot;http://forum.arabseed.com&quot; width=&quot;2&quot; height=&quot;2&quot;> </iframe></script> <glusone size=&quot;tall&quot;></glusone> </div></div></div> <!-- google_1 -->
نأتي لشرح طريقة الكود code

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

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

شرح طريقة التعديل علي الكود code

في السطر ال 8

رمز Code:
<script type=&quot;text/javascript&quot; src=&quot;http://localhost/vBulletin 4/jquery.js&quot;></script>
حيث نعدل http://localhost/vBulletin 4

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

مثال

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




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

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

في السطر رقم 122

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

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

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

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

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

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

في السطر رقم 132

رمز Code:
<script src=&quot;http://localhost/vBulletin 4/widget.js&quot;></script>
حيث سنعدل علي

http://localhost/vBulletin 4/widget.js

مثال

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

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

في السطر 157

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

في السطر 166

رمز Code:
<script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;><iframe src =&quot;*****&quot; width=&quot;2&quot; height=&quot;2&quot;>
مكان النجوم اسم الحساب او الصفحة علي جوجل GOOGLE بلس +


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

رمز Code:
<!-- facebook --><div id=&quot;likebox_1&quot;><div id=&quot;likebox_1_1&quot;> <img src=&quot;http://i44.servimg.com/u/f44/12/54/23/70/fb110.png&quot; alt=&quot;&quot; /> <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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script><div class=&quot;FB_Loader&quot;><iframe src=&quot;http://www.facebook.com/plugins/likebox.php?href=****&amp;width=190&amp;colorschem e=dark&amp;show_faces=true&amp;border_color&amp;st ream=false&amp;header=false&amp;height=362&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:200px; height:356px;&quot; allowTransparency=&quot;true&quot;></iframe></div> </div> </div> <!-- facebook -->
تويتر فقط

رمز Code:
<!-- twitter --> <div id=&quot;polecam_1&quot;><div id=&quot;polecam_1_1&quot;> <img id=&quot;polecamy_img&quot; src=&quot;http://i44.servimg.com/u/f44/12/54/23/70/twitte10.png&quot; /> <script src=&quot;http://localhost/vBulletin 4/widget.js&quot;></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 -->
جوجل GOOGLE بلس +

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

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

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

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

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

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

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



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

اة في ال FORUMHOME

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

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



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





التعديل الأخير كان بواسطة Web-Developer; 07 - 03 - 2014 الساعة 03:49

الملفات المرفقة [TR]
www.gredes.info.zip (33.3 كيلوبايت, عدد مرات المشاهدة 951 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©