Subcribe to our RSS feeds Join Us on Facebook Join Us on Facebook Join Us on Facebook Follow us on Twitter Add to Circles

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

كينج نت ملك النت | 1/14/2013 | |
اضافة سحابة الكلمات الدلالية بداخل مربعات بدلا من الطريقة القديمة الذى تشوه شكل المدونة فالطريقة القديمة تجد بأن الكلمات غير متساوية فى الحجم فتجد كلمة كبيرة الحجم وكلمة اخرى صغيرة الحجم وكلمة اخرى اقل فأقل بصراحة رغم انى قديم فى عالم النت وبالأخص تطوير المواقع فعندما كنت امتلك منتديات 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; }
فى النهاية قم بحفظ النموذج اذهب الى صفحة المدونة ستجد بأن الكلمات تم تنسيقها وكل كلمة بنفس حجم الخط انتهى الشرح واذا كنت تريد مثال لذلك فهى متواجدة بمدونتى كما تلاحظونه فالتسميات داخل مربعات وعند وضع مؤشر الماوس تجد بأن المربع يتحرك على زواية بشكل رائع وجذاب وكما انهى التدوينة بكلمة (( لا خير فى كاتم العلم ))

هناك تعليقان (2) :

  1. نصوص سحابية بالعربي لتوضيح أكثر الكلمات تكرارا في النص .
    www.fiverr.com/s2/3714d3c393

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الأرشيف