اليوم اقدم لكم اضافه رائعه وهى عبارة عن اربع خانات
توضع اعلى او اسفل المدونة الخاصه بك لعرض افضل المواضيع
وهى تحتوى على تاثير الهوفر الجميل عند مرور الموس عليها
خطوات الاضافه قم بالبحث عن :
كود بلغة 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>
ثم قم بتغيير رابط الموضوع وصورة الموضوع
طبعا الموضوع الاصلى مدونة اربيان تك