اجدد الاخبار

إضافة مواضيع ذات صله بشكل جديد جدا وستايل انيق جدا

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

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


كيف أضيف موضوعات ذات صله إلى مدونتى على بلوجر :

1- إذهب إلى تحرير html لقالب مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة المستخدم ) كى يظهر الكود كاملا.
ثم إبحث عن الكود
]]></b:skin>
وقم بوضع هذا الكود فوقه مباشرة
/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
    font-family:Helvetica,Arial,sans-serif !important;
    font-size:10px !important;
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
ul#related-posts li{
    float: left !important;
    height: auto !important;
    margin:0 15px !important;
    padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
    margin:0 13px !important;
}
ul#related-posts li a {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #FFFFFF !important;
    display: block !important;
    height: 72px !important;
    position: relative !important;
    width: 72px !important;
}
ul#related-posts li a {
    color: #474C51 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
    height: 66px !important;
    line-height: 14px !important;
    padding:6px 0 0 6px !important;
    position: absolute !important;
    width: 66px !important;
    z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
    background: #fff !important;
    display: block !important;
    opacity:0.9 !important;
}
ul#related-posts li img {
    bottom: 0 !important;
    padding:0px !important;
}
ul#related-posts li a:hover {
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
2- والآن إبحث عن هذا الكود
 <b:includable id='backlinks' var='post'>
وقم بإستبداله بالكود التالى
<b:includable id='RelatedPosts' var='post'>
<!--remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeXZRkx1zag7frML2jmJrPy5liBKzc_N6y59lpnVmn_Gi-S6asFCeg1D_EgO2adettqDt7r2XWCXB9HZdbi09R1g7s-_5MQW2Z_hPL35aNkETuvj4n_4g7jXYlQ9J8ecqPZhNgP-yf-Qc0/&quot;;
var maxresults=6;
</script>
<script src='http://bloggerz.googlecode.com/files/related_posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
        <b:loop values='data:post.labels' var='label'>
             <b:if cond='data:label.isLast != &quot;true&quot;'>
        </b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if> <!--remove-->
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>
3- والآن الخطوه الأخيره وعليك فيها البحث عن أحد الأكواد التاليه فى كود قالب مدونتك
<div class='post-footer'>
        أو
<div class='post-footer-line post-footer-line-1'>
        أو
<div class='post-footer-line post-footer-line-2'>
        أو
<div class='post-footer-line post-footer-line-3'>
وقم بوضع الكود التالى أسفل الكود الذى تجده فى مدونتك من الاكواد السابقه
<b:include data='post' name='RelatedPosts'/>
4- والآن قم بحفظ القالب وشاهد مدونتك ... الإضافه تظهر فى مدونتك فى صفحات التدوينات اسفل التدوينه مباشرة.
وفى حال وجود اى أعطال أو أى عقبات أمام إضافتك لهذه الأكواد أو عدم ظهور الإضافه برجاء إبلاغنا.

مواضيع ذات صلة بشكل متحرك +صورة التدوينة

نبداء بالشرح الأن :.
اذهب الى المسار التالي
سجل الدخول للمدونة > تخطيط / تصميم >تحرير html
قم بتوسيع واجهة المستخدم بالنقر على توسيع واجهة المستخدم يجب الأنتباه لهاذه الخطوة
اضغط ctrl + f للبحث عن الكود
ابحث عن هذا الكود

</head>
استبدل الكود السابق بهذا الكود 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://files.bloggerwidgets.cz.cc/js/relatedthumbs21.js' type='text/javascript'/>
</b:if></head>
ابحث عن هذا الكود (ملاحضة هذا الكود لا يظهر الا عند توسيع واجهة المستخدم)

<data:post.body/>
استبدل الكود السابق بهذا الكود
<data:post.body/><br /><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>مواضيع ذات صلة</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='float:bottom-right'><a href=''></a></div></div>
</b:if>
يمكنك تغير النص الذي بالون الأزرق الى ما يناسبك مثل اخترنا لكم
احفظ القالب وعاين الأضافة في مدونتك وبأذن الله ستكون جميلة وفعالة  مع مدونتك
واي اسفسار انا جاهز بخصوص الأضافة او اي شيئ بخصوص مدونات البلوجر وشكرا للجميع

