ضع عنوان لتدويناتك بتأثيرات جميلة Heading Tag

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

 

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

 

ضع عنوان لتدويناتك بتأثيرات جميلة

 

يمكنك مشاهدة التأثير على مدونة فأر التجارب

view demo توجه لقالب المدونة و ابحث عن الوسم

]]></b:skin>

الأن قم بوضع الكود التالي فوقه مباشرة

/*----Widget Heading Tag----*/

h3{
font-family:veranda !important;
font-style:italic !important;

}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;

padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;

}

.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;

box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;

}

الأن بالتغيرات التي تريدها حسب شكل مدونتك أو إترك الكود كما هو.

  • لتغير الخط بخط مدونتك، قم بتغير كلمة  veranda بإسم الخط اللذي تريد. و غير كذالك كلمة italic لتغير شكل الخط.
  • لتغير لون الخط و لون الحدود قم بتغير القيمة التالية #666
  • لتغير لون الخط و لون الحدود عند مرور سهم الفأرة قم بتغير القيمة التالية #FF133F
  • لتغير لون الظل في الوضع العادي قم بتغير القيمة التالية #666
  • لتغير الظل عند مرور سهم الفأر قم بتغير القيمة التالية #FF133F
  • بعد إتمام التغيرات قم بحفظ القالب

 

كيف تقوم بإدراج التأثير في التدوينات

 

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

<h3>ضع هنا عناوين المقال</h3>

عندما تقوم بنشر تدويناتك سترى سحر الكود يعمل، أتمنى أن يكون الموضوع قد نال إعجابك. في انتظار تعليقاتك و استفساراتك تقبل سلامي الحار.

سلام

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)

هناك 7 تعليقات:

  1. هذا درس مذهل سأجربه الآن لأرى، شكرا لك من الأعماق. بارك الله فيك.

    ردحذف
  2. للأسف لم يعمل معي هل من سبب لذلك؟ وشكرا

    ردحذف
  3. @الباشق الإسلامي لا أدري ما سبب لأن الكود يعمل جيدا و قد تم تجربته على أكثر من مدونة.

    ربما يكون الخطأ في إدراج الكود الأخير عند تحرير المقال قم بوضع العنوان بين الوسمين h3 في خانة تحرير HTML و ليس خانة تأليف.

    أتمنى أن تحل المشكلة بهذه الطريقة

    ردحذف
  4. ألم أقل لك أنك مبدع حقيقي جزاك الله خير الجزاء على ما تقدمه كي ترتقي المدونة العربية .

    ردحذف
  5. @زيد الجماعي

    العفو أخي زيد
    ما نقوم به ليس إلا القليل و استمرارنا يعتمد على تشجيعكم لنا

    ردحذف
  6. اشكرك جزيلا اداة رائعه واستفادت منها كثيرا

    ردحذف