الاثنين، 5 سبتمبر 2016

تغيير شكل المشاركات الشائعة لشكل جميل وأنيق V1

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

1- اذا كنت تتوفر على ستايل للمشاركات الشائعة فقم بحذف لكي لا تحذت ايت مشاكل
2- توجه للقالب
3- تحرير HTML
4- إبحث عن ]]></b:skin> وضع الكود التالي فوقه ،أو ضعه فوق </head> بين وسمي <style>...</style>

.PopularPosts ul li {border-bottom: 1px solid #ccc;position: relative;}
.PopularPosts .item-thumbnail {float: right; margin-left: 8px;width: 80px;height: 80px;}
.PopularPosts .item-thumbnail img {width: 100%;height: 100%;border-radius: 50%;padding: 3px;border: 1px solid #929292;transition: 0.3s;}
.PopularPosts .item-thumbnail img:hover {border-radius: 0;transition: 0.4s;}
.PopularPosts .item-title {margin-bottom: 3px;}
.PopularPosts .item-title a {color: #2E6A9C;font-size: 16px;}
.PopularPosts .item-snippet {height: 31px;overflow: hidden;font-size: 13px;font-family: Droid Arabic Naskh;}
.popular-posts li .item-thumbnail:before {position: absolute;margin-right: 28px;margin-top: 26px;z-index: 9999;    background: #2E6A9C;color: #fff;display: block;border-radius: 50%;font-size: 16px;    width: 25px;text-align: center;line-height: 26px;height: 25px;}
.popular-posts li:nth-child(1) .item-thumbnail:before {content: &#39;1&#39;;}
.popular-posts li:nth-child(2) .item-thumbnail:before {content: &#39;2&#39;;}
.popular-posts li:nth-child(3) .item-thumbnail:before {content: &#39;3&#39;;}
.popular-posts li:nth-child(4) .item-thumbnail:before {content: &#39;4&#39;;}
.popular-posts li:nth-child(5) .item-thumbnail:before {content: &#39;5&#39;;}
.popular-posts li:nth-child(6) .item-thumbnail:before {content: &#39;6&#39;;}
.popular-posts li:nth-child(7) .item-thumbnail:before {content: &#39;7&#39;;}
.popular-posts li:nth-child(8) .item-thumbnail:before {content: &#39;8&#39;;}
.popular-posts li:nth-child(9) .item-thumbnail:before {content: &#39;9&#39;;}
.popular-posts li:nth-child(10) .item-thumbnail:before {content: &#39;10&#39;;}
.PopularPosts ul li:before{font-family:fontawesome;content:&#39;\f005\f005&#39;;display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:&#39;\f005\f005\f005\f005\f005&#39;;}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:&#39;\f006\f005\f005\f005\f005&#39;;opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:&#39;\f006\f006\f005\f005\f005&#39;;opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:&#39;\f006\f006\f006\f005\f005&#39;;opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:&#39;\f006\f006\f006\f006\f005&#39;;opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts .item-snippet{display:none}
5- إحفظ القالب
Unknown - سمارت ويب

1 التعليقات:

أضف تعليقك الأن
avatar

Lucky Club: Online casino site, bonuses, free spins - Lucky Club
Lucky Club is a new gambling site. We have selected a trusted site to offer you a unique and safe experience. We hope to give luckyclub you a big gaming experience