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

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

 

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

 

 

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

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

]]></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 ثوان :)