التصميم ، و اتفاقية الاستخدام

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


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

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

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

الفائدة من تقديم اتفاقية استخدام للعميل

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

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


اهم ماتحتويه اتفاقية الاستخدام

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


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

صلوا على محمد ، صلى الله عليه وسلم

تصميم الجرافيك من منظور بسيط

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


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

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

في تصميم الجرافيك يتم استخدام كثير من الاساليب التي قد تصنع عمل ابداعي فريد من نوعه ، كاستخدام الخط العربي او الزخرفات العربية او الصور او الرموز التي تؤدي الى نتيجة ابداعية فريدة من نوعها ...

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

تصميم الجرافيك بمنظور بسيط

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

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

فهناك مجموعة من المصممين ذوي العقول الصغيرة يظنون ان تصميم الجرافيك هو القدرة على التصميم وهذا المفهوم خاطئ تماما ، فان تصميم الجرافيك هو القدرة على الابداع وتضمين هذا الابداع داخل تصميم معين لتكون النتيجة هي تصميم ابداعي ...

ليس كل مصمم مبدع

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

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

البساطة هي اسلوب لكل مبدع

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

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

التقليد يقتل الابداع

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

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


ختاماً ، اقدم لك الخلاصة

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

دمتم في حفظ الله ورعايته 
صلوا على المصطفى ، صلى الله عليه وسلم

الجدولة .. وطريقة استخدامها في مدونات بلوجر

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


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

طريقة استخدام الجدولة

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

 

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

ودمتم في حفظ الله ورعايته


خاصية القفز داخل الصفحات في بلوجر

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



السلام عليكم , اولا اتأسف عن انقطاعي الطويل عن التدوين بسبب اهتمامي ببعض الامور الاكاديمية , واشكركم على حسن متابعتكم للمدونة , و التفاعل فيها بالمشاهدات و التعليقات المفيدة لي ولغيري , كما اشكر كل من دعمني في فترة غيابي هذه , وارسل الشكر بصورة خاصة الى محمد ماهر , صاحب مدونة [ مداد الجليد ] .

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


كمثال , عند ضغط على عبارة نهاية الموضوع اعلاه , ستنقل الى نهاية الموضوع بصورة مباشرة وسريعة , بدون بذل اي جهد يذكر , محرر النصوص في بلوجر يدعم كثير من الاكواد البسيطة المتعلقة بلغة HTML او JavaScript وهذه واحدة من المميزات المهمة والرائعة فيه .

طريقة استخدام خاصية القفز

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

     <a href="#archer">نهاية الصفحة</a>

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

     <a name="archer"></a>


المعرف باللون الاحمر و الازرق هو الذي يتحكم في عملية النقل حيث يستخدم نفس المعرف في الكودين فقط في الثاني بدون علامة " # "  , الكود الاول يوضع في اي مكان تريده حيث تظهر كلمة " نهاية الصفحة " في شكل رابط , والكود الثاني يوضع في المكان الذي تريد نقل القارئ اليه .

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

كان هذا شرح بسيط لخاصية القفز داخل الصفحات , وهذه الخاصية يمكن استخدامها اكثر من مرة داخل الصفحة فقط من خلال استخدام معرف مختلف لكل كودين , اذا كانت مدونتك من النوع الذي يقدم مقالات كبيرة انصحك باستخدام هذه الخاصية فهي ستسهل كثيرااا على زوارك وتمكنهم من قراءة المقال و الحصول على المعلومات في اسرع وقت .


ودمتم في حفظ الله ورعايته
اللهم صلى وسلم على سيدنا محمد

الكتابة التلقائية ، افضل اضافات بلوجر في 2017

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


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

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

لمعاينة الاضافة " من هنا "

شرح طريقة التركيب

نتوجه الى لوحة التحكم في بلوجر > المظهر > تحرير HTML ثم نضغط على مفتاحي Ctrl+F ونبحث عن الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة ...


