إضافة بطاقة من نحن إلى مدونة بلوجر v2

سلام عليكم ورحمة الله وبركاته اصدقائى
 وبعد معكم محمد نجيري مدون في مدونة ماتريال ويب خاصة ب البرمجة و التصاميم الجاهزة

 اليوم وفي هذا مقال اقدم لك إضافة مميزة لمدونتك وهي بطاقة (من نحن) او عن المدونة او تعريف بالمدونة تسميات تختلف لكن الغاية واحدة
بطبعة حال سبق و نشرت تدوينة تحت اسم بطاقة تعريف بالمدونة (إضافات بلوجر)

يمكن القول انها النسخة الاولى لهذه إضافة وكذلك لا تأتير على سرعة المدونة و تتوفر على عنوان و الوصف قصير لمدونة و لوجو خاص بالمدونة تم روابطك خاصة بمواقع تواصل إجتماعي من فيسبوك و تويتر و أنستجرام و كدلك قناتك على يوتيوب. يمكنك معاينة طبعا أسفله

معاينة

طريقة إضافة بطاقة من نحن إلى مدونة بلوجر

طريقة إضافة سهلة جدا كل ما عليك هو تطبيق مراحل التالية:

1. إدهاب إلى المدونة
2. ثم التخطيط
3. إضافةhtml/javascript
4. ضع كود التالي بداخله

<style>


.img-circle {
    border: 3px solid white;
    border-radius: 50%;
    position: relative;
}

.najiri-cov {
    background:#2d213f;
    background-size: cover;
    width: 100%;
    padding: 15px;
    border-radius: 10px 10px 0px 0px;
    position: relative;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.najiri-cov img {
    display: block;
    width: 80px;
    height: 80px;
    margin: auto;
    bottom: -5px;
}

.About {
    background: #fff;
    color:#2d213f;
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    position: relative;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.end {
    text-align: center;
    margin-top: 10px;
}

p {
    font-size: 20px;
}
.About ul{text-align: left;}
.About ul li {float: none !important;display: inline-block !important;margin-top: 8px;}
.About ul li a i{
    display: block;
    color: #2d213f;
    background: #ffffff;
    width: 37px;
    text-align: center;
    transition: 0.3s;
    height: 37px;
    font-size: 16px !important;
    line-height: 37px !important;
    border-radius: 4px;
    margin-right: 6px;
    transition: all 1s;}
.About ul li a i:hover{background: #ff0;}
</style>
<!-- header start -->
<div class="najiri-cov">
        <img alt="mdwab" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaSdVZWR5v3WVjaeSPJK6RCLNFWYQGn-3pZxWRXgRV4H2uZUMxudrYy4NgsSgRU_Z_-gXUlXLiBuInEKUCqR7Q9scKGkJ5TmCWBichWHz6JWxGnr6m4bLovH8vl4D4lu607KDoVyWVJE/s1600/20181127_224822.png">    

</div>
<!-- header end -->

<!-- About Me section start -->
<div class="About">
  <h2>
    <span>ماتريال ويب | MDW
</span>
  </h2>
  <p>
  
ماتريال ويب | MDW :
 هي مدونة البرمجيات (html و css و js و php و Android...) تصاميم (material design و boostrap و mdl ...) ماتريال ديزاين كل ما يخص المواقع (إضافات و تعديلات و سيو.... ) و المدونات و وكذلك تطبيقات الهواتف أندرويد (تصميم و دردشة و ألعاب ...)    
  </p>

  <p class="end">
    

<ul>
        <li><a href="https://www.youtube.com/UCNy69FOCdPYdrSAfACqJahA"><i class="fa fa-youtube"></i></a></li>
        <li><a href="http://www.instagram.com/mnajiri"><i class="fa fa-instagram"></i></a></li>
        <li><a href="http://www.facebook.com/mnajiri"><i class="fa fa-facebook"></i></a></li>
        <li><a href="http://www.twitter.com/mnajiri"><i class="fa fa-twitter"></i></a></li>
        </ul>

  
  </p>

</div>

إضافة صفحة إتصل بنا بلوجر ماتريال ديزاين

لا تنسى تعديل على كود بتغير الروابط تواصل إجتماعي و تغير الصورة الى صورة خاصة بك

تغير الروابط تواصل إجتماعي

غير الروابط محدد بأحمر*

<ul>
 <li><a href="https://www.youtube.com/UCNy69FOCdPYdrSAfACqJahA"><i class="fa fa-youtube"></i></a></li>
 <li><a href="https://www.instagram.com/mnajiri"><i class="fa fa-instagram"></i></a></li>
 <li><a href="https://www.facebook.com/mnajiri"><i class="fa fa-facebook"></i></a></li>
 <li><a href="https://plus.google.com/u/0/mohamednajiri"><i class="fa fa-google-plus"></i></a></li>
 <li><a href="https://www.twitter.com/mnajiri"><i class="fa fa-twitter"></i></a></li>
</ul>

تغيير رابط الصورة المدونة

غير رابط محدد بأحمر*

        <img alt="mdwab" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaSdVZWR5v3WVjaeSPJK6RCLNFWYQGn-3pZxWRXgRV4H2uZUMxudrYy4NgsSgRU_Z_-gXUlXLiBuInEKUCqR7Q9scKGkJ5TmCWBichWHz6JWxGnr6m4bLovH8vl4D4lu607KDoVyWVJE/s1600/20181127_224822.png">    

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

ادا لم يكون موجود ضعه فوق <body/>

إدا كانت لديك أي إستفسارات أو إضافات يمكنك تعليق أسفل هدا المقال

تغير شكل شريط تمرير في بلوجر (css)

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام