عروض مركز بلوجر

إضافة كارت تعريفي HTML - CSS

 اضافة خفيفة إن أردت ان تضيف كارت تعريفي خاص بك في مدونتك

الإضافة لا تثقل المدونة بأى شئ ومتجاوبة ويمكن أن تعمل بشكل أفقي أو رأسي

إضافة كارت تعريفي HTML - CSS

كود الإضافة يمكنك ان تضيفه في آداة HTML/JavaScript أو في موضوع او صفحة

أو يمكنك أن تجعله أسفل جميع المواضيع مثلاً اطلع على هذا المقال لتلك النقطة من هنـــا

كود الإضافة

<style>

#mycard{position:relative;background-color:#f8f8f8;padding:15px;display:flex;gap:15px;margin:10px auto;width:fit-content;border-radius:2px;border:2px solid #456fab;}

#mycard img{width:200px!important;height:200px!important;}

#mycard strong{font-size:120%;}

#mycard ul{margin:0;padding:0;list-style:none;display:flex;gap:5px;}

#mycard li{padding:0;margin:0;list-style:none;}

#mycard li a{width:30px;height:30px;line-height:30px;display:block;text-decoration:none;text-align:center;color:#fff;border-radius:2px;transition:all .4s ease;overflow:hidden;} 

#mycard li .fa-facebook {background-color:#38529A}

#mycard li .fa-twitter {background-color:#4DA6E9}

#mycard li .fa-youtube-play {background-color:#F70000}

#mycard li .fa-instagram {background-color:#8D4AC2}

#mycard li a:hover {background-color:#000;}

    

@media screen and (max-width : 600px) {  

  #mycard {flex-direction:column}  

  #mycard img {width: 100% !important;height: auto !important;max-width: 300px !important; margin: 0 auto;} 

  .carinfo {text-align: center;}

  #mycard ul {justify-content: center;}   

}

</style>


<div id="mycard">

 <img alt="عمرو مصطفى" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcaXR1NUUzIDMB8qw_PZ7e9lCHSqRSl4aOVHzrf1A3HCqiJ19Q4EHPdM3utuChIOgyk3yDV_idsotwmQnlpNrm9zbZ2n-lQZyuBuCisCQVST9ZX9WJRwrgHlXK_JoUVcatUfCsi1B_guNMaklz9xrOl1u3aXbYsq53i6gNGO-4jJzNI45AgnRutYQFPw/s1600/amr-mustafa.jpg" />

  

<div class="carinfo">

   <strong>عمرو مصطفى</strong>

   <p>مدون وصانع محتوى , أعمل في تطوير منصة بلوجر من عام 2013 عبر مدونتي كن مدون</p>

    <ul>

     <li><a aria-label="Social Media" class="fa fa-facebook" href="#" target="_blank"></a></li>

     <li><a aria-label="Social Media" class="fa fa-twitter" href="#" target="_blank"></a></li>

     <li><a aria-label="Social Media" class="fa fa-youtube-play" href="#" target="_blank"><i></i></a></li>

     <li><a aria-label="Social Media" class="fa fa-instagram" href="#" target="_blank"></a></li>

    </ul>

</div>

  

</div>

ان أردت الإضافة أن تكون بشكل رأسي قم بإزالة الجزئين المعلمين بالأحمر

عدل الاسم والوصف بإسمك والوصف المناسب لك

باللون الاخضر هو لون الحدود الخارجية

الجزء الأزرق خاص بالأيقونات سنشرحه تالياً

بالنسبة للمواقع الإجتماعية كل سطر يعبر عن موقع اجتماعي هذا شرح تفصيلي لسطر

<li><a aria-label="Social Media" class="fa fa-facebook" href="#"></a></li>

بالأزرق هو معرف الأيقونة يمكنك الحصول على معرفات أيقونات إضافية  من هنـــا

رمز # عدله بالرابط المراد فتحه عند الضغط على الزر

هناك في كل معرف fa كجزء منفصل ثم اسم المعرف نحن نستخدم الإسم وليس fa لعمل لون الأيقونة

ستجد في الكود الأزرق في الكود الأول كيف تم تطبيق اللون على أيقونة facebook كرره واضبطه على أى أيقونة تريد من المكتبة

ويمكنك طبعا حذف سطر ايقونة او اضافة سطر جديد

9تعليقات

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. بارك الله فيك استاذنا الغالي
    دوما قوة وروعة والمميز ♥

    ردحذف
  2. الردود
    1. أخي منير جزيل الشكر لك على استمرارك في دعم ما نقدمه , نقدر لك كثيراً هذا يا غالي , ودي وتقديري

      حذف
  3. شكرا على السرح مبدع دائما

    ردحذف
    الردود
    1. حبيبي الله يحفظك تسلم يا طيب

      حذف
  4. السلام عليكم أستاذي الغالي
    سامحني أكثرت عليك لأني أجد راحتي في موقعك القوي يا مبدع
    ميزة أيقونة موقع threads نجحت في قالب سهل
    https://www.cnmu.info/2021/11/Sahl.html
    لكن نفس الأيقونة لم تظهر في التعريف بالكاتب رغم ان الخطوات كلها صحيحة
    الله يحفظك

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      مرحباً يا غالي لا عليك على الرحب والسعة
      نظام الأيقونات في الكارت ليس مشابه للقالب وان كانوا يعتمدون على نفس الفكرة لكن النظام مختلف الحل ان تجد أيقونة داخل المكتبة تكون مناسبة للموقع وتستخدمها هذه هي المكتبة
      https://www.cnmu.info/p/font-awesome-css-value.html

      حذف
  5. جزاك الله خيرا ايها الجميل

    ردحذف