السبت، 11 يونيو 2016

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

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


Sans%2Btitre

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

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

من لوحة التحكم >> قالب>> تحرير 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/AVvXsEhpmW6fAhnidQloiatcO7j2VJbKq5yRFhCnKFEZFWg5978X9z_luhb7ndo74PNMlfaUt9biW6YaDpUvJbTTgya9uWmRL0XiF-jwmLIzDzOkC1RET5pkjwWHKDJeKbGranYl9jiAbq6Ed_SMPTGbfV55s8eCcMv6cfyHgIcG7EuLYZoQ_k6RXMq7Pxj1TuO20WfkJGr4EWIP=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! -->
 ملاحظة قم بتغيير مايلي 

الصورة
الروابط
الكتابة



إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً