PollDaddy: خدمة التصويت بالعربي

تقدم شركة PollDaddy – و هي أحد شركات Automattic التي صنعت برنامج ووردبرس – خدمات الإستبيان والتصويت مجاناً. وذلك ليس باللغة الإنجليزية فقط، فيمكنك كذلك تعديل الكود لأي لغة أخرى بما في ذلك العربية. سأشرح لك في هذا الدرس كيف تستعمل موقع PollDaddy لتقدم خدمة التصويت لزوّارك كما أقوم أنا بذلك في القائمة الجانبية لهذا الموقع.

هناك عدة خطوات عليك أن تتبعها للقيام بذلك:

١- إذهب إلى موقع PollDaddy وقم بالتسجيل (SignUp) مجاناً ثم أدخل إلى حسابك

٢- تحت قائمة Polls ستجد صفحة Poll Languages. إذهب إلى هذه الصفحة واختار تعديل الإعدادات (Edit Pack)

٣- عدّل الإعدادات بإستخدام الكلمات العربية الموازية التي تناسبك وأحفظ التغييرات

٤- إذهب الآن إلى قائمة Polls واختار Create a Poll

٥- قم بكتابة السؤال والأجوبة المختلفة في الخانات المحددة كما هو موضح في الصورة التالية

٦- إختار إذا كنت تريد أن تعطي الزائر الفرصة لكتابة جواب آخر (في أسفل خانات الأجوبة) أو التعليق وطريقة عرض النتائج كنسبة مؤية أو كاملة..إلخ (القائمة الجانبية)

٧- إختار إسم اللغة Language Pack حسب ما حفظته في الأعلى (في أسفل القائمة الجانبية وتحت خانات الأجوبة)

٨- الآن نأتي إلى التصميم. لاحظ أن هناك إختياران. هناك تصاميم جاهزة وهناك فرصة إستخدام شيئ من تصميمك (custom). بالطبع التصاميم الجاهزة هي لعرض التصويت باللغة الإنجليزية وبالتالي لن تعمل بدقة. إختار Custom Style واحفظ الإختيارات التي حددتها في هذه الصفحة.

٩- إذهب الآن إلى Custom Poll Styles تحت قائمة Polls واختار Create New Style

١٠- أعطي إسم لهذا التصميم Style Name

١١- لا تقم بأي شيئ آخر. في أسفل الصفحة وعلى اليمين هناك ملاحظة Note تسمح لك بتعديل ال css مباشرة. أنقر على الرابط.

١٢- إستبدل الكود الموجود في CSS Content بالكود التالي:

.pds-box
{
  background-color: #FFFFFF;
  border: 2px solid #C0C0C0;
  margin: 0px 0px 0px 0px;
  padding: 15px 15px 15px 15px;
  width: 249px;
  float:center;
}
 
.pds-question-top
{
  font-weight: bold;
  font-size:14px;
  direction:rtl;
  text-align:right;
  color: #333333;
  border: 0px none #000000;
  background-color: Transparent;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
}
 
.pds-answer
{
  font: normal normal normal 12px;
  color: #555555;
  direction:rtl;
  text-align:right;
  background-color: Transparent;
  border: 0px none #FFFFFF;
  margin: 0px 0px 0px 30px;
  padding: 0px 0px 0px 30px;
}
 
.pds-textfield
{
  font: normal normal normal 12px;
  color: #333333;
  direction:rtl;
  text-align:right;
  background-color: #FFFFFF;
  border: 1px solid #999999;
  margin: 1px 1px 15px 1px;
  padding: 1px 5px 1px 1px;
  width: 150px;
}
 
.pds-answer-feedback
{
  background-color: #F0F0F0;
  direction:rtl;
  text-align:right;
  border: 0px solid #999999;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
 
.pds-answer-feedback-bar
{
  background-color: #909090;
  direction:rtl;
  text-align:right;
  border: 0px solid #999999;
  padding: 0px 0px 0px 0px;
  margin: 2px 2px 2px 2px;
}
 
.pds-totalvotes-inner
{
  font: normal normal bold 12px;
  color: #333333;
  direction:rtl;
  text-align:right;
  background-color: #F0F0F0;
  border: 0px solid #F0F0F0;
  padding: 1px 1px 1px 1px;
}
 
.pds-vote 
{
  color:#C3C4C7;
  direction:rtl;
  text-align:right;
  font-size:12px;
  line-height:17px;
  padding:15px 0px 10px;
}
 
.pds-vote a {
  color: #333333;
  font-size:12px;
  direction:rtl;
  text-align:right;
  padding:2px 2px;
  text-decoration:none;
}
 
input.pds-votebutton
{
  background:transparent url(http://s3.polldaddy.com/images/pdsimple-votebutton.gif) no-repeat scroll 0%;
  float:right;
  height:25px;
  margin:0px 0px 10px;
  outline-color:invert;
  outline-style:none;
  outline-width:medium;
  width:65px;
}
 
.pds-box {color:#333333;font-family:Tahoma;text-align:right;}
.pds-answer-feedback-bar{height:12px;}
.pds-totalvotes-inner{margin:0px 0px 15px;}
 
input.pds-votebutton-pack{float: right;font-size: 13px;}

هذا هو التصميم الذي أستخدمه أنا في موقعي. يمكنك بالطبع تعديله لما يناسب إحتياجاتك. إحفظ التغييرات (تذكر إسم التصميم) وراجع التصميم عن طريق options>Preview Style وتأكد أن العرض من اليمين إلى اليسار.

١٣- الآن إرجع إلى قائمة Polls و إختار List Polls. عن طريق لائحة Options على اليمين إختار Poll Options

١٤- إذهب إلى Custom Poll Style وإختار إسم التصميم الموافق لكود css الجديد

١٥- إحفظ التغييرات. ستظهر لك شاشة (قد تكون قد شاهدتها من قبل) تحتوي على كود الجافا سكربت الذي عليك أن تضعه في المدونة.

١٦- إذهب إلى مدونتك الآن ومن لوحة التحكم إختار “مربعات القائمة الجانبية”

١٧- أضف مربع Text جديد وسميه “تصويت” أو “التصويت” أو ما يناسبك

١٨- قص وألصق كود الجافا سكربت إلى داخل مربع Text

١٩- إحفظ التغييرات وسيظهر لك التصويت في القائمة الجانبية في المكان الذي وضعت فيه مربع Text

هذا كل شيئ. لاحظ أنه إذا ما أجريت أي تعديلات على ال css فإنك ستحتاج إلى إعادة حفظ إعدادت تصويتك داخل الموقع وإستخدام كود الجافا سكربت الجديد الذي سيصنعه لك الموقع أوتوماتيكياً!

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