|
۩۞۩ هبوب الجوالات بانواعها وتطبيقاتها ۩۞۩ قسم يهتم بجميع الأمور المتعلقة بالجوالات بجميع أنواعها |
|
أدوات الموضوع | إبحث في الموضوع | انواع عرض الموضوع |
#1
|
|||||||||||||
|
|||||||||||||
أزرار مواقع التواصل الإجتماعي بشكل جديد
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته أزرار مواقع التواصل الإجتماعي بشكل جذاب لابد من كل صاحب موقع او مدونة يجب عليه إضافة أزرار مواقع التواصل الاجتماعي مثل فيس بوك تويتر جوجل بلس .. إلخ وذلك للتعرف عليه أكثر ومتابعة أخر مواضيعه إضافة لا بد منها . أجمل الأزرار بتقنية CSS لتعطي لمسة ساحرة تلفت النظر ثم نقوم بإضافة الأزرار التي تعجبك في مكان المناسب في موقعك الشكل 1 الكود: كود:
كود:
<style> #bdrs-social {margin:0px auto;width: 300px;} #bdrs-social .bdbox-social a:link, .bdbox-social a:visited{float:left;width:32px;height:32px;margin:0 5px;padding:0;text-indent:-9999em;box-shadow:3px 3px 3px rgba(0,0,0,0.3);background-color:transparent;background-size:100% auto;background-image: url('http://3.bp.blogspot.com/-iqgS6_ZGsWI/VE1SXfAV_qI/AAAAAAAAcXY/AimDpPHiuSc/s1600/BRS01-sosial.png') ;background-repeat:no-repeat;}#bdrs-social .bdbox-social a:hover, .bdbox-social a:active {box-shadow:3px 3px 7px #333 INSET;}#bdrs-social .bdbox-social a:first-child {margin-left:3px}#bdrs-social .bdbox-social a:last-child{margin-right:0}#bdrs-social .bdrs-rss {background-position:0 0}#bdrs-social .bdrs-goo{background-position:0 -32px}#bdrs-social .bdrs-fac{background-position:0 -64px}#bdrs-social .bdrs-lin{background-position:0 -96px}#bdrs-social .bdrs-tum{background-position:0 -128px}#bdrs-social .bdrs-twi{background-position:0 -160px}#bdrs-social .bdrs-wor{background-position:0 -192px} </style> <!-- www.madad2.blogspot.com --> <div id="bdrs-social"> <div class="bdbox-social" > <a class="bdrs-goo" href="رابط جوجل بلس" rel="publisher" rel="nofollow" target="_blank" title="جوجل بلس+"> جوجل بلس+ </a> <a class="bdrs-fac" href="رابط صفحة فيس بوك" rel="nofollow" rel="nofollow" target="_blank" title="فيس بوك"> فيس بوك </a> <a class="bdrs-twi" href="رابط تويتر" rel="nofollow" rel="nofollow" target="_blank" title="تويتر"> تويتر </a> <a class="bdrs-lin" href="رابط ينكدين" rel="nofollow" rel="nofollow" target="_blank" title="LinkedIn"> ينكدين </a> <a class="bdrs-tum" href="رابط مدونة تلنبر" rel="nofollow" rel="nofollow" target="_blank" title="Tumblr"> نعرفكم </a> <a class="bdrs-rss" href="رابط التغذية لمدونتك" rel="external" rel="nofollow" target="_self" title="RSS Feed"> RSS Feed </a> </div> </div> الشكل 2 الكود: كود:
<style> #socialbdrssliding a{font-family: 'Open Sans', Helvetica, Arial, sans-serif;width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s; -moz-transition:width 0.4s;overflow: hidden;}#socialbdrssliding a:hover{width: 100px; overflow: hidden;}#socialbdrssliding {float: right;position: relative;height: 40px; }#socialbdrssliding ul { margin: 0; }#socialbdrssliding li,#socialbdrssliding li a, #socialbdrssliding li .bdrs-thumb,#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;}#socialbdrssliding li,#socialbdrssliding li a, #socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;} #socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9; font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;text-decoration: none;} #socialbdrssliding li .bdrs-thumb { float: left; }#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("http://3.bp.blogspot.com/-5sEQcBjiYjQ/VE1S8fIjoMI/AAAAAAAAcXg/0kqO3wXqzIM/s1600/FACEBOOK.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("http://2.bp.blogspot.com/-qDVgmgp3_Eo/VE1TJ_gjX1I/AAAAAAAAcXo/ZbtVqnxMiP4/s1600/googleplus.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; } #socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("http://2.bp.blogspot.com/-wCHSN_3dksc/VE1TW_L8deI/AAAAAAAAcXw/hH-n_GApXmo/s1600/TWITTER.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("http://1.bp.blogspot.com/-qyRlRA4baBs/VE1TqHrZLjI/AAAAAAAAcX4/gxJvtjLeZYg/s1600/rssbd.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("http://4.bp.blogspot.com/-5dmv67RI4_E/VE1UDwXRpyI/AAAAAAAAcYA/TjjFwzLNpBk/s1600/youtube.png") no-repeat 0 -40px; } #socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;} </style> <!-- www.madad2.blogspot.com --> <div id="socialbdrssliding"> <ul> <li class="bdrs-gplus"> <a href="#" rel="nofollow" target="_blank" rel="nofollow" title="جوجل بلس"> <div class="bdrs-thumb"> </div> <div class="bdrs-title"> جوجل بلس </div> </a> </li> <li class="bdrs-facebook"> <a href="#" rel="nofollow" target="_blank" rel="nofollow" title="فيس بوك"> <div class="bdrs-thumb"> </div> <div class="bdrs-title"> فيس بوك </div> </a> </li> <li class="bdrs-twitter"> <a href="#" rel="nofollow" target="_blank" rel="nofollow" title="تويتر"> <div class="bdrs-thumb"> </div> <div class="bdrs-title"> تويتر </div> </a> </li> <li class="bdrs-rss"> <a href="#" rel="nofollow" target="_blank" rel="nofollow" title="rss feed"> <div class="bdrs-thumb"> </div> <div class="bdrs-title"> RSS </div> </a> </li> <li class="bdrs-youtube"> <a href="#" rel="nofollow" target="_blank" rel="nofollow" title="يوتيوب"> <div class="bdrs-thumb"> </div> <div class="bdrs-title"> يوتيوب </div> </a> </li> </ul> </div> الشكل 3 الكود: كود:
<style> .social-ballbdrs {padding: 5;margin-left:-30px;}.social-ballbdrs li, .social-ballbdrs li, .social-ballbdrs li {float: left;margin-right: 10px;background-color: #CCCCCC;display: inline;border-radius:50%;border:solid #999999 1px;box-shadow:0 0 5px 2px #999 inset;} .social-ballbdrs li a {-moz-transition: all 0.3s ease 0s;display: block;float: left;height: 100%;width: 40px;height: 40px;text-indent: -9999px;}.social-ballbdrs li.facebookball a {background: url('http://3.bp.blogspot.com/-5sEQcBjiYjQ/VE1S8fIjoMI/AAAAAAAAcXg/0kqO3wXqzIM/s1600/FACEBOOK.png') no-repeat 0 0;}.social-ballbdrs li.facebookball a:hover {background-color: #3b5998;}.social-ballbdrs li.googleplusball a {background: url('http://2.bp.blogspot.com/-qDVgmgp3_Eo/VE1TJ_gjX1I/AAAAAAAAcXo/ZbtVqnxMiP4/s1600/googleplus.png') no-repeat 0 0;}.social-ballbdrs li.googleplusball a:hover {background-color: #d94a39;}.social-ballbdrs li.rssball a {background: url('http://1.bp.blogspot.com/-qyRlRA4baBs/VE1TqHrZLjI/AAAAAAAAcX4/gxJvtjLeZYg/s1600/rssbd.png') no-repeat 0 0;}.social-ballbdrs li.rssball a:hover {background-color: #fe9900;}.social-ballbdrs li.twitterball a {background: url('http://2.bp.blogspot.com/-wCHSN_3dksc/VE1TW_L8deI/AAAAAAAAcXw/hH-n_GApXmo/s1600/TWITTER.png') no-repeat 0 0;}.social-ballbdrs li.twitterball a:hover {background-color: #48c4d2;}.social-ballbdrs li.youtubeball a {background: url('http://4.bp.blogspot.com/-5dmv67RI4_E/VE1UDwXRpyI/AAAAAAAAcYA/TjjFwzLNpBk/s1600/youtube.png') no-repeat 0 0;}.social-ballbdrs li.youtubeball a:hover {background-color: #f45750;}.social-ballbdrs li a:hover {background-position: 0 -40px; box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}.social-ballbdrs li a:visited,.social-ballbdrs li a:active{background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;} </style> <!-- www.madad2.blogspot.com --> <div class="social-ballbdrs"> <ul> <li class="twitterball"> <a rel="nofollow" target="_blank" href="#" rel="nofollow" title="تويتر"> تويتر </a> </li> <li class="googleplusball"> <a rel="nofollow" target="_blank" href="#" rel="nofollow" title="جوجل بلس"> جوجل بلس </a> </li> <li class="facebookball"> <a rel="nofollow" target="_blank" href="#" rel="nofollow" title="فيس بوك"> فيس بوك </a> </li> <li class="rssball"> <a rel="nofollow" target="_blank" href="#" rel="nofollow" title="rss"> rss </a> </li> <li class="youtubeball"> <a rel="nofollow" target="_blank" href="#" rel="nofollow" title="يوتيوب"> يوتيوب </a> </li> </ul> </div> الموضوع الأصلي: أزرار مواقع التواصل الإجتماعي بشكل جديد || الكاتب: الوافي || المصدر: منتديات هبوب الجنوب
|
02-02-2018 | #2 |
|
الله يعطيك العافية على ماقدمت
لقلبك كل السعادة |
اللهم ان ابي واخي في ضيافتك فأكرم ضيافتهم وانت اكرم الاكرمين ويسر حسابهم ويمن كتابهم و أبدلهم خير ما غادرتهم من هذه الدنيا بجنتك اللهم أرحمهم وأغفرلهم اللهم أبدل داراً خيراً من دارهم، اللهم أجعل قبورهم روضه من رياض الجنة يارب |
06-09-2022 | #4 |
|
رد: أزرار مواقع التواصل الإجتماعي بشكل جديد
لكم من الابداع رونقه
ومن الاختيار جماله دام لنا عطائكم المميز والجميل |
تسرقنا اللحظات ونحن لا ندري ولا تظل الا الذكريات تحلق معنا وتلازمنا أينما كنا وأينما تواجدنا نحتفظ بها ومعها أجمل الكلمات واللقاءات التي تجعلنا دائما معلقين بأمل الرجوع مهما سافرنا ومهما ابتعدنا يظل الوطن يسكن بداخلنا ...
|
07-09-2022 | #5 |
|
رد: أزرار مواقع التواصل الإجتماعي بشكل جديد
تحيه معطرة بالورد
اهديها لكم على هذا الموضوع القيم راق لي جداا ماقرأته هنا شكرا لكم على جمال طرحكم ننتظر جمالا كهذا الجمال وأكثر أطيب التحايا وارق المنى |
|
07-09-2022 | #6 |
|
رد: أزرار مواقع التواصل الإجتماعي بشكل جديد
موضوع في قمة الروعه
لطالما كانت مواضيعك متميزة لا عدمنا التميز و روعة الاختيار دمت لنا ودام تالقك الدائم |
|
05-06-2023 | #8 |
|
رد: أزرار مواقع التواصل الإجتماعي بشكل جديد
اهنيك ع الذوق
إبداع في الطرح وروعة في الإنتقاء وجهداً ملحوظ تشكر عليه دمت بروعة طرحك أكاليل الزهر أنثرها في متصفح |
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
أسرار, مواقع, البواسل, الإجتماعي, بشكل, جديد |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
كود لقوانين انشاء موضوع جديد ويكون بشكل واضح وملفت للنظر وبشكل متحرك | الوافي | ۩۞۩ هبوب تطوير المواقع والمنتديات ۩۞۩ | 6 | 01-12-2023 02:35 PM |
كود ايقونات جديدة مواقع التواصل في الرئيسية للمنتديات|| متحركة يوجد مثال | الوافي | ۩۞۩ هبوب تطوير المواقع والمنتديات ۩۞۩ | 6 | 22-11-2023 02:57 AM |