اضافة معلومات عن الكاتب بشكل جميل

بسم الله الرحمان الرحيم

اما بعد متابعي ومتابعات مدونة حاسوبي Astuce

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

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

بدون اطالة لنشاهد الشكل

معاينة

تركيب الاضافة

اولا توجه الى محرر HTML الخاص بمدونتك وابحث عن الوسم التالي

]]></b:skin>

 واصف تحته مباشرة الكود التالي

.nix_author {
  color: white;
  font-size: 1.875em;
  line-height: 1.2em;
  font-style: normal;
  font-weight: 400;
  margin: 0.625em 0 0.563em 0;
}
.post_footer_nix {
  margin-bottom: 1.250em;
  padding: 1.250em;
  border: 0.000em solid black;
  background-color: #38536e;
  font-family: tahoma;
  color: white;
  font-size: 1.000em;
  text-align: center;
}
.post_footer_nix a,
.post_footer_nix a:link,
.post_footer_nix a:visited {
  color: white;
  text-decoration: none;
}
.post_footer_nix a:hover,
.post_footer_nix a:focus {
  text-decoration: underline;
}
.authorimage_nix img {
 border: 0.4rem solid #db6521;
 margin: 0 1.25rem 1.25rem 0;
 line-height: 0;
 border-radius: 50%;
 width: 150px;
}

تحديد الكل

 ثم ابحث عن الوسم التالي

<div class='post-footer'>

واصف تحته مباشرة الكود التالي

<footer class="post_footer_nix">
<address itemscope="" itemtype="https://schema.org/Person">
<div class="authorimage_nix">
<img src="https://lh3.googleusercontent.com/-ThizlhM6LP0/AAAAAAAAAAI/AAAAAAAAAAA/AeMctjA20_8/s128-c-k/photo.jpg" itemprop="image"></div>
<h4 class="nix_author">
<span itemprop="author">محمد بلخراف</span></h4>
<p itemscope="" itemtype="https://schema.org/PostalAddress">
<span itemprop="addressLocality">سلا, المغرب</span></p>
</address>
<div class="author_nix">
<p>
مدون مغربي احترافي يطمح لاغناء محتوى الويب العربي</p>
</div>
</footer>

تحديد الكل

ثم استبدل النص التالي باسم الكاتب ('محمد بلخراف')

و ('سلا,المغرب') بمدينة ودولة الكاتب

و('مدون مغربي احترافي يطمح لاغناء محتوى الويب العربي') بنبذة صغيرة عن الكاتب

واستبدل الرابط التالي ('https://lh3.googleusercontent.com/-ThizlhM6LP0/AAAAAAAAAAI/AAAAAAAAAAA/AeMctjA20_8/s128-c-k/photo.jpg') برابط صورة الكاتب
ثم احفظ القالب ومبروك عليك الاضافة 

لا تنسى تشجيعنا بتعليقك للعطاء اكثر

• غرّد
• شارك
• شارك
• شارك
• شارك