wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.

أصبحت الشبكات الاجتماعية جزءًا لا يتجزأ من الإنترنت الحديث. بفضل وظائفهم الواضحة ، قاموا بإغراء المستخدمين بشكل كبير إلى الإدمان.

ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.

أصبحت الشبكات الاجتماعية جزءًا لا يتجزأ من الإنترنت الحديث. بفضل وظائفهم الواضحة ، قاموا بإغراء المستخدمين بشكل كبير إلى الإدمان.

أريد أن أشارك جمهورًا محترمًا أزرار الوسائط الاجتماعية للموقع في CSS خالص و Font Awesome ، والتي كنت أقوم بتخصيص الأنماط طوال اليوم
.

أزرار مواقع التواصل الاجتماعية مستديرة

ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.


جلست ليوم واحد في اختيار الظلال والأنماط


لأزرار وسائل التواصل الاجتماعي. الآن أريد أن أشارككم نسختي من أزرار الوسائط الاجتماعية المستديرة:
لإدراج الأزرار في الموقع ، أضف الشبكات الاجتماعية التي تحتاجها عبر الكود.

اولا:كود html 

rrrrrrrrrrrrrrrrrr
<div class="social github">
    <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
    <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>
<div class="social skype">
    <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
</div>
<div class="social odnoklassniki">
    <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
</div>
<div class="social pinterest">
    <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div> 
<div class="social linkedin">
    <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
    <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
    <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
    <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
    <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
    <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>

بالنسبة لأولئك الذين لا يجيدون لغة HTML ، سأخبرك أن رمز زر شبكة اجتماعية واحد يتكون من ثلاثة أسطر. تبدأ بـ div< class ... وتنتهي <div>
تحتوي فئة علامة div المفتوحة على أسماء الشبكات الاجتماعية باللغة الإنجليزية. يمكن حذف الأزرار غير الضرورية ، ويمكن فرز الأزرار الضرورية بالترتيب الذي يناسبك.

آمل أن تكتشف ذلك بإدخال كود HTML للأزرار.

ارتباط بالشبكة الاجتماعية
الآن ، لإدراج رابط إلى ملفك الشخصي أو قناتك أو مجموعتك ، تحتاج إلى إدراج ارتباط إلى شبكتك الاجتماعية في سمة href # بدلاً من رمز. احرص على عدم إزالة الاقتباس المزدوج قبل الرابط وفي نهايته.

تأكد أيضًا من إضافة بعض CSS لجعل الأزرار تعمل كما في المثال الخاص بي.


css ثانيا:كود

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a {
    text-align: center;
    width: 48px;
    height: 48px;
    float: left;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius: 24px;
    margin: 0 10px 10px 0;
    padding: 6px;
    color: #000;
}
.github a:hover {background: #191919; color: #fff;}
.youtube a:hover {background: #c4302b; color: #fff;}
.google-pluse a:hover {background: #DD4B39; color: #fff;}
.twitter a:hover {background: #00acee; color: #fff;}
.instagram a:hover {background: #3f729b; color: #fff;}
.facebook a:hover {background: #3b5998; color: #fff;}
.skype a:hover {background: #00aff0; color: #fff;}
.vk a:hover {background: #5d84ae; color: #fff;}
.odnoklassniki a:hover {background: #f93; color: #fff;}
.pinterest a:hover {background: #c8232c; color: #fff;}
.linkedin a:hover {background: #0e76a8; color: #fff;}
.telegram a:hover {background: #249bd7; color: #fff;}
.tumblr a:hover {background: #34526f; color: #fff;}
.windows a:hover {background: #125acd; color: #fff;}
.whatsapp a:hover {background: #50b154; color: #fff;}
.weibo a:hover {background: #d52b2b; color: #fff;}
.dropbox a:hover {background: #1087dd; color: #fff;}

السطر الأول في هذا css هو توصيل خط الأيقونة FontAwesome 4.7.0 عبرimport. إذا كان FontAwesome متصلاً بالفعل بموقعك ، فقم بإزالة هذا الخط.

تتم إضافة CSS للأزرار إلى ملف CSS لموضوعك أو قالبك لموقعك. مكان إدخال رمز CSS ليس مهمًا. يمكنك لصق الشفرة في الجزء السفلي من ملف css في سطر جديد.

بدءًا من السطر 15 ، توجد أنماط للأزرار. يمكنك حذف الشبكات الاجتماعية غير الضرورية.

على سبيل المثال:
.github a:hover {background: #191919; color: #fff


مجموعة من الأزرار المربعة



ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.


أيضًا ، إذا كنت لا تحب الأزرار الدائرية ، فسأقترح مجموعة متنوعة من الأزرار المربعة:
لاستخدام الأزرار المربعة ، تحتاج إلى كل شيء مثل الأزرار الدائرية ، فقط في CSS استبدل القيمة في السطر10 وبدلاً من:
    border-radius: 24px;
تغيير إلى:
  border-radius: 10px;

أتمنى أن تستمتع بنسختي وتصميم أزرار الشبكات الاجتماعية. حسنًا ، إذا واجهت أي صعوبات ، فيمكنك طرح أسئلتك أدناه في التعليقات.

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,100,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.
ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.
أصبحت الشبكات الاجتماعية جزءًا لا يتجزأ من الإنترنت الحديث. بفضل وظائفهم الواضحة ، قاموا بإغراء المستخدمين بشكل كبير إلى الإدمان.
https://1.bp.blogspot.com/-gysPSKSCI_4/X8IVjR30otI/AAAAAAAATVY/lOtqjKJXqvwhx4MqUDNwRviA3eUpniehQCLcBGAsYHQ/s16000/%25D8%25A7%25D8%25B2%25D8%25B1%25D8%25A7%25D8%25B1%2B%25D9%2588%25D8%25B3%25D8%25A7%25D8%25A6%25D9%2584%2B%25D8%25A7%25D9%2584%25D8%25AA%25D9%2588%25D8%25A7%25D8%25B5%25D9%2584%2B%25D8%25A7%25D9%2584%25D8%25A7%25D8%25AC%25D8%25AA%25D9%2585%25D8%25A7%25D8%25B9%25D9%258A%25D8%25A9%2B%25D8%25A7%25D9%2584%25D9%2585%25D8%25B3%25D8%25AA%25D8%25AF%25D9%258A%25D8%25B1%25D8%25A9%2B%25D9%2588%25D8%25A7%25D9%2584%25D9%2585%25D8%25B1%25D8%25A8%25D8%25B9%25D8%25A9..png
https://1.bp.blogspot.com/-gysPSKSCI_4/X8IVjR30otI/AAAAAAAATVY/lOtqjKJXqvwhx4MqUDNwRviA3eUpniehQCLcBGAsYHQ/s72-c/%25D8%25A7%25D8%25B2%25D8%25B1%25D8%25A7%25D8%25B1%2B%25D9%2588%25D8%25B3%25D8%25A7%25D8%25A6%25D9%2584%2B%25D8%25A7%25D9%2584%25D8%25AA%25D9%2588%25D8%25A7%25D8%25B5%25D9%2584%2B%25D8%25A7%25D9%2584%25D8%25A7%25D8%25AC%25D8%25AA%25D9%2585%25D8%25A7%25D8%25B9%25D9%258A%25D8%25A9%2B%25D8%25A7%25D9%2584%25D9%2585%25D8%25B3%25D8%25AA%25D8%25AF%25D9%258A%25D8%25B1%25D8%25A9%2B%25D9%2588%25D8%25A7%25D9%2584%25D9%2585%25D8%25B1%25D8%25A8%25D8%25B9%25D8%25A9..png
Wesam
https://www.wesamdev.com/2020/11/blog-post_28.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2020/11/blog-post_28.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content