دليل المدون
‏إظهار الرسائل ذات التسميات أكواد Html. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات أكواد Html. إظهار كافة الرسائل

2017-09-30

أضف الصور المتحركة إلى موقعك على طريقة الفيس بوك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

تابع:  أسرع الطرق لإنشاء صور متحركة بدون برامج

طريقة نشر الصور المتحركة GIF على موقعك بخاصية Click to preview

أولًا: إستخدمت فى هذه التدوينة إضافة مفتوحة المصدر jqGifPreview للإستفادة من ميزة Click to preview إضغط هنا للمعاينة
ثانيًا: يجب أخذ لقطة أو تصوير الشاشة لإلتقاط صورة ثابتة بصيغة PNG من الصورة المتحركة لتظهر بشكل إفتراضى قبل الضغط عليها، ورفعها على حسابك فى جوجل بلس أو أى موقع.
ثالثًا: إذا كنت تستخدم الصور المتحركة فى معظم موضوعات موقعك إتبع الخطوات:
1. إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب ( قم بالإحتفاظ بنسخة إحتياطية من القالب).
2. إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F

</head>
3. ثم أنسخ الكود التالى وقم بإضافته فوق الكود السابق مباشرة

<!--www.condaianllkhir.com-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.css" rel="stylesheet"></link>
<script src="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.js"></script>
4. ثم إحفظ القالب
5. توجه إلى تبويب HTML للتدوينة وقم بإضافة الكود التالى:
<img class="myImg" src="sample_first_frame.png" data-gif="sample_giphy.gif" />
<script>
 $(function() {
  $(".myImg").jqGifPreview();
 });
</script>
ملاحظات :
  • إذا كان لديك مكتبة JQuery بالقالب ، فلا داعى لإضافة السطر الأزرق بالكود .
  • قم بإستبدال الجزء الملون باللون الأصفر بالكود برابط الصورة الثابتة بصيغة PNG
  • قم بإستبدال الجزء الملون باللون الأخضر بالكود برابط الصورة المتحركة بصيغة Gif
  • إذا كنت تريد إستخدام هذه الخاصية فى موضوع معين فقط يمكنك إضافة جميع الأكواد داخل تبويب HTML للتدوينة.
يمكنك أيضًا إستخدام حل آخر وهو عرض الصور المتحركة داخل Colorbox
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

2016-05-22

أفضل البدائل لإستضافة الأكواد للمطورين وأصحاب المواقع

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

1. شرح موقع Github

Github logo

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

شرح الإستضافة على موقع Github

قم بالتسجيل فى الموقع وإنشاء حساب ثم إتبع الخطوات التالية: 
1. قم بإنشاء مستودع جديد من خلال النقر على New Repository
Github 
2.  إختر إسم مناسب لمشروعك ثم أضبط الإعدادات كما بالصورة
Github
 3. قم  برفع الملف من جهازك وذلك بالضغط على upload files
"يمكن أيضًا كتابة الأكواد من خلال محرر النصوص وذلك بالضغط على create new file مع مراعاة كتابة إمتداد الملف عند تسميته"
Github
Github 
 4. للحصول على رابط مباشر لملفاتك لإستخدامها داخل الموقع أو المشروع أيًا كان إتبع الخطوات كما بالصورة
Github
مع العلم أن الرابط المباشر بهذه الطريقة يعرض محتويات الصفحة من أكواد أما إذا أردت رابط مباشر لعرض الويب مثلا فعليك باستخدام هذه الخدمة https://rawgit.com/

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

الطريقة الصحيحة لكتابة أكواد CSS داخل مدونات بلوجر

 2. موقع bitbucket

bitbucket

يعتبر موقع bitbucket هو البديل رقم 1 لموقع Github فهو يشبهه إلى حد كبير ولكنه يسمح بإستضافة عدد غير محدود من المشاريع الخاصة مجانًا ولكن بحدود "5 أفراد فى فريق العمل الجماعى" مع إمكانية زيادة العدد بترقية حسابك إلى حساب مدفوع.
الموقع أيضًا يحتوى على عدد كبير من مشاريع مفتوحة المصدر يمكن الإستفادة منها.

3. بدائل أخرى

فى النهاية

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

2015-01-19

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

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

table of content
تكون هذه الإضافة مفيدة جدًا فى المواقع التى تحتوى على مقالات طويلة أو موضوعات ذات عناصر عديدة فهى تسهل للقارئ الوصول للنقاط التى يريد قراءتها .
  • هذه الإضافة تصلح لأى صفحة ويب Html مثل بلوجر ، وورد بريس
  • ولإضافة هذا الكود لمدونات بلوجر قم بنسخ الكود التالى ولصقه  إلى تبويب HTML فى بداية الموضوع ثم إضافة محتويات الموضوع داخل الكود فى مكانها المناسب
<div dir="rtl" style="text-align: right;" trbidi="on">
<h1 style="margin-right: 40px; text-align: right;">
</h1>
<h3 style="margin-right: 40px; text-align: right;">
<a  name="menu">قائمة محتويات الموضوع</a></h3>
<ul style="margin-right: 40px; text-align: right;">
<li><a href="#العنوان الاول">اذهب الى العنوان الاول</a></li>
<li><a href="#العنوان الثانى">اذهب الى العنوان الثانى</a></li>
<li><a href="#العنوان الثالث">اذهب الى العنوان الثالث</a></li>
</ul>
<h3 style="margin-right: 40px; text-align: right;">
<a  name="العنوان الاول">العنوان الاول</a></h3>
أكتب النص الأول هنا
<h3 style="margin-right: 40px; text-align: right;">
<a  name="العنوان الثانى">العنوان الثانى</a></h3>
أكتب النص الثانى هنا </div>
<h3 style="margin-right: 40px; text-align: right;">
<a  name="العنوان الثالث">العنوان الثالث</a></h3>
أكتب النص الثالث هنا </div>
<hr style="margin-right: 40px; text-align: right;" />
<div style="margin-right: 40px; text-align: right;">
<a href="#menu">إذهب إلى قائمة المحتويات</a></div>
</div>

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

2014-11-01

أداة إخفاء/ إظهار أجزاء متعددة من المحتوى على بلوجر

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

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


دروس فوتوشوب للمبتدئين


كيف تصنع تطبيقات أندرويد


ولإضافة الكود الى مشاركات مدونة بلوجر إنسخ الكود التالى وألصقه بالمشاركة بتبويب HTML

الجزء الظاهر من المحتوى
<br/>
<a  title="Click to show/hide content" type="text" onclick="if(document.getElementById('content1') .style.display=='none') {document.getElementById('content1') .style.display=''}else{document.getElementById('content1') .style.display='none'}">العنوان الأول</a>
<div id="content1" style="display:none"> 
المحتوى المخفى الأول
</div> 


<br/>
<a  title="Click to show/hide content" type="text" onclick="if(document.getElementById('content2') .style.display=='none') {document.getElementById('content2') .style.display=''}else{document.getElementById('content2') .style.display='none'}">العنوان الثانى</a>

<div id="content2" style="display:none"> 
المحتوى المخفى الثانى
</div> 

<br/>
<a  title="Click to show/hide content" type="text" onclick="if(document.getElementById('content3') .style.display=='none') {document.getElementById('content3') .style.display=''}else{document.getElementById('content3') .style.display='none'}">العنوان الثالث</a>

<div id="content3" style="display:none"> 
المحتوى المخفى الثالث
</div> 


هذا الكود لإخفاء ثلاث أجزاء من محتوى المشاركة سواء كانت نص أو صور أو فيديو
بعد إضافة الكود بتبويب Html للمشاركة قم بالتعديل على الكود كالتالى:
إستبدل العنوان الأول بالنص الذى يظهر المحتوى مثل "إقرأ المزيد، بقية الموضوع أو عنوان للجزء المخفى.........إلخ"
ثم أضف الجزء الذى تريد إخفاؤه بالكود
إذا كنت تريد إخفاء أكثر من ثلاث أجزاء من محتوى المشاركة قم بتكرار الجزء الملون باللون الأزرق فى الكود مع تغيير رقم 1 الملون بالأحمر فى الكود إلى رقم 4

إقرأ أيضًا:



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

2014-09-22

كيف تصمم قوائم منسدلة لموقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

من الإضافات الأساسية لأى موقع هى القوائم التى تحتوى على روابط تخبر الزائر بمحتويات الموقع ، وتتنوع تصميمات القوائم على حسب تصميم قالب الموقع فالكثير يفضل القوائم المنسدلة ذات التبويبات المتفرعة خصوصًا إذا كان الموقع يحتوى على العديد من الأقسام والتصنيفات ، وبالرغم من أن العديد من القوالب الجاهزة تحتوى على قوائم منسدلة إلا أنه يفضل البعض تصميم تلك القوائم بأنفسهم على حسب خريطة الموقع لذلك سأوضح فى هذا الموضوع شرح لكيفية تصميم القوائم المنسدلة بالشكل الذى يناسب موقعك.
Drop down menu css
هو برنامج مجانى لتصميم القوائم المنسدلة ويعتمد على التعديل على النماذج الموجودة بالبرنامج عن طريق إضافة النصوص والروابط
تحميل البرنامج من الموقع الرسمى: css3 menu
ترخيص البرنامج: Free version

مميزات البرنامج

  •  واجهة البرنامج بسيطة جدا يمكن من خلالها تنسيق القائمة المناسبة لموقعك وإضافة الروابط والنصوص والتأثيرات
