كيفية اضافة قائمه بشكل خرافي لمدونة بلوجر

بسم الله الرحمن الرحيم 

قائمه بشكل خورافي لمدونة بلوجر 

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

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

ادخل مدونتك .

التخطيط .

إضافة اداة 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.alta3alom.blogspot.com/&apos;;'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-5' onclick='window.location.href=&apos;http://www.alta3alom.blogspot.com/&apos;;'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-6' onclick='window.location.href=&apos;http://www.alta3alom.blogspot.com/&apos;;'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-8' onclick='window.location.href=&apos;http://www.alta3alom.blogspot.com&apos;;'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-9' onclick='window.location.href=&apos;http://www.alta3alom.blogspot.com/&apos;;'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div></div>

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

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

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

استبدلhttp://www.alta3alom.blogspot.com برابط القسم