بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله أحبتي في الله .
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله أحبتي في الله .
قائمة احترافيه تحت الهيدر مع خط جميل - CSS
موضوع جديد وجميل , اليوم موضوعنا عن إضافة جميلة للمدونة بأستخدام CSS + HTML الأضافة قمت بتحسينها بنفسي مع أضافة خط رائع وحصري لها غير الخطوط الأعتياديه .
مثال مباشر : من هنا
 |
| قائمة احترافيه تحت الهيدر |
طريقة التركيب :
- ادخل مدونتك .
- التخطيط .
- اضافة اداة html/javascript .
- الصق هذا الكود فيها مع تعديل ماتريد من الكلمات والروابط .
<div class="page-cat">
<a href="#">
<div class="page-cat1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8uxy_NUEDRaBhI27f4O6zY03Z89rBwtA7MhUBgdSXLfVfT3utmJLDtt31H7hGKujpQOMUs89Dhoy1jdksjN3utJGMQwo81N2-JocxYrU4YzYARMRn4Gq-ukMrwOrtWE9HrsYcmSXr10/s400/home-13.png" style="float:right; margin-left:13px;">
<h3>
أخبار
<span style="color:#54BDB9;">
الآن
</span>
</h3>
<p>
أهم الأخبار والمستجدات .. كن على اطلاع !
</p>
</div>
</a>
<a href="#">
<div class="page-cat2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gv7GHEf27DpWMPyZptXjM8rkQaqiO5Xi-gwm6I0aDctP93pMOrnDcJnvjGbtNTgcRpI68X0DFgZNXWLUkno5MHTrPKJadlBb42i136h4NgugcmF0nJVAA8GXs3Dnoptr6QWlNpKpJGI/s400/home-15.png" style="float:right; margin-left:13px;">
<h3>
عالم
<span style="color:#88CD70;">
الرياضة
</span>
</h3>
<p>
كل ما يتعلق بجديد الرياضة و المسابقات الدولية .
</p>
</div>
</a>
<a href="#">
<div class="page-cat3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_na9SwmKKJL2rzuCXv6xWqA8AKWUA_Yo5eVBzFheOxAgwvQ1B90Ns4hbWm7WLlH_TJL7RGOVvCmCzlmm7VcIea3ZWq5XgOtgG4N86VlzN1Z-VGOTYnJhx2bo6C1RDUoaTUNjLBvfIKy0/s400/home-14.png" style="float:right; margin-left:13px;">
<h3>
قصص
<span style="color:#49C9E5;">
رائعة
</span>
</h3>
<p>
اجمل القصص و الخواطر الرائعة و المفيدة
</p>
</div>
</a>
<a href="#">
<div class="page-cat4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBb0hktfZdAxsCUtplWQsP4ZytIzsbpHBmikriiV6jEIjGK09uWs1kuYhHAKFPPBpS6hM6jf7RzhDm6AMWxkGjOnRI_r00zrXLp1M1-9xAhX498ArRJbGWPIGQHxnQw7okkeqv8eTL87Q/s400/home-12.png" style="float:right; margin-left:13px;">
<h3>
حول
<span style="color:#6ac29e;">
العالم
</span>
</h3>
<p>
مختارات من
الانترنت والصحافه .
</p>
</div>
.
</a>
</div>
<style>@font-face {
font-family: 'goth';
src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.page-cat {
width: 900px;
height: 115px;
margin: 0 auto;
text-align: right;
direction: rtl;
}
div {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirOPOtWiLA5c8QbZTCd0ak9Llbl4veSGk7Vdh_aCts9DmOj9TytS0DA_-FnKYTJW0xuJT_GsyN_AuOD3fSLv_hMnWbY31U7sVVvq5VvX9OVjxtgw6QOtWJXEBrkUGAtlINe6vTv_-_JL0/s320/texture.jpg);
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
a:link {
text-decoration: none;
color: #ec8500;
border: 0px;
-moz-outline-style: none;
}
a:visited {
text-decoration: none;
color: #ec8500;
border: 0px;
-moz-outline-style: none;
}
a img {
border-width: 0;
}
.page-cat .page-cat1 h3, .page-cat .page-cat2 h3, .page-cat .page-cat3 h3, .page-cat .page-cat4 h3 {
margin: 0 13px 5px 0;
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family: "goth", Tahoma, Helvetica, sans-serif;
color: #666666;
font-size: 13px;
}
.page-cat .page-cat1 P, .page-cat .page-cat2 P, .page-cat .page-cat3 P, .page-cat .page-cat4 P {
color: #7c6565;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 12px;
}
.page-cat .page-cat1 {
width: 200px;
height: 100px;
background: #fff;
float: right;
margin-right: 2px;
padding: 10px;
opacity: 0.7;
}
.page-cat .page-cat2 {
width: 200px;
height: 100px;
background: #fff;
float: right;
margin-right: 2px;
padding: 10px;
opacity: 0.7;
}
.page-cat .page-cat3 {
width: 200px;
height: 100px;
background: #fff;
float: right;
margin-right: 2px;
padding: 10px;
opacity: 0.7;
}
.page-cat .page-cat4 {
width: 200px;
height: 100px;
background: #fff;
float: right;
margin-right: 2px;
padding: 10px;
opacity: 0.7;
}
</style>
الازرق : عنوان الموضوع .
الاحمر : رابط الصورة .
الاصفر : رابط الموضوع .
البنفسجي : نبذة عن الموضوع.
الاحمر : رابط الصورة .
الاصفر : رابط الموضوع .
البنفسجي : نبذة عن الموضوع.