css3 menu
  • يمكن إضافة صور أيقونات المتاحة بالبرنامج للقوائم أو إضافة صور أيقونات خارجية
  • يدعم اللغة العربية وإتجاه الكتابة من اليمين
  • إمكانية تصميم قوائم  رئيسية Main Menu أفقية أو رأسية وإنشاء قوائم متفرعة منها Submenu
  • إمكانية تصميم قوائم مناسبة للشاشات المتعددة لأجهزة الهواتف الذكية وذلك بتنشيط الخيار Responsive
  • بالإضافة إلى النماذج المجانية الموجودة بالبرنامج توجد نماذج غير مجانية بتأثيرات أكثر تطورًا
  • تكون القوائم المصممة بهذا البرنامج متوافقة مع جميع أنواع المتصفحات بإصداراتها
  • يمكن إستخدام القوائم لجميع أنواع منصات المواقع Wordpress,blogger,................

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

بعد تصميم القائمة المناسبة للموقع إضغط على زر Publish ليكون الناتج ملف يحتوى على صفحة ويب Html، ومجلد css
بالنسبة للمواقع التى يكون لديها إستضافة يمكن إضافة هذا الملف إلى الإستضافة أما بالنسبة للمواقع التى لا تملك إستضافة مثل مدونات بلوجر فيمكن الإستعانة بخدمات التخزين السحابى  Dropbox or Googledrive
تحديث 16/10/2016:
بعد إلغاء الإستضافة على Dropbox و Googledrive يمكن إستضافة ملفات القائمة التى قمت بإنشائها على موقع Github
 
وسأشرح مثال توضيحى عن خطوات إستضافة ملف قائمة منسدلة مصممة ببرنامج Css menu على Dropbox وإضافتها لمدونة بلوجر


1 - بعد تصميم القائمة إنسخ الملف الناتج "صفحة الويب Html، ومجلد css" داخل مجلد public بحسابك على Dropbox   
2- إفتح صفحة الويب ببرنامج Notepad
dropbox

ستكون الأكواد مكتوبة هكذا بصفحة الويب

Notebad
3 - إنسخ الرابط المباشر لملف Css داخل dropbox 
dropbox

4- إستبدل مسار ملف css الموجود بصفحة الويب وهو ما ينتهى دائما بــ  "style.css" بالرابط المباشر لملف Css داخل dropbox
ليكون الكود بهذا الشكل
5- ثم إنسخ كل الأكواد الموجودة بصفحة الويب وأضفها إلى مدونة بلوجر داخل أداة Html/javascript  وأضفها بالمكان المناسب لمدونتك.

ملاحظات:
  •  إذا كانت القوائم تتضمن أيقونات يمكن أيضا تبديل مسارات الأيقونات التى تنتهى بالإمتداد Png داخل الكود بالرابط المباشر لهذه الأيقونات على Dropbox بنفس الطريقة السابقة
  •  يمكن أيضًا إستخدام موقع Google drive فى إستضافة القائمة
إقرأ أيضًا:
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

2014-01-03

أضف 5 صناديق منزلقة لمتابعة الشبكات الإجتماعية لموقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

أقدم لكم إضافة من إضافات بلوجر تهم معظم أصحاب المدونات وهى النوافذ المنزلقة للمواقع الإجتماعية تظهر بجانب الموقع وقد قدمت من قبل هذه الإضافة بتقنية jQuery لأربع شبكات إجتماعية فقط وهى (متابعين الفيس بوك , صندوق تغريدات تويتر, زر +1 لجوجل بلس , الإشتراك عبر البريد الإلكترونى) ولكن اليوم أقدمها بشكل مختلف حيث تحتوى على 5 صناديق منزلقة لمتابعين المواقع الإجتماعية (الفيس بوك,تويتر,يوتيوب,جوجل بلس,خدمة البريد الإلكترونى) تظهر بمرور الماوس على الأيقونة الجانبية بالموقع.


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

  1. هذه الإضافة مفيدة فى زيادة عدد متابعين المدونة على المواقع الإجتماعية.
  2. تقلل من إزدحام الإضافات بالأعمدة الجانبية.
  3. تظهر دون مشاكل على أنظمة الأندرويد
  4. الإضافة تظهر بمظهر رائع للزائر.
  5. سهلة التركيب إلى موقعك
social slider boxes

معاينة الإضافة

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

  1. الذهاب إلى لوحة التحكم
  2. تخطيط
  3. أضف أداة
  4. اختار Html/Javascript
 ثم إنسخ الكود التالى كاملاً وألصقه



