معهد خبراء بلوجر - [ شرح ] إضافة المشاركات الشـآئعة بطريقة جميلة

http://4.bp.blogspot.com/-3Y4uZuBWlb...0/hvkjhvkj.png

مصدر التدوينة : [ شرح ] إضـآفة أداة المشـاركات الشائعة !

بـــِــــسم الله الرحمن الرحيـــــــمـ ْ

والصلاة والسلام على من بعثه الله هادياً ومبشراً ونذيراً ،

نبينا محمد وعلى آلهـ

وصحبه أجمعين ..

أمـــآ بعـــد :

درســنـــآ اليـــوم يتحدث عن طريقة إضافة أداة " المشاركات الشآئعة " ،

ستظهر هذه الإضـــآفة في الصفحة الرئيسية و صفحات المواضيع ،،

ولا تأخد حيزا كبيرا في تصميم المدونة ،،

كـــمآ أن تركيبهـــآ سهل ،،

لنتـــآبع الخـــطوآت ،،

نتجه إلى :

التــخطيط > إضــآفة أدآة > HTML/JavaScript > المشــآركات الشــآئعة ،،

لاحظ الصورة : ( ننزع العلامة من" المقتطف " ونتركـ الصورة فقط )

http://4.bp.blogspot.com/-_VMN9jBcHD...00/popular.png

الآن نتجه إلى :

قـــآلب > تحريــر HTML > توسيع العنــــآصر ،،

وإبحث عن الوسم : ]]></b:skin>

وألــصق هذا الكوود تحته مبـــآشرة :

كود بلغة HTML:

<style type='text/css'> .PopularPosts .item-title{display:none} .PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float: right; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important} .PopularPosts .item-thumbnail{margin:0 8px !important} .item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #C7E95F; height:53px; padding:3px; width:53px} .item-thumbnail img:hover{border:5px solid #BBB; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)} </style>

إلـــى هنـــآ نصل إلى نهــــآية الدرس ،،

لاتنسوا مشــــآركتنــآ التعليقــآت ،،

أخوكم : Mr ChàFiài