- fahad
- 11:51 م
- أضافات ودروس بلوجر ، css
- 3 تعليقات
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
لدي اليوم طريقة في تغيير شكل الميتاتاج أو مايسمى العلامات الدليلية للمدونة البلوجر وقد وضعت عدة دروس لهذه التسميات
منها
وهي تكون متدرج وباألوان مختلفة كما هو موجود في مدونتي
أما الثاني
وهي أن تكون التسميات داخل مستطيلات
أما أضافة اليوم هي قريبة من الأضافة الثاني المذكور داخل مربعات أو مستطيلات
ولكن تختلف عنها أنه بلون الذهبي وتم أضافة بعض الظل لها بحيث تكون بشكل
جميل ولطيف
صورة للمعاينة شكل الأضافة
طريقة التركيب سهلة جدا ولاتستغرق أكثر من عدة دقائق
توحه للوحة التحكم >>تصميم>>أضافة أداة>>تهيئة HTML/JavaScript
بعد ذلك أضف الكود التالي داخل الخانة المخصصة لذلك
<style type="text/css">
/*<![CDATA[*/
.label-size a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #996633;
border: 1px solid #DDA13C;
background: rgb(238,177,75);
background: url(data:image/svg+xml;base64,PD94bWwgdmV
yc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG
5zPSJodHRwOi8vd3d3LnczLm9yZy'
8yMDAwL3N2ZyIgd2lkdGg9IjEwM
CUiIGhlaWdodD0iMTAwJSIgdmlld0
JveD0iMCAwIDEgMSIgcHJlc2VydmV
Bc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGl
kPSJncmFkLXVjZ2ctZ2VuZXJhdGV
kIiBncmFkaWVudFVuaXRzPSJ1c2V
yU3BhY2VPblVzZSIgeDE9IjAlIiB5M
T0iMCUiIHgyPSIwJSIgeTI9IjEwMCUi
PgogICAgPHN0b3Agb2Zmc2V0PSIw
JSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc
3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c
3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3A
tY29sb3I9IiNjYzkxMmQiIHN0b3Atb3Bh
Y2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lk
dGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id
XJsKCNncmFkLXVjZ2ctZ2VuZ
XJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-left: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;
background: rgb(240,183,86);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW5
0IGlkPSJncmFkLXVjZ2ctZ2VuZX
JhdGVkIiBncmFkaWVudFVuaXRz
PSJ1c2VyU3BhY2VPblVzZSIgeD
E9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1
jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFj
aXR5PSIxIi8+CiAgICA8c3RvcCBvZ
mZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3A
tb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}
/*]]>*/
</style>
أعمل حفظ للأداة
ثم بعد ذلك أختار أضافة أداة >>التسميات
وعدل الخيارات كما هو موضح في الصورة
أما أذا كنت مضيف أداة التسميات (العلامات الميتاتاج)
فقط قم بدخول على الأداة وأعمل التعديلات كما في الصورة
أتمنى أن تنال على رضاكم
وسلام عليكم ورحمة الله وبركاته
حلو الفكرة والطريقة جميلة ورائع
ردحذفجزيت خيرا أخي ونفع الله بك
أهلا بك أخي العالي نورت المدونة
ردحذفسعدت بمرورك وتعليقك
شكرا
ردحذف