ماتريال ويب | MDWاغلاق
Created by potrace 1.15, written by Peter Selinger 2001-2017
Asset 3

الأحد، 1 سبتمبر 2019

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

about me css template about me page css about me html css template about me section css about me page template html css about me website css me cssf me caso me cssf tax me case


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

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

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





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


طريقة إضافة سهلة جدا كل ما عليك هو تطبيق مراحل التالية:
  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://3.bp.blogspot.com/-AZYhKLBzATQ/XEYwIERZ1xI/AAAAAAAAEfU/CBp1iwgg3QQ3EiA6_2_Cp_kGF-I5nJzmQCLcBGAs/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://3.bp.blogspot.com/-AZYhKLBzATQ/XEYwIERZ1xI/AAAAAAAAEfU/CBp1iwgg3QQ3EiA6_2_Cp_kGF-I5nJzmQCLcBGAs/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)


تم تحرير هده التدوينة:
الأحد، 1 سبتمبر 2019

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق

● أن يكون التعليق خاص بمحتوى التدوينة
● أن لا تضع أي روابط خارجية
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا
● يمكنك تعليق بإستخدام صور ✋👇

© 2018-2019 ماتريال ويب | MDW | تصميم و تطوير محمد نجيري