قائمه بشكل خرافي

مرحباً بكم زواري واصدقائي 

اليوم لدينا لكم اضافة جديده وهي عبارة عن قائمة لكن شكلها احترافي وممبز 

طريقة التركيب كما تعودنا دائماً ^_^

1- الذهاب الى لوحة التحكم

2- انقر على تخطيط

3- اختار اضافة اداة

4- اختر اداة الـ html/javascript

 ضع الكود ادناه 

الكود

<style>

.category {

width: 182px;

float: left;

border-top: 8px solid #CCC;

display:block

margin: 0px;

padding: 6px 10px 15px 10px;

background: #FFF;

font-size: 1.2em;

font-family: georgia, times new roman, verdana;

font-weight: bold;

cursor: pointer;

text-shadow: 0 0 2px #CCC;

letter-spacing: inherit;

}

.category p {

margin: 0px;

font-family: Tahoma, 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;

font-size: 11px;

font-weight: normal;

color: #444;

letter-spacing: .03em;

}

#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;}

.category span.cat_title, #front-popular h3, #front-list .cat_title, #gallery h3 {

text-transform: lowercase;margin: 0;}

</style>

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

<div class='category' id='cat-4' onclick='window.location.href=&apos;http://www.add-b.blogspot.com/&apos;;'>

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

<div class='category' id='cat-5' onclick='window.location.href=&apos;http://www.add-b.blogspot.com/&apos;;'>

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

<div class='category' id='cat-6' onclick='window.location.href=&apos;http://www.add-b.blogspot.com/&apos;;'>

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

<div class='category' id='cat-8' onclick='window.location.href=&apos;http://www.add-b.blogspot.com&apos;;'>

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

<div class='category' id='cat-9' onclick='window.location.href=&apos;http://www.add-b.blogspot.com/&apos;;'>

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

التعديلات على الكود :

استبدل ( اسم-الموضوع ) بالعنوان القسم الذي ترغب فيه

استبدل ( وصف-الموضوع ) بفقرة صغيرة تكون هي وصف القسم

استبدل رابط مدونتي بالقسم

نتمنى ان الاضافة نالت اعجابكم

دمتم بود