رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 
قديم 06-22-2015, 05:00 AM   #1
Hady store
مدون جديد
 
الصورة الرمزية Hady store
 
تاريخ التسجيل: Nov 2014
المشاركات: 32
Smile إضافة المشاركات الشائعة لبلوجر بشكل جميل

أنا : Hady store




بسم الله الرحمن الرحيم / السلام عليكم ورحمة الله وبركاتة
نعم الجميع يعلم بان إضافة المشاركات الشائعة فى مدونتك أمر هام جداً لانها تظهر لك وللقارئ أكثر التدوينات قراء منذ شهر او إسبوع هذا على حسب إختيارك مدونة هادى ستور تقدمها لك بشكلين مختلفين وجزاب ومميزات رائعة للإضافة .

{مميزات الإضافة}
  • متوفرة بشكلين مختلفين يمكنك إختيار ما تشاء
  • إظهار صورة الموضوع + العنوان بشكل أنيق
  • سهلة الإضافة والتخصيص
  • يمكنك التعديل عليها بسهولة وتغير أبعاد الصور
  • ترقيم للتدوينات بشكل جميل
ملحوظة : إذا كان لديك هذة الإضافة من قبل فيجب عليك إزالة كود الـ css وتقوم بإضافة كود هذة الإضافة بدلا منه

  1. الدخول إلى حسابك > قالب > تحرير Html
  2. قم بأخذ نسخة إحتياطية من القالب تحسباً لأى أخطاء لا قدر الله
  3. ستقوم بالبحث عن هذا الوسم </body> وستقوم بوضع هذا الكود قبلة مباشرة
اقتباس:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$('#PopularPosts1').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});
image.attr('width',tbn);
image.attr('height',tbn);
});
});
//]]></script>
* الخطوة الرابعة نبحث عن هذا الوسم ]]></b:skin> ونضع الكود التالى قبلة مباشرة

الشكل الأول كما هو موضع بالصورة السابقة
اقتباس:

/***** المشاركات الشائعة / الشكل الأول *****/
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
height: 130px;
list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 48%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla Animation duration*/
-o-transition-duration: 1.0s; /*Opera Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;
}
الشكل الثانى
اقتباس:
/***** المشاركات الشائعة / الشكل الثانى *****/
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
height: 130px;
font-weight: bold;
list-style: none !important;
overflow: hidden;
padding: 0px !important;
position: relative;
margin: 2px;
border: 0;
width: 100%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla Animation duration*/
-o-transition-duration: 1.0s; /*Opera Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
line-height: normal;
padding: 10px 0px 5px 10px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;
}
* تخصيص الإعدادات حتى تعمل بالشكل الصحيح معك :
يجب عليك تخصيص الإعدادات حتى تعمل معاك بالشكل المطلوب كما هو موضح بالصورة التالية
تم بحمد الله أى إستفسار حاضر بإذن الله


الدعم العربي

Hady store غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدليلية (Tags)
لبلوجر, المشاركات, الشائعة, إضافة


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
اضافة المشاركات الشائعة بشكل احترافي - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 03-12-2014 11:14 PM
المشاركات الشائعة بشكل جديد وجميل AvTaR مقتطفات تدوينية 0 12-20-2013 08:28 AM
اضافة المشاركات الشائعة بشكل جديد ومتحرك فى مدونة بلوجر توب 2014 السيد ابو جبل إضافات وأدوات بلوجر 0 12-04-2013 01:36 AM
المشاركات الشائعة بشكل أنيق و جديد 2013 السيد ابو جبل إضافات وأدوات بلوجر 12 05-09-2013 08:42 AM
كيف أرفع عدد المشاركات التي تظهر في الصفحة الرئيسية و المشاركات الشائعة؟ مدونتي طلبات الدعم الفني 3 08-30-2012 03:05 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin™ Version 3.8.7
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 02:44 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)