<style>  img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-right: 5px;    margin-top: 1px;  }  #CONfeedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-right: -4px;  }  #CON_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* left side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_right img {    position: absolute;    top: -1px;    right: -65px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_right_img {    position: absolute;    top: -1px;    right: -65px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    left: -294px;  }  #google_plus_right_img {    position: absolute;    top: -1px;    right: -65px;    border: 0;  }  #feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }  #feedburner_right_img {    position: absolute;    top: -1px;    right: -65px;    border: 0;  }  #CON_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #CON_right img {    position: absolute;    top: -1px;    right: -65px;  }  /* right side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    right: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #CON_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #CON_left img {    position: absolute;    top: -2px;    left: -101px;  }  .box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail {    background: #fff !important;    border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    margin: 0px;  }  .submitbutton {    background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }  #youtube_right {    z-index: 10001;    background-color: #fefefe;    border:2px solid #ff0000;    border-top:2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right:2px solid #5b5b5b;    border-left: hidden;    width:301px;    height: 106px;    position: fixed;    left: -304px;  }  #youtube_right_img {    position: absolute;    top: -1px;    right: -65px;    border:  </style>  <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {    jQuery("#facebook_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            left: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            left: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            left: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            left: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            left: -304          },          500);      });  });  </script>      <br />  <div id="on">    <div id="facebook_right" style="top: 8%;">      <div id="facebook_div">        <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVe0R2Mg6KSyYnYm90EupVPa1POePPxdcLsS5FjqJKJhaChcWszxUaRH5oFQ_e5TXWhVc1ClKzZ9PUYlMAYj2So6Z68OBMazOfK-jd-rg07XYElu_AuXZNjZ_O5j8XffQejK5rdVeT_-8q/w80-h102-no/fb.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdesignsblog&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>      </div>    </div>  </div>  <div id="on">    <div id="twitter_right" style="top: 24%;">      <div id="twitter_div">        <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6Bqk9StLAzG5UoGdcK0TYeurnu3hXAnjqCzmH0ooN7ZvzDD4fbrLegdqPg0oED6u5Tr-pm9g5E4N8WetoaFnSBSbT-yHUsakmv_CNLkHcylUSxXmFfK4jKJPTnUKaFLb94Gewu0zO8rh/w80-h103-no/twitter.png"        />        <div style="width:248px;font-size:8px;text-align:left;">          <div id="twitter-box"></div> <script> var tw_user = 'DrRo2'; var tw_width = 301; var tw_height = 325; var no_face = 9; (function() { var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true; tw_box.src = '//www.twitter-fanbox.com/tw.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box); })(); </script>      <a href="http://NewBloggerTips.com"          target="_blank"></a>        </div>      </div>    </div>  </div>  <div id="on">    <div id="google_plus_right" style="top: 41%;">      <div id="google_plus_div">        <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNtXtZmmr2wojPiQptghE8bewe1LSSLw4a1vSIsjoH-6o0xj-9VXZzGafewSZIP-_AsSl0eaZxl3q359-SpJ_i9gxD1j0XiUY_JFanunpaN1VfxCzXCaH0mZaKZk9T1RebLG5pDxRPdv_4/w80-h103-no/google%252B1.png"        />        <div style="float: right; margin: 10px 10px 10px 0;">          <a href='http://newbloggertips.com'>            <img alt='Tips Tricks And Tutorials'            src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuee-EzrFwe0qjmZ6rca_t9M3gC9II_AquoaLItXHZfyjaEpS8xpuIKgc418SkaynQ6YOEiOnRGYWWcNEQP63jyI7fYkL214QGdVupLQLqz9UcfYunUGHoeJSyeAjB2Fs2iBNKM_IUkdxe/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/+Condaianllkhir"          data-source="blogger:blog:followers"          data-width="270"></div>          <script type="text/javascript">          (function ()          {            window.___gcfg = {              'lang': 'en'            };            var            po =              document.createElement(                'script');            po.type =              'text/javascript';            po.async =              true;            po.src =              'https://apis.google.com/js/plusone.js';            var            s =              document.getElementsByTagName(                'script')[0];            s.parentNode.insertBefore(              po,              s);          })();          </script>        </div>      </div>    </div>    <div id="on">      <div id="feedburner_right" style="top: 75%;">        <div id="CONfeedburner_div">          <center>            <h4 style="color: #f66303;">تابع عبر البريد الإلكترونى:</h4>            <form action="http://feedburner.google.com/fb/a/mailverify"            method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=condaianllkhir/DrRO', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"            target="popupwindow">              <input class="enteryouremail" gtbfieldid="10"              name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}"              onfocus="if (this.value == 'Enter your email here...') {this.value = '';}"              type="text" value="Enter your email here..."              />              <input name="uri" type="hidden"              value="condaianllkhir/DrRO" />              <input class="submitbutton" type="submit"              value="Submit" />            </form>          </center>          <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1FdJhS2ogjd1QjD4GiKgh7Dhg8gH_B9QtqUERc47jfwWyHqsSN_X7bk2PRbTqIH0ciId6H9q4GExemfNQNUZEmln3n6ecOXinf5o5L_klPvDdeZ1vJFrIZ-ttQhyphenhyphenszDpxd1lRDCSkVlF/w80-h103-no/rss.png"          />          <div style="float: left; padding: 20px; margin: 0px;"> <span style="font-size:10px;">Widget by <a href="http://www.condaianllkhir.com/"rel="nofollow" target="_blank">condaianllkhir</a>      </span>            <span style="font-size:8px;"></span>          </div>        </div>      </div>      <div id="on">        <div id="youtube_right" style="top:58%;">          <div id="youtube_div">            <img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Wgnba2eI2L01Of92O-ZxQl2-BIs1iCrTfWPXylshqtf1aQNkJa4ZCKchhHDaAchVsjt7485bkj5L3HmuG8S6IJxWJGeilkQJx7_irsa_NnReaA0QOEE67RdK2bKzyHk8jpjnPwrJ1HsF/w80-h103-no/youtube.png "            />            <div style="float:right;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=designs9              style="height:105px;width:300px;border:0;"              scrolling="no" frameborder="0"></iframe>            </div>          </div>        </div>      </div></div></div>

للتعديل على الكود إستخدم البحث بالكيبورد Ctrl+F

إستبدل designsblog   بإسم المستخدم الخاص بصفحتك على الفيس بوك facebook fanpage username
إستبدل  DrRo2  بإسم المستخدم الخاص بحسابك على تويتر   twitter username
إستبدل  +Condaianllkhir  بإسم المستخدم الخاص بحسابك على جوجل بلس 
إستبدل condaianllkhir/DrRO   بإسم المستخدم الخاص بخلاصات مدونتك مع العلم بأنه مكرر أكثر من مرة feedburner username
إستبدل  designs9 بإسم المستخدم الخاص بقاتك على اليوتيوب

تحديث: بالنسبة لحل مشكلة عدم ظهور صندوق متابعى تويتر

تم تحديث الكود بإنشاء الأداة من خلال هذا الموقع مع العلم بأنه ليس الموقع الرسمى لأدوات تويتر فهو تطبيق من إنشاءMusicPaax 
لذلك يستلزم ربط موقعك بالتطبيق وذلك بتسجيل الدخول لحسابك على تويتر عبر التطبيق كما بالصورة
  ثم التعديل على الكود السابق ونسخه الى موقعك كما يلى:
إستبدل  DrRo2  بإسم المستخدم الخاص بحسابك على تويتر   twitter username

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

2013-10-23

برنامج تحويل التاريخ الميلادى إلى هجرى

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

برنامج التقويم مناسب لأجهزة الكمبيوتر المكتبية

لإضافة التقويم للمواقع قم برفعه إلى السيرفر الخاص بك

كود html
 إنسخ الكود التالى بموقعك


select  Calenders 

كن داعيا للخير
modern calener
calender
Prayer time
flag-clock
Flag clocks

2013-08-24

إستخدام Google Drive لإستضافة ملفات موقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

هل فكرت يوما فى إنشاء موقع بسيط ولم يكن لديك سيرفر وتبحث عن إستضافة مجانية ؟
أعلنت شركة جوجل عن توقف خدمة إستضافة الملفات بعد 31 أغسطس 2016 طبقًا لهذا البيان ويمكن متابعة شرح لبعض البدائل لخدمة Google drive 
أو تمتلك مدونة على بلوجر وتواجه مشكلة فى إستضافة ملفات Html,Css,Javascript الخاصة بمدونتك؟
فخدمة التخزين السحابية Google Drive تعتبر بديل رائع ومجانى لإستضافة ملفات موقعك سواء كانت صفحات ويب Html , Css,Javascript أو حتى ملفات فلاش أو الفيديو والملفات الصوتية أو الصور والأيقونات التى يتضمنها الموقع أو المدونة.
google-drive-host

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

 ولكن على الرغم من أن  Dropbox أسرع وأسهل إلا أنه محدود  limited bandwidth  أما جوجل درايف فهو غير محدود  unlimited bandwidth كما له العديد من المميزات يمكن الإطلاع على شرح كامل لجوجل درايف وشرح المميزات


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

كيفية إستضافة ملفات موقع بسيط على Googledrive

يمكن إستخدام موقع يحتوى على ملفات صور وأكواد وصفحات ويب html

فى البداية سجل الدخول إلى حسابك على  Google drive  عن طريق Gmail

ثم إنشئ مجلد جديد لرفع ملفات موقعك إليه 

create>>folder
ثم رفع ملفات موقعك إليه
google-drive-host

إجعل جميع ملفات الموقع عام على الإنترنت Public

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

google-drive-host
الإختيار الإفتراضى المفعل للملفات المحفوظة على جوجل درايف تكون خاصة Private ولكن لكى تستفيد من خاصية الإستضافة لابد أن تكون عامة على الإنترنت public لهذا إضغط على "تغيير" أو "change" ثم تفعيل الإختيار "عام على الإنترنت" أو "public"ثم حفظ
google-drive-host 

