اضافة تأثير لطيف في التسمية التوضيحيه في الصور في بلوجر

السلام عليكم كيفكم 

ساقول لكم طريقة تحويل التسمية التوضيحية المملة لشكل لطيف خارج عن الروتيني

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

أولاً : ندخل على www.blogger.com

ثانياً:نضغط على المشاركات

ثالثاً: مشاركة جديدة

ثم نقوم برفع الصوره التي نريدها ثم نضغط على الصورة التي قمنا برفعها 

وسيظهر لك عدة أختيارات قم بأختيار  أضافة تسمية توضحية كالصورة التي بالأسفل

وبعد ذلك ستظهر لك بهذا الشكل الممل

ولتغير هذا الشكل لمثل هذا

أو

ولنطبق هذا التاثير عليها 
نذهب الى www.blogger.com
وبعد ذلك نضغط على المظهر
وبعد ذلك نبحث عن هذا الكود  ]]></b:skin> 
بالضغط على ctrl+f  لنطبق عملية البحث
وبعد ذلك نضع هذا الكود  فوق/قبل لنفعل مثل التصميم الأول 

td.tr-caption {
font-size:12.5px !important; /* TAMANHO DA FONTE */
background-color: #FBEFEF; /* COR DE FUNDO DA LEGENDA */
display: inline;
color: #F7819F; /* COR DA FONTE DA LEGENDA */
font-family: Arial, sans-serif !important; /* TAMANHO DA FONTE */
padding: 10px;
margin-top: -75px; /* DISTÂNCIA EM RELAÇÃO AO TOPO DA IMAGEM */
float: right; /* POSICIONAMENTO DA LEGENDA, ALTERE PARA RIGHT SE DESEJAR */
position: relative;
margin-left: 10px;
margin-bottom: -20px; /* DISTÂNCIA EM RELAÇÃO À BASE DA IMAGEM*/
line-height: 120%;
text-transform:none;
letter-spacing: .025em;
}
td.tr-caption a:link, td.tr-caption a:visited {
color:#fff;
}
.tr-caption-container {
margin-left:8.5px;
}
.tr-caption-container img {
margin-bottom:10px;
} 

وللتصميم الأخر نضع هذا الكود 

.tr-caption {
opacity: 0.5;
background: #e6e0dc;
outline-offset: -2px;
outline: 1px solid #fff;
position: relative;
top: -35px;
padding: 2px;
font-family: silkscreen;
font-size: 18px!important;
color: #fff;
text-shadow: 1px 1px 0px #c7bdb7;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.tr-caption:hover {
color: #fff;
background: #c486a8;
text-shadow: 1px 1px 1px #a85b83;
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;

}

وثم نضغط حفظ المظهر 

وهكذا نكون انتهينا