ثلاثة اشكال جديدة لتغير التسميات فى البلوجر2014

بسم الله الرحمن الرحيم 

تعديل سحابة التسميات بأحدث الاشكال

الان فصاعد على مدونة انتا الكسبان سوف تشاهدون كل جديد وحصرى على المدونة واليوم

نوفى بوعدنا اليوم نضع بين ايدكم موضوع جديد وهو تغير شكل التسميات من الشكل التقليدى

 الى شكل اكثر احترافية ويناسب ذوق الجميع سواء من اعضاء وزوار وهذا تعديل على شكل

 سحابة التسميات من جديد لكى يناسبك ويناسب قالب المدونة الخاصة بك ويمكنك ايضا التعيل

على هذه الاضافة لكى تناسب ذوئق وتناسب الوان مدونتك حتى لا اطيل عليكم اترككم مع اضافة 

سحابة التسميات (اقسام المدونة) .

طريقة تركيب الاضافة

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

اداة التسميات ثم اختيار الشكل المناسب لك واتبع شرح الاضافة وطريقة تركيب الكود داخل المدونة .

بطبع اكيد عجبتك الاضافة نأتى الى طريقة التركيب على بركة الله

الشكل الاول 

ابحث عن الوسم ]]></b:skin> و اضف فوقه الكود التالي

.list-label-widget-content {

margin-bottom: 20px;

color: #99a1a9;

}

.list-label-widget-content a {

color: #99a1a9;

}

.list-label-widget-content ul {

margin: 0;

}

.list-label-widget-content ul li {

padding: 0;

margin: 0;

}

.list-label-widget-content ul {

width: 100%;

list-style-type: none;

margin: 0;

padding: 0;

}

.list-label-widget-content ul li {

margin-top: 10px;

font-size: 14px;

background-color: #ffffff;

display: block;

clear: both;

height: 40px;

}

.list-label-widget-content ul li a {

color: #99a1a9;

text-decoration: none;

width: auto;

display: block;

line-height: 40px;

float: right;

}

.list-label-widget-content ul li a:before {

content:"\f105";

font-family: fontawesome;

font-size: 18px;

color: #ffffff;

margin-left: 20px;

margin-right: 0;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

transition: all .5s linear;

-webkit-transition: all .5s linear;

-mox-transition: all .5s linear;

-ms-transition: all .5s linear;

-o-transition: all .5s linear;

background-color: #99a1a9;

display: block;

float: right;

}

.list-label-widget-content ul li:hover a {

text-decoration: none;

}

.list-label-widget-content ul li:hover a:before {

width: 200px !important;

background-color: #eb005d;

}

.list-label-widget-content ul li span {

float: left;

background-color: #99a1a9;

min-width: 30px;

line-height: 40px;

height: 40px;

text-align: center;

color: #ffffff;

float: left;

transition: all .5s linear;

-webkit-transition: all .5s linear;

-mox-transition: all .5s linear;

-ms-transition: all .5s linear;

-o-transition: all .5s linear;

padding: 0 5px;

}

.list-label-widget-content ul li:hover > span {

background-color: #eb005d;

}

.list-label-widget-content ul li span:first-child {

float: right;

width: 85%;

}

لتنسيق الشكل غير التالي
هذا اللون هو لون الأزرار و لون الخط و لون الإطار #99a1a9
وهذا لون الزر عند تمرير الماوس eb005d
لتغيير حجم الخط قم بتغيير الرقم font-size: 18px 

الشكل الثانى

.cloud-label-widget-content .label-size {

font-size: 100%;

float: right;

}

.cloud-label-widget-content .label-size a {

color: #99A1A9;

float: right;

font-size: 14px;

margin: 0px 0px 5px 5px;

padding: 7px;

background-color: #fff;

border: 1px solid #99A1A9;

text-decoration: none;

}

.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {

background-color: #EB005D;

color: #FFF;

text-decoration: none;

transition: all 0.2s ease-out 0s;

border: 1px solid #eb005d;

}

.cloud-label-widget-content .label-size span {

color: #fff;

float: right;

font-size: 14px;

margin: 0px -5px 5px 5px;

padding: 7px;

text-decoration: none;

background-color:  #99a1a9;

border: 1px solid  #99a1a9;

}

.cloud-label-widget-content .label-size span:first-child, .cloud-label-widget-content .label-size span:first-child span:nth-child(2) {

background-color: #99a1a9;

color: #FFF;

}

.cloud-label-widget-content .label-size span:first-child {

margin: 0px 0px 5px 5px;

}

لتنسيق الشكل غير التالي

هذا اللون هو لون الأزرار و لون الخط و لون الإطار #99a1a9
وهذا لون الزر عند تمرير الماوس eb005d
لتغيير حجم الخط font-size: 14px

فى النهاية قم بالحفظ ومبروك عليك الاضافة الجديدة لاتنسى الاشتراك و متابعة المدونة