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

الخميس، 14 مايو، 2015

عارض صور المشاركات الشائعه بطريقه احترافية



بناء على طلب الأخ أحمد الحريري لعارض الصور الذي تضمن قالب المدونة الحديثه ModernBlog   ، من خلال التعليقات وجدت أن البعض يظن أنه عارص صور متحرك ( سلايد شو ) والحقيقه أنه مجرد إضافة رسميه مشهوره هي ( المشاركات الشائعة ) بدون أي جافاسكريبت أو برمجة مجرد تنسيق CSS خاص ثم تعديل في الإضافة الرسمية ، سأعرض هذه الإضافة بعد تلك التعديلات ثم يمكنكم استخدامها والتعديل عليها بحسب ما ترونه .
.previewbutton { display: inline-block; zoom: 1; *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-size: 12pt !important; font-family: arial; padding: 7px; margin: 10px; text-shadow: 0 3px 10px gray; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 4px 10px gray; color: gray !important; border: solid 1px #b7b7b7; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }.previewbutton:hover { box-shadow: 0 1px 10px silver; text-decoration: none; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top, #fff, #dcdcdc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }.previewbutton:active { position: relative; top: 1px; color: #999; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); background: -moz-linear-gradient(top, #ededed, #fff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); box-shadow: 0 4px 10px gray; }.previewbutton2 { font-size: 16pt; color: #B8E1EF; font-weight: bolder; }.previewbutton1 { color: silver; padding-left: 5px; }.previewbutton3 { font-size: 16pt; color: #ED84A9; font-weight: bolder; }

۞ مـثـال تـجـريـبـي  ۞


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

الخطوة الأولى:  كالعادة ننسخ أولاً كود الأنماط CSS قبل نهاية إغلاق أنماط القالب كالتالي ، نبحث عن نهاية أنماط القالب :
]]>نضع فوقه مباشره ما يلي:/* popularposts CSS */.featured_posts { float: right }.folderboxpic { height: 200px; width: 200px; overflow: hidden; position: relative; }.folderboxpic img { height: 200px; width: 200px; padding: 0; border: 1px solid gray; }.article { display: block; width: 100%; height: 100%; color: #ffffff; font-size: 13px; text-decoration: none; font-family: Open Sans,Arial,Verdana; text-overflow: ellipsis; }.article .folderboxbackground { font-family: tahoma; color: #333333; font-size: 12pt; background: white; padding: 4px; }.article .folderboxtitle { position: absolute; bottom: 0; opacity: 0; -webkit-transition: all 0.4s ease-in 0s; -moz-transition: all 0.4s ease-in 0s; -ms-transition: all 0.4s ease-in 0s; -o-transition: all 0.4s ease-in 0s; transition: all 0.4s ease-in 0s; width: 200px; height: 0px; display: block; text-align: center; }.article:hover .folderboxtitle { opacity: 0.9; height: 100%; }

الخطوة الثانية:
اختر مكاناً مناسباً في رأس المدونة وانسخ الكود التالي بين بداية ونهاية قطاع section



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



الخطوة الثالثة:
من التبويب "التخطيط" ندخل على تحكم الإضافة ونضع علامة الاختبار على "صورة مصغرة من الصورة" وعلى "مقتطف" ونختار عدد المشاركات التي ستظهر وهذا متوقف تماماً على تصميم قالب مدونتك :
عارض صور المشاركات الشائعه بطريقه احترافية


الخطوة الرابعه (هام):
مصغرات صور بلوجر دائماً لها مقاس 72 بيكسل وعند تكبيرها الى 200 بيكسل مثلاً كما في إضافتنا هذه ستكون جودة الصور متدنيه وإذا كانت بارزه في واجهة المدونه فإن هذا عيب في نظري - كبير - ولحل هذه المشكلة وتفاديها قم بقراءة هذا الموضوع وانسخ إضافته البسيطة الى قالب المدونة :  إضافة: تكبير مصغرات صور بلوقر مع الحفاظ على جودتها ! 
وأذكر أيضاً أن المواضيع لن تظهر مباشره إلا بعد مرور وقت يكفي لتكون "مواضيع شائعه" !

تحياتي العاطرة 
التسميات : , , ,

تعريف المدونة

اعلان مطور !!