السلام عليكم!اقدم لكم اليوم كيفية اضافة تسمية توضيحيه بشكل جميل على الصورة
استخدام هذه الاضافة فيمكنك استخدامها في الصفحة الرائيسيه لمدونتك
كاعلان لموضوع ما ويمكنك اضافته في التدوينيات ايضا و استخدامه
لاشياء متعدده
مثال .
الان لكيفية التركيب:
- اذهب للوحة تحكم مدونتك.
- القالب.
- تحرير HTML>متابعه.
- توسيع القوالب.
- اضغط Ctrl+F من لوحة المفاتيح.
- وابحث عن الوسم التالي:
]]></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
ملاحظة: اذا اردت اضافة صور متعدده كرر الكود مع تعديل ما يلزم تعديله.
_____________________________________________________________
ارجو منك في حال اعجبتك الاضافة النقر على ازرار المواقع الاجتماعية ادناه و لا تنسى
مشاركتي برئيك في تعليق ولو بكلمة شكر .
تحياتي.
