تغير شكل المشاركات الشائعة الى شكل صور بلوجر

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

 تغير شكل المشاركات الشائعة الى شكل صور بلوجر

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

طريقة الاضافة

ذات صلة :----------------------------------------------------

1- اضافة مواضيع ذات صلة لمدونات بلوجر                           -

2- تغيير شكل اداة المشاركات الشائعة الى شكل قالب عرب ويب   -

3- تغيير شكل اداة المشاركاة الشائعة بلوجر                             -

--------------------------------------------------------------

الخطوة الاولى : إبحث عن </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>

مصدر الكود

ارجو ان تكون الاضافة قد اعجبتكم شكرا على المتابعة