بعد أن أصبحت مواقع التواصل الإجتماعي هي بالفعل من أهم مصادر الزيارات لموقعك بل ولشهرة وإنتشار محتواك أو منتجك أو حتى الخدمة الخاصة بك لذا وجب عليك عمل حساب لموقعك على جميع مواقع التواصل الإجتماعي حتى المواقع التي لن تركز عليها كثيراً ولكنها ستكون كفيلة بإنتشار موقعك والبراند الخاص بك وعليه وهنا في هذه المقالة سنشرح عمل ويدجيت أو إضافة مواقع التواصل الإجتماعي بشكل أنيق حديث مميز للغاية وبكود واحد فقط يمكنك وضع الكود بأي مكان بموقعك تحت المقالات أو بالقائمة الجانبية وحتى بالفوتر أو أسفل الموقع وبحجمين ويمكنك تغيير الحجم الكبير بأي مقاس يناسبك وسنقوم بشرح كل ذلك وأكثر بكامل المقالة.
الإضافة عبارة عن أهم 10 مواقع تواصل إجتماعي قد تكون ستتعامل معها ويمكنك حذف منها ما لا تريده والإبقاء على مواقع التواصل الإجتماعي التي لك بها حسابات بالفعل وتريد وضعها بشكل أنيق بموقعك والإضافة متجاوبة وتنظم نفسها بأي مكان بالموقع سواء بالقائمة الجانبية لتظهر على شكل مربع كبير به أزرار التواصل الإجتماعي أو أسفل الموضوع لتظهر بشكل مستطيل طويل أسفل الموضوع ومتجاوبة مع الموبايل على نفس التنسيق.
وقد يسأل البعض عن
ما هي أفضل إضافة مواقع التواصل الإجتماعي للمواقع؟
أفضل كود مواقع التواصل الإجتماعي للموقع؟
أفضل كود متجاوب حديث لمواقع التواصل الإجتماعي للمواقع؟
بالطبع وفي وجهة نظري تلك الإضافة مميزة جداً وستلبي إحتياجاتك وستحظى بإعجابك لما فيها من أناقة وروعة في إسلوب العرض وشكل التفاعل كذلك.
والأن علينا من البداية تحديد الأكواد التي معنا وميزة كل كود فيهم عن الأخر والتعديلات المطلوبة وكيف تتم بنجاح على الكود وعلينا أن نقسم الإضافة إلى 3 أكواد.
الكود الأول وهو الكود الإفتراضي بالأيقونات الخاصة بمواقع التواصل الإجتماعي بالحجم الكبير بخلفية بيضاء أي تتناسب مع لون الصفحة أو الموقع على الأقل ستتناسب بالخلفية البيضاء مع معظم ألوان المواقع.
الكود الثاني وهو كود مواقع التواصل الإجتماعي بالحجم الصغير وهو يناسب الفوتر أو أسفل الموقع كذلك قد يعجب البعض كون الأيقونات تظهر صغيرة ولكن بنفس الشكل والمؤثرات تماماً ويمكنك وضعها بأي مكان بالموقع بكود واحد فقط لتعمل معك كما تريد.
الكود الثالث وهو نفس الكود الأول الكبير ولكن ملون ويمكنك تلوين الخلفية للإضافة للشكل الذي يتناسب مع ألوان موقعك وسوف أقوم بشرح طريقة تعديل اللون وكنصيحة عليك أن تختار كود لون مناسب للون موقعك وكذلك لشكل وألوان أيقونات مواقع التواصل الإجتماعي حتى تزيد من جمال وروعة وتنسيق الموقع كإضافة تدفع الموقع للأمام ليظهر بشكل أفضل.
ولمعاينة الكود الإفتراضي تجده أسفل كلمة معاينة لتتعرف على الإضافة وتتعامل معها وتتأكد من جودة وشكل وطريقة المؤثرات وهل هي مناسبة لموقعك أم لا.
معاينة
وكما ترى بالمعاينة الإضافة ممتازة بالفعل والكود واحد فقط ومناسبة لكل أنواع المواقع ويمكن تركيبها بأي مكان للموقع فهي إضافة متجاوبة وتعيد ترتيب نفسها على حسب المكان والمساحة الموضوعة به بدون أي تدخل منك إطلاقاً.
الكود الأول
<div dir="rtl" id="divsocibox1a">
<a href="https://www.facebook.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#3b5998" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg></a>
<a href="https://www.youtube.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#cd201f" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg></a>
<a href="https://www.twitter.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#55acee" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></a>
<a href="https://www.whatsapp.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#43d854" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
<a href="https://www.linkedin.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#0077b5" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></a>
<a href="https://www.telegram.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#229ED9" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg></a>
<a href="https://www.pinterest.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#bd081c" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg></a>
<a href="https://www.tiktok.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a2" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#000" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></svg></a>
<a href="https://www.instagram.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="i0a2" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#000" viewBox="-8.093805 -13.489675 70.14631 80.93805"><defs><linearGradient id="a" y2="1.7526" x2="1.7537" y1="-5.8041" x1="-5.8093"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient id="b" y2=".9175" x2=".9175" y1=".0091" x1=".009"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient id="c" y2="1.3128" x2="1.3126" y1="-.456" x1="-.4558"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(1.00041 .99959)" y2="11.412" x2="11.3667" y1="-37.5455" x1="-37.6312" id="d" xlink:href="#a"/><linearGradient gradientUnits="userSpaceOnUse" y2="49.554" x2="49.5047" y1=".536" x1=".4867" id="e" xlink:href="#b"/><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(.99988 1.00012)" y2="36.4816" x2="36.4315" y1="-12.5305" x1="-12.5688" id="f" xlink:href="#c"/></defs><g fill="none"><path d="M6.4867 3.292c0 1.7933-1.4534 3.2413-3.24 3.2413C1.46 6.5333.0053 5.0853.0053 3.292.0053 1.5053 1.46.0573 3.2467.0573c1.7866 0 3.24 1.448 3.24 3.2347" fill="url(#d)" transform="matrix(1 0 0 -1 38.1333 15.8707)"/><path d="M48.9373 16.124c-.12-2.6307-.56-4.06-.9253-5.0093-.4907-1.2587-1.076-2.1587-2.0253-3.1027-.9387-.944-1.8387-1.528-3.0974-2.0133-.9493-.3707-2.384-.812-5.0146-.9374-2.844-.1253-3.6867-.152-10.8987-.152-7.2053 0-8.0547.0267-10.8987.152-2.6306.1254-4.0586.5667-5.008.9374C9.804 6.484 8.9107 7.068 7.9667 8.012c-.9507.944-1.536 1.844-2.02 3.1027-.3654.9493-.812 2.3786-.9254 5.0093-.1386 2.844-.164 3.7-.164 10.8973 0 7.212.0254 8.0614.164 10.9054.1134 2.6306.56 4.0586.9254 5.016.484 1.2573 1.0693 2.152 2.02 3.096.944.9426 1.8373 1.528 3.1026 2.0186.9494.372 2.3774.8067 5.008.932 2.844.1254 3.6934.1574 10.8987.1574 7.212 0 8.0547-.032 10.8987-.1574 2.6306-.1253 4.0653-.56 5.0146-.932 1.2587-.4906 2.1587-1.076 3.0974-2.0186.9493-.944 1.5346-1.8387 2.0253-3.096.3653-.9574.8053-2.3854.9253-5.016.132-2.844.164-3.6934.164-10.9054 0-7.1973-.032-8.0533-.164-10.8973zm4.8574 22.024c-.132 2.8747-.5854 4.8387-1.2587 6.5493-.6853 1.7747-1.604 3.2787-3.108 4.7827-1.4973 1.4973-3.0013 2.416-4.776 3.1093-1.7173.6667-3.6747 1.1254-6.5507 1.2507-2.876.1387-3.7946.164-11.1253.164-7.324 0-8.2493-.0253-11.1253-.164-2.8694-.1253-4.8254-.584-6.5507-1.2507-1.768-.6933-3.272-1.612-4.7693-3.1093-1.504-1.504-2.4227-3.008-3.1147-4.7827C.7493 42.9867.296 41.0227.1573 38.148.032 35.272 0 34.352 0 27.0213c0-7.324.032-8.2426.1573-11.1186.1387-2.8694.592-4.832 1.2587-6.5507.692-1.768 1.6107-3.2787 3.1147-4.776C6.028 3.0787 7.532 2.1533 9.3 1.4613c1.7253-.6666 3.6813-1.12 6.5507-1.252 2.876-.132 3.8013-.164 11.1253-.164 7.3307 0 8.2493.032 11.1253.164 2.876.132 4.8334.5854 6.5507 1.252 1.7747.692 3.2787 1.6174 4.776 3.1147 1.504 1.4973 2.4227 3.008 3.108 4.776.6733 1.7187 1.1267 3.6813 1.2587 6.5507.132 2.876.164 3.7946.164 11.1186 0 7.3307-.032 8.2507-.164 11.1267z" fill="url(#e)" transform="matrix(1 0 0 -1 0 54.004)"/><path d="M13.9093 4.9693c-4.964 0-8.992 4.0214-8.992 8.9854 0 4.972 4.028 8.9986 8.992 8.9986 4.9654 0 8.9987-4.0266 8.9987-8.9986 0-4.964-4.0333-8.9854-8.9987-8.9854zm0 22.848C6.2573 27.8173.06 21.6067.06 13.9547.06 6.3093 6.2573.1053 13.9093.1053c7.652 0 13.856 6.204 13.856 13.8494 0 7.652-6.204 13.8626-13.856 13.8626z" fill="url(#f)" transform="matrix(1 0 0 -1 13.0667 40.9373)"/></g></svg></a>
<a href="https://vk.com/" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#4C75A3" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M31.4907 63.4907C0 94.9813 0 145.671 0 247.04V264.96C0 366.329 0 417.019 31.4907 448.509C62.9813 480 113.671 480 215.04 480H232.96C334.329 480 385.019 480 416.509 448.509C448 417.019 448 366.329 448 264.96V247.04C448 145.671 448 94.9813 416.509 63.4907C385.019 32 334.329 32 232.96 32H215.04C113.671 32 62.9813 32 31.4907 63.4907ZM75.6 168.267H126.747C128.427 253.76 166.133 289.973 196 297.44V168.267H244.16V242C273.653 238.827 304.64 205.227 315.093 168.267H363.253C359.313 187.435 351.46 205.583 340.186 221.579C328.913 237.574 314.461 251.071 297.733 261.227C316.41 270.499 332.907 283.63 346.132 299.751C359.357 315.873 369.01 334.618 374.453 354.747H321.44C316.555 337.262 306.614 321.61 292.865 309.754C279.117 297.899 262.173 290.368 244.16 288.107V354.747H238.373C136.267 354.747 78.0267 284.747 75.6 168.267Z"/></svg></a>
</div>
<style>
@charset "utf-8";
#i0a1:hover{
box-shadow: 4px 4px 7px #ecebeb , -4px -4px 7px #ecebeb ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0a1:active{
box-shadow: 4px 4px 7px #faeeee , -4px -4px 7px #faeeee ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0a2:hover{
box-shadow: 4px 4px 7px #ecebeb , -4px -4px 7px #ecebeb ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0a2:active{
box-shadow: 4px 4px 7px #faeeee , -4px -4px 7px #faeeee ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#divsocibox1a{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background:#fff;
margin: 0 auto;
padding: 8px;
height: auto;
width: auto;
border-radius: 7px;
border: 1px solid #ecebeb;
}
@media(max-width:800px){
#divsocibox1a{
flex: 100%;
}
}
</style>
وكما ترى الكود الأول وهو الكود الإفتراضي ويمكنك وضعه بأي مكان كأي كود أو إضافة كاملة كود واحد فقط ليعمل معك كما تريد ولتعديل روابط مواقع التواصل الإجتماعي الخاصة بك عليك البحث عن الكلمات التالية بالكود
https://www.facebook.com
لتضع بدالها رابط صفحتك أو الجروب الخاص بك على الفيسبوك أو حتى رابط حسابك بالفيسبوك وكمثال بالنسبة لي أضع رابط حسابي الخاص بالفيسبوك والذي هو على هذا الشكل
https://www.facebook.com/mo.nabil.7146/
عليك أن تكون دقيق جداً ولا تغير أي رمز أو حرف بالكود سوى الرابط فقط بالشكل الموضح والذي تجده بين علامتين مثل
"https://www.facebook.com"
عليك فقط تبديل الرابط برابط حسابك بمواقع التواصل الإجتماعي دون تغيير أو حذف العلامتين " حتى لا يخرب الكود ولا يعمل
وعليك عمل نفس الأمر ببقية روابط مواقع التواصل الإجتماعي الخاصة بك وهي بالظبط كالأتي لتبحث عنها وستجدها
https://www.youtube.com
https://www.twitter.com
https://www.whatsapp.com
https://www.linkedin.com
https://www.telegram.com
https://www.pinterest.com
https://www.tiktok.com
https://www.instagram.com
https://vk.com/
وستجدها جميعاً بالكود ويمكنك تبديلها برابط حسابك بمواقع التواصل الإجتماعي
والأن إن كنت تريد تصغير حجم الأيقونات أو حتى أن تكبرها قليلاً الأمر يحتاج لتركيز كبير ولكن إن فهمت الطريقة بالشكل الصحيح ستجدها سهلة للغاية
أولاً عليك البحث عن الجملة
width="50" height="50"
ستجدها موجودة بالكود 10 مرات وهي عدد الأيقونات وعليك تغيير الحجم كاملاً لكل الأيقونات بنفس الرقم للجميع
وإن إفترضنا أننا نريد تكبير الحجم الأمر بسيط فقط نقوم بتغيير الرقم 50 للطول والعرض height و width وليكن للرقم 100 للطول والعرض ويجب أن يكون نفس الرقم للطول والعرض حتى لا تفسد شكل الأيقونة وهذا مثال فقط لترى الفرق بشكل واضح في حجم الأيقونة سترى الأيقونة قد كبر حجمها الضعف مثل
مثال
وبنفس الطريقة يمكنك تصغير حجم الأيقونة أو تكبيرها لأي حجم تتخيله بدون ظهور ظاهرة البكسل وخلافه فهو كود فيكتور يتمدد معك لأي حجم دون أن يفسد منك
وأما في حالة أردنا حذف أيكونة أو أكثر من الإضافة الأمر بسيط فقط علينا البحث عن الجملة
<a href="https://
ونظللها ببقية السطر البرمجي حتى نصل لنهاية الكود على الشكل
</svg></a>
لنحذف كامل الكود والسطر البرمجي من البداية الموضحة أعلاه وحتى نهاية الكود وعلى سبيل المثال إن أردنا حذف أيكونة موقع VK من الإضافة نقوم بالبحث كما وضحنا لنحذف كامل السطر الذي يكون على الشكل
<a href="https://vk.com/" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0a1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#4C75A3" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M31.4907 63.4907C0 94.9813 0 145.671 0 247.04V264.96C0 366.329 0 417.019 31.4907 448.509C62.9813 480 113.671 480 215.04 480H232.96C334.329 480 385.019 480 416.509 448.509C448 417.019 448 366.329 448 264.96V247.04C448 145.671 448 94.9813 416.509 63.4907C385.019 32 334.329 32 232.96 32H215.04C113.671 32 62.9813 32 31.4907 63.4907ZM75.6 168.267H126.747C128.427 253.76 166.133 289.973 196 297.44V168.267H244.16V242C273.653 238.827 304.64 205.227 315.093 168.267H363.253C359.313 187.435 351.46 205.583 340.186 221.579C328.913 237.574 314.461 251.071 297.733 261.227C316.41 270.499 332.907 283.63 346.132 299.751C359.357 315.873 369.01 334.618 374.453 354.747H321.44C316.555 337.262 306.614 321.61 292.865 309.754C279.117 297.899 262.173 290.368 244.16 288.107V354.747H238.373C136.267 354.747 78.0267 284.747 75.6 168.267Z"/></svg></a>
بعدها نضع الكود بالموقع نجد أيكونة موقع VK قد تم حذفها من الإضافة بدون أية مشكلات إطلاقاً
يمكنك التعديل على الإضافة والكود كما تريد وكما يحلو لك فقط خذ نسخة إحتياطية من موقعك قبل التعديل عليه حتى تستطيع الرجوع لنسخة ما قبل التعديل إن خرب منك الكود أو فشل التعديل لأي سبب من الأسباب مثل عدم التركيز والتعديل بالشكل الغير صحيح.
الكود الثاني
<div dir="rtl" id="divsocibox1b">
<a href="https://www.facebook.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#3b5998" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg></a>
<a href="https://www.youtube.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#cd201f" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg></a>
<a href="https://www.twitter.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#55acee" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></a>
<a href="https://www.whatsapp.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#43d854" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
<a href="https://www.linkedin.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#0077b5" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></a>
<a href="https://www.telegram.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#229ED9" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg></a>
<a href="https://www.pinterest.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#bd081c" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg></a>
<a href="https://www.tiktok.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b2" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#000" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></svg></a>
<a href="https://www.instagram.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="i0b2" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#000" viewBox="-8.093805 -13.489675 70.14631 80.93805"><defs><linearGradient id="a" y2="1.7526" x2="1.7537" y1="-5.8041" x1="-5.8093"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient id="b" y2=".9175" x2=".9175" y1=".0091" x1=".009"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient id="c" y2="1.3128" x2="1.3126" y1="-.456" x1="-.4558"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(1.00041 .99959)" y2="11.412" x2="11.3667" y1="-37.5455" x1="-37.6312" id="d" xlink:href="#a"/><linearGradient gradientUnits="userSpaceOnUse" y2="49.554" x2="49.5047" y1=".536" x1=".4867" id="e" xlink:href="#b"/><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(.99988 1.00012)" y2="36.4816" x2="36.4315" y1="-12.5305" x1="-12.5688" id="f" xlink:href="#c"/></defs><g fill="none"><path d="M6.4867 3.292c0 1.7933-1.4534 3.2413-3.24 3.2413C1.46 6.5333.0053 5.0853.0053 3.292.0053 1.5053 1.46.0573 3.2467.0573c1.7866 0 3.24 1.448 3.24 3.2347" fill="url(#d)" transform="matrix(1 0 0 -1 38.1333 15.8707)"/><path d="M48.9373 16.124c-.12-2.6307-.56-4.06-.9253-5.0093-.4907-1.2587-1.076-2.1587-2.0253-3.1027-.9387-.944-1.8387-1.528-3.0974-2.0133-.9493-.3707-2.384-.812-5.0146-.9374-2.844-.1253-3.6867-.152-10.8987-.152-7.2053 0-8.0547.0267-10.8987.152-2.6306.1254-4.0586.5667-5.008.9374C9.804 6.484 8.9107 7.068 7.9667 8.012c-.9507.944-1.536 1.844-2.02 3.1027-.3654.9493-.812 2.3786-.9254 5.0093-.1386 2.844-.164 3.7-.164 10.8973 0 7.212.0254 8.0614.164 10.9054.1134 2.6306.56 4.0586.9254 5.016.484 1.2573 1.0693 2.152 2.02 3.096.944.9426 1.8373 1.528 3.1026 2.0186.9494.372 2.3774.8067 5.008.932 2.844.1254 3.6934.1574 10.8987.1574 7.212 0 8.0547-.032 10.8987-.1574 2.6306-.1253 4.0653-.56 5.0146-.932 1.2587-.4906 2.1587-1.076 3.0974-2.0186.9493-.944 1.5346-1.8387 2.0253-3.096.3653-.9574.8053-2.3854.9253-5.016.132-2.844.164-3.6934.164-10.9054 0-7.1973-.032-8.0533-.164-10.8973zm4.8574 22.024c-.132 2.8747-.5854 4.8387-1.2587 6.5493-.6853 1.7747-1.604 3.2787-3.108 4.7827-1.4973 1.4973-3.0013 2.416-4.776 3.1093-1.7173.6667-3.6747 1.1254-6.5507 1.2507-2.876.1387-3.7946.164-11.1253.164-7.324 0-8.2493-.0253-11.1253-.164-2.8694-.1253-4.8254-.584-6.5507-1.2507-1.768-.6933-3.272-1.612-4.7693-3.1093-1.504-1.504-2.4227-3.008-3.1147-4.7827C.7493 42.9867.296 41.0227.1573 38.148.032 35.272 0 34.352 0 27.0213c0-7.324.032-8.2426.1573-11.1186.1387-2.8694.592-4.832 1.2587-6.5507.692-1.768 1.6107-3.2787 3.1147-4.776C6.028 3.0787 7.532 2.1533 9.3 1.4613c1.7253-.6666 3.6813-1.12 6.5507-1.252 2.876-.132 3.8013-.164 11.1253-.164 7.3307 0 8.2493.032 11.1253.164 2.876.132 4.8334.5854 6.5507 1.252 1.7747.692 3.2787 1.6174 4.776 3.1147 1.504 1.4973 2.4227 3.008 3.108 4.776.6733 1.7187 1.1267 3.6813 1.2587 6.5507.132 2.876.164 3.7946.164 11.1186 0 7.3307-.032 8.2507-.164 11.1267z" fill="url(#e)" transform="matrix(1 0 0 -1 0 54.004)"/><path d="M13.9093 4.9693c-4.964 0-8.992 4.0214-8.992 8.9854 0 4.972 4.028 8.9986 8.992 8.9986 4.9654 0 8.9987-4.0266 8.9987-8.9986 0-4.964-4.0333-8.9854-8.9987-8.9854zm0 22.848C6.2573 27.8173.06 21.6067.06 13.9547.06 6.3093 6.2573.1053 13.9093.1053c7.652 0 13.856 6.204 13.856 13.8494 0 7.652-6.204 13.8626-13.856 13.8626z" fill="url(#f)" transform="matrix(1 0 0 -1 13.0667 40.9373)"/></g></svg></a>
<a href="https://vk.com/" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0b1" style=" padding: 7px; margin: 2px;border-radius: 5px;border: 1px solid #dbdada;" width="16" height="16" fill="#4C75A3" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M31.4907 63.4907C0 94.9813 0 145.671 0 247.04V264.96C0 366.329 0 417.019 31.4907 448.509C62.9813 480 113.671 480 215.04 480H232.96C334.329 480 385.019 480 416.509 448.509C448 417.019 448 366.329 448 264.96V247.04C448 145.671 448 94.9813 416.509 63.4907C385.019 32 334.329 32 232.96 32H215.04C113.671 32 62.9813 32 31.4907 63.4907ZM75.6 168.267H126.747C128.427 253.76 166.133 289.973 196 297.44V168.267H244.16V242C273.653 238.827 304.64 205.227 315.093 168.267H363.253C359.313 187.435 351.46 205.583 340.186 221.579C328.913 237.574 314.461 251.071 297.733 261.227C316.41 270.499 332.907 283.63 346.132 299.751C359.357 315.873 369.01 334.618 374.453 354.747H321.44C316.555 337.262 306.614 321.61 292.865 309.754C279.117 297.899 262.173 290.368 244.16 288.107V354.747H238.373C136.267 354.747 78.0267 284.747 75.6 168.267Z"/></svg></a>
</div>
<style>
@charset "utf-8";
#i0b1:hover{
box-shadow: 4px 4px 7px #ecebeb , -4px -4px 7px #ecebeb ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0b1:active{
box-shadow: 4px 4px 7px #faeeee , -4px -4px 7px #faeeee ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0b2:hover{
box-shadow: 4px 4px 7px #ecebeb , -4px -4px 7px #ecebeb ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0b2:active{
box-shadow: 4px 4px 7px #faeeee , -4px -4px 7px #faeeee ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#divsocibox1b{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background:#fff;
margin: 0 auto;
padding: 2px;
height: auto;
width: auto;
border-radius: 7px;
border: 1px solid #ecebeb;
}
@media(max-width:800px){
#divsocibox1b{
flex: 100%;
}
}
</style>
الكود الثاني وهو الخاص بالأيقونات الصغيرة الخاصة بالإضافة ويمكن التعديل عليها من حذف الأيقونات التي لا تريد مثل تماماً ما تم شرحه من قبل بل ويمكنك تعديل الطول والعرض لأكبر من ذلك قليلاً ولكني أرى أن الحجم بالطول والعرض 16 هو الأفضل بالنسبة للحجم الصغير للأيكونات ويمكنك تغييرها كما تريد مثلما تم الشرح بالأعلى.
الأمر بسيط جداً وسهل ويمكنك عمل كل ما تريد من التعديلات فبعد الشرح أظن أن الكود أصبح سهل جداً التعديل عليه والتعامل معه بكل سهولة وبساطة.
الكود الثالث
<div dir="rtl" id="divsocibox1c">
<a href="https://www.facebook.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#3b5998" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg></a>
<a href="https://www.youtube.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#cd201f" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg></a>
<a href="https://www.twitter.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#55acee" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></a>
<a href="https://www.whatsapp.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#43d854" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
<a href="https://www.linkedin.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#0077b5" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></a>
<a href="https://www.telegram.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#229ED9" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg></a>
<a href="https://www.pinterest.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#bd081c" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg></a>
<a href="https://www.tiktok.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c2" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#000" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></svg></a>
<a href="https://www.instagram.com" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="i0c2" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#000" viewBox="-8.093805 -13.489675 70.14631 80.93805"><defs><linearGradient id="a" y2="1.7526" x2="1.7537" y1="-5.8041" x1="-5.8093"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient id="b" y2=".9175" x2=".9175" y1=".0091" x1=".009"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient id="c" y2="1.3128" x2="1.3126" y1="-.456" x1="-.4558"><stop offset="0%" stop-color="#FFD521"/><stop offset="5%" stop-color="#FFD521"/><stop offset="50.1119%" stop-color="#F50000"/><stop offset="95%" stop-color="#B900B4"/><stop offset="95.0079%" stop-color="#B900B4"/><stop offset="100%" stop-color="#B900B4"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(1.00041 .99959)" y2="11.412" x2="11.3667" y1="-37.5455" x1="-37.6312" id="d" xlink:href="#a"/><linearGradient gradientUnits="userSpaceOnUse" y2="49.554" x2="49.5047" y1=".536" x1=".4867" id="e" xlink:href="#b"/><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(.99988 1.00012)" y2="36.4816" x2="36.4315" y1="-12.5305" x1="-12.5688" id="f" xlink:href="#c"/></defs><g fill="none"><path d="M6.4867 3.292c0 1.7933-1.4534 3.2413-3.24 3.2413C1.46 6.5333.0053 5.0853.0053 3.292.0053 1.5053 1.46.0573 3.2467.0573c1.7866 0 3.24 1.448 3.24 3.2347" fill="url(#d)" transform="matrix(1 0 0 -1 38.1333 15.8707)"/><path d="M48.9373 16.124c-.12-2.6307-.56-4.06-.9253-5.0093-.4907-1.2587-1.076-2.1587-2.0253-3.1027-.9387-.944-1.8387-1.528-3.0974-2.0133-.9493-.3707-2.384-.812-5.0146-.9374-2.844-.1253-3.6867-.152-10.8987-.152-7.2053 0-8.0547.0267-10.8987.152-2.6306.1254-4.0586.5667-5.008.9374C9.804 6.484 8.9107 7.068 7.9667 8.012c-.9507.944-1.536 1.844-2.02 3.1027-.3654.9493-.812 2.3786-.9254 5.0093-.1386 2.844-.164 3.7-.164 10.8973 0 7.212.0254 8.0614.164 10.9054.1134 2.6306.56 4.0586.9254 5.016.484 1.2573 1.0693 2.152 2.02 3.096.944.9426 1.8373 1.528 3.1026 2.0186.9494.372 2.3774.8067 5.008.932 2.844.1254 3.6934.1574 10.8987.1574 7.212 0 8.0547-.032 10.8987-.1574 2.6306-.1253 4.0653-.56 5.0146-.932 1.2587-.4906 2.1587-1.076 3.0974-2.0186.9493-.944 1.5346-1.8387 2.0253-3.096.3653-.9574.8053-2.3854.9253-5.016.132-2.844.164-3.6934.164-10.9054 0-7.1973-.032-8.0533-.164-10.8973zm4.8574 22.024c-.132 2.8747-.5854 4.8387-1.2587 6.5493-.6853 1.7747-1.604 3.2787-3.108 4.7827-1.4973 1.4973-3.0013 2.416-4.776 3.1093-1.7173.6667-3.6747 1.1254-6.5507 1.2507-2.876.1387-3.7946.164-11.1253.164-7.324 0-8.2493-.0253-11.1253-.164-2.8694-.1253-4.8254-.584-6.5507-1.2507-1.768-.6933-3.272-1.612-4.7693-3.1093-1.504-1.504-2.4227-3.008-3.1147-4.7827C.7493 42.9867.296 41.0227.1573 38.148.032 35.272 0 34.352 0 27.0213c0-7.324.032-8.2426.1573-11.1186.1387-2.8694.592-4.832 1.2587-6.5507.692-1.768 1.6107-3.2787 3.1147-4.776C6.028 3.0787 7.532 2.1533 9.3 1.4613c1.7253-.6666 3.6813-1.12 6.5507-1.252 2.876-.132 3.8013-.164 11.1253-.164 7.3307 0 8.2493.032 11.1253.164 2.876.132 4.8334.5854 6.5507 1.252 1.7747.692 3.2787 1.6174 4.776 3.1147 1.504 1.4973 2.4227 3.008 3.108 4.776.6733 1.7187 1.1267 3.6813 1.2587 6.5507.132 2.876.164 3.7946.164 11.1186 0 7.3307-.032 8.2507-.164 11.1267z" fill="url(#e)" transform="matrix(1 0 0 -1 0 54.004)"/><path d="M13.9093 4.9693c-4.964 0-8.992 4.0214-8.992 8.9854 0 4.972 4.028 8.9986 8.992 8.9986 4.9654 0 8.9987-4.0266 8.9987-8.9986 0-4.964-4.0333-8.9854-8.9987-8.9854zm0 22.848C6.2573 27.8173.06 21.6067.06 13.9547.06 6.3093 6.2573.1053 13.9093.1053c7.652 0 13.856 6.204 13.856 13.8494 0 7.652-6.204 13.8626-13.856 13.8626z" fill="url(#f)" transform="matrix(1 0 0 -1 13.0667 40.9373)"/></g></svg></a>
<a href="https://vk.com/" rel="nofollow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="i0c1" style=" padding: 7px; margin: 7px;border-radius: 5px;border: 1px solid #dbdada;" width="50" height="50" fill="#4C75A3" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M31.4907 63.4907C0 94.9813 0 145.671 0 247.04V264.96C0 366.329 0 417.019 31.4907 448.509C62.9813 480 113.671 480 215.04 480H232.96C334.329 480 385.019 480 416.509 448.509C448 417.019 448 366.329 448 264.96V247.04C448 145.671 448 94.9813 416.509 63.4907C385.019 32 334.329 32 232.96 32H215.04C113.671 32 62.9813 32 31.4907 63.4907ZM75.6 168.267H126.747C128.427 253.76 166.133 289.973 196 297.44V168.267H244.16V242C273.653 238.827 304.64 205.227 315.093 168.267H363.253C359.313 187.435 351.46 205.583 340.186 221.579C328.913 237.574 314.461 251.071 297.733 261.227C316.41 270.499 332.907 283.63 346.132 299.751C359.357 315.873 369.01 334.618 374.453 354.747H321.44C316.555 337.262 306.614 321.61 292.865 309.754C279.117 297.899 262.173 290.368 244.16 288.107V354.747H238.373C136.267 354.747 78.0267 284.747 75.6 168.267Z"/></svg></a>
</div>
<style>
@charset "utf-8";
#i0c1 , #i0c2{
background: #fff;
}
#i0c1:hover{
box-shadow: 4px 4px 7px #ecebeb , -4px -4px 7px #ecebeb ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0c1:active{
box-shadow: 4px 4px 7px #faeeee , -4px -4px 7px #faeeee ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0c2:hover{
box-shadow: 4px 4px 7px #ecebeb , -4px -4px 7px #ecebeb ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#i0c2:active{
box-shadow: 4px 4px 7px #faeeee , -4px -4px 7px #faeeee ;
transition: ease 0.5s box-shadow , scale 0.3s ease;
scale: 1.1;
}
#divsocibox1c{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background:#cae8fc;
margin: 0 auto;
padding: 8px;
height: auto;
width: auto;
border-radius: 7px;
border: 1px solid #ecebeb;
}
@media(max-width:800px){
#divsocibox1c{
flex: 100%;
}
}
</style>
الكود الثالث وهو الكود الذي له خلفية ملونة وذلك لأنه قد تجد بعض المواقع لا يتناسب معها خلفية بيضاء للإضافة لذلك تم عمل كود ثالث بخلفية ملونة يمكنك من خلالها تغيير لون الخلفية باللون الذي يتناسب مع ألوان موقعك ومع شكل الإضافة وعلى العموم قد تم شرح تغيير روابط مواقع التواصل الإجتماعي وتغيير حجم الأيكونات وسيظل فقط شرح تغيير لون خلفية الإضافة بالكود الثالث وهي كالأتي.
نقوم بالبداية بالبحث عن الجملة
#cae8fc
وهو كود لون ونقوم بتغييره بلون أخر من إختيارنا من موقع إختيار أكواد الألوان الموجود بجوجل فقط أكتب بجوجل "html color picker" بعدها تحدد اللون الذي تريد ثم تأخذ الكود الخاص باللون الذي إخترته وتستبدله بدلاً من الكود السابق ثم تقوم بالحفظ لتجد خلفية الإضافة قد تغير لونها وتم الأمر بنجاح بشرط عدم إضافة أو حذف أكثر مما تم شرحه بالظبط.
وبهذا أعتقد أن كل شيء واضح بالنسبة للتعديلات المهمة التي لابد منها بالإضافة وأنتظر منكم أي تعليق عن أي إستفسار عن أي تعديل يخص الإضافة.
الخلاصة
يجب أن يمتلك موقعك كل أشكال القوة مع الإحتفاظ بجمال الشكل والتنسيق العام وكذلك صحة الكود بدون أية أخطاء ولهذا ستكون الإضافة ممتازة لذلك فهي حديثة رائعة بمؤثرات فريدة من نوعها تؤدي غرضها بالشكل الصحيح مما يجعلها الإضافة الأنسب لكثير جداً من المواقع لتضع بها روابط حسابات مواقع التواصل الإجتماعي لترتقي بموقعك لمستوى أعلى من قبل.
