إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات مع الصور

إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات مع الصور مع إلغئها في الصفحات الثابتة

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

</head>

قم بلصق الكود التالي قبله مباشرة :ملاحظة : عند تطبيقك لهذا الكود سوف يتم عرض صورة الملخص على اليسار ,ولعرض صورة الملخص على اليمين ،تجاهل هذا الكود وقم بلصق الكود الذي يليه.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

الصورة في يمين النص

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

وإذا رغبت في ظهور الصورة في الوسط قم بلصق الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

والآن قم بالبحث عن الكود التالي :

<data:post.body/>

ثم قم بإستبدالة بهذا الكود :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

يمكنك تبديل كلمة "إقرأ المزيد" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :

وذلك بإستبدال عبارة إقرأ المزيد.. بالكود التالي :

<img src="https://sites.google.com/site/lightbox007/photo/readmore.jpg" title="إقرأ المزيد" alt="إقرأ المزيد"/>

و إذا رغبت في تبديل الصورة ،عليك فقط تبديل ما لون باللون الأحمربرابط الصورة المراد تبديلها
ولا تنسى أن تساهم في نشر المدونة،في إنتظار تشجيعاتكم

شرح لاضافة ثلاثة اعمدة في فوتر مدونات بلوجر

طبعا معظم المدونات تحتوي هذه الاضافة لكن هذا الدرس للمدونات التي لا تحتوي الاعمدة



الاضافة ستكون بهذا الشكل






http://www.blogger.com


ثم لوحة لتحكم ثم تحرير HTML

وقم بتوسيع القالب

اضغط على CTRL+F

وابحث عن

كود بلغة HTML:

</body>

أضف هذا الكود بعده مباشرة

كود:

 



<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

ثم ابحث عن

كود:

]]></b:skin>

ثم أضف هذا الكود قبل الكود السابق مباشرة

كود:

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#dde9f3;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: right;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: right;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 13px Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

ارجو ان اكون وفقت في الشرح

والسلام عليكم ورحمة الله