الخميس، 30 يوليو 2015
خاصية
" اقرأ المزيد " من الخواص الهامة لمدونات بلوجر لا محالة٬ و
تكمن أهميتها في تحسين مظهر عرض المواضيع في الصفحة الرئيسية أو عرض مواضيع قسم
معين و كذلك في تسريع تحميل مدونتك بدلاً من بطء التحميل و ملل الزائر الكريم جراء
ذلك.
كيف ذلك
؟؟؟!!!
لولا فضل
الله أولاً ثم وجود هذه الإضافة الهامة - اقرأ المزيد - لتم عرض المواضيع
بطولها في الصفحة الرئيسية متتالية فوق بعضها. تخيل أنك قمت بتحديد عدد المواضيع
التي يتم عرضها في الصفحة الرئيسية و لتكن خمسة موضوعات مثلاً٬ بدون وجود إضافة
" اقرأ المزيد " سيتم عرض الموضوعات الخمسة بطولها فوق بعضها في
الصفحة الرئيسية مما يؤدي إلى تشوه في شكل المدونة و يتكلف وقتاً طويلاً في تحميل
الصفحة على حساب الزائر الذي قد ينفر من بطء التحميل و يفر من أمام مدونتك دون
رجعة. و تلك خسارة كبيرة لا محالة.
فما الحل
إذن ؟؟؟!!!
الحل بفضل
الله وحده يكمن في هذه الإضافة الرائعة - اقرأ المزيد - حيث تقوم الإضافة
بعرض مقتطف من كل موضوع تقوم أنت بتحديد مقداره " عدد حروفه " مع عرض
صورة أو بانر الموضوع إن كان هناك صورة بطريقة جميلة و أنيقة متلافياً بذلك التشوه
الحاصل في مظهر المدونة بسبب غياب تلك الإضافة و كذلك متلافياً لبطء تحميل المدونة
الذي ذكرناه.
ما عليك
فقط إلا أن تضع فاصلاً بعد عدد قليل من الأسطر في كل تدوينة مقرراً بذلك استخدام
الخاصية و سيتم وضع الفاصل فعلياً بعد عدد الحروف الذي يتم تحديده في الإضافة. هذا
الفاصل يتم وضعه بواسطة النقر على زر " إدراج رابط انتقال " في
المكان الذي تريد وضع الفاصل فيه و هو بعد عدد قليل من الأسطر من بداية التدوينة -
كما ذكرنا. هذا الزر موجود ضمن أيقونات صندوق كتابة الرسائل و شكله كما بالصورة :
و يظهر الفاصل داخل التدوينة كما بالصورة :
و يمكنك
الدخول على الصفحة الرئيسية لمدونتنا لمعاينة خاصية " اقرأ المزيد
" :
هيا بنا إلى الجانب العملي :
نستعين
بالله أولاً قبل كل شئ.
1-
قم بالدخول إلى
لوحة تحكم بلوجر الخاصة بمدونتك.
2-
قم بالدخول إلى قالب
مدونتك.
3-
قم بالنقر على
" Ctrl+F " داخل القالب لفتح صندوق البحث داخل
القالب.
4-
قم بالبحث عن
الكود التالي الذي ستجده مكرراً أكثر من مرة في القالب. يمكنك استخدام ثالث نتيجة
في البحث أو الثانية إن لم تنفع الثالثة :
<data:post.body/>
5-
قم باستبدال الكود
السابق بالكود التالي :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><div style='float:left;margin-left:10px;margin-top:15px;'><a expr:href='data:post.url'>اقرأ المزيد</a></div></b:if></b:if>
- يمكنك استبدال " left " بـ " right " لوضع " اقرأ المزيد " على اليمين بدلاً من اليسار. لاحظ أنها مكررة مرتين.
- يمكنك استبدال كلمة " اقرأ المزيد " بصورة من تصميمك أو تصميم غيرك. يمكنك تنفيذ ذلك باستبدال كلمة " اقرأ المزيد " في الكود السابق بالكود التالي :
<img src="ضع هنا رابط الصورة" title="اقرأ المزيد" alt="اقرأ المزيد"/>
و هذه
مجموعة من الصور من تصميمي ذات ألوان مختلفة يمكنك تحميلها و اختيار منها ما يناسب
ألوان مدونتك :
6- قم بالبحث عن الوسم التالي :
</head>
7-
قم بإضافة الكود
التالي فوق الوسم السابق :
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 150;
img_thumb_width = 200;
</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length>=1) {imgtag = '<div class="separator" style="clear: both; text-align: center;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = summary_img;}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>
مع مراعاة
التالي :
1-
" 400 " : عبارة عن عدد
الأحرف التي تظهر كمقتطف من الموضوع في حالة عدم وجود صورة للموضوع.
2-
" 300 " : عبارة عن عدد
الأحرف التي تظهر كمقتطف من الموضوع في حالة وجود صورة للموضوع.
3-
" 150 " : عبارة عن ارتفاع صورة الموضوع .
4-
" 200 " : عبارة عن عرض صورة الموضوع.
5-
الكود السابق
سيظهر الصورة في المنتصف.
و لإظهار الصورة على اليمين٬ قم باستبدال الكود التالي :
imgtag = '<div class="separator" style="clear: both; text-align: center;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
بهذا الكود :
imgtag = '<span style="float:right; padding:0px 0px 3px 8px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
و لإظهار الصورة على اليسار٬ قم باستبدال الكود التالي :
imgtag = '<div class="separator" style="clear: both; text-align: center;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
بهذا الكود :
imgtag = '<span style="float:left; padding:0px 8px 3px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
و بذلك
تكون قد أضفت خاصية " اقرأ المزيد " لمدونتك بطريقة جميلة و بسيطة.
تم بحمد الله تعالى
و انتظرونا في التدوينة القادمة بإذن الله تعالى
و انتظرونا في التدوينة القادمة بإذن الله تعالى
الاشتراك في:
تعليقات الرسالة (Atom)
إرسال تعليق
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .