ابحث عن الكاتب البريد الإلكتروني... تم الإسم البريد الإلكتروني رسالة عني صفحة ##1## من ##2## يناير فبراير مارس أبريل مايو يونيو يوليو أغسطس سبتمبر أكتوبر نوفمبر ديسمبر

عبدالرحمن وصفي

[name=عبدالرحمن وصفي] [img=https://3.bp.blogspot.com/-q8ZjAKbhXp8/XpdQo6nm90I/AAAAAAAAEz0/ISfG5bL3X6YDnvY_QTdgX4HkTJT1qLkkQCK4BGAYYCw/s113/93822916_1115139188840796_7228792286904057856_n.jpg] [description=مبرمج مواقع ومطور تطبيقات الهواتف، أعمل إيضًا بأدارة السيرفرات ومحاضر في مجال أمن المعلومات ومدرب معتمد على منصة Udemy الأمريكية.] (facebook=https://www.facebook.com/AbdullrahmanWasfi) (youtube=https://www.youtube.com/c/technojordan) (twitter=https://www.twitter.com/Mr3bdullrahman) (linkedin=https://www.linkedin.com/in/abdullrahmanwasfi) (instagram=https://www.instagram.com/abdw.tech)

4/bigslider1/أحدث الشروحات/recent

4/newsticker/شائع/recent

404

Sorry, this page is not avalable
Home

6/carousel3/حلقات

3/block1/ايفون

6/block3/ألعاب

أحدث الشروحات

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

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


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

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

نقوم بالذهاب إلى بلوجر ونذهب إلى المدونة ومن ثم نختار "قالب" ومن ثم نقوم بالضغط على تحرير 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>

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

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

إطرح مشكلتلك

ليست هناك تعليقات:

إرسال تعليق