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

- صورة الأداة :

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

1-ادخل مدونتك .

2-التخطيط .

3-اضافة اداة html/javascript .

4-الصق هذا الكود فيها مع تعديل ماتريد من الكلمات والروابط .

الكود

<div class="page-cat">
   <a href="#">
      <div class="page-cat1">
         <img src="http://im75.gulfup.com/b5RAle.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="http://im75.gulfup.com/49L1Zg.png" style="float:right; margin-left:13px;">
         <h3>
            عالم
            <span style="color:#88CD70;">
            الرياضة
            </span>
         </h3>
         <p>
            كل ما يتعلق بجديد الرياضة و المسابقات الدولية .
         </p>
      </div>
   </a>
 <a href="#">
         <img src="http://im75.gulfup.com/Ex0S43.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="http://im75.gulfup.com/rjV4Do.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(http://3.bp.blogspot.com/-G4LKQWNURpA/UKDYi-BBaUI/AAAAAAAAAWU/eNleP6BNZh0/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>

- التعديلات :

- عدل ماهو بالون الأحمر بما يناسبك