دليل المدون

2013-02-15

أضف العناوين الرئيسية على بلوجر داخل إطار متحرك Animated Blogger Post Title

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

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

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

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



طريقة تركيب الإضافة لمدونات بلوجر
  1.  إذهب إلى لوحة تحكم بلوجر
  2. إختر تبويب قالب
  3. ثم إضغط على زر تخصيص
  4. ثم إختر متقدم ثم إضافة Css
اضافات بلوجر

اضافات css
ثم إختر الستايل المناسب لمدونتك وإنسخه فى مكان أكواد Css

Style No.1
Lighting Hover effect

css
.post-title
    {
    border:2px solid #a1a1a1;
    padding:10px 40px;
    background:#dddddd;
    width:300px;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    transition:width 3s;
    width:400px;-moz-transition:width 3s; /* Firefox 4 */
    -webkit-transition:width 3s; /* Safari and Chrome */
    -o-transition:width 3s; /* Opera */
/*----widget by http://www.condaianllkhir.com/---*/
    }
    .post-title:hover
    {
 background:#FAFAFA;
 -webkit-box-shadow: 2px 2px 4px 3px #FF3366;
box-shadow: 2px 2px 4px 3px #FF3366; 
    }

 بمرور الماوس على عنوان التدوينة تضىء حواف الإطار
لتغيير لون الإضاءة والخلفية قم بتغيير الأكواد الملونة باللون الأحمر فى الكود السابق بإستخدام مولد أكواد الألوان

style No.2
 Magic Css Effect
css effects

.post-title
    {
    border:2px solid #a1a1a1;
    padding:10px 40px;
    background:#dddddd;
    width:300px;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    transition:width 3s;
    width:400px;-moz-transition:width 3s; /* Firefox 4 */
    -webkit-transition:width 3s; /* Safari and Chrome */
    -o-transition:width 3s; /* Opera */
/*----widget by http://www.condaianllkhir.com/---*/
    }
    .post-title:hover
    {
    width:500px;background:#FAFAFA;
    }
بمرور الماوس على العنوان يزيد عرض الإطار
يمكن التحكم فى عرض الإطار بتغيير القيم الملونة بالأخضر

style No.3
Shadow Effect Blogger post title
.post-title
    {
    border:2px solid #a1a1a1;
    padding:10px 40px;
    background:#dddddd;
    width:300px;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    transition:width 3s;
    width:400px;-moz-transition:width 3s; /* Firefox 4 */
    -webkit-transition:width 3s; /* Safari and Chrome */
    -o-transition:width 3s; /* Opera */
/*----widget by http://www.condaianllkhir.com/---*/
    }
    .post-title:hover
    {
 background:#FAFAFA;
 -webkit-box-shadow: 6px 6px 2px 2px rgba(5, 2, 2, 0.5);
box-shadow: 6px 6px 2px 2px rgba(5, 2, 2, 0.5);

    }

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

هناك 9 تعليقات

  1. شكرا على الإضافة أختي الفاضلة
    وموفقة بإذن الله
    تحياتي
    كن مدون

    ردحذف
  2. شكرا على المجهود
    وفقك الله

    ردحذف
  3. جزاكم الله كل خير على هالإضافة الاكثر من رائعة
    اساله تعالى ان تكون في ميزان حسناتك

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

    ردحذف
  5. شكرا جزيلا لمروركم الكريم

    @ al etahad
    شكرا جزيلا لمرورك ولكنى أعتذر بشدة لضيق الوقت ولكن يمكن الإستعادة بمعهد خبراء بلوجر فى تصميم القالب

    ردحذف
  6. شكرا ولكن اريد الاداة على العناوين الفرعية في درس لوحده لأني لم افهم من الشرح المبسط

    ردحذف
  7. شكرا اختي علي مجهودك الرائع
    www.de2-ps.com

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون