عرض التسميات فى المدونه بطريقه جديدة

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

(1) ابحث عن ]]></b:skin>

وضع قبلها هذا الكود

#arabetutorial1 ul li{

color:#2D2C28;

float: right;

width: 45%;

}

#arabetutorial2 ul li{

color:#2D2C28;

float: left;

width: 45%;

}

#arabetutorial1 li{

margin-bottom:5px;

padding:5px;

}

#arabetutorial1 li a{

color: #777777;

font: 12px verdana;

height: 30px;

width:120px;

font-family:'DroidKufi-regular',Arial,Helvetica,Tahoma,sans-serif;

text-transform: uppercase;

transition: border-color .218s;

background:#f4f4f4;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

display: inline-block;

text-shadow: 0 1px 0 #fff;

-webkit-transition: border-color .218s;

-moz-transition: border .218s;

-o-transition: border-color .218s;

transition: border-color .218s;

background:#f3f3f3;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

border: solid 1px#ccc;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

margin: 0 4px 4px 0;

padding: 3px 5px;

text-decoration: none;

text-align: center;

}

#arabetutorial1 li:hover{

background:#FCFEFE; 

color:#00D1FF;

padding:5px;

cursor:pointer;

}

#arabetutorial1 li a:hover{

color:#333;

font-size:12px;

border-color: #999;

-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 1px 2px

rgba(0,0,0,0.15);

}

(2) اذهب للتخطيط اضف أداة Javascript 
وضع بها الكود التالى 

<div id="arabetutorial1">

<ul>

<li><a href="#">التسمية الأولى</a></li>

<li><a href="#">التسمية الثانية</a></li>

<li><a href="#">التسمية الثالثة</a></li>

<li><a href="#">التسمية الرابعة</a></li>

<li><a href="#">التسمية الخامسة</a></li>

</ul>

</div> 

التعديلات الواجبة على الكود

<li><a href="#">التسمية الأولى</a></li>

استبدل علامة # برابط التسمسة لديك 

استبدل التسمية با سم الذى تريده