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


لن اطيل عليكم كثيرا اخواني في الكلام نذهب الى طريقة الاضافة : 

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


قد يفيدك
  1. مقال: العرب دمروا التدوين
  2. قالب تقني الاحترافي لسنة 2014
  3. مكتبة مصمم مدفوعة لكم مجانا سعرها 25 الاف دولار

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

<div class="screen">
<div class="header">
<h4>الكاتب</h4>
</div>
<!-- positioned absolutely in the background -->
<img class="background" src="
http://ift.tt/1olh11c" />

<!-- This slider moves on hover -->
<div class="slider">
<!-- Section 1 -->
<div class="header1">
<img class="profilepic" src="
http://ift.tt/1q9plqs" />
             <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://ift.tt/1q9plqs
بعدها ماعليك سوى ان تضغط على كلمة حفظ وبذلك سيتم اضافة الاضافة .
كان هذا هو درسنا لنهار اليوم نرجوا انه افادكم , ولاي استفساري شاركونا بتعليقاتكم المهمة بالنسبة لنا , سلام.

from Blogger http://ift.tt/1olgYm5
via IFTTTبلوجر, اضافات بلوجر, أضافة تعريف الكاتب, اضافة أداة

Advertisements