اضافة صورة اعلى صندوق التعليقات بمدونتك blogspot,blogger


الدرس منقول من مدونة اجنبية وبالتحديد من قالب توجد به الاضافة

مثال على الدرس


هذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 1280x800.
اضافة صورة اعلى صندوق التعليقات بمدونتك blogspot,blogger

لعمل ذلك اتبعوا التالى:
تحرير Html تم اضغط على توسيع قوالب عناصر واجهة المستخدم

ابحثوا عن التالى:


كود:
<b:if cond='data:post.embedCommentForm'>
كود:
<b:include data='post' name='comment-form'/>
ضعوا بين السطرين الكود التالي :

كود:
<a href=''><img alt='' border='0' src='http://s4up.com/upfiles/eNm40954.gif'/></a>
بامكانكم تغيير الصورة لما يناسب مدوناتكم

طريقة إضافة "روابط داخلية" في نفس الصفحة على Blogger

كلنا يعرف طريقة إضافة الروابط الداخلية لروابط داخلية لنفس المدونة أو عمل روابط خارجية لصفحات خارجية خارج المدونة , لكن درسنا اليوم سيكون مختلف نوعا ً , وهو عبار عن طريقة إدراج روابط داخلية داخل الصفحة بإستخدام العلامات المرجعية , أي بمجرد ضغطك على الرابط ستنتقل إلى المكان الذي تم وضع العلامة المرجعية عليها في نفس الصفحة .






الخطوة الأولى : التوجه إلى صندوق الإرسال , سيكون عملنا على تبويبة "تحرير HTML" :


الخطوة الثانية : نقوم بكتابة الـ Code التالي مع مراعاة تعديل ما تم تلوينه :

<a href="" id="AnchorName" name="AnchorName">Your Text</a>

AnchorName : قم بإستبدال "إسم العلامة المرجعية" بأي إسم تريده .

Your Text : هو النص الذي سيتم الإنتقال له بمجرد الضغط على الزر الذي سننشأه بعد قليل .

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



<a href="#AnchorName">Your Text</a>

AnchorName# : نلاحظ إرفاقنا لرمز "#" قبل إسم العلامة المرجعية التي قمنا بتحديدها .

Your Text : وهو النص الذي بمجرد ضغطنا عليه سنتوجه إلى العلامة المرجعية التي تم تحديدها مسبقا ً .

طريقة إضافة صندوق تعليقات الـ Facebook إلى مدونات Blogger

ما زال الـ FaceBook يثبت يوما ً بعد يوم أنه الأول والأقوى في مجال المواقع الإجتماعية , غير أنه يعتبر مصدر زوار لكثير من المدونات والمواقع إلا انه يحتوي على الكثير من الإضافات الرائعة , في درسنا هذا سنتطرق إلى أفضل إضافة من وجهة نظري وهي FaceBook Comment نعم إنها صندوق تعليقات الـ FaceBook المميز , نعم يمكنك الآن إستعمال صندوق الخاص بالـ FaceBook بدلا ً من التعليقات التقليدية الموجودة في Blogger , سنتعلم الطريقة الصحيحة بالشرح المصور لكي يتمكن كافة المدونون من الحصول على هذه الميزة الرائعة , الشرح بالتفصيل الممل .

الخطوة الأولى : بعد التسجيل في الـ Facebook  نقوم بزيارة الرابط التالي : Facebook developer page


الخطوة الثانية : ملأ البينات كما موضح في الصورة التالية :


تنويه مهم جدا ً : الرابط يكون على الشكل التالي :

http://www.hashem-b.com/

قم بتغيير النص الملون باللون الأزرق فقط ! لا تنسى أن تبقي الـ "/" بعد الرابط لأنه مهم جدا ً .




الخطوة الثالثة : نقوم بالتحقق الامني بكتابة الأحرف المكتوبة في الصورة :


