شرح نشر مواضيع المنتدى تلقائى فى الفيس بوك - طريقة نشر مواضيع المدونة للفيسبوك 2013

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

لمشاهدة الفديو من هنا

اقرأ المزيد Résuméabuiyad

شرح وضع جوجل ادسنس فى اى مكان لمدونة بلوجر 2013 - اضافة اعلانات جوجل ادسنس Google Adsense

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

1 - الطرق التقليدية لوضع أدسنس.

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

أدسنس في مربعات القائمة الجانبية

أدسنس تحت جسم التدوينة

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

2 -وضع إعلانات أدسنس أسفل عنوان الموضوع.

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

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

<data:post.body/>

3 - وضع إعلانات أدسنس وسط الموضوع.

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

<data:post.body/>

حدده و استبدله بهذا الكود.

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

<!-- AdSense code -->

</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

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

<!-- adsense -->

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

لكن ماذا لو نسيت وضع الكود في التدوينة ؟!! لن يحدث شيء سيظهر الإعلان في بداية التدوينة و لكم أن تلاحظوا ذلك على مدونتي في بعض المواضيع التي لم أعدلها. و لمزيد من الشرح يمكنكم زيارة Ads In The Middle

4 - تحذير

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

اضغط على الصورة لمعاينتها بوضوح

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

اقرأ المزيد Résuméabuiyad

شرح تركيب تعليقات فيسبوك فى مدونات بلوجر 2013 - شرح بالصور اضافة تعليقات الفيس بوك لـ بلوجر

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


مميزات الإضافة:

• عبر هذه الإضافة سيكون لكل موضوع او تدوينة  تعليقاتها الخاصة.
• إمكانية الرد على تعليقات الآخرين و الإعجاب بها.
• إدارة التعليقات و التحكم فيها عبر تصفيتها، محوها أو حظر كاتبيها.
• إمكانية التعليق بحسابات عدة منها فيسبوك و ياهو و هوتميل...
• يمكن إضافة مشرفين لمراجعة التعليقات و هذه ميزة جيدة للمدونات الجماعية.
• إعدادات الإضافة تضم خصائص عدة منها إخفاء أو إظهار صندوق التعليق، التدقيق الإملائي و غيرها...
• و أهم ميزة في اعتقادي هي أن كل من علق فإن تعليقه يظهر على صفحته على فيسبوك مرفقا برابط للموضوع و صويرة في حال أبقى على الإشارة في خانة "نشر في فيسبوك" "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 في الكود السابق.



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

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

اقرأ المزيد Résuméabuiyad

اضافة سلايدر لمدونات بلوجر 2013 - شرح اضافة سلايدر بالصور 2014

بسم الله و الحمد لله و الصلاة و السلام على المصطفى الأمين نبينا محمد العدنان و على الآل و الصحب أجمعين.

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

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

إضافة الأكواد إلى قالب المدونة

بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التصميم ثم تحرير HTML.
الآن ابحث عن <head> و بعده مباشرة ضع الأكواد الآتية :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://javascript-file.googlecode.com/svn/trunk/coin-slider.min.js' type='text/javascript'/>

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

/*
 Coin Slider jQuery plugin CSS styles
 http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { text-align:right; width: 590px; padding:10px; background-color: #000000; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

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

إضافة أداة السلايدر إلى تصميم المدونة

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

 <div id='coin-slider'>
 <a href="رابط الموضوع الأول">
  <img src="رابط صورة الموضوع الأول" />
  <span>عنوان الموضوع الأول</span>
 </a>
 <a href="رابط الموضوع الثاني">
  <img src="رابط صورة الموضوع الثاني" />
  <span>عنوان الموضوع الثاني</span>
 </a>
 <a href="رابط الموضوع الثالث">
  <img src="رابط صورة الموضوع الثالث" />
  <span>عنوان الموضوع الثالث</span>
 </a>
 <a href="رابط الموضوع الرابع">
  <img src="رابط صورة الموضوع الرابع" />
  <span>عنوان الموضوع الرابع</span>
 </a>
</div>
<script type="text/javascript">
 $(document).ready(function() {
  $('#coin-slider').coinslider({ width: 590, height: 250, navigation: true, delay: 5000 });
 });
</script>

■ رابط الموضوع الذي تود أن ينتقل إليه الزائر في حال ضغطه على الصورة.

■ رابط الصورة التي سوف تظهر في السلايدر و يجب أن تكون بنفس قياسات السلايدر (عرض و طول)

■ عنوان الموضوع أو وصف مقتضب له.

■ عرض السلايدر المطلوب يمكن تعديله بما يناسب مدونتك (نفسه سيكون عرض صور المواضيع)

■ ارتفاع السلايدر المطلوب كذلك يمكن تعديله بما يناسب مدونتك (نفسه سيكون ارتفاع صور المواضيع)

يمكن تكرار الأكواد في حال الرغبة في عرض أكثر من أربعة مواضيع. 

بعد تعديل المطلوب اضغط زر حفظ الأداة ثم قم بسحبها إلى مكان فوق مستطيل رسائل المدونة كما هو موضح في الصورة أسفله:

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

جعل إضافة السلايدر تظهر فقط بالصفحة الرئيسية

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

 <b:widget id='HTML2' locked='false' title='سلايدر' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if> 
</b:includable>
</b:widget>

احفظ القالب و عد لعناصر الصفحة و احذف عنوان أداة السلايدر.

واى استفسار ضع رد وسيتم الرد عليك ف اسرع وقت 

اقرأ المزيد Résuméabuiyad

اضافة اداة اخر التعليقات 2013 - شرح اضافة اخر تعليقات مدونات بلوجر بالصور

اضافة اداة اخر التعليقات

جئت لكم اليوم بأداة آخر التعليقات في المدونة ولكن ما يميز هذه الأداة عن غيرها هو أنها تظهر بجانب التعليق صورة مصغرة للأفاتار الخاص بصاحب التعليق بشكل جميل.

طريقة التركيب :

 توجه إلى التخطيط ثم إضافة أداة ثم   html /javascript   وبعد ذلك انسخ الكود التالي في الأداة :

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 4,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 60,
 showMorelink = false,
 moreLinktext = "للمزيد",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.b3-tech.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

 ولا تنسى تغيير   src="http://www.b3-tech.com/feeds/comments/default   برابط مدونتك

  ويمكنك التعديل على هذا الكود لتحديد عدد التعليقات التي تريدها أن تظهر    numComments   = 4,

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

اقرأ المزيد Résuméabuiyad

قالب بلوجر 2013 - اجمل قالب بلوجر - قالب Haletanis Lux معرب 2014

قالب بلوجر 2013

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

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

•  قالب بعمودين ( 1 سايد بار)
• يخضع لمعايير السيو أي أنه متوافق مع محركات البحث
•  قالب خفيف وسريع التحميل
•  فوتر مكون من 4 أقسام
• سلايدشو مميز قابل للتعديل
• وسوم العناوين h1 و h2 وh3 معدلة كما يجب ( من النادر أن تجد قالب وسوم العناوين معدلة فيه ) للتوافق مع معايير السيو.

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

ولمن يرغب في تحميل القالب بدون السلايدشو فليترك تعليقا يضع فيه بريده الإلكتروني واسمه وإن شاء الله سيتوصل برابط التحميل في أقرب وقت ممكن.

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

اقرأ المزيد Résuméabuiyad