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

_السلام عليكم ورحمة الله تعلى وبركاته , اليوم اخواني اتيت لكم باضافة رائعة جدااا بتاثير جديد توضع بجانب المدونة , هاته الاضافة هي فريدة من نوعها وبتاثير خرافي ما يجعلها مميزة عن الاضافة التي تشبهها .

وهاته صورة كاملة  للاضافة : 

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

لن اطيل عليكم كثيرا اخواني في الكلام نذهب الى طريقة الاضافة : 
1 : ماعليك سوى اتباع الخطوات التالية : الذهاب إلى المدونة> تخطيط> اضافة اداة  >html javascript

قد يفيدك

_ وضع فيها الكود التالي مباشرتا : 

<div class="screen">
    <div class="header">
         <h4>الكاتب</h4>
    </div>
    <!-- positioned absolutely in the background -->
    <img class="background" src="https://pbs.twimg.com/profile_banners/45394577/1384289888/web" />

      <!-- This slider moves on hover --> 
       <div class="slider">
          <!-- Section 1 -->
           <div class="header1">
            <img class="profilepic" src="http://im55.gulfup.com/M1UYGx.png" />

             <h3>نوفل بوخزر</h3>

        </div>
        <!-- Section 2 -->
        <div class="header2">
            <p>نوفل بوخزر مدون هواوي يعشق عالم الاحتراف والكمبيوتر هدفي </p>
            <p>أغناء الويب العربي</p>
            <p>اعلمل في مدونة التكساس</p>
        </div>
    </div>
</div>
<style>.screen:hover .background {
    opacity:0.5;
}
.slider:hover {
    left:-320px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
body {
  
}
.header {
    width:100%;
    height:49px;
    background:#56B8DE;
    text-align:center;
    float:left;
    color:#fff;
}
.profilepic {
    width:64px;
    height:64px;
    border-radius:50%;
    margin-top:20px;
    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);
    border:2px solid #fff;

}
h3 {
    margin-top:0;
    text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75);

}
.screen {
    margin:0 auto;
    margin-top:24px;
    width:320px;
    height:200px;
    box-shadow: 0px 2px 6px #999;
    position:relative;
    overflow:hidden;
    background:#333;
}
.slider {
    width:640px;
    float:left;
    left:0;
    position:relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.background {
    position:absolute;
    width:320px;
    height:auto;
    z-index:0;
    top:60px;
    left:0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.header1, .header2 {
    text-align:center;
    width:320px;
    float:left;
    height:140px;
    color:#fff;
    position:relative;
}
.header2 {
    padding-top:8px;
}
p {
    font-size:12px;
      text-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);}</style> by :http://www.t-ksas.com//

وبعد اضافة للكود ماعليك سوى ان تغير الكلمات التي كتبت , بالكتابة الخاصة بك ويمكنك تغير صورة الكاتب بتغييرك الرابط التالي برابط صورتك الشخصية :
http://im55.gulfup.com/M1UYGx.png
بعدها ماعليك سوى ان تضغط على كلمة حفظ وبذلك سيتم اضافة الاضافة .