{مميزات الإضافة}
- متوفرة بشكلين مختلفين يمكنك إختيار ما تشاء
- إظهار صورة الموضوع + العنوان بشكل أنيق
- سهلة الإضافة والتخصيص
- يمكنك التعديل عليها بسهولة وتغير أبعاد الصور
- ترقيم للتدوينات بشكل جميل
ملحوظة : إذا كان لديك هذة الإضافة من قبل فيجب عليك إزالة كود الـ css وتقوم بإضافة كود هذة الإضافة بدلا منه
- الدخول إلى حسابك > قالب > تحرير Html
- قم بأخذ نسخة إحتياطية من القالب تحسباً لأى أخطاء لا قدر الله
- ستقوم بالبحث عن هذا الوسم </body> وستقوم بوضع هذا الكود قبلة مباشرة
JAVASCRIPT<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var tbn = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)}); image.attr('width',tbn); image.attr('height',tbn); }); }); //]]></script>
* الخطوة الرابعة نبحث عن هذا الوسم ]]></b:skin> ونضع الكود التالى قبلة مباشرة
الشكل الأول كما هو موضع بالصورة السابقة
CSS/***** المشاركات الشائعة / الشكل الأول *****/ .sidebar .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } .sidebar .popular-posts ul li:first-child {} .sidebar .popular-posts ul li { height: 130px; list-style: none !important; overflow: hidden; padding: 0 !important; position: relative; margin: 2px; border: 0; width: 48%; float: left; } .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;} .sidebar .PopularPosts ul li img { display: block; float: left; padding: 0; width: 100%; height: 130px; -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/ -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/ -o-transition-duration: 1.0s; /*Opera Animation duration*/ transition:1.0s; } .sidebar .PopularPosts ul li img:hover { -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/ transform:scale(1.06); overflow: hidden; } .sidebar .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .sidebar .PopularPosts .item-title a { background: rgba(32, 32, 32, 0.77); color: #FFFFFF; display: block; font-size: 12px; line-height: normal; padding: 5px 0px 2px 5px; text-transform: capitalize; transition: all .4s ease-in-out; } .sidebar .popular-posts ul li:hover .item-title a { color: rgba(255, 255, 255, 1); background: rgba(231, 76, 60, 0.88); text-decoration: none; } .sidebar .popular-posts ul li:before { background: rgba(255, 252, 8, 1); color: #000; content: counter(popcount, decimal); counter-increment: popcount; float: left; font-size: 14px; line-height: 20px; list-style-type: none; padding: 0px 8px 1px 1px; border-radius: 0px 0px 10px 0px; position: absolute; top: 0; z-index: 4; border: solid #FFF; border-width: 0px 2px 2px 0px; }
CSS/***** المشاركات الشائعة / الشكل الثانى *****/ .sidebar .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } .sidebar .popular-posts ul li:first-child {} .sidebar .popular-posts ul li { height: 130px; font-weight: bold; list-style: none !important; overflow: hidden; padding: 0px !important; position: relative; margin: 2px; border: 0; width: 100%; float: left; } .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;} .sidebar .PopularPosts ul li img { display: block; float: left; padding: 0; width: 100%; height: 130px; -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/ -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/ -o-transition-duration: 1.0s; /*Opera Animation duration*/ transition:1.0s; } .sidebar .PopularPosts ul li img:hover { -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/ transform:scale(1.06); overflow: hidden; } .sidebar .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .sidebar .PopularPosts .item-title a { background: rgba(32, 32, 32, 0.77); color: #FFFFFF; display: block; font-size: 16px; font-weight: bold; line-height: normal; padding: 10px 0px 5px 10px; text-transform: capitalize; transition: all .4s ease-in-out; } .sidebar .popular-posts ul li:hover .item-title a { color: rgba(255, 255, 255, 1); background: rgba(231, 76, 60, 0.88); text-decoration: none; } .sidebar .popular-posts ul li:before { background: rgba(255, 252, 8, 1); color: #000; content: counter(popcount, decimal); counter-increment: popcount; float: left; font-size: 14px; line-height: 20px; list-style-type: none; padding: 0px 8px 1px 1px; border-radius: 0px 0px 10px 0px; position: absolute; top: 0; z-index: 4; border: solid #FFF; border-width: 0px 2px 2px 0px; }
* تخصيص الإعدادات حتى تعمل بالشكل الصحيح معك :
يجب عليك تخصيص الإعدادات حتى تعمل معاك بالشكل المطلوب كما هو موضح بالصورة التالية