الحصول على الرابط المباشر للملف المستضاف

 عند مشاركة الصفحة الرئيسية للموقع "index.html" إنسخ الرابط الذى يظهر

google-drive-host
وهذا مثال
https://docs.google.com/file/d/0B3ntuTCXGn6nMlk3VjJJSHo5ZjQ/edit?usp=sharing
إحذف الجزء الملون بالأخضر من الرابط ثم إستبدل الجزء الأحمر من الرابط ليكون هكذا
https://googledrive.com/host/0B3ntuTCXGn6nMlk3VjJJSHo5ZjQ/
مع مراعاة عدم التغيير فى الرمز  الذى يمثل ID الخاص بالموقع.

إستضافة الملفات الخاصة بمدونات بلوجر على Google drive

بنفس الطريقة يمكن حل مشكلة عدم وجود إستضافة لمدونات بلوجر فيمكن أن تحتفظ بملفاتك على جوجل درابف
مثال على ذلك إستضافة ملفات Css
قم برفع ملفات CSS الخاصة بمدونتك إلى حسابك على جوجل درايفgoogle-drive-host 
ثم عند مشاركة الملف نقم بتغيير الملف من خاص إلى عام public
google-drive-host
ثم مشاركة الملف ونسخ الرابط وتحويله إلى رابط إستضافة كالآتى:
وهذا مثال
https://docs.google.com/file/d/0B3ntuTCXGn6nMlk3VjJJSHo5ZjQ/edit?usp=sharing
إحذف الجزء الملون بالأخضر من الرابط ثم إستبدل الجزء الأحمر من الرابط ليكون هكذا
https://googledrive.com/host/0B3ntuTCXGn6nMlk3VjJJSHo5ZjQ/

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

<link href='https://googledrive.com/host/0B6RfPJAihIixTXAxQUdMRERWOEp/ ' rel='stylesheet'/>
ثم إضافة هذا الكود فوق الوسوم <head>
أيضا من الممكن إستضافة صفحات الويب Html وإستخدامها داخل iframe داخل مدونتك بنفس الطريقة.
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا  

2013-07-17

استضافة مجانية للمواقع وصفحات الويب على Dropbox

 بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

يعتبر Dropbox من أشهر مواقع التخزين السحابى لعمل مساحة خاصة بك على شبكة الإنترنت لحفظ الملفات لما له من مميزات عديدة فهو يعمل بمثابة قرص صلب متنقل يمكن إستخدامه على أى جهاز كمبيوتر أو حتى على الهواتف الذكية فبمجرد تثبيت البرنامج الخاص بـ Dropbox يتم عمل مزامنة مع أجهزة الكمبيوتر أيًا كانت نظم تشغيلها، كما أنه بالإمكان تصفح ملفاتك فى حسابك على موقع Dropbox مباشرة على شبكة الإنترنت. (يمكن الإطلاع على الفرق بين Google drive , Dropbox)
ولم تقتصر إمكانيات Dropbox على حفظ ومشاركة الملفات فقط بل أيضًا يمكن إستخدامه كإستضافة مجانية لموقع بسيط أو إستضافة ملفات Html,Css,Javascript لمدونات بلوجر.

dropbox-icon

يمكن أيضًا الإطلاع على كيفية إستخدام Google Drive لإستضافة ملفات موقعك 

كيفية إنشاء حساب على Dropbox 

بالتوجه إلى موقع Dropbox والتسجيل به تكون امتلكت 2G مجانية لتخرين الملفات الخاصة بك، يمكن رفع الملفات إلى هذه المساحة والإحتفاظ بها ولكن لسهولة التعامل مع ملفاتك على موقع dropbox يفضل تحميل البرنامج الخاص به من هنا وذلك لعمل مزامنة للملفات على جهاز الكمبيوتر الخاص بك والتعامل مع الملفات كأنها موجودة بالفعل على جهازك.
بعد تثبيت البرنامج ستجد أيقونة الدروبوكس بجانب الساعة على الجهاز لتسطيع الوصول لملفاتك.
dropbox-icon
ولمشاركة الملفات ونشر الروابط للتحميل يتم من خلال الضغط كليك يمين على الملف ثم إختر من القائمة المنسدلة Dropbox ثم Share this folder ثم الحصول على رابط لتحميل الملف .
dropbox

كيفية إستضافة ملفات Html,Css,javascript على Dropbox

 فى حالة إستضافة ملفات بروابط مباشرة أو موقع فلابد من إنشاء Public folder  للحصول على الروابط المباشرة ، ولتفعيل هذه العملية إضغط هنا لإنشاء فولدر Public folder وننسخ به ملفات الموقع الذى تريد إستضافته ثم  الحصول  على روابط مباشرة سواء على شبكة الإنترنت من خلال موقع dropbox عن طريق إختيار الملف ثم copy public link
public-link

 أو من خلال الحصول على الرابط المباشر لملف index أو صفحة الويب الرئيسية للموقع من جهاز الكمبيوتر عن طريق كليك يمين على الملف ثم Copy public link من القائمة المنسدلة وبهذا تكون قد حصلت على رابط موقعك.
dropbox-hostيمكن أيضًا الإستفادة من هذه الخاصية لإستضافة ملفات الفلاش والصور والأكواد Css ,Javascript لمدونات بلوجر مثل google code أو google sites

2013-03-08

إضافة قطار المواقع الإجتماعية المتحرك إلى موقعك Social icon Train

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

أضف أزرار المشاركة الإجتماعية الفيس بوك ، تويتر، جوجل بلس بشكل جديد ومميز
social-facebook-tweeter-google-train
كما نعلم جميعا أهمية المواقع الإجتماعية فى زيادة عدد زوار ومتابعين المواقع والمدونات فلابد الإهتمام بإضافة أزرار الفيس بوك وتويتر وجوجل بلس إلى المدونة بشكل مميز لتشجيع الزائرين بالإشتراك بها ومتابعة جديد موقعك من خلالها.
وقد قدمت طرق عديدة لإضافة أزرار المشاركة الإجتماعية يمكن أيضًا الإطلاع عليها:
نوافذ متحركة صندوق معجبين الفيس بوك مع صندوق محادثة تويتر وزر جوجل +1 والقائمة البريدية
 أفضل طريقة لإضافة أزرار الفيس بوك وتويتر وجوجل بلس لموقعك
قائمة ثابتة من أيقونات المواقع الاجتماعية الخشبية
 إضافة زر أعجبنى وصندوق الإعجاب Like box,Like

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



طريقة تركيب القطار المتحرك إلى مدونات بلوجر:
  1.  إذهب إلى لوحة تحكم بلوجر
  2.  تخطيط ثم إضافة أداة Html & javascript
  3.  ثم إنسخ الكود التالى وألصقه بالأداة

<!--http://www.condaianllkhir.com/--> 
<div style="bottom: -3px; left: 0px; position: fixed; width: 100%; z-index: 65535;">
<marquee>
<style media="screen" type="text/css">

  *
  {
   padding: 0;
    margin: 0;
  }
   body
   {
    padding: 0;
    margin: 0;
   }
   #flexbox
   {
    //display: -webkit-box;
    //-webkit-box-orient: horizontal;
    //-webkit-box-align: stretch;
    //width: auto;
   }
/*---- http://www.condaianllkhir.com/---*/
  </style>
<a href="https://plus.google.com/105400830730395545290/posts" rel="nofollow" target="_blank"><img alt="google-plus-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLQT3OP1SWnrqMeqdAqvkTHmOS1rNy_CtptljrqdlLCS9YQcZhPrvSW9-RqPKWGNHo9tgXUMZUydMgWymUJf52mYgG3bxAaRJ0cgW6WvL-1hrPCUzR9i3apNhdpZiotb0C5Aq5bGX5Ao6/w391-h389-o-k/%25D8%25AC%25D9%2588%25D8%25AC%25D9%2584-%25D8%25A8%25D9%2584%25D8%25B3.png" style="border: 0px none; margin: 0px; padding: 0px;" title="google-plus-icon" /></a>
   <a href="https://twitter.com/DrRo2" rel="nofollow" target="_blank"><img alt="tweeter-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-KJj6BZGBlwDsRuBOcxaqEL72BMUDpxVipzHJQZe2x3EJvW7P7g9u1fDxI4H6TSCPfL9P1co5A9IDbx39AuD6Z7ajm5mvuPBllCfdxqE9wUmJDJ51kLdsFQ5SQe5Qq6DAK1l6SFzhPUP/s70/tweeter.png" style="border: 0px none; margin: 0px; padding: 0px;" title="tweeter-icon" /></a>
<a href="http://www.facebook.com/designsblog" rel="nofollow" target="_blank"><img alt="facebook-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPrUg5rLZynvLRngt7Gl-NxDETs0-nQ91FrBYrZk25p9D8PJhxmoSvY1A0gn4lGuvvoeBGpc0pJe3Eau_19v2FcAerKj_nBFRR0DYOx8Vg7TkvAXL26Vth3LMK3Cifbnxr33BB9ocQk9R/s150/%D9%81%D9%8A%D8%B3-%D8%A8%D9%88%D9%83.png" style="border: 0px none; margin: 0px; padding: 0px;" title="facebook-icon" /></a>
   </marquee></div>
