مرحبا بكم والسلام عليكم زواري الكرام
اليوم احضرت لكم اضافة رائعة وهي تغير شكل المشاركات الشائعة الى شكل صور
هو شكل رائع وغاية في الروعة مطور من مدونة تقني الويب وهو شكل جديد ورائع وبتاثيرات مبهرة ونعلم ان المشاركات الشائعة تجعل الزائر يطيل مدة بقائه في المدونة خاصة بهذا الشكل الجميل وارائع .
تغير شكل المشاركات الشائعة الى شكل صور بلوجر
طريقة الاضافة
ذات صلة :----------------------------------------------------
--------------------------------------------------------------
الخطوة الاولى : إبحث عن </head > وضع فوقه الكود التالي:
<style type="text/css">
.popular-posts ul {
list-style: none;
padding: 0;
}
.popular-posts ul li {
float:right;
width: 148px;
height: 150px;
padding: 10px !important;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.popular-posts .item-thumbnail {
margin: 0;
background-color: #000;
}
.popular-posts img {
height: 100%;
width: 100%;
box-sizing: border-box;
padding:0;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.5;
}
.popular-posts .item-title a {
color: #fff;
font-family: droid arabic kufi;
position: absolute;
text-align: center;
left: 12px;
right: 12px;
bottom: 40px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover .item-title a,
.popular-posts .item-thumbnail-only:hover .item-title a {
opacity: 1;
visibility: visible;
}
.popular-posts .item-snippet {
display: none;
}
</style>
الخطوة الثانية : إبحث عن </body > وضع فوقه الكود التالي:
<script type='text/javascript'>
$('.popular-posts .item-snippet').remove();
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s200-c/')
});
</script>
تعليقات