اضافة قائمة علوية مصغرات لمواضيع المدونة - أضافات بلوجر

<style>

cat_title{color:#89343}

.category{width:182px;float:left;border-top:8px solid #CCC;display:block;background:#FFF;font-size:1.2em;font-family:georgia, times new roman, verdana;font-weight:700;cursor:pointer;text-shadow:0 0 2px #CCC;letter-spacing:inherit;margin:0;padding:6px 10px 15px}

.category p{font-family:Tahoma, 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;font-size:11px;font-weight:400;color:#444;letter-spacing:.03em;margin:0}

#middle {

margin: 0 auto;

background: #FAFAFA;

width: 1010px;

border-left: 1px solid #F8F8F8;

border-right: 1px solid #F8F8F8;

}

#cat-4 {border-top: 8px solid #FF95F9;}

#cat-4:hover {background: #FF95F9;}

#cat-5 {border-top: 8px solid #9CFFB1;}

#cat-5:hover {background: #9CFFB1;}

#cat-6 {border-top: 8px solid #FF6767;}

#cat-6:hover {background: #FF6767;}

#cat-8 {border-top: 8px solid #9CDBFF;}

#cat-8:hover {background: #9CDBFF;}

#cat-9 {border-top: 8px solid #FFD29C;}

#cat-9:hover {background: #FFD29C;}

</style>

<div class='clearfloat' id='middle'>

<div class='category' id='cat-4' onclick='window.location.href=&apos;رابط الموضوع-1&apos;;'>

<span class='cat_title'>عنوان الموضوع-1</span><p>وصف الموضوع-1</p></div>

</div>

<div class='category' id='cat-5' onclick='window.location.href=&apos;رابط الموضوع-2&apos;;'>

<span class='cat_title'>عنوان الموضوع-2</span><p>وصف الموضوع-2

</p></div>

<div class='clearfloat' id='middle'>

<div class='category' id='cat-6' onclick='window.location.href=&apos;رابط الموضوع-3&apos;;'>

<span class='cat_title'>عنوان الموضوع-3</span><p>وصف الموضوع-3</p></div>

</div>

<div class='clearfloat' id='middle'>

<div class='category' id='cat-8' onclick='window.location.href=&apos;رابط الموضوع-4&apos;;'>

<span class='cat_title'>عنوان الموضوع-4</span><p>وصف الموضوع-4</p></div>

</div>

<div class='clearfloat' id='middle'>

<div class='category' id='cat-9' onclick='window.location.href=&apos;رابط الموضوع-4&apos;;'>

<span class='cat_title'>عنوان الموضوع-4</span><p>وصف الموضوع-4</p></div>

</div>