ماهو سبب تقرحات الفم

حصريا اضافة تعريف الكاتب من انا في صفحة تابتة للبلوجر

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

ولكي لا اطيل عليكم نبدأ في الشرح

معاينة الاداة 

  اول شيء توجه 

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

 ]]></b:skin>

 واضف الكود التالي فوقه مباشرة

/* oi-web.blogspt.com! */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.6, 0.6);
            transform: scale(0.6, 0.6);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0.0;
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.6, 0.6);
            transform: scale(0.6, 0.6);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0.0;
  }
}
body {
  background-repeat: repeat, no-repeat;
  background-size: auto, 100% 100%;
  background-attachment: fixed;
  color: #ecf0f1;
  font-family: 'Noto Sans Kufi Arabic', sans-serif  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  min-height: 100%;
  overflow-y: scroll;
  width: 100%;
}
h1, h2 {
  font-weight: 300;
  line-height: 1.2;
}
.profile-card {
  height: 305px;
  width: 600px;
  position: relative;
  margin: 4em auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.profile-card header {
  width: 100%;
  height: 100%;
  text-align: center;
  /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, transparent));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}
.profile-card header a {
  position: relative;
}
.profile-card header a:before {
  content: "";
  border: 15px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  height: 90px;
  width: 90px;
  position: absolute;
  left: 0;
  bottom: 3px;
  -webkit-animation: pulsate 1.6s ease-out;
          animation: pulsate 1.6s ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  opacity: 0.0;
  z-index: 99;
}
.profile-card header img {
  position: relative;
  border-radius: 50%;
  height: 90px;
  width: 90px;
  padding: 0;
  margin: 0;
  border: 15px solid transparent;
  margin-top: 12px;
  z-index: 9999;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.profile-card header a:hover img {
  -webkit-transform: scale(1.06, 1.06);
          transform: scale(1.06, 1.06);
}
.profile-card header a:hover:before {
  -webkit-animation: none;
          animation: none;
}
.profile-card header h1 {
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 8px;
}
.profile-card header h2 {
  font-size: 18px;
  margin-top: 0;
  opacity: 0.9;
}
.profile-card .profile-bio {
  position: absolute;
  bottom: 0;
}
.profile-card .profile-bio p {
  margin: 24px;
  text-align: center;
  opacity: 0.9;
}
.profile-card .profile-social-links {
  position: relative;
  background-color: white;
  margin: 0 auto;
  text-align: center;
  padding: 6px 0;
}
.profile-card .profile-social-links li {
  display: inline-block;
  padding: 3px 5px 0;
}
.profile-card .profile-social-links li img {
  height: 28px;
  opacity: 0.8;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.profile-card .profile-social-links li a:hover img {
  opacity: 1;
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}
.profile-card .profile-social-links:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

قم بحفظ القالب

ادخل إلى لوحة تحكم المدونة

انتقل إلى الصفحات

انقر على إنشاء صفحة جديدة

انتقل من وضع تأليف إلى وضع HTML

<!-- oi-web.blogspt.com! -->
<aside class="profile-card">
  <header>
    <!-- here’s the avatar -->
    <a href="https://oi-web.blogspot.com">
      <img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjDU5iZEM_lTYG4s0JPOhFTYmUo6DaoFjAxvr3zGEvLlmHfDfgaQET3ArfATv97owHB1zwzIqw3wGoi5yx3zv6l01I1Wrb6KBbwyzzmViqeKn5Y8xP_vIu0DKrNTwxocU0KeUohBv7fVpZ8capynBRK7dXiLLQ9K7fyksXr8GIlL5o6vLEKVKfnUFtkKPERg0pk7GJnaPI=s0-d">
    </a>
    <!-- the username -->
<h1>يونس ورضاوي</h1>
    <!-- and role or location -->
    <h2>مبرمج ومطور مواقع</h2>
  </header>
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصو.</p>
  </div>
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    <!-- twitter - el clásico  -->
    <li>
      <a href="http://twitter.com/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>
    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://themeforest.net">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
      </a>
    </li>
    <!-- codepen - your codepen profile-->
    <li>
      <a href="#">
        <img src="http://blog.virginmobile.sa/img/icons/png/glyph_share_facebook_96x96_2x.png">
      </a>
    </li>
    <!-- oi-web.blogspt.com -->
  </ul>
</aside>
<!-- oi-web.blogspt.com! -->

 ملاحظة قم بتغيير مايلي
الصورة
الروابط
الكتابة

ولا تنسا دعمنا بتعلق