#about{background-color:#fff;padding-top:50px;padding-bottom:50px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjn5UB3cieJ9RdwQJdOvpsVb62ziw6cVvcVH4uWkyibe1hwzKnfexpsC3FNExN9mlnpzb4ppxgxJLLk0Qn09j-NXxkR13AhdQoJ6A8e0nzcL-4ooF08SBaUkqWOOFcAYz2Mid-1nnaZVo2/s1600/wdbloog.png)!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important;transition:opacity .5s ease 0;overflow:hidden;margin-bottom: 15px;}
.vc_column-inner{padding-top:35px;text-align:center}
#countdown-timer{font-weight:700;margin:0 -30px;display:inline-block}
#countdown-timer >.countdown-section{display:block;float:left;font-size:62px;line-height:1;color:#fff;margin:0 30px}
.countdown-section i{background-color: #FFFFFF;font-size:40px;color:#5A67A6;border-radius:50%;width:80px;height:80px;line-height:80px;margin-bottom:10px;padding-left:3px}
#countdown-timer >.countdown-section >.countdown-period{display:block;font-size:22px;margin-top:8px;line-height:1;text-transform:uppercase;letter-spacing:1px;color:#fff;font-weight:500}
.type-wrap{color:#FFF;font-size:63px;line-height:124px;font-weight:900;min-height:119px}
.element{direction:rtl;display:inline-block}
.typed-cursor{opacity:1;color:#7B88CC;font-weight:100;-webkit-animation:blink 0.7s infinite;-moz-animation:blink 0.7s infinite;-ms-animation:blink 0.7s infinite;-o-animation:blink 0.7s infinite;animation:blink 0.7s infinite}
.item #about,.error_page #about,.static_page #about{display:none}

ثم نبحث عن الوسم </body> ونلصق الكود التالي فوقه مباشرة ..

<script>
$(function(){$(&quot;.element&quot;).typed({
strings: [&quot;مرحبا بكم متابعي مدونة ارشر&quot;, &quot;في مدونتي ارشر تجد كل ما تريده&quot;, &quot;من قوالب واضافات و شروحات حصرية&quot;, &quot;تخص منصة التدوين على بلوجر&quot;, &quot;اتمنى ان تعجبكم المدونة , ورمضان كريم :)&quot;],typeSpeed:50,loop: true,});});
/*<![CDATA[*/
! function(b){var a = function(d,c){this.el = b(d);this.options = b.extend({}
,b.fn.typed.defaults,c);this.isInput = this.el.is("input");this.attr = this.options.attr;this.showCursor = this.isInput ? false:this.options.showCursor;this.elContent = this.attr ? this.el.attr(this.attr):this.el.text();this.contentType = this.options.contentType;this.typeSpeed = this.options.typeSpeed;this.startDelay = this.options.startDelay;this.backSpeed = this.options.backSpeed;this.backDelay = this.options.backDelay;this.strings = this.options.strings;this.strPos = 0;this.arrayPos = 0;this.stopNum = 0;this.loop = this.options.loop;this.loopCount = this.options.loopCount;this.curLoop = 0;this.stop = false;this.cursorChar = this.options.cursorChar;this.shuffle = this.options.shuffle;this.sequence = [];this.build()}
;a.prototype ={constructor:a,init:function(){var c = this;c.timeout = setTimeout(function(){for (var d = 0;d < c.strings.length;++d){c.sequence[d] = d}
if (c.shuffle){c.sequence = c.shuffleArray(c.sequence)}
c.typewrite(c.strings[c.sequence[c.arrayPos]],c.strPos)}
,c.startDelay)}
,build:function(){if (this.showCursor === true){this.cursor = b('<span class="typed-cursor">' + this.cursorChar + "</span>");this.el.after(this.cursor)}
this.init()}
,typewrite:function(d,e){if (this.stop === true){return}
var f = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;var c = this;c.timeout = setTimeout(function(){var i = 0;var l = d.substr(e);if (l.charAt(0) === "^"){var k = 1;if (/^\^\d+/.test(l)){l = /\d+/.exec(l)[0];k += l.length;i = parseInt(l)}
d = d.substring(0,e) + d.substring(e + k)}
if (c.contentType === "html"){var h = d.substr(e).charAt(0);if (h === "<" || h === "&"){var g = "";var j = "";if (h === "<"){j = ">"}
else{j = ";"}
while (d.substr(e).charAt(0) !== j){g += d.substr(e).charAt(0);e++}
e++;g += j}}
c.timeout = setTimeout(function(){if (e === d.length){c.options.onStringTyped(c.arrayPos);if (c.arrayPos === c.strings.length - 1){c.options.callback();c.curLoop++;if (c.loop === false || c.curLoop === c.loopCount){return}}
c.timeout = setTimeout(function(){c.backspace(d,e)}
,c.backDelay)}
else{if (e === 0){c.options.preStringTyped(c.arrayPos)}
var m = d.substr(0,e + 1);if (c.attr){c.el.attr(c.attr,m)}
else{if (c.isInput){c.el.val(m)}
else{if (c.contentType === "html"){c.el.html(m)}
else{c.el.text(m)}}}
e++;c.typewrite(d,e)}}
,i)}
,f)}
,backspace:function(d,e){if (this.stop === true){return}
var f = Math.round(Math.random() * (100 - 30)) + this.backSpeed;var c = this;c.timeout = setTimeout(function(){if (c.contentType === "html"){if (d.substr(e).charAt(0) === ">"){var g = "";while (d.substr(e).charAt(0) !== "<"){g -= d.substr(e).charAt(0);e--}
e--;g += "<"}}
var h = d.substr(0,e);if (c.attr){c.el.attr(c.attr,h)}
else{if (c.isInput){c.el.val(h)}
else{if (c.contentType === "html"){c.el.html(h)}
else{c.el.text(h)}}}
if (e > c.stopNum){e--;c.backspace(d,e)}
else{if (e <= c.stopNum){c.arrayPos++;if (c.arrayPos === c.strings.length){c.arrayPos = 0;if (c.shuffle){c.sequence = c.shuffleArray(c.sequence)}
c.init()}
else{c.typewrite(c.strings[c.sequence[c.arrayPos]],e)}}}}
,f)}
,shuffleArray:function(f){var c,e,d = f.length;if (d){while (--d){e = Math.floor(Math.random() * (d + 1));c = f[e];f[e] = f[d];f[d] = c}}
return f}
,reset:function(){var c = this;clearInterval(c.timeout);var d = this.el.attr("id");this.el.after('<span id="' + d + '"/>');this.el.remove();if (typeof this.cursor !== "undefined"){this.cursor.remove()}
c.options.resetCallback()}}
;b.fn.typed = function(c){return this.each(function(){var f = b(this),e = f.data("typed"),d = typeof c == "object" && c;if (!e){f.data("typed",(e = new a(this,d)))}
if (typeof c == "string"){e[c]()}}
)}
;b.fn.typed.defaults ={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],typeSpeed:0,startDelay:0,backSpeed:0,shuffle:false,backDelay:500,loop:false,loopCount:false,showCursor:true,cursorChar:"|",attr:null,contentType:"html",callback:function(){}
,preStringTyped:function(){}
,onStringTyped:function(){}
,resetCallback:function(){}}}
(window.jQuery);
/*]]>*/
</script>

بتغيير النص باللون الاحمر الى ماتريد

بعد ذلك نبحث عن الوسم <head> ونضع الكود التالي اسفله مباشرة ...

<link href='//www.fontstatic.com/f=bein-normal' rel='stylesheet' type='text/css'/>

واخيرا ,, وصلنا لمرحلة اظهار الاضافة , الكود التالي هو اللي سيظهر الاضافة حيث انه يمكنك وضعه في المكان الذي تريد , فمثلا اذا اردت وضعه في الاعلى كما في المعاينة ، ابحث عن الوسم   <div id='post-wrapper'> والصق الكود التالي فوقه مباشرة ...

<h3 class='type-wrap' style='text-align:center;font-family:"bein-normal"'>
<div class='element'/>
</h3>

بعد ذلك قم بحفظ القالب , واستمتع بالاضافة 😊
ودمتم في حفظ الله ورعايته
{ اكثر من قراءة القرءان في رمضان }

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

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

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

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


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

جميع هذه الاضافات طريقة تركيبها بسيطة جدا فقط ادخل على لوحة التحكم في بلوجر > التخطيط > اضافة اداة > اداة HTML/Javascript ثم الصق بداخلها كود الاضافة التي تريدها .

الاضافة الاولى

عبارة عن فانوس يتم تركيبه اعلى يسار المدونة , ييحتوى على صورة محركة " رمضان كريم " , اضافة بسيطة ومميزة يمكن استخدامها وتركيبها بكل سهولة ..

<!-- Ramadan Mubarak By ar-cher.Blogspot.com . START -->
<div style="float:left;position:absolute;left:0px;top:0px">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18hSlYQmmTDI22d6kuBGeSeEyaiO5I8jmcIkPvjzLM9lN7v8Hq5l3FhEKEbh0FRKKnXvS7jX9-SNQ3yfsUz6hZiXVIojORMrA2Fo9rf7xCf2RVxyIF3RyABXwovv4JWc0aSMB0-Ui6yRF/s1600/Ramadan+Mubarak+-+www.afkarpro.blogspot.com.gif" alt="رمضان كريم"/>
</div>
<!-- smmor END -->
<!-- smmor START -->
<div style="float:left;position:absolute;left:0px;top:82px">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcR1-P-8E0pLnSCaFN4jeldWScTkZQIpX58oVoBka1I5vMykm7M4NEZRqjJ2Wkmx7fUzgOaMtQ3Qs2ldlXpb6F7r3ftnWQ6AnzvBnnxerWYK61kfyw5sEX3aCDA-XQuEI6dyH6JOs7hjtc/s1600/fan-3+-+www.st-tek.blogspot.com.png" width="50,height="100" alt="رمضان كريم" title="رمضان مبارك سعيد" border="0"/>
</div>
<!-- smmor END -->
<!-- smmor START -->
<div style="float:left;position:absolute;left:0px;top:230px">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuvZAjtYsH6_cX_-gyuFM94CrZQjKbzylrei1ua1nQEE6radyoNyCjpyi4IVUg0rqEHHodJ0VoLrMreUWdw3ltXKm0xfV4fNxd7eoButTqrYE79w7zDq7myX-Xxq4kouVQaVNHitnAJJEd/s1600/fan-2+-+www.st-tek.blogspot.com.png" width="50,height="100" alt="رمضان كريم" title="رمضان مبارك سعيد" border="0"/>
</div>
<!-- Ramadan Mubarak By ar-cher.Blogspot.com . END -->

الاضافة الثانية

عبارة عن صورة " رمضان كريم " تركب اسفل يسار الصفحة وتتحرك مع الصفحة طلوعا ونزولا , بسيطة واحترافية وخفيفة على القالب .

<a href="http://ar-cher.blogspot."><img alt="Best Blogger Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgoavouh941aflf7jVbXqIz7ytfhzE6q0lGIgwtInsOavNbTtublTwBJKOZpi-ZeBoSnUi2QjQZueCzsyGmmnt9lS1OLwTK9JIx2KwX5QVIADQ2ghLGgHyDRkxbaEqFg0peJ20XJXB5K_/s1600/best+blogger+tips+-+www.st-tek.blogspot.com.png" /></a><div style="position: fixed; top: 80%; left: 3%;">
<a href="http://st-tek.blogspot.com" rel="nofollow" target="_blank"><img alt="Blog Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMdXTheddhJDcg5H1lgIBpjZ-otqNTFpzFh6dHgMnJUBDXuI_tjJG4pWXyXj70nHPuqPMvxaSL5qTjANa_2xBAbMntmhyuUjPcrpH1pwCErgm1TYF02CzKc4X-1gRE6JUP3BdlF6E7I94/s1600/Ramadan-Karim+-+www.st-tek.blogspot.com.png" /></a></div>

الاضافة الثالثة

هذه الاضافة تختلف عن الاضافة السابقة فهي عبارة عن صفحة يتم عرضها للزائر قبل التوجه الى صفحة الموضوع , تحتوى الصفحة على عبارات تهنئة بحلول شهر رمضان ويظهر فيها زر " اكمل القراءة " للتوجه الى صفحة الموضوع ..

معاينة الاضافة " Codepen "

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

نتوجه الى لوحة التحكم في بلوجر > المظهر > تحرير HTML > نضغط Ctrl+f ونبحث عن الوسم  ]]></b:skin> ونلصق الكود التالي فوقه مباشرة :




    #welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
    #welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
    .welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;}
    .welcomeclose:hover {background-color:#aaa}
    #welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0egoflbPfy9RSTR5TigA6bip8s2YD6kcgb9-ZkYWgTnhDacXV2r28CtDZo0m3BfUxHGkLbhQkk5OBqCz9cVQj3db2_QZN6emsq1GC_5OnynrAT7DL5Fdw8RhUlioyqCetCD-MxEywRdDA/s1600/Wallpaper.jpg) no-repeat top center;}


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

    <div id='welcomeoverlay'/>
    <div id='welcomebox'>
        <p>&#8220;أهلا رمضان&#8221;<br/>
         نحن في ادارة المدونة نبارك لكم الشهر الفضيل<br/>
    &quot;نسال الله ان يتقبل صيامكم وعبادتكم ,<br/>
    اللهم لا تحرمنا ان نكون من عتقائك من النار في هذا الشهر الفضيل ..آمين.&quot;</p>
        <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>أكمل القراءة &#8594;</div>
      </div>
ثم نقوم بحفظ القالب , وبعد ذلك ستعمل الاضافة ...

هذه كانت مجموعة صغيرة من الاضافات للترحيب بشر رمضان ودمتم في حفظ الله ورعايته 

{ صلوا على الحيب , صلى الله عليه وسلم }