| 2 التعليقات ]

بسم الله و الحمد لله و الصلاة و السلام على رسول الله.
السلام عليكم و رحمة الله.
لربما لاحظتم إن كنتم من مستعملي مسودة بلوجر ظهور خاصية جديدة تتيح تغيير أيقونة المدونة favicon، تلك الأيقونة الصغيرة التي تظهر إلى جانب عنوان المدونة على المتصفح. كنا فيما قبل نلجأ لإضافة بعض الأكواد إلى القالب لتغييرها أما الآن فالطريقة باتت أسهل و أأمن ... لذلك ارتأيت أن أبرزها عبر هذا المقطع الذي تجدونه أسفله، و لكن قبل الشروع في تغيير الأيقونة وجب التنبيه إلى ما يلي:
لا يمكن رفع سوى الأيقونات بالامتداد ico. فلو وددت رفع صورة و عسر عليك تحويلها إلى الامتداد المذكور فاستعن بهذا الموقع الذي ييسر ذلك icoconverter.com
يحبذ أن تكون أبعاد الأيقونة  16 x 16 و لو كانت أكبر بقليل فلا ضير.
بعد رفع الأيقونة لربما لن تظهر في التو و اللحظة، جرب ان تضغط Ctrl + F5 بضع مرات فإن لم تفلح فاترك الأمر لمتصفحك فستظهر بعد سويعات قليلة.
متابعة شيقة
» تابع القراءة

| 0 التعليقات ]

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


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

تعليقات فيسبوك كما تبدو على المدونة

إدارة التعليقات كما تبدو في الإضافة

طريقة تركيب تعليقات فيسبوك



الخطوة الأولى: إنشاء تطبيق خاص على الفيسبوك

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


كما وضح من خلال الصورة ستدخل رابط مدونتك و رابط اسم النطاق الذي عليه مدونتك، مثلا blogspot.com لمدونات بلوجر التي لا تستعمل اسم نطاق خاص. كذلك ستكون قد نسخت معرف التطبيق الموضح في الصورة لانك ستحتاجه فيما بعد.



الخطوة الثانية: إضافة الأكواد اللازمة إلى قالب المدونة

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

xmlns:fb='http://www.facebook.com/2008/fbml' 

و سيصبح إذن الكود بهذا الشكل :

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

الآن ابحث عن <body> و بعده مباشرة ألصق الكود الآتي بعد استبدال معرف التطبيق بالأرقام التي نسختها سابقا في الخطوة الأولى:

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: معرف التطبيق });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ar_AR/all.js'
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

بعد ذلك ابحث عن </head> ثم قبله مباشرة ألصق الكود الآتي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='عنوان المدونة' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='معرف التطبيق ID'   property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

هذا الكود خاص ب Open Graph protocol وهو يتيح لفيسبوك التعامل مع موقعك أو مدونتك كما لو كان صفحة كما صفحات فيسبوك... طبعا لا تنس تغيير ما أشير إليه بالألوان كما يلي:
عنوان المدونة : عنوان مدونتك أو أي اسم تحب أن يظهر على فيسبوك عندما يعجب أحدهم بإحدى تدويناتك.
الرابط البرتقالي : استبدله برابط صورة لشعار مدونتك.
معرف التطبيق ID : طبعا هو نفسه المعرف الذي نسخته في الخطوة الأولى.
معرف حسابك على فيسبوك ID : هو مجموعة أرقام يمثل حسابك على فيسبوك لمعرفته يمكنك زيارة هذا الموضوع. فبحسابك هذا ستكون مدير التعليقات Admin.


ثم ابحث عن <data:post.body/> و بعده مباشرة ألصق الكود الموالي مع تعديل ما لون:
560 استبدلها بالعرض المناسب الذي تريد أن يبدو عليه صندوق تعليقات فيسبوك، و هذا هو الكود الذي يتولى إظهار صندوق التعليقات، فيمكنك إدراجه في أمكنة أخرى غير الذي ذكر بما يناسب مدونتك.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>

ملاحظة: لمن يملكون قوالب داكنة أو سوداء اللون يمكنه استعمال صندوق تعليقات فيسبوك باللون الأسود و لفعل ذلك نضيف colorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.

و أخيرا اضغط زر الحفظ و هنيئا لك.

تنويه:
كود Open Graph protocol مأخوذة من AllBlogTools.com

» تابع القراءة

| 0 التعليقات ]

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

كما تلاحظون في المثال فقد أضفت نصا و صورة فوق صندوق التعليق مباشرة لكن بطريقتين مختلفتين.

طريقة إضافة صورة أو نص فوق صندوق التعليقات


الطريقة الأولى
هذه هي الأسهل، فمن لوح تحكم مدونتك توجه إلى إعدادات ثم تعليقات و انزل أسفل الصفحة حتى تجد خيار رسالة نموذج التعليق و في الحقل المقابل لها أدخل النص المراد عرضه فوق صندوق التعليق ثم اضغط زر حفظ الإعدادات، و لتعلم أن هذه الطريقة لا تمكنك من عرض صورة أو إدخال أوسمة HTML ( فقط بعض الأوسمة متاحة مثل <b>, <i>, <a>). فإن كنت تحتاج فقط لإضافة نص أنصحك بهذه الطريقة، أما إن احتجت لإدراج صورة أو كود HTML مركب فاتبع الطريقة الثانية إذن.

الطريقة الثانية
أولا يتعين عليك تجهيز ما ستدرجه فوق صندوق التعليق و أقصد هنا كود HTML . فمثلا لو أردنا إدراج صورة سيكود كود Html كالآتي.

<img src="رابط الصورة" border="0" />
مكان النص الأحمر ضع رابط الصورة المراد إدراجها فوق صندوق التعليقات.
بعد ذلك من لوح تحكم مدونتك توجه إلى صفحة التصميم ثم تحرير HTML و قبل أي تعديل احفظ نسخة احتياطية من قالبك بعد ذلك ضع علامة في خانة توسيع القالب.
ثم ابحث عن <p><data:blogCommentMessage/></p>
و مباشرة تحتها أضف كود HTML الذي جهزت و تود إضافته فوق صندوق التعليق بحيث يصبح الكود كالآتي.
<p><data:blogCommentMessage/></p>
<img src="رابط الصورة" border="0" />
ثم احفظ القالب.

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

صورة تذكير و تنبيه:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhckc-d0Q5rm6w3pcMLhlCSlr0M9tXRpisIJAUIgN7hyphenhyphenAs17u76ValqbwsdNSAsLKT6RJPnl5PCrcwgW2H-6BWKW0tMod_GdLhdQFJ96R2RFdn2wCoj8hgYy800qlCyVlAtMQdNzuq120c/s512/warnning.png" border="0" />
 
صندوق HTML

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

<div class="warning" style="background:#F3F9FB url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgciL-b6z-sKj3LsSQ2HK2Fpwd65nCDKhInrO7LJ6NO8Z4bWpJKsdoRSWoD_OJc1djmEs2SJc5D1ecxCWdl7EHpQTrS9FeFiu6AKqyMUu0EecTkfOmIxIsKD9nY1cMyZnrP94oqllLIIhI/) 8px 6px no-repeat ; border:#A8D1E6 1px solid; padding: 5px 5px 5px 40px;"> فقرة من بضع جمل </div>


» تابع القراءة

| 0 التعليقات ]

أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة. و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin لإنشاء هذه الإضافة الممتازة. و اعتماداعلى نفس الموضوع سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب. بسم الله نبدأ.
يمكن تجريب الإضافة من خلال هذه المدونة التجريبية. حاول النزول لأسفل الصفحة و سيظهر الزر تلقائيا.

طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن
]]></b:skin>

و مباشرة تحتها نضيف الكود الموالي

<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery-1.3.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery.scrollTo-1.4.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200,
ieOffset: 50
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.css(&#39;display&#39;,&#39;none&#39;); //in case the user forgot
$(window).scroll(function() {
if(!jQuery.support.hrefNormalized) {
el.css({
&#39;position&#39;: &#39;absolute&#39;,
&#39;top&#39;: $(window).scrollTop() + $(window).height() - settings.ieOffset
});
}
if($(window).scrollTop() &gt;= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$(&#39;#top-link&#39;).topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$(&#39;#top-link&#39;).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
* الرابطين المشار إليهما باللون الأزرق هما لمكتبة ال jQuery و سكريبت الانتقال لأعلى الصفحة ، إن أردت رفعهما على استضافتك الخاصة يمكنك تحميلهما من هنا . تحميل الملفين

ثم فوق هذا الكود مباشرة
]]></b:skin>

نضيف كود ال css هذا، و من خلاله يمكن تعديل شكل زر الصعود لأعلى الصفحة حيث يمثل اللون الأحمر إطار الزر بينما الأخضر للون خلفيته.

#top-link {
display:none;
position:fixed;
right:5px;
bottom:5px;
color:green;
font-weight:bold;
text-decoration:none;
border:1px solid green;
background:Lightgreen;
padding:10px;
}

بعد ذلك نضع كود ال XHTML الموالي بين وسمي body ، مثلا مباشرة فوق </body> و نحفظ القالب.

<a href='#top' id='top-link'>إلى الأعلى</a>
طريقة الإضافة في مدونات ووردبريس
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .

طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت و كودي css و xhtml في القالب.

» تابع القراءة

| 0 التعليقات ]


و يمكن مشاهدة مثال حي بهذه الصفحة : صفحة الأرشيف

الطريقة

أولا من لوح تحكم المدونة اضغط " إرسال " لبدء تدوينة جديدة ثم ضع لها عنوانا من قبيل فهرس المدونة أو خريطتها ...
ثانيا ضع الكود الآتي في مكان النص مع استبدال ما كتب بالأزرق برابط مدونتك .


<script style="" src="http://sites.google.com/site/simoxisite/Home/archive.js"></script>
<script src="http://doaib.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

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


رابعا يجب وضع رابط لصفحة الفهرس على الصفحة الرئيسية كما أفعل في مدونتي حيث وضعته بالقائمة العلوية ، أو يوضع بالقائمة الجانبية ... حتى يصل إليه زوار المدونة .
و أخيرا لمن أحب أن يضع فهرسا بشهور إنجليزية ما عليه سوى زيارة الموضوع الأصلي الذي أعده أخونا أبو فرحان عبر هذا الرابط .
Table of Contents Categorized by Dates (by Archived) for Blogger

» تابع القراءة

| 0 التعليقات ]


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

أولا : إدخال الكود عبر محرر المدونة

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



ثانيا: تنسيق الكود

تمثيلا لما سبق سأدرج هذا الكود

type="text/javascript">

document.write("Hello World!")

</script>

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

<script type="text/javascript">
document.write("Hello World!")
</script>


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

<div style="text-align: left;">
تجعله هكذا بإضافة ما لون بالأحمر
<div dir="ltr" style="text-align: left;">
بعد ذلك سيصبح الكود الذي أدخلت هكذا
تلاحظ الآن كيف أصبح تنسيقه حسنا :)
<script type="text/javascript">
document.write("Hello World!")
</script>
ثالثا: خلفية الكود

لتمييز الكود عن بقية النصوص سنضعه في إطار و سنستخدم لذلك أداة الاقتباس الموجودة في المحرر. فبعد تحديد الكود مرة أخرى نضغط أداة الاقتباس هذه  . و بهذه الحركة اليسيرة تكون قد أنهيت التنسيق و سيصبح هكذا
<script type="text/javascript">
document.write("Hello World!")
</script>
و أشير إلى أن شكل الإطار و لون الخلفية سيبدو حسب قالب مدونتك و كما هو محدد في أكواد css فيه و ليس بالضرورة كما يبدو هنا.

» تابع القراءة

| 0 التعليقات ]

بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام السلام عليكم و رحمة الله. أول الأمر أعتذر لكم عن الغياب و عدم الرد على التعليقات لظروف العمل و انشغالي فيه كما وضحت سابقا و المأمول حسن تفهمكم و لكم جزيل الشكر. و بعد فقد توصلت باستفسارات حول طريقة تمييز تعليق الكاتب أو صاحب المدونة عن بقية التعليقات و طبعا القصد من هذا التمييز ليس التعالي بل فقط لأن تعليقات صاحب المدونة عادة ما تحمل أجوبة و تكملات مهمة للموضوع قد تفيد القارئ إن هو ميزها بسهولة. فعلى بركة الله إذن.
قبل الشروع هذه صورة أولية تجسد الفكرة.
أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم " تحرير HTML "
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثالثا : ضع علامة في خانة توسيع القوالب .
ثم ابحث عن هذا الكود
]]></b:skin>
و فوقه مباشرة ضع ما يلي:
.blog-author-comment {
border: 1px solid #043b3d;
background: #dddddd;
}
* اللون الأحمر يمثل حجم الإطار، ضع مكانه صفرا إن لم ترده.
* اللون الأزرق يمثل كود لون الإطار.
* اللون الأخضر لكود خلفية مستطيل التعليق.

رابعا : ثم تبحث عن هذا الكود (Ctrl+F)(ابحث فقط عن جزء منه لتتمكن من تحديده كاملا.)
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
الآن بعد إيجاد الكود أعلاه حدده عبر تظليله ثم ضع مكانه الآتي
<b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
أخيرا :  استعرض مدونتك ثم احفظ قالبك.
ملاحظة : يمكنك تعديل كود CSS الأول لضبط شكل و ألوان و طريقة ظهور تعليق صاحب المدونة.
» تابع القراءة