تغيير شكل التسميات الى شكل احترافي وحصري

Change-the-format-of-labels-to-professional-and-exclusive-form-in-Blogger

شكل التسميات الموجود في بلوجر ليس جميلاً ولا يجدب الزور إليه ونحن كمدونين نهتم في الزار ونحاول أرضاهم بل عديد من الطرق اليوم أقد لكم كود تحويل التسميات إلى شكل اكتر من احترافي هده الكود من برمجتي أقدمه لكم كهدية وحولت جعل الشرح مبسط ومفهوم حتى يستطيع العديد من المدونين التعامل معه بكل بساطه

معاينة

شرح التعامل مع الإضافة

قبل كل شيء يجب عليك عمل نسخه احتياطيه لو قدر الله وحدت خطا معك ستستطيع إصلاح واسترجاع القالب الخاص بك

قبل ما ندخل إلى الشرح أود إن أقول لك أد كان لديك شكل سابق لتسميات يجب حذفه حذف كود التنسيق css الخاص بتسميات

كيف يمكنك أزلته

نذهب إلى قالب تحرير HTML

بعد دالك نبحت عن الكود التالي list. او . list-label-widget-content نمسح جميع الاكواد المرفقة معه حتى يحذف الشكل يعني نمسح الاكواد كلها التي ظهر هات أتناء البحث وغالب تجد الكود في ]]></b:skin> للبحت نستخدم F +Ctrl

اكرر امسح css الخاص به يعني التنسيقات

بعد إن تأكدنا من تصفيه شكل التسميات القديم نذهب إلى ونفعل التسميات من التخطيط ونتوجه إلى قالب تحرير HTML

ألان نأتي إلى الخطوة المهمة وهي استبدال كود التسميات القديم بكود جديد حتى يتناسب مع الشكل نبحت عن الكود التالي id='Label1'

تجده بهده الشكل نقوم بفتحه

نقوم بفتحه تم قم بتحديد كما في الصورة وضع الكود التالي بدله

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h3><data:title/></h3>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&amp;max-results=6"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='rtl'><data:label.count/></span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&amp;max-results=6"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='rtl'><data:label.count/></span>
</b:if>
</span>
</b:loop>
</b:if>
</div>
</b:includable>
</b:widget>

أخر خطوه تركيب الشكل نذهب إلى قالب تحرير HTML ونبحث عن ]]></b:skin> ونظيف الكود التالي فوق مباشره

/* CSS التسميات */
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:right;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .label-size{position:relative;display:block;float:right;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;left:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;left:-15px}
#sidebar-wrapper .label-size a:hover{color:#444;border-color:#4fafe9}

.list-label-widget-content ul li span {
float: right;
width: 3em;
height: 3em;
text-align: center;
line-height: 35px;
margin: -34.5px -2px 0px 4px;
border-radius: 100%;
color: #FFF;
font-weight: bold;
background: #ea0c31;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
border: 0.3em solid #FFF;
font-family: time;
}
.list-label-widget-content li a {
text-decoration: none;
color: #272B35;
-webkit-transition: all 0.3s ease-in-out;
transition: all 1s;
display: block;
margin: 0 40px 0 0;
padding: 6px 0.4px;
}
.list-label-widget-content li a:hover {
color: #FFFFFF;
transition: all 1s;
}
.list-label-widget-content ul li:hover {
background: #ea0c31;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
transition: all 1s;
}
.list-label-widget-content ul li {
border: solid 1px #E0E0E0;
background: #F0F0F0;
color: #444;
text-decoration: none;
border-radius: 0.3em 1.3em 1.3em 0.3em;
transition: all 1.0s ease-out 0s;
font-family: droid arabic kufi;
list-style: none;
font-size: 12px;
margin: 5px 3px;
transition: all 1s;
}
/* CSS نهاية التسميات */

اللون الأخطر يعني الخط ونلاحظ الخط المستخدم هو خط droid arabic kufi استبدله بخط مدونتك أو يمكنك تضمين الخط من خلال إضافة الكود التالي فوق ]]></b:skin>

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

الكود ما يحتاج شرح ولأكن تبسيط مني الذي بل لوان الأحمر والأزرق هو ألون نفس كود اللون #ea0c31 وهو اللون الأحمر أد حببت تغير اللون غيرهم معاً الفرق بينهم بسيط الأحمر لون أرقام عدد المواضيع والأزرق هو لون عند التأشير على قسم

أخي الكريم أختي الكريمة مثل هده الاكواد تعتبر معدومة وان وجدث لن تجدها مثل هده الشكل الاحترافي نحنا نعدك بل مزيد من الإضافات الحصريه والقوالب الاحترافية والمزيد المزيد وكل ما نريد منك هو متابعه المدونة من هنا