الخطوة الرابعة : ستظهر لك صفحة مهمة جدا ً فيها أهم شئ في درسنا هذا , قم بحفظ الـ "App ID" أو "معرف التطبيق" :


أعيد وأكرر : لا تسنى إنه أهم شئ في درسنا فقم بالإحتفاظ به لأننا سنستعمله بعد قليل .

الخطوة الخامسة : من لوحة التحكم >> تصميم >> تحرير HTML :





الخطوة السادسة : التأشير على "توسيع قوالب عناصر واجهة المستخدم" :





الخطوة السابعة : نبحث عن الكود التالي :




<data:post.body/>


الخطوة الثامنة : نقوم بنسخ الكود التالي بعد الكود السابق تماما ً :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p align='left'></p>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
FB.init({appId: '194613137236074', status: true, cookie: true,xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  e.src = document.location.protocol  +
  &#39;//connect.facebook.net/en_US/all.js&#39;;
  e.async = true;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments/>
  </b:if>



الآن نقوم بتعويض القيمة الملونة باللون الأحمر بالرقم الذي حصلنا عليه من  "App ID" أو "معرف التطبيق" .

الشكل النهائي بعد الإنتهاء :


الخطوة الثامنة : هي إخفاء التعليقات لأنه بعد إضافة صندوق تعليقات الـ FaceBook سيكون لدينا نموذجين للتعليقات , من لوحة التحكم >> إعدادات >> إخفاء . كما في الصورة التالية :


إسمحوا لي الآن أن أقوم بشرح صندوق التعليقات الخاص بالـ FaceBook :

ليس شرطا ً أن يكون الشخص الذي يود التعليق على موضوع ما ممتلكا ً لحساب على الـ FaceBook بل يمكنه إدخال إسمه ورابط موقعه أو بريده الإلكتروني :


وفي حال كونك قد قمت بتسجيل الدخول في وقت لاحق يكون الشكل كما في الصورة التالية :


أما الصورة التالية فستبين كيفية إدراج التعليقات :


لاحظ أن التعليقات تأتي الأحدث بالأقدم , أول Comment كان "مرحبا ً (:" وآخر Comment كان "أنا هنا (:" يمكن للزوار حذف الـ "Comment" الذي يكتبونه كالـ FaceBook تماما ً .

قد يسألني البعض هل يمكن أن نخضع تعليقات الـ FaceBook قبل النشر كما في Blogger ؟

الجواب : لا يمكن فعل ذلك لكن يمكن وضع كلمات محظورة لا يمكن أن تظهر كالشتائم مثلا ً , سنتطرق لها في دروس لاحقة .

طيب هل يمكن أن نحذف Comment أو نقوم بحظر أحد المزعجين ؟

الجواب : بالطبع نعم ولكن كما قلت في بداية الموضوع قبل الدخول إلى Facebook developer page يجب أن نكون قد سجلنا الدخول من قبل , وفي حال أردنا التحكم بالتعليقات يجب الدخول إلى حساب الـ FaceBook الخاص بنا عندما قمنا بإضافة هذه الإضافة .


كما يمكن الإستفادة من هذه الإضافة في نشر مدونتك أو موقعك أكثر وأكثر على الفيس بوك بحيث عندما يقوم الزائر بإضافة تعليق وإبقاء التأشيرة على "Post comment to my Facebook profile" فسيظهر الرد الذي كتبه مع رابط للصفحة على صفحته في الفيس بوك :


أرجو أن يكون الدرس مفيدا ً وواضحا ً للجميع , تمنياتي بالتوفيق للجميع :)

ملاحظة : الموضوع حصري , شكرا ً لتفهمكم وتقديركم للتعب المبذول عليه :)


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

طريقة إضافة تعليقات DisQus الشبيهة بتعليقات الـ FaceBook لصفحاتك


هذا النموذج شبيه بنموذج تعليقات الـ FaceBook لكنني أعتبره أفضل بـ 100 مرة , حيث أن المواقع الأجنبية الكبيرة تستعمل هذا النموذج مثل الموقع الإخباري CNN .