السلام عليكم اليوم في تقني الانترنت احضرنا لكم شكل جديد ونلاحض انه اصبح هو الموجود في اغلبية القوالب الجديدة وهو عرض اداة التسميات كقائمة اي واحدة تحت الاخرى عكس السحابة وبتاثيرات رائعة ومميزة وايقونة ملف يمكن تغيرها وانصح بهاته الاضافة لانها تسهل على الزائر التنقل بين الاقسام او التسميات فالقائمة تسهل اكثرمن السحابة في التنقل خاصتا عندما يكون عندك في مدونتك الكثير من التسميات او الاقسام. طريقة الاضافة سهلة جدا ولا تتطلب وقت كبير.
طريقة الاضافة
اولا اضافة الخط الموجود في الشكل (غير اجباري )
ضع هذا الكود تحت <head> في القالب:
<link href='http://fonts.hosni.netdna-cdn.com/fonts/cdn/file_font/?font=JF_Flat_Regular' rel='stylesheet'/>
ثانيا اضافة الكود الخاص بالشكل الجديد :
ضع الكود التالي فوق</head>
<style>
.list-label-widget-content ul li {list-style:none;padding:0;overflow: hidden;position: relative;}.list-label-widget-content ul {padding:0}.list-label-widget-content ul li a {display: block;padding: 7px 5px;color: #777;border-bottom: 1px solid #FAFAFA;font-size: 13px;font-family: "JF_Flat_Regular";}.footer .list-label-widget-content ul li a {border-bottom:1px solid #312E2E;background-color:#3D3A3A}.list-label-widget-content ul li a:hover {background-color: #5E9BE7;color: #FFF!important;text-decoration: none;padding-right: 15px;}.footer .list-label-widget-content ul li a:hover {background-color:#FA4710}.list-label-widget-content ul li a:before {content:"\f07c";display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.list-label-widget-content ul li span {font-weight: 400;position: absolute;top: 6px;left: 6px;}.list-label-widget-content ul li:hover span {color: #FFF;}.cloud-label-widget-content {margin-top:20px}.cloud-label-widget-content span {display:inline-block;font-size:100%!important;min-height:30px;line-height:2em;margin-bottom:5px}.cloud-label-widget-content span a {background-color:#f0f0f0;color:#111;padding:5px 15px}.cloud-label-widget-content span a:hover {background-color:#FA4710;color:#fff;text-decoration:none}.list-label-widget-content ul li a:before {margin-left:10px}.cloud-label-widget-content span {float:right;margin:0 0 8px 3px}
</style>
ارجو ان تكون الاضافة قد اعجبكم اي سؤال يمكن طرحه في التعليق
اخي الكريم ممكن توضيح كيفية تغير الألوان :)
ردحذفغير اللون FA4710 بكل لون تريده و انشاء الله تعمل ...شكرا مدونة على هذه الاضافة الجميلة جعلها في ميزان الحسنات
حذف