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

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

اسهل طريقة إضافة تعريف كاتب الموضوع في مدونة بلوجر

السلام عليكم ورحمة الله وبركاته ومغفرته ، احبتي متابعي مدونة هشام هاشم للمعلوميات والتقنية ، اليوم في قسم دروس بلوجر سوف نشرح لكم كيفية إضافة تعريف كاتب الموضوع في اسفل او اعلى المواضيع بطريقة جد سهلة وغير معقدة ،إضافة تعريف كاتب الموضوع اصبح من الامور المهمة في تعريف على صاحب المدونة أو صاحب الموضوع ، غالبا ما تجد صاحب المدونة يرغب في اظهار كاتب الموضوع مع الصورة المناسبة مقاس 80 في العرض والطول غالبا ، وفيما لا شك يبحث عن شكل مناسب وذا جميلة في المظهر وهذا امر عادي لان كل وحد يحب ان يرى مدونة بشكل خلاب .

هذه الاواخر اجد عديد من الاسئلة على يومياتي الفيس بوك وغالبا ما تكون طريقة إضافة تعريف كاتب التدوينة ، ولذلك فكرت في تقديم شرح إضافة تعريف كاتب الموضوع لمدونات بلوجر ليستفيد كل زوار مدونة هشام هاشم  info-sati ، وكما تعلمون نحول ما امكن شرح الامور بطريقة جد سهلة ومجربة لخروج الزائر من الموقع بدون خيبة امل .

كثير من المدونين المبتدئين يقومون بتحميل قالب على رغبته ولكن لا يتوفر على العديد من الاضافات مثل اضافة تعريف كاتب الموضوع في مدونة بلوجر ، وهذا يسبب له شي من القلق لانه لا يتوفر على ما يتوفر عليه اصدقائه او منافسيه المبتدئين في عالم البلوجر ، لذلك سوف نقدم لكم اسهل طريقة إضافة تعريف كاتب الموضوع لمدونات بلوجر لتعم الفائدة لكل المدونين سواء المبتدئين أو من له خبرة لا بأس بها .

ايضا هناك نقطة جد مهمة لكل المدونين الذين يضيفون المؤلفين في المدونة من اجل نشر المواضيع ، وطبعا يجب ان تكون عادلا ووضع تعريف او صورة لصاحب الموضوع ليستفيد هو ايضا في شهرته بين المدونين ، ولهذا هذه الاداة التي سوف تقوم بتركيبها  يمكنك ان تضعها داخل الاتش تي ميل القالب او داخل المواضيع او المنشورات ان صح التعبير .

يمكنك اضافة تعريف كاتب الموضيع في الاسفل المواضيع او في اعلها  وهذا يبق اختيار خاص بك اخي الزائر .

نبدء في الشرح :

نقوم بدخول الى القالب  >>>  ثم تحرير HTML  >>>  بعدها CTRL+F 

نقوم بالبحث عن  ]]></b:skin> ونضع قبله مباشرة هذا الكود 

/* info-sati.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: 60%;
  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: #f8f8f8;
  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;
}

  

 بعدها نقوم  بالبحث عن  <data:post.body/> اذا اردنا ان تكون فوق او اسفل المواضيع ثابتا ، ونضع الكود اسفله او فوقه .

تحميل كود تعريف كاتب الموضوع 

ملاحظة : <data:post.body/> ( إن وجدت ثنتين أو ثلاتة فالاخيرة هي المقصودة ) 

قم بلصق هذا الكود تحت  <data:post.body/> اذا ترغب في اظهار تعريف الكاتب اسفل الموضوع

او فوق  <data:post.body/>  اذا ترغب في اظهار تعريف الكاتب فوق الموضوع.

تابع الشرح على الصورة لكيفية تركيب كود

اما اذا تريد وضعه في المواضيع فيمكنك وضعه في اي مكالن في html الخاص بالمشاركات .

شرح تعديل على الكود الذي قمت بتحمله : 

هذا الكود خاص بالصورة استبدلها بصورة التي تريد 

https://blogger.googleusercontent.com/img/proxy/AVvXsEhXAVOH7EiHHIc4UGrO1uCm5-VDP1xNgro3t-y9qDTRh5xhI-0edwX-QcFIwAGJcvdJ4Kjx45R0n_YJtPGlnAkbe4dPCVKlAuxXLusYZrK6FkZy1AbNR18U8pV-V2GS8uUcnwWxM6DFQoFTyH1vd84dov2U4O7jL1eHRhuWmOIBg0anw0o34C_6Yab9tcfKMtYeBtDyytUE=s0-d

استبدل كلمة الخاص باسم المدون : هشام هاشم  و  موقع المعلوميات والتقنيات  الى الاسم الذي تريد 

اضف الموقع الاجتماعي في : http://twitter.com/  و http://themeforest.net/ و https://www.facebook.com