اضافة قائمة سلايدر بطريقة css3

في هذا الدرس سأشرح اضافة قائمة سلايدر انيقة و جميلة .انها اضافة سهلة جدا يمكن لاي مدون اضافتها بنفسه ليضفي جمالية الى مدونته  وكذلك ابراز محتويات المدونة بشكل اكثر وضوحا.

طريقة الاضافة :
1-تسجيل الدخول الى المدونة>>>قالب.
2- ابحث بواسطة  Ctrl+F   عن   ]]></b:skin>
3-ثم انسخ الكود التالي قبله مباشرة :

/* The CSS Code for the menu starts here bloggertrix.com */
 #btrix_litemenu { 
 width:800px; 
 background:#166bea;  
 border-bottom: 5px solid #993300;  
 border-top: 1px solid #e14d09;  
 clear: both;  
 overflow: hidden;  
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;

border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;

 }  
 #btrix_litemenu ul {  
 float: left;  
 width: 100%;  
 }  
 #btrix_litemenu li {  
 float: left;  
 list-style-type: none;  
 }  
 #btrix_litemenu li a {  
 background:#166bea;  
 color: #fff;  
 display: block;  
 font-size: 14px;  
 padding: 5px 17px 5px 15px;  
 position: relative;  
 text-decoration: none;  
 }  
 #btrix_litemenu li a:hover {  
 background:#002660;  
 color: #fff;  
 }  
 #btrix_litemenu li li a {  
 background: none;  
 background-color: #0d56c4;  
 border: 1px solid #0d408d;  
 border-top-width: 0;  
 color: #fff;  
 font-size: 14px;  
 padding: 5px 10px;  
 position: relative;  
 text-transform: none;  
 width: 130px;  
 } 

ثم احفظ القالب .
4-الان اختر تخطيط>>>اضافة اداة javascript>>>ثم انسخ فيه الكود التالي:

<div id="btrix_litemenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="http://www.bloggertrix.com/">Menu 5</a></li>
</div>

5-غير العلامة التالية #  بروابط صفحات مدونتك.
6-واخير حفظ الاداة.
ونكون انهينا الاضافة و يمكنك نعاينة النتيجة

منشورة في: اضافات بلوجر