قائمة احترافيه تحت الهيدر مع خط جميل - CSS

قائمة احترافيه تحت الهيدر 

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله أحبتي في الله .

قائمة احترافيه تحت الهيدر مع خط جميل - CSS

موضوع جديد وجميل  , اليوم موضوعنا عن إضافة جميلة للمدونة بأستخدام CSS + HTML الأضافة قمت بتحسينها بنفسي مع أضافة خط رائع وحصري لها غير الخطوط الأعتياديه .

مثال مباشر : من هنا .

صورة للأداة :

قائمة احترافيه تحت الهيدر 

طريقة التركيب :

1. ادخل مدونتك .
2. التخطيط .
3. اضافة اداة html/javascript .
4. الصق هذا الكود فيها مع تعديل ماتريد من الكلمات والروابط .

<div class="page-cat">
   <a href="#">
      <div class="page-cat1">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuuLIVzitvxDUk8HiNpKKMACohhff8fPp_geurBuTJrQmYfXYwSPgZPu0mE53uzEb-hkq8hBG0zWTf4hYQVa7yopN1OvVuvCyXsnJtfzROo1zI1d5EH1g7x73041tMJumZvWZWt_Ld9u4/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/AVvXsEgoBFDZho-LgLbLw5tfxJUCQ5HQaHB35G_C_SXXCMvHJ4kIFhTeRTBh53AesS4zPaZhiUW1x9obBZdT66dLcL_92CysIdzoxvamQ6BqjlNZJoK9ofaSnl14fkIeTKnVOPzhTdNlwz9ulDE/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/AVvXsEhkwU4qyBh7pRboI3mnYoGoqVOIi8f6ZRBoSEIyM5Jwq6P8KjixSb0hs0EQgbagZExtGlsNB99Cv_ertZkpwUG8DuanzwpDYRkvKCWnDgUzjPvrDxr_i48hOHWesl6GZzvSpW1fi_9E6Z0/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/AVvXsEiGUWw8rA0Ea_iE3RJrbLnmMGovv3yZ8wv7M93vTCW79T95qWHmQosdkduHRnCLfNNbNLWOzL-i5CWVKqRRYFozLP0Z3YhzRRtvoM3hqKHcEKq1fGpBNwFCijnWeZXWdFjln9Lbodd3S5c/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/AVvXsEjM4h3IKXwk0XR0sTtuANvSGkl8wRJiAwZ2dcPGBQTI7uPGT01NpVQmQaP6clJUN3LpydCxdmw79dxx8q8lvYmcZyAO2VLImyN_a9_XNELAiNFSW-SWmZnygfidb7Lk6q1V9TAobxtuoy8/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>

الازرق : عنوان الموضوع .
الاحمر : رابط الصورة .
الاصفر : رابط الموضوع .
البنفسجي : نبذة عن الموضوع.

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

عنوان التدوينة :قائمة احترافيه تحت الهيدر مع خط جميل - CSS

ملخص التدوينة:

قائمة احترافيه تحت الهيدر  بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم السلام ع...

goust

الساعه : 2014-03-17T23:06:00+03:00

تاريخ : 17‏/03‏/2014

من : المملكة العربيه السعوديه

التعليقات : 3

انشرها :

تاق :