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

1-اداة المشاركات الشائعه بشكل محترف

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

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

1. لنمر الان الى شرح طريقة وضع الاضافة الرائعة :

• توجه الى لوحة التحكم في بلوجر واختر التعديل على HTML في القالب قم بالبحث عن الوسم التالي : ]]></b:skin> ثم أضف الكود التالي فوقه مباشرة :

#PopularPosts1 ul li a:hover{color:#000; text-decoration: none !important; margin-bottom:0 !important;}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #2a4057; display: block;font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;height:51px}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #2d4562;background:#0099ff;-webkit-box-shadow:0px 0px 5px #2d4562;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}#PopularPosts1 ul li:first-child + li + li + li + li +li{width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li {  background:#f9f9f9;  border: 2px solid#0099ff;  border-radius: 25px 0;  margin: 6px 0;  padding: 10px;  position: relative;}#PopularPosts1 ul li:hover{background:#F1FBFE; border: 2px solid#2d4562;}#PopularPosts1 img {border-radius:15px;max-width:60px;max-height:60px;margin-left:4px;}

1. الان توجه الى التخطيط وضع اعدادت المشاركات كما في الصورة

1. تعديل الوان الكود

 الكودين اللذين بالأحمر هما لون خلفية المشاركات الشائعة ولون الإطار

الكودين المعلمان بالبرتقالي هما نفس الشئ ولكن عند مرور الماوس.

هذه الاضافة تتميز بكونها تعطي شكل رائع للمدونة فهي تجعل المشاركات الشائعة تظهر بشكل رائع كما تظهر المواضيع بترقيم..

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

#المصدر انس للمعلومات

2-اضافة خاصية اقرا المزيد او شاهد المزيد الى قوالب بلوجر

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

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

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

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

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

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

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

شرح التركيب

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

1. أولا عليك وضع هذا الكود فوق الوسم هذا</head>فى قالب مدونتك
2. وان لم تجد هذا الوسم أبحث عنه هكذا<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>

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

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

1. الأن عليك وضع الكود الثانى وهو كود html
2. قم بالبحث عن هذا الوسم<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 من أزرار اقرا المزيد

1. الأن هذا كود استايل بسيط للأضافة
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 و كود الأستايل فقط

1. أبحث عن هذا الوسم<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>

1. الأن ثم بالبحث عن هذا الوسم]]></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;
}

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

<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>

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

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

المصدر:مدون بلوجر