اجعل اقسام مدونتك اكثر احترافية

مميزات الاضافة .

- احترافية 100% لمدونتك .
- تعطي شكل جميل ومتناسق لمدونتك .
- الاضافة قابلة للتعديل من الى ..
- سهلة التحميل وذات حجم صغير .
- سهلة التركيب | الحذف .
- لا يشتمل اضافتة على الناف بار فحسب بل يمكن ادراجه في المواضيع .


طريقة تركيب الاضافة .

من رئيسية مدونتك توجه الى | تصميم | تحرير html | وابحث عن 

 ]]></b:skin> 
  

وقبلها تماماً ضع خواص الـ css التالية .
 

#imagemove {            
        padding:0;             
        margin-left:30px;             
        list-style-type:none;             
        height:120px;             
        }             
#imagemove li {             
        display:block;             
        float:left;             
        width:120px;             
        height:120px;             
        position:relative;             
        margin:0 15px 7px 0;             
        }             
#imagemove li a {             
        display:block;             
        width:120px;             
        height:120px;             
        background:transparent;             
        overflow:hidden;             
        position:relative;             
                padding:5px;             
        } 
#imagemove li a img {            
        width:100%;             
        height:100%;             
        border:0;             
        margin-right:30px;             
        padding:5px;             
        }             
#imagemove li a:hover{             
        position:absolute;             
        left:0px;             
        top:20px;             
        padding:5px;             
        width:120px;             
        height:120px;             
        z-index:100;             
        }

 ثم قم بحفظ العمل ..
الان توجه الى الخيار " عناصر الصفحة " وافتح اداة اضافة الـ html وقم باضافة الكود التالي :

<ul id="imagemove">              
<li><a href="http://www.ar-bl.net/"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>

<li><a href="http://www.ar-bl.net/"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>

<li><a href="http://www.ar-bl.net/"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>  

<li><a href="http://www.ar-bl.net/"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>  

<li><a href="http://www.ar-bl.net/"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>               
</ul>

ثم ضعه في المكان الذي تحب . يستحسن في الهيدر .

طريقة تخصيص الاضافة .
- استبدل الروابط باللون الازرق الى الروابط المطلوبة بجوار كل صورة .
- استبدل الروابط باللون الاحمر لتغيير صور الايقونات ..
- استبل الكلمات باللون الزهري لكتابة الوصف الذي سيظهر للزائر عند الاشارة على الصورة بالماوس .

انتهى .
 

هل أعجبك الموضوع ؟

بقلم مصطفى

اسمي مصطفى 16 سنة بلدي المغرب اهتم بكل ما هو جديد في عالم الانترنت انشأت هدا المدونة لمشاركة الناس خبرتي المتواضعة في هدا المجال

مواضيع مشابهة :

ضع تعليقا