تغيير شكل التسميات في مدونات بلوجر بطريقة انيقة

تغيير شكل التسميات في مدونات بلوجر بطريقة انيقة

تغيير شكل التسميات في مدونات بلوجر بطريقة انيقة

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

العديد من المدونين سواء محترفين او مبتدئين دائما ترغب في جعل القالب بشكل انيق وجميل ، كما انها تحاول ما امك ان يكون شكل القالب نادرا على القوالب الاخرى بطريقة احترافية ، ولهذا تجدها تبحث دائما عن ما هو احسن وافضل في الاضافات التي تجعل الزائر ينظر نظرت الاعجاب ، وهذه هي الحقيقة لاننا احيانا ندخل الى احد المدونات نجدها كامل الروعة في الاضافات سواء التسميات او المشاركة و العديد من الاضافات الاحترافية الانيقة .


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

1 . كما هو معتاد ادخل على مدونتي >> ثم القالب >> ونفتح تحرير HTML >> واخرج محرك البحث CTRL+F ونبحث عن امر ]]></b:skin> ونضع فوقه هذا الكود CSS .

/* CSS label */.label-size {display: inline-block;}.label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:cursive;color:#fff!important;}.label-size a {width: 130px; color: #233442; padding: 5px 5px; background: #F8F8F8; display: block; text-align: center; margin: 5px; border-bottom-color: #E6E6E6; border-bottom-style: dashed; border-bottom-width: 1px;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5,.label-size-6{font-size:100%;}.label-size a:before {content: "\f02c";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: none;color: #fff;transition: .3s linear;float: right;background: #29567D; padding: 3px;}.label-size a:after { content: ''; position: absolute; top: 10px; right: 28px; border: 10px solid transparent; border-right-color: #29567D; }.label-size a:before:hover{color:#254E71}.label-size:hover{opacity:1;visibility:visible;}.label-size a:hover{color:#F74047;}

وهذا مثال على الصورة : 

ثم تدخل الى التخطيط >> وتختار اضافة اداة >> وتختار التسميات >> وتركها كما في الصورة

اذا اعجبك الموضوع شاركنا بتعليقك .