‏إظهار الرسائل ذات التسميات أدوات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات أدوات بلوجر. إظهار كافة الرسائل
| 168 تعليقات ]

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

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

أدخل اسم النطاق (دومين) مدونتك مثلا (www.example.com) ثم اضغط زر التأكيد (Confirm) بعدئذ ستنتقل إلى صفحة جديدة تخبرك أن إعدادات ال DNS قد عدلت. كما هو مبين في الصورة الآتية:

بعد إن أنهينا الشق المتعلق بجودادي ننتقل إلى تعديل الإعدادات على بلوجر.

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



ثم بعد توسيع الإطار تضغط "تبديل إلى الإعدادات المتقدمة" وفي الحقل الفارغ أكتب اسم نطاق مدونتك الجديد بهذا الشكل www.example.com، و ستجد أن توجيه النطاق الفرعي القديم إلى اسم النطاق الجديد مفعل افتراضيا (1). ثم تضغط زر الحفظ كما بالصورة:


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


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

◄ نشر هذا الموضوع بدعم من: مدونة البلوقر | دروس، إضافات، قوالب لمدونات بلوجر.

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

| 171 تعليقات ]

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

السلام عليكم و رحمة الله.
بعد أن ركبت إضافة الصور المنزلقة إي ما يسمى بالسلايدر 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>

احفظ القالب و عد لعناصر الصفحة و احذف عنوان أداة السلايدر.
و لمن يرغب في مزيد من التحكم في الإضافة يرجى زيارة هذه الصفحة:
Coin Slider: Image Slider with Unique Effects

◄ نشر هذا الموضوع بدعم من: مدونة البلوقر | دروس، إضافات، قوالب لمدونات بلوجر.
» تابع القراءة

| 55 تعليقات ]

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


الخطوة الأولى: تفعيل أزرار المفضلات الاجتماعية في بلوجر

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




الخطوة الثانية: تعديل القالب لإظهار أزرار المفضلات

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

ثم بعد ذلك ابحث عن الكود الآتي:

<div class='post-footer-line post-footer-line-1'>

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

<p class='post-footer-line post-footer-line-1'>

بعد أن تجد الكود المطلوب مباشرة بعده تلصق الكود الآتي:

<div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
</div>

ثم أخيرا اضغط زر حفظ القالب.





ملحوظة إضافية

في بعض الحالات قد لا يظهر زر جوجل +1 (google +1) إلى جانب أزرار المفضلات و هذا راجع بالأساس إلى افتقاد القالب إلى ملف js الضروري لتشغيل الإضافة و عليه لإظهارها ستبحث عن </head> و مباشرة أسفلها تضع هذا الكود و تحفظ القالب.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

تحياتي.
» تابع القراءة

| 261 تعليقات ]

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


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

| 45 تعليقات ]

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




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

| 38 تعليقات ]

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

يمكن اختيار أحجام مختلفة للزر (كبير، متوسط، صغير...)
الزر كما يبدو في نتائج بحث جوجل (متاح فقط في google.com مؤقتا)


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

 

طريقة تركيب زر 1+ (زائد واحد) على مدونات بلوجر

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

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

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>
يمكنك استبدال en-US  ب ar  لتغير لغة الزر إلى العربية، و أشير هنا أن الزر لا زال لا يدعم العربية بشكل جيد.

ثالثا : ابحث عن  <data:post.body/>  و قبله مباشرة ألصق الكود الآتي إن أحببت أن يظهر الزر فوق جسم التدوينة مباشرة تحت العنوان. أما إن أردت أن يكون الزر تحت التدوينة فألصق الكود الآتي بعده.

<div style='float:left'>
<g:plusone size="tall" expr:href="data:post.url"/>
</div>

يمكن استبدال left ب right لتوجيه الزر ناحية اليمين.
كذلك يمكن استبدال tall ب standard ، medium ، small لتغيير حجم و شكل الزر كما هو موضح في الصورة أسفله.


رابعا : ما عليك سوى الضغط على زر حفظ التعديلات لإنهاء المهمة.
خامسا :  يمكنك تجريب الزر عبر ضغط 1+ إن أحببت الموضوع :) كذلك إن أردت سحب تزكيتك للموضوع ما عليك

سوى إعادة ضغط الزر مرة أخرى.


طريقة تركيب زر 1+ على مدونات ووردبريس

لأصحاب مدونات ووردبريس، يمكنكم تركيب الزر عن طريق تحميل و تركيب الإضافة  WordPress Google +1 Button عبر هذا الرابط   ( الإضافة معربة و مشروحة تجدونها بعد يوم إو اثنين بمشيئة الله )

طريقة تركيب زر 1+ على المواقع و صفحات الويب

لتركيب الزر على المواقع أو على أي صفحة ويب، فالصفحة الآتية تقدم خطوات التركيب

روابط مفيدة و ذات صلة بالموضوع:
إضافة الزر 1+ لجوجل على مدونات بلوجر
Add Google Plus One Button on Blogger

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

| 52 تعليقات ]

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

1 - طريقة تركيب إضافة المتابعة بالبريد الإلكتروني.

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


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

2 - طريقة تخصيص إضافة المتابعة بالبريد الإلكتروني.
 
  • استبدال عبارة Submit بأخرى مناسبة.
لاستبدال هذه العبارة بأخرى مناسبة نتوجه بعد تركيب الإضافة إلى صفحة " تحرير HTML " و نحمل نسخة احتياطية من القالب ثم نضع علامة في خانة توسيع القوالب و نبحث عن الكود الآتي و نستبدل العبارة الملونة بالأحمر بأخرى أنسب.

<input class='follow-by-email-submit' type='submit' value='Submit'/>

  • و وضع صورة مكان الزر الافتراضي
ما عليك سوى استعمال الكود الآتي بدل الأول مع تعديل رابط صورة الزر.

    <input class='follow-by-email-submit' src='رابط صورة الزر' type='image' />
    

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

      <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
      

      • تخصيصات CSS إضافية
      و لمزيد من التخصيص يمكن استعمال أكواد CSS الآتية و تخصيصها كما في هذا المثال.
      تحياتي!

        .FollowByEmail .follow-by-email-inner .follow-by-email-address {
                 border:1px solid black;
                 background-color:#A6BEDE;
        }
        .FollowByEmail .follow-by-email-inner .follow-by-email-submit {
                 border:1px solid black;
                 background-color:#A6BEDE;
        }
        
        » تابع القراءة