بسم الله الرحمن الرحيم
تعديل سحابة التسميات بأحدث الاشكال
الان فصاعد على مدونة انتا الكسبان سوف تشاهدون كل جديد وحصرى على المدونة واليوم نوفى بوعدنا اليوم نضع بين ايدكم موضوع جديد وهو تغير شكل التسميات من الشكل التقليدى الى شكل اكثر احترافية ويناسب ذوق الجميع سواء من اعضاء وزوار وهذا تعديل على شكل سحابة التسميات من جديد لكى يناسبك ويناسب قالب المدونة الخاصة بك ويمكنك ايضا التعيل على هذه الاضافة لكى تناسب ذوئق وتناسب الوان مدونتك حتى لا اطيل عليكم اترككم مع اضافة سحابة التسميات (اقسام المدونة) .
طريقة تركيب الاضافة
فقط كل ما عليك فعلة هو الدخول الى مدونتك الى التخطيط واضافة ثم اضغط على اضافة اداة ثم اختر اداة التسميات ثم اختيار الشكل المناسب لك واتبع شرح الاضافة وطريقة تركيب الكود داخل المدونة .
اولاً قبل كل شىء نأتى الى معاينة الاضافة لمعاينة الاضافة اضغط هنا
بطبع اكيد عجبتك الاضافة نأتى الى طريقة التركيب على بركة الله
الشكل الاول
ابحث عن الوسم ]]></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
وهذا لون الزر عند تمرير الماوس eb005d
لتغيير حجم الخط font-size: 14px
فى النهاية قم بالحفظ ومبروك عليك الاضافة الجديدة لاتنسى الاشتراك و متابعة المدونة من هنا
تسلم ايدك اخى على هذه الاضافة الجميلة
ردحذفالسلام عليكم، أنا أدمن مدونة أستوتك،
ردحذفلقد قمت بحذف البانر الخاص بمدونتنا من دون علمنا يرجى وضعه في مدة لا تزيد عن 10 أيام و إلا سيتم حذف رابط مدونتكم، للتذكير:
الإسم: مدونة أستوتك
رابط المدونة : http://astu-tech.blogspot.com
رابط البانر : http://1.bp.blogspot.com/-rtdky550SLI/U5F6BIp_DLI/AAAAAAAACBM/rR_F3c5TvKg/s1600/Astu-Tech+Banner+120x120.gif
اخى اهلا ومرحبا بك فى مدونتا من جديد
حذفاولاً : راجع شروط المدونة من جديد .
ثانيا : انا قد بلغت على الشبكات الاجتماعية فى الحساب الخاص بالمدونة ان جارى تغير قالب المونة وقد يحدث بعض الاخطاء فنحن نأسف للأزعاج ولكن هناك مشاكل حاليا فى المدونة وجارى تصليحها لذلك قمنا بأزالة بعض الاضافات مؤقتا ......ناسف للازعاج
شكراً لزيارتك مرة اخر مع تحيات ادارة المدونة .
السلام عليكم. أخي كان عليك أن تراسل كل الذين عملت تبادل إعلاني معهم و تخبرهم بوجود مشكل فالمشاكل لا مفر منها، و أنا متأكد أن معظمهم سيتفهمون الأمر، أما عن شروط المدونة فأين هي ؟! و نظرا إلى أن البانر الخاص بنا تم حذفه لمدة طويلة و إلى أن يتم حل المشكل سنقوم بحذف البانر الخاص بكم مؤقتا إلى أن تراسلنا و تخبرنا بحل المشكل. لقد قمت بطرح هذا الطلب هنا لأن كل روابط الإتصال بك في هذا الموقع لا تعمل..تحياتنا مدونة أستوتك..
حذفوعليكم السلام اخى انا قمت بتبليغ الاعضاء عن طريق الشبكات الاجتماعية وبالنسبة لشروط المدونة تجدها هنا http://www.alkspan.com/p/blog-page_7917.html
حذفالمدون تحت الانشاء والتعديل ..... شكرا لتفاهمك الموقف .