<a href="http://www.condaianllkhir.com/" rel="nofollow" target="_blank"> <span style="font-size: xx-small;">Blogger widgets </span></a></div>
التعديل على الروابط الموجودة بالكود كالتالى:
إستخدم الكيبورد Ctrl+F فى البحث عن الروابط
قم بتغيير رابط صفحة جوجل بلس الملون باللون الأصفر برابط صفحة جوجل بلس الخاصة بموقعك
قم بتغيير رابط الفيس بوك الملون باللون  الأخضر برابط صفحتك على الفيس بوك
قم بتغيير رابط تويتر الملون باللون الأزرق برابط تويتر الخاص بموقعك

تحديث: بعد تجربة الإضافة من قبل المشاركين وجد أنها تعمل جيدا مع معظم المتصفحات ماعدا جوجل كروم .

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

2013-03-03

أبسط طريقة لإضافة جداول إحترافية على بلوجر Blogger table

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

ولكن قد تجد صعوبة فى البحث داخل الكود والكتابة بداخله وتنسيق الجدول لذلك سأوضح طريقة بسيطة جدا لعمل الجدوال بأقل مجهود دون عناء الكتابة داخل الأكواد.
مثال:
مالموضوعالتسمياتعدد التعليقات
1أداة الترجمة لمدونات بلوجرإضافات بلوجر2
2أداة التقويم فلاشات المواقع5
3تعريب قالب wildernessقوالب بلوجر3
4تكبير مصغرات الصور بمرور الماوسcss أكواد 2
5سلايدر ثلاثى الأبعادإضافات بلوجر5


خطوات عمل الجدول:
1. إنشئ جدول بإستخدام برامج الأوفس وورد أو إكسل  Microsoft office word,Excel
وأضف إليه البيانات التى تريد أن تظهر بالجدول
2.أنسخ هذا الجدول ثم إذهب إلى هذا الموقع Tableizer  وإلصق الجدول الذى قمت بنسخه سابقا داخل المربع الخاص بتحويل الجدول إلى أكواد.
3.يمكنك تنسيق الجدول كما تريد بتغيير حجم الخط ونوعه  ولون خلايا الجدول.
4.بعد ذلك إضغط ثم إضغط Tabilize it لترى معاينة للجدول.
5.إنسخ الكود الناتج وألصقه فى المشاركة داخل  Html
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

2013-01-06

أفضل 3 مواقع لعمل سلايدر ثلاثى الأبعاد للمواقع websites slideshow

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

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

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

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

loxiastudio.com:

هذا الموقع يسمح بعمل سلايدر فلاشى ثلاثى الأبعاد بطريقة بسيطة جدًا بتقنية  HTML5 ,  jQuery
يعمل دون برامج (online slideshow)  أون لاين.
فقط عليك إختيار شكل عارض الصور المناسب لموقعك ثم إرفع الصور التى سيتكون منها السلايدر ثم ضبط أبعاد الطول والعرض  للسلايد شو  ليناسب موقعك
يسمح بإضافة الروابط على كل صورة.
يستخدم لمواقع الووردبريس وبلوجر وGoogle sites وJoomla وغيرها من المواقع. 
من مميزات هذا الموقع أيضًا أنه يمكن عرض التطبيق على iPhone/iPad
هذا الموقع يتطلب التسجيل للإستفادة من التطبيق مجاًنا.

cu3ox.com :

 بالتسجيل بالموقع تستطيع تحميل أداة مجانية تمكن من عمل البومات ثلاثية الابعاد 3d slideshow
 الاداة تعمل عن طريق اضافة الصور إليها من جهاز الكمبيوتر أو ألبوم بيكاسا أو فوتوبوكت أو فيلكر مع إمكانية ترتيب الصورتصاعديًا أو تنازليًا
به إمكانيه إضافة Mp3 لتشغيل ملف صوتى مع عرض الشرائح
يدعم جميع اللغات بما فيها اللغة العربية
يمكن الإحتفاظ بالسلايدر على الجهاز أو نشره إلى خادم بروتوكول نقل الملفات أو إضافته إلى موقعك كصفحة Html داخل iframe 

wowslider.com

يستلزم التسجيل أيضًا وتحميل أداه صغيرة مجانية وتعمل بإضافة الصور إليها ويحتوى على العديد من القوالب التى تحتوى على تأثيرات رائعة Transition  effects .
يمكن التحكم بجودة الصور وسرعة التنقل بين الشرائح
يسمح بإضافة تعريف بسيط يظهر على للصورة .
يدعم جميع اللغات.
يمكن الإحتفاظ بالسلايدر بعد تنفيذه على الجهاز أو حفظه كصفحة ويب أو إضافته إلى joomla module  أو رفعه على FTP server أو إستخدامه فى مدونات ووردبريس.
لإضافة عارض الصور لمدونات بلوجر يمكن إستخدام كود  iframe   مغ جوجل درايف لإستضافة الملفات 

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون