اضافة profile-cards في السايدبار لمدونات بلوجر

 اضافة profile-cards في السايدبار لمدونات بلوجر

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

لاصحاب مدونات بلوجر  اليكم اضافة بروفايل card اداة بسيطة يمكنك وضعها في السايدبار أو في أي مكان تريده , يمكنك وضع تعريف للكاتب وصورته وتضع ايضا وصف للقالب , الاداة سهلة الاستخدام وليس بها أي أكواد جافا سكربت بمعني أنه لا تؤثر علي سرعة القالب نهائيا لانها مبرمجة علي CSS و HTML فقط , الاضافة من تطويرنا ولكن في الاساس فكرة littlesnippets لحفظ الحقوق لاصحابها . 

شرح وضع اضافة profile-cards في السايدبار لمدونات بلوجر

1. قم بفتح التخطيط 
2. اتجه الي السايدبار (الشريط الجانبي)
3. ثم اضف اداة HTML/ JAVASCRIPT  
4. وضع بها هذا الكود 

<figure class="snip1390">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXAiSMiC7fVCwpdnG5ui9w4m_BhkL6RBo3fiwdx6B55KQZsQIL99yczq7VFExs1y-SrMWxr2myhodaSYshikzY1TPSeG-iv1tNKMNkN-HZJ9bWVZUZuX9Y___TlBX_mObqmO6HW-8LjCd/s800/mrblooger.webp" alt="profile-sample3" class="profile" />
  <figcaption>
    <h2>مستر بلوجر | mr blogger</h2>
    <h4>Founder</h4>
    <blockquote>  الزحف في عالم محركات البحث معناه ان يوجد بوت (BOT) يقوم بزيارة المواقع ويقرأ محتواها وصفحاتها وغيرها لإنشاء إدخالات لفهرس محرك البحث. وأي محرك بحث يحتوي علي هذا البوت ,
اما الفهرسة فهي عملية اضافة مواقع الويب الي محرك البحث جوجل مثلا او أي محرك أخر.</blockquote>
  </figcaption>
</figure>
<style>
figure.snip1390 {
  font-family: flat;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: center;
  font-size: 16px;
  background-color: #0b1926;
  padding: 30px;
  background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1390 *,
figure.snip1390 *:before,
figure.snip1390 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1390 figcaption {
  width: 100%;
}
figure.snip1390 h2,
figure.snip1390 h4,
figure.snip1390 blockquote {
  margin: 0;
}
figure.snip1390 h2,
figure.snip1390 h4 {
  font-weight: 300;
}
figure.snip1390 h2 {
  color: #ffffff;
}
figure.snip1390 h4 {
  color: #a6a6a6;
}
figure.snip1390 blockquote {
  font-size: 1em;
  padding: 45px 20px 40px 50px;
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: inset -1.4px -1.4px 2px rgba(0, 0, 0, 0.3);
  text-align: left;
  position: relative;
font-family: helvetica;
}
figure.snip1390 blockquote:before {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 70px;
  opacity: 0.25;
  font-style: normal;
  top: 0px;
  left: 20px;
}
figure.snip1390 .profile {
  width: 100px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
  border: solid 5px #A6A57A;
}

</style>

قم بتعديل الصورة والوصف والنص بما يناسبك وقم بحفظ الاداة وستعمل معك بنجاح

لمعاينه الاضافه