إضافة اداة المشاركات الشائعة ذات شكل رائع جدا

ديسمبر 13, 2017 omer mohamed

السلام عليكم و رحمة الله تعالى و بركاته

اهلا و سهلا بمتابعي مدرسة المدون في حلقة جديدة و حصرية نقدم لكم اداة احترافية جدا و هي اداة المشاركات الشائعة ذات شكل جميل يجذب الزائر يمكنك معاينة الاضافة و تركيبها على مدونتك ان اعجبتك.

معاينة الاضافة:

اضغط هنا لمعاينة الاضافة

صورة عن الاضافة:

طريقة التركيب:

اولا ابحث عن الوسم ]]></b:skin> واضف الكود التالي فوقه:

.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}

 ثانيا ابحث عن الوسم </body> و اضف الكود التالي فوقه:

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

بعدها احفظ الاضافة و مبروك عليك.

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

مشاركة