والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله أحبتي في الله .
قائمة احترافيه تحت الهيدر مع خط جميل - CSS
موضوع جديد/-
وجميل اليوم موضوعنا عن إضافة جميلة للمدونة بأستخدام CSS + HTML الأضافة قمت بتحسينها بنفسي مع أضافة خط رائع وحصري لها غير الخطوط الأعتياديه .
صورة للأداة :
 |
| قائمة احترافيه تحت الهيدر |
- ادخل مدونتك .
- التخطيط .
- اضافة اداة html/javascript .
- الصق هذا الكود فيها مع تعديل ماتريد من الكلمات والروابط .
<div class="page-cat">
<a href="#">
<div class="page-cat1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeb2tYP8rA4ole6Rb9Fa0VMAgpxb4ed1G_VFgfnJVvSdQZrw2LJmLfOUU5ad4fLQA-o87DGDp1tCaDQX0H0opX8bSRFMcmlOMd-thdM676purOTTEr7nKMkPi66b02bVlvHFKkTlFsSBo/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/AVvXsEgnhs1v0ndrzPkHyu7LKJQ7NH_C4JJ841PV9KElrVMoj-VfdwC8obqLVzB5u2MLmcTNPkiks2uVtdgF-gCmwhUxTwk69xnIJHl3tDCtenSTovtmdf9trcLB9jrX7qrt_szdugovoOwCxXI/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/AVvXsEj22JK0zCQVyYDbKGaIjbKQzED6DX4Iuz2RjIIROj_XpabYIYGtblJ9WTtZhGDw_9et0D_ToIF5ul9S1YXgy0oi7aqv5yIf5Q2bZTvb6_YCNsRxj-EYxBp9vomVCo9BP-4S2wXBVwtZ-I0/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/AVvXsEh_uGzY4OHlwwdWJGKaD543HSnQJI1Iau-wcFfXFaQjC-TOMf5jtxcQnO44nDU0HI2ylVUizm8Asgd_PuLPJasz1WDAxA_dgKl4DIim29VUTGMUQVhdwImR4an1Pk0fRKpHnYYxUv8KTAM/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/AVvXsEgCXqkxGLuncOb0EteNsLn9ZMKNf8xuFHJPHQDAGK5lc7IqaYLobiOlC-FlEW9t5RJyjKtAVz7FJbLOGuwF8dJwe8jkSwlDElu4QxW0kS5BzL9xkRNkrL9JrKchNo5OEfLxWesjvi8dUAQ/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>
.---------------------------------------------------
الازرق : عنوان الموضوع .
الاحمر : رابط الصورة .
الاصفر : رابط الموضوع .
البنفسجي : نبذة عن الموضوع.