اضافة خاصية اقرا المزيد لتلخيص المواضيع وتنسيق قوالب بلوجر - عالم المدون

الأربعاء، 21 يونيو، 2017

اضافة خاصية اقرا المزيد لتلخيص المواضيع وتنسيق قوالب بلوجر

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

لذلك اليوم أحببت أن أشارك معكم ومعى متابعى المدونة هذا الموضوع عندما طلبه منى أحد متابعى المدونة وانا اعرف جيدا أن هذا الموضوع قد يكون قديما جدا وأن يوجد الكثير من المدونين قامو بنشر مثل هذا الموضوع ولكنى اليوم سوف أقوم بوضع شرح لكل من  من يعملون على تصميم قوالب بلوجر والذى لديهم قالب جاهز لايوجد به فقط زر اقرا المزيد وفى الحاله الثانية سوف يحتاج فقط كود بسيط لوضع الأضافة أم الحاله الأوله فسوف يحتاج الى جميع الأكواد.




ما هى خاصية اقرا المزيد


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

تحميل الأكواد كامله


تحميل الأكواد كامله لمن لريد فقط زر اقرا المزيد ومن يريد الأكواد كامله لتصميم قالب بلوجر

 تحميل الأكواد 


شرح التركيب

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

  • أولا عليك وضع هذا الكود فوق الوسم هذا</head>فى قالب مدونتك
  • وان لم تجد هذا الوسم أبحث عنه هكذا<head/>

<script type='text/javascript'>
posts_no_thumb_sum = 200;
posts_thumb_sum = 120;
img_thumb_height = 195;
img_thumb_width = 290;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<div class="posts-thumb"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></div>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div class="post-info"><h2 class="post-title"><a href="' + pURL + '">' + pTITLE + '</a></h2></div><div class="post-summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

  • فى هذا الكود سوف يكون عليك تعديل بعد الأمور اذا تريد مثل الأرقام فى أول الكود
  • الرقم 200 هو عدد حروف جزء الموضوع بدون صورة للموضوع
  • الرقم 120 هو عدد الحروب مع وجود صورة للموضوع
  • الرقم 195 هو ارتفاع الصورة
  • الرقم 290 هو عرض الصورة

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

  • الأن عليك وضع الكود الثانى وهو كود html
  • قم بالبحث عن هذا الوسم<data:post.body/>ثم ضع بدل منه هذا الكود


<b:if cond='data:blog.pageType not in {"item","static_page"}'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<b:if cond='data:blog.pageType in {"item","static_page"}'>
<data:post.body/>
</b:if>

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


وفى الكود السابق هذا سوف تجد كود محدد بالأحمر هذا الكود من المكنك أنك سوف تجد مثله فى قاب مدونتك من قبل لذلك عليك حذفه من المدونة وهذا هو الكود مرة اخر الذى سوف تحذف اذا وجدته والكود التالي هذا يختلف قليل عن الكود المحدد بالامر فوق فى أول وسم به واخر وسم ولكن سوف تبحث عن كود هو فى الكود التالى وتحذفه اذا وجدته

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

هذا الكود هو يظهر زر اقرا المزيد فقط عندما تضع فى الموضوع الخاص بك عندما تكتبه رابط أنتقال عندما تريد تقليل محتوى الموضوع فى الصفحة الرئيسية ذلك عليك حذفه حتى لا يظهر بعد ذلك 2 من أزرار اقرا المزيد

  • الأن هذا كود استايل بسيط للأضافة
  • سوق تبحث عن هذا الوسم]]></b:skin> ثم تضعه فوقه

.jump-link a {
  display: inline-block;
  font-family: 'Moussa-font';
  background: #FF5722;
  color: #Fff;
  font-size: 15px;
  padding: 7px 15px;
  float: right;
  margin-right: 15px;
  border-radius: 2px;
  transition: all .3s;
  -webkit-transition: all .3s;-o-transition: all .3s;
  -moz-transition: all .3s;
}

الأن تقوم بحفظ القالب ومبروك عليك الإضافة الجديده


تركيب الإضافة لمن لديه يريد زر اقرا المزيد فقط


لن تستخدم فى هذا الأمر كود السكربت الأول فى أول الموضوع فقط سوف نتسخدم كود html و كود الأستايل فقط


  • أبحث عن هذا الوسم<data:post.body/> ثم قم بوضع أسفله الكود التالى


<div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>


  • الأن ثم بالبحث عن هذا الوسم]]></b:skin>ثم ضع فوقه الكود هذا

.jump-link a {
  display: inline-block;
  font-family: 'Moussa-font';
  background: #FF5722;
  color: #Fff;
  font-size: 15px;
  padding: 7px 15px;
  float: right;
  margin-right: 15px;
  border-radius: 2px;
  transition: all .3s;
  -webkit-transition: all .3s;-o-transition: all .3s;
  -moz-transition: all .3s;
}

  • وايضا فى هذا الطريقة يمكنك البحث ايضا عن هذا الكود واذا وجدته احذفه

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link' style='     display: none; '>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

  • الأن عليك فوق حفظ القالب ومبروك عليك زر اقرا المزيد فقط


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

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله


لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

8 تعليق على موضوع : اضافة خاصية اقرا المزيد لتلخيص المواضيع وتنسيق قوالب بلوجر

شكرا لك أخى الفاضل x-)

السلام عليكم
هل أجد عندكم كود يمكنني من تكبير حجم الخط للمواضيع فقط
كلما اكتب موضوع واكبر حجم الخط لنهاية واقوم بحفظ الموضوع اجد الروابط صغيرة
أنظر إلى الروابط برغم انني قمت بتكبير الخط http://www.mopanime.tk/2017/05/blame-movie-00.html
هل يوجد كود يوضع داخل الموضوع فى جهة html أم لا لأني بحت عنه ولم أجده و شكرا

أبحث عن هذا الوسم ]]></b:skin>
ثم ضع فوقه هذا الكواد

.post span {font-size: 30px!important;}
.post a {font-size: 30px!important;}
.post b {font-size: 30px!important;}

شكرا لك يا اخي لكني
اجد صعوبة فى التعديل عليه
عندما ازيد العدد فى الاول
يصبح الاخير مثلا كبير جدا
وبعضا الاماكن فى المدونة تتاثر بحجم الخط
والبعض يصبح جيد جدا ولكن تركته بعد التعديل الصعب هكذا
.post span {font-size: 16px!important;}
.post a {font-size: 18px!important;}
.post b {font-size: 24px!important;}

فقط عليك أخى الفاضل أ نيكون لديك خبرة فى css وسوف تقوم بالتعديل عليه بدون اى مشكلة

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

شكرا لك أخى الفاضل

يوجد بالفعل قسم خاص بذلك وهو تحت أسم الدعم الفنى

سوف تجد الرابط الخاص به فى القائمة الجانبية

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر