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

Labels: اضافات بلوجربلوجر

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

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

قائمة احترافيه تحت الهيدر مع خط جميل - 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/AVvXsEjiafhCyf2WAYJqmNNBnUpHrg-p-Ookt6CLUnm3fl4pl1IX0Nrag8ANIGWJcyNJO4Ea1AHac-FLbURB4hgH1ifumwx9GUsGIARJPLPDk7oD4fN9vlQleNyG5tbYpm7Zc61VIJdVRdVE_dE/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/AVvXsEhCO-_ePT_ki9ZaR7a3IV1XuZVkokNljh_bAa1dnSS677A_yJwwEHv_HvT-pEzVV3wjRaOYWJs_FelOb5SAStaD3O59aySEGY7eyBJ2qsAv1_GbqxAc2ykogrgQs8HOwZtKjfcJ2WUWNWg/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/AVvXsEgS83GjZcjoDIPq_tojbHTM2HCxqjk1jIq6n6D6gdTEoA_Lt8Ig0OEB1F29GnK4l6QthJrwN2gDlaPNqu3_SDw-Tfv5MvfoNOMPFtA4qH3L98BKxmxE1o5Xs2CuOenAGpm74T0Vh_DKC3o/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/AVvXsEjinIprORino8dsbEAXwHNzgh2kkQkX92VZ0KfgAXrLAVM39N9-khlNcqMGNcfwFA9PdA3ujO0x5bCkpYzZdhbDlAQ4Y_7Gxxu9ClQRe1ZICPvgKjBV585-x733o9xVztozQNkZcDiLp2k/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/AVvXsEiXIwZnTEVwma5bq9mhSGJY_E3LKa66Wdif4p-5fJMM-MSrn6vCtYqAwIbvl5_ti4wKii7aX4olH4GJw1Ext2OUowCF4KeP2NsjAIkkKkixk0EQ3j7zNVJM94wVfBja9kbrgmUC4kHrGbQ/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>

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

0 التعليقات