بلوجر: تغيير شكل المشاركات الشائعة إلى شكل إحترافي في مدونة بلوجر

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

إذا كنت قد وضعت شكل للمشاركات الشائعة من قبل، فقم بأزالته.

نبدأ بشرح طريقة التركيب، على بركة الله.

نقوم بالذهاب إلى بلوجر ونذهب إلى المدونة ومن ثم نختار "قالب" ومن ثم نقوم بالضغط على تحرير HTML،
 ومن ثم نقوم بالبحث عن </head> بأستخدام الصندوق البحث عبر الضغط على CTRL+F.

و نقوم بنسخ هذا الكود ولصقه  فوق </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> بأستخدام الصندوق البحث عبر الضغط على CTRL+F.

ونقوم بنسخ هذا الكود ولصقه  فوق </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>

بعد أن قمت بلصق هذا الكود، قم بحفظ القالب، وهنيئاً لك.

أتمنى أنت تكون قد استفدت من الموضوع ولو بالقليل، أكون قد وصلت إلى نهاية هذا الموضوع، كان معكم عبدالرحمن وصفي والسلام عليكم ورحمة الله وبركاته.

إطرح مشكلتلك