عرض مشاركة واحدة
قديم 05-04-2013, 09:33 AM   #1
REDA
مدون مميز
 
الصورة الرمزية REDA
 
تاريخ التسجيل: Apr 2012
المشاركات: 441
إرسال رسالة عبر Yahoo إلى REDA
Thumbs up اربع خانات رائعة اسفل المدونة

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



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


خطوات الاضافه قم بالبحث عن :
كود بلغة HTML:
   ]]></b:skin>
ثم ضع فوقه هذا الكود :
كود بلغة HTML:
  #mbtboxes{height:157px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;} #mbtboxes ul{ margin-left: 4px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; } #mbtboxes ul li{ overflow: hidden; float: left; width: 227px; height: 210px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; } #mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; } #mbtboxes img{width:210px;height:140px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;} #mbtboxes img:hover{border: 1px solid #c5c5c5; } .mbtbody img{float:left} .mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4} .mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;} .mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;} .mbtbody h3 a:hover{color:#c5c5c5} .mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;} .Fadein3 img { filter:alpha(opacity=80); opacity: 0.6; border:0; } .Fadein3:hover img { filter:alpha(opacity=100); opacity: 1.0; border:0; }
ثم قم بفتح اداة html وضع بها هذا الكود :
كود بلغة HTML:
 <div id='mbtboxes'>
    <div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

    <ul>
    <li>
    <div class='mbtbody'>
    <a class='Fadein3' href='رابط الموضوع'>
     <img height='100'  src='صورة الموضوع'  width='170'/>
    </a>
    <div class='clear'></div>
    </div>
    </li>
    <li>
    <div class='mbtbody'>
    <a class='Fadein3' href='رابط الموضوع 2'>
     <img height='100'  src='صورة الموضوع 2'  width='170'/>

    </a>
    <div class='clear'></div>
    </div>
    </li>
    <li>
    <div class='mbtbody'>
    <a class='Fadein3' href='رابط الموضوع3'>
     <img height='100'  src='صورة الموضوع 3'  width='170'/>
    </a>
    <div class='clear'></div>

    </div>
    </li>
    <li>
    <div class='mbtbody'>

    <a class='Fadein3' href='رابط الموضوع4'>
     <img height='100'  src='صورة الموضوع 4'  width='170'/>

</a>
    <div class='clear'></div>

    </div>
    </li>
    </ul>
    </div>
    </div>


ثم قم بتغيير رابط الموضوع وصورة الموضوع

طبعا الموضوع الاصلى مدونة اربيان تك

الدعم العربي

REDA غير متواجد حالياً   رد مع اقتباس