اضافة سحابة الكلمات الدلالية داخل مربعات وبعرض متحرك Tag Cloud

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

الان سوف نجعل التسميات بخاصية السحابة ضع علامة على كلامة سحابة كما واضح لنا بالصورة التالية وبالاخير اضغط حفظ

الان لم ننتهى بعد فبعد اتباع هذه الطريقة ستجد بأن الكلمات الدلالية بمدونتك غير متناسقة كما ذكرنا فى البداية الكلمات مشوهه الان كما تلاحظون بالصورة التالية :

 نريد ان نجعلها اكثر تناسق لكى تجد بأن كل كلمة بحجم مقبول ومتناسق وبداخل مربعات الان ماذا نفعل نفعل ؟ اذهب الى القالب

الأن اضغط على تحرير HTML

الان اضغط على زر متابعة

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

الان اضغط على CTRL + F من الكيبورد لظهور عملية البحث عن الأكود بالمتصفح
ابحث عن هذا الكود :

 ]]></b:skin>

اضف قبله مباشرة هذا الكود :

 /*-----Custom Labels Cloud widget by www.kingnt.com---*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; }
.label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

فى النهاية قم بحفظ النموذج اذهب الى صفحة المدونة ستجد بأن الكلمات تم تنسيقها وكل كلمة بنفس حجم الخط انتهى الشرح واذا كنت تريد مثال لذلك فهى متواجدة بمدونتى كما تلاحظونه فالتسميات داخل مربعات وعند وضع مؤشر الماوس تجد بأن المربع يتحرك على زواية بشكل رائع وجذاب وكما انهى التدوينة بكلمة (( لا خير فى كاتم العلم ))