تغيير شكل المشاركات الشائعة الجزء الأول

أداة المشاركات الشائعة المقدمة من بلوجر لها نمط محدد شكل واحد عادي ثابت لا يتغير، طبعا يمكن تغيير شكلها حسب تصاميم تخص مصمم القالب. هنا سوف نقدم شكل جديد لهذه الأداة أو بالأحرى شكلين ويمكنك التعديل عليها بنفسك لو لك دراية بـ HTML, CSS و  JAVA

تنويه إذا أضفت من قبل شكل آخر فيجب حذفه أولاً

المشاركات الشائعة: الشكل الأول

1. إبحث عن </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>

2. إبحث عن </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>

المشاركات الشائعة: الشكل الثاني معاينة

1. إبحث عن </head > وضع فوقه الكود التالي:

<style type="text/css">
.sidebar h2, .tably h2 {
  border: none;
  border-bottom: 1px solid #FFB630;
  font-family: droid arabic kufi;
  text-align: center;
  color: #FFB630;
  background: none;
}

.sidebar .widget {
  background: none;
  border: none;
}
.popular-posts ul {
  list-style: none;
  padding: 0;
}
.popular-posts ul li {
  width: 100%;
  height: 100%;
  padding: 10px !important;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  background: #FAFAFA;
  border: 1px solid #F2F2F2;
}
.popular-posts .item-thumbnail {
  margin: 0;
  background-color: #000;
  overflow: hidden;
}
.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 {
  padding: 10px 0px;
  display: inline-block;
font-family: droid arabic kufi;
}
</style>

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

<script type='text/javascript'>
  $('.popular-posts img').attr('src', function(e, t) {
    return t.replace('/s72-c/', '/s350-c/')
  });
  $('.popular-posts ul li .item-snippet').each(function(){
    var txt=$(this).text().substr(0,60);
    var j=txt.lastIndexOf(' ');
    if(j>10)
      $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,' ...'));
  });
</script>

By glok

Similiar tagsاضافات بلوجر