11‏/07‏/2015

أداة المشاركات الشائعة المقدمة من بلوجر لها نمط محدد شكل واحد عادي ثابت لا يتغير، طبعا يمكن تغيير شكلها حسب تصاميم تخص مصمم القالب. هنا سوف نقدم شكل جديد لهذه الأداة أو بالأحرى شكلين ويمكنك التعديل عليها بنفسك لو لك دراية بـ 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>
أداة المشاركات الشائعة المقدمة من بلوجر لها نمط محدد شكل واحد عادي ثابت لا يتغير، طبعا يمكن تغيير شكلها حسب تصاميم تخص مصمم القالب. هنا سوف نقدم شكل جديد لهذه الأداة أو بالأحرى شكلين ويمكنك التعديل عليها بنفسك لو لك دراية بـ 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>
0 Blogger تعليقات
Disqus
0 تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة