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

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


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

طريقة الاضافة
ذات صلة :----------------------------------------------------
1- اضافة مواضيع ذات صلة لمدونات بلوجر                           -
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>


تعليقات


يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =

الأرشيف

نموذج الاتصال

إرسال