bloggerarchive
247125322047940
تحميل

اضافة تأثير كتابه تظهر على الصوره عند تحريك المؤشر عليها



http://im18.gulfup.com/l9dm1.png 

 السلام عليكم!اقدم لكم اليوم كيفية اضافة تسمية توضيحيه بشكل جميل على الصورة

تم برمجة الاضافة من صاحب مدونة بلوجر تيراكس  فشكرا له بالنسبه لكيفية 

استخدام هذه الاضافة فيمكنك استخدامها في الصفحة الرائيسيه لمدونتك 

كاعلان لموضوع ما ويمكنك اضافته في التدوينيات ايضا و استخدامه

 لاشياء متعدده مثال .

الان لكيفية التركيب:


  1. اذهب للوحة تحكم مدونتك.
  2. القالب.
  3. تحرير HTML>متابعه.
  4. توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. وابحث عن الوسم التالي:

]]></b:skin>


والصق الكود التالي قبله مباشرة:


/* Bloggertrix  */
.label { 
 /*Position*/
 overflow: hidden;
 position: relative;
 margin: 20px;
 display: inline-block;
 vertical-align: top;
 
 /*Skin*/
 border: 7px solid #fff;
 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
 display: block;
}
.label p {
 /*Position*/
 position: absolute;
 padding: 10px;
 width: 100%;
 
 /*Skin*/
 background: #000; /*fallback*/
 background: rgba(0,0,0,0.7);
 color: #fff;
 font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
 /*Animation*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
/*Top In Bounds*/
.top:hover p, .topleft p, .topright p {
 top: 0%;
}
/*Top Out of Bounds*/
.top p, .centertop p {
 top: -50%;
}

/*Bottom In Bounds*/
.bottom:hover p, .bottomleft p, .bottomright p {
 bottom: 0%;
}
/*Bottom Out of Bounds*/
.bottom p, .centerbottom p {
 bottom: -50%;
}
/*Left In Bounds*/
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
 left: 0%;
}

/*Left Out of Bounds*/
.bottomleft p, .topleft p, .centerleft p, .centerleft p {
 left: -150%;
}

/*Right Out of Bounds 150%*/
.bottomright p, .topright p, .centerright p {
 left: 150%;
}

/*Centered From Bottom*/
.centerbottom:hover p {
 bottom: 50%;
}

/*Centered From Top*/
.centertop:hover p, .centerleft p, .centerright p {
 top: 50%;
}

/*Center Margin Fixes*/
.centertop:hover p, .centerleft p, .centerright p {
 margin-top: -20px;
}

.centerbottom:hover p {
 margin-bottom: -20px;
}

الان اضغط حفظ و انتقل إلى تخطيط  واضف اداة 'HTML/Javascript"
و الصق الكود التالي داخلها
<div class="label top">
   <p>الكتابه التي تريدها ان تظهر في الصوره</p>
   <img src="رابط الصوره" />
 </div>
 
عدل الكتابة الزرقاء بما تريده ان يظهر في الصوره عند تحرريك مؤشر الفأرة لها

عدل الكتابه الزرقاء برابط الصوره

عدل الكتابه الصفراء با:

اذا اردت ان تظهر الكتابة في اعلى الصوره اضف بدل الموجودفي الكود بالتالي :

label top

اذا اردت ان تظهر الكتابة في اسفل الصوره اضف بدل الموجودفي الكود بالتالي :

label bottom

اذا اردت ان تظهر الكتابة من اسفل اليمين في الصوره اضف بدل الموجود في الكود بالتالي :

label bottomright

اذا اردت ان تظهر الكتابة من اسفل اليسار في الصوره اضف بدل الموجود في الكود بالتالي :

label bottomleft

اذا اردت ان تظهر الكتابة من اعلى اليسار في الصوره اضف بدل الموجود في الكود بالتالي :

label topleft

ملاحظة: اذا اردت اضافة صور متعدده كرر الكود مع تعديل ما يلزم تعديله.

_____________________________________________________________


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






ما رأيك: 
ويب 6300160742056773673

إرسال تعليق تعليقات الموقع

  1. الله يوفقك ع المجهود الجبار

    ردحذف
  2. ماشاء الله صحيح اني مني فاهم شي هههههههههههه بس والله واضح انه جهد عظيم وكذا . يب استمر ربي يسعدك ويحفظك @_<

    ردحذف

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!