بطاقة تعريف بالمدونة (إضافات بلوجر)

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

معاينة

طريق تركيب بطاقة التعريف بالمدونة

طريقة التركيب سهلة جدا كل ما عليك هو

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

  <style>

  .mdw{
  background: #2d213f;
  color: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 0px #000;
  direction: rtl;
  padding-right: 25px;
  padding-left: 25px;
  transition: all 1s;
  }
  .mdw img{
  width: 100px;
  height: 100px;
  float: right;
  margin-left: 20px;
  background: white;
  border-radius: 100%;
  border: 4px solid #fff;
  transition: all 0.5s;
  }
 .mdw img:hover{background: white;border-radius: 100%;border: 4px solid #ff0;box-shadow:0px 0px 100px 6px #fff;}
 .mdw h1{display: inline;margin-left: 6px;margin-right: 6px;}
 .mdw h2{margin-bottom: 5px;text-align: right;}
 .mdw ul{text-align: left;}
 .mdw ul li {float: none !important;display: inline-block !important;margin-top: 8px;}
 .mdw 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;}
 .mdw ul li a i:hover{background: #ff0;}
 </style>
 
 
 <div class="mdw">
  
  
   <img alt="mdwab" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaSdVZWR5v3WVjaeSPJK6RCLNFWYQGn-3pZxWRXgRV4H2uZUMxudrYy4NgsSgRU_Z_-gXUlXLiBuInEKUCqR7Q9scKGkJ5TmCWBichWHz6JWxGnr6m4bLovH8vl4D4lu607KDoVyWVJE/s1600/20181127_224822.png">    
 <h2>
   ماتريال ويب | MDW
 </h2>
 <p>
   ماتريال ويب | MDW : هي مدونة البرمجيات (html و css و js و php و Android...) تصاميم (material design و boostrap و mdl ...) ماتريال ديزاين كل ما يخص المواقع (إضافات و تعديلات و سيو.... ) و المدونات و وكذلك تطبيقات الهواتف أندرويد (تصميم و دردشة و ألعاب ...)
 
 </p>
 <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="https://plus.google.com/u/0/mohamednajiri"><i class="fa fa-google-plus"></i></a></li>
   <li><a href="http://www.twitter.com/mnajiri"><i class="fa fa-twitter"></i></a></li>
   </ul>
 
 </div>

👋👇

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

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

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

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

ادا لم يكون موجود ضعه فوق <body/>
تم غير الروابط التالية :

<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">    

غير رابط محدد بأحمر*
يمكنك أيضا إضافة تأثير سقوط الثلج إلى مدونتك حيث قد نشارنا هدا المقال سابقا كما يمكنك تضمين صور في تعليقات بلوجر

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

وسلام عليكم ✋

شارك Share Tweet Share Share Share

انقر هنا

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