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

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

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



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

شرح وضع الاضافة 
قم بفتح التخطيط 
اتجه الي السايدبار (الشريط الجانبي)
ثم اضف اداة HTML/ JAVASCRIPT  
وضع بها هذا الكود 
<figure class="snip1390">
  <img src="https://2.bp.blogspot.com/-MimuYZkls-4/XVX4X0C7h3I/AAAAAAAADRk/HnsbDBG4xdkiel4DVtipUHsZF2-1fLPnACK4BGAYYCw/w90-h90-p-k-no-nu/D3JUtwqXQAAub9i%2B-%2BCopy.jpg" alt="profile-sample3" class="profile" />
  <figcaption>
    <h2>Ehab Zayn</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>
مع تعديل الصورة والوصف والنص بما يناسبك وقم بحفظ الاداة وستعمل معك بنجاح
وانتهي موضوع اليوم لاتنسي زيارة قسم السيو وبلوجر لمزيد من الشروحات  اذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات

ارسال تعليق

أحدث أقدم