التأثير على الصورة المستخدمة في تدوينة بلوجر مع إضافة الوصف أسفل الصورة

أهلاً بكم زوار ومتابعي " مدونة هوم بلوجر " الكرام

في درسنا اليوم سوف نتعرف على إضافة تأثير إحترافي على صور المشاركة للمدونات بلوجر مع غضافة الوصف أسفل الصورة .

أنقر للمعاينة
التأثير على صور التدوينة

- طريقة التركيب :
1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب >>> ثم تحرير قالب .

3- إبحث عن الوسم : ]]></b:skin>

4- ضع الكود التالي فوقه .

imagemania, imagecaption {
display: block;
}
#imagoroid{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#imagoroid imagemania{
float:left;
position:relative;
width:200px;
margin:10px 20px;
padding: 6px 8px 10px 8px;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background: #eee6d8;
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
#poaroid imagemania:nth-child(even) {
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#imagoroid imagemania:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#imagoroid imagemania:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#imagoroid imagecaption{
text-align:center;
font-family: 'Reenie Beanie', cursive; /*Reenie Beanie is available through Google Webfonts http://code.google.com/webfonts/specimen/Reenie+Beanie*/
font-size:1.3em;
color:#454f40;
letter-spacing:0.09em;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
#imagoroid imagemania{
-pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);
behavior: url(assets/pie/PIE.htc);
position:relative; /*required to make PIE work*/
padding-top:10px\9;
padding-right:10px\9;
}

5- احفظ القالب .

- طريقة استخدام التأثير على الصورة المستخدمة في التدوينة :
1- يجب أن يكون حجم الصورة : العرض 200 والطول 200 بكسل

2- استخدم الكود التالي في حالة HTM:L مع تعديل رابط الصورة والوصف الذي تريده أسفل الصورة .


   

<div id="imagoroid">
<imagemania>
<img src="ضع هنا رابط الصورة" width="200" height="200" alt="Red mushroom" />
<imagecaption>ضع هنا وصف الصورة</imagecaption>
</imagemania>
</div><!--end imagoroid-->