walid
11-01-2013, بتوقيت غرينيتش 08:08 AM
السلام عليكم ورحمة الله تعالى وبركاته
الحمد لله والصلاة والسلام على رسول الله
http://3.bp.blogspot.com/-HIsu8I3yT3o/UXlJ_M2QnVI/AAAAAAAAAZc/M563Y5ZNERE/s1600/more0.png
الإضافة الأكثر إستخداماً هي إضافة إقرأ المزيد وفي رايي هي اهم إضافة للحفاظ على مظهر وسرعة المدونات من يستغني عن تلك
الإضافة يحرم مدونته من السرعة والتنسيق لكن أغلب من يضيف إقرأ المزيد أو يحدث عنها يتكلم عن التركيب install فقط ولكن طريقة الإستخدام أمر أهم بكثير أغلب المدونات
التي رأيتها تركب تلك الإضافة لا تحسن إستخدامها وسنتكلم عن الامرين التركيب install الصحيح وطريقة الإستخدام المثالية
علينا اولا أن نعرف أن هناك إضافتين لإقرأ المزيد الأولى المدمجة عن طريق بلوجر والتي يتم وضعها يدويا بالضغط على الرمز الخاص بها في صندوق كتابة الرسائل والرمز يختلف من متصفح لآخر بسبب مشكلة لم تحل حتى الآن في منصة بلوجر في عرض أيقونات صندوق الرسائل لكن الصورة التالية توضح هذه الرموز
http://1.bp.blogspot.com/-agspnFU-NoI/UXlJ-kzUcLI/AAAAAAAAAZY/5vZLsbrwH4U/s1600/more+(1).png
والإضافة الثانية هي الإضافة التلقائية وهي المنتشرة في كل المدونات تقريبا لكل منهما مميزات وعيوب مميزات الإضافة الأولى أنها بالفعل تكون فاصل يعفي الزائر من تحميل الموضوع بالكامل عيبها أنها غير منسقة فكل موضوع يحمل شكل مختلف بحسب ما تكتب أما مميزات الإضافة التلقائية هي أنها منسقة وممتازة في جعل شكل المدونة blog رائع عيبها انها لا تقوم فعليا بعمل فاصل بل تقوم فقط بإخفاء الموضوع ولكن يقوم الزائر بتحميل المواضيع كلها دون أن يشاهدها وهذا يجعل المدونات ثقيلة جدا ويفر الزوار منها أو يكتفي بمشاهدة صفحة واحده
الدليل على أنها تخفي الموضوع فقط أن بعض أصحاب المواضيع كبيرة الحجم قد يكون محدد أن تظهر في صفحته الرئيسية 10 مواضيع لكنه يجد موضوعين أو ثلاثه وهذا لان بلوجر تحدد حجم معين للصفحة لا يزيد ولأن الإضافة تخفي الموضوع فيبقى حجم الصفحة كبير ولا يظهر العدد المحدد من المواضيع لذا الحل الأمثل هو دمج الإضافتين معاً ناخذ مميزات كل واحدة ونترك العيوب ليكون الناتج إضافة مثالية
أولا نقوم بإضافة خاصية إقرأ المزيد التلقائية
خذ أولا نسخة إحتياطية من قالب templateك لتجنب اى مشكلات
أدخل على تحرير القالب template وعلم على خانة توسيع العناصر
http://1.bp.blogspot.com/-GmP7oBnlQvw/UXlGtdO4N1I/AAAAAAAAAZI/GMUugGnjchk/s1600/9alab.png
إبحث عن هذا الوسم </head> واضف فوقه أحد الأكواد التالية
لجعل الصورة على اليمين ركب هذا الكود code
رمز Code:
<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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 = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
لجعل الصورة على اليسار ركب هذا الكود code
رمز Code:
<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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 = '<span style="float:left; padding:0px 10px 5px 0px;"><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>
لجعل الصورة في الوسط ركب هذا الكود code
رمز Code:
<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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>
مع الوضع في الإعتبار أن
summary_noimg = 250; عدد الأحرف الظاهرة إن لم تكن هناك صورة
summary_img = 200; عدد الأحرف الظاهرة مع وجود صورة
img_thumb_height = 150; إرتفاع الصورة
img_thumb_width = 150; عرض الصورة
ثم نبحث هذا الكود code <data:post.body/>
و نستبدله بالتالي
رمز Code:
<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 إن أردت جعل كلمة إقرا المزيد على اليمين
ويمكن إستبدالها بصورة
بوضع الكود code التالي بدلامن كلمة إقرأ المزيد
<img src="رابط الصورة" title="إقرأ المزيد" alt="إقرأ المزيد"/>
الآن تم إضافة إقرأ المزيد التلقائية ولتحسين الإستخدام إستخدم إقرأ المزيد المدمجة في بلوجر بوضع فاصل بعد إضافة أول صورة في موضوع وكتابة عدد من الأسطر يكفي للظهور
قد يسأل البعض وماذا عن المواضيع القديمة التي لم يتم إضافة فاصل لها
ستظهر بشكل منسق هي أيضا ولكن ستظل عبئ في التحميل للزائر إن إستطعت يمكنك يوميا تعديل 5 مواضيع مثلا
أدخل واضف الفاصل فقط لن يأخذ منك خمس دقائق وخلال أيام ستجد أنك عدلت جميع مواضيعك
ملحوظة عند إستخدام الإضافتين مع بعض قد نجد كلمتين لإقرأ المزيد واحدة تخص الإضافة التلقائية وواحدة تخص الإضافة المدمجة
لذا سنحذف أحدهما وسنختار الخاصة بالإضافة المدمجة لانها تظهر مع بعض المواضيع وليس كلها
وهذا هو الكود code إبحث عنه وإحذفه
رمز Code:
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>
منقول للأمانة من مدونة blog إحترف (http://www.e7tarif.com/)
الموضوع الأصلي (http://www.e7tarif.com/2014/04/Read-More.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
الحمد لله والصلاة والسلام على رسول الله
http://3.bp.blogspot.com/-HIsu8I3yT3o/UXlJ_M2QnVI/AAAAAAAAAZc/M563Y5ZNERE/s1600/more0.png
الإضافة الأكثر إستخداماً هي إضافة إقرأ المزيد وفي رايي هي اهم إضافة للحفاظ على مظهر وسرعة المدونات من يستغني عن تلك
الإضافة يحرم مدونته من السرعة والتنسيق لكن أغلب من يضيف إقرأ المزيد أو يحدث عنها يتكلم عن التركيب install فقط ولكن طريقة الإستخدام أمر أهم بكثير أغلب المدونات
التي رأيتها تركب تلك الإضافة لا تحسن إستخدامها وسنتكلم عن الامرين التركيب install الصحيح وطريقة الإستخدام المثالية
علينا اولا أن نعرف أن هناك إضافتين لإقرأ المزيد الأولى المدمجة عن طريق بلوجر والتي يتم وضعها يدويا بالضغط على الرمز الخاص بها في صندوق كتابة الرسائل والرمز يختلف من متصفح لآخر بسبب مشكلة لم تحل حتى الآن في منصة بلوجر في عرض أيقونات صندوق الرسائل لكن الصورة التالية توضح هذه الرموز
http://1.bp.blogspot.com/-agspnFU-NoI/UXlJ-kzUcLI/AAAAAAAAAZY/5vZLsbrwH4U/s1600/more+(1).png
والإضافة الثانية هي الإضافة التلقائية وهي المنتشرة في كل المدونات تقريبا لكل منهما مميزات وعيوب مميزات الإضافة الأولى أنها بالفعل تكون فاصل يعفي الزائر من تحميل الموضوع بالكامل عيبها أنها غير منسقة فكل موضوع يحمل شكل مختلف بحسب ما تكتب أما مميزات الإضافة التلقائية هي أنها منسقة وممتازة في جعل شكل المدونة blog رائع عيبها انها لا تقوم فعليا بعمل فاصل بل تقوم فقط بإخفاء الموضوع ولكن يقوم الزائر بتحميل المواضيع كلها دون أن يشاهدها وهذا يجعل المدونات ثقيلة جدا ويفر الزوار منها أو يكتفي بمشاهدة صفحة واحده
الدليل على أنها تخفي الموضوع فقط أن بعض أصحاب المواضيع كبيرة الحجم قد يكون محدد أن تظهر في صفحته الرئيسية 10 مواضيع لكنه يجد موضوعين أو ثلاثه وهذا لان بلوجر تحدد حجم معين للصفحة لا يزيد ولأن الإضافة تخفي الموضوع فيبقى حجم الصفحة كبير ولا يظهر العدد المحدد من المواضيع لذا الحل الأمثل هو دمج الإضافتين معاً ناخذ مميزات كل واحدة ونترك العيوب ليكون الناتج إضافة مثالية
أولا نقوم بإضافة خاصية إقرأ المزيد التلقائية
خذ أولا نسخة إحتياطية من قالب templateك لتجنب اى مشكلات
أدخل على تحرير القالب template وعلم على خانة توسيع العناصر
http://1.bp.blogspot.com/-GmP7oBnlQvw/UXlGtdO4N1I/AAAAAAAAAZI/GMUugGnjchk/s1600/9alab.png
إبحث عن هذا الوسم </head> واضف فوقه أحد الأكواد التالية
لجعل الصورة على اليمين ركب هذا الكود code
رمز Code:
<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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 = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
لجعل الصورة على اليسار ركب هذا الكود code
رمز Code:
<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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 = '<span style="float:left; padding:0px 10px 5px 0px;"><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>
لجعل الصورة في الوسط ركب هذا الكود code
رمز Code:
<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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>
مع الوضع في الإعتبار أن
summary_noimg = 250; عدد الأحرف الظاهرة إن لم تكن هناك صورة
summary_img = 200; عدد الأحرف الظاهرة مع وجود صورة
img_thumb_height = 150; إرتفاع الصورة
img_thumb_width = 150; عرض الصورة
ثم نبحث هذا الكود code <data:post.body/>
و نستبدله بالتالي
رمز Code:
<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 إن أردت جعل كلمة إقرا المزيد على اليمين
ويمكن إستبدالها بصورة
بوضع الكود code التالي بدلامن كلمة إقرأ المزيد
<img src="رابط الصورة" title="إقرأ المزيد" alt="إقرأ المزيد"/>
الآن تم إضافة إقرأ المزيد التلقائية ولتحسين الإستخدام إستخدم إقرأ المزيد المدمجة في بلوجر بوضع فاصل بعد إضافة أول صورة في موضوع وكتابة عدد من الأسطر يكفي للظهور
قد يسأل البعض وماذا عن المواضيع القديمة التي لم يتم إضافة فاصل لها
ستظهر بشكل منسق هي أيضا ولكن ستظل عبئ في التحميل للزائر إن إستطعت يمكنك يوميا تعديل 5 مواضيع مثلا
أدخل واضف الفاصل فقط لن يأخذ منك خمس دقائق وخلال أيام ستجد أنك عدلت جميع مواضيعك
ملحوظة عند إستخدام الإضافتين مع بعض قد نجد كلمتين لإقرأ المزيد واحدة تخص الإضافة التلقائية وواحدة تخص الإضافة المدمجة
لذا سنحذف أحدهما وسنختار الخاصة بالإضافة المدمجة لانها تظهر مع بعض المواضيع وليس كلها
وهذا هو الكود code إبحث عنه وإحذفه
رمز Code:
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>
منقول للأمانة من مدونة blog إحترف (http://www.e7tarif.com/)
الموضوع الأصلي (http://www.e7tarif.com/2014/04/Read-More.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
