اربع خانات اسفل المدونة لعرض افضل المواضيع

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

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

او اسفل المدونة الخاصه بك لعرض افضل المواضيع 

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

معاينه الاضافه اسفل المدونة

خطوات الاضافه قم بالبحث عن :

  ]]></b:skin>

وضع فوقه ايضا الكود التالى :

#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 وضع بها هذا الكود :

<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='http://arabian-demo.blogspot.com/2013/03/blog-post_28.html'>
    <img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7BDvWlpv5MkCcMBViAkrIZKJFTbv_eGCCKVN-jWlOQY-i-oNiG_O7XHkcZavZtQ-MdgmdDpK_F1uZzZxZWzJRnWiqZn6D0XizsyajF_LEJjlnoh_JLKEiR4GwXJCOjca7ZWYwYaf7QQI/s320/url.jpeg' width='170'/>
    </a>
    <div class='clear'></div>
    </div>
    </li>
    <li>
    <div class='mbtbody'>
    <a class='Fadein3' href='http://arabian-demo.blogspot.com/2013/03/blog-post_23.html'>
    <img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn32yRWGdHLuBAKgjKknXNHQTL97uJNb1xGBTIAJxIQnX-A27Cd9Ja9VYaS2hmJtilm8i2fUhBZnsZ__GxrbYVg3_YlTzP3PUA2puqSSEAk0McjWvessIqV6_69l8vAbky3nTl4u01xK0/s1600/wt514addc9438a5-thumb_medium2.jpg' width='170'/>

    </a>
    <div class='clear'></div>
    </div>
    </li>
    <li>
    <div class='mbtbody'>
    <a class='Fadein3' href='http://arabian-demo.blogspot.com/2013/03/blog-post.html'>
    <img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiN-d0re4N-BgOdF9MHiARbRA2-t2v6NnoKEVsof3aN3-sn_lfc_q7MDALvLSuIjSYVZ6dPxSBQdtY4-fTY1dQt1joRDcJw85SG6bXznfHOd8HMr_YQgM3CZ9thyphenhyphenXkV9zudzGgqm4WQas/s320/deviantart_logo__water_drops__by_dracu_teufel666-d4se13n.jpg' width='170'/>
    </a>
    <div class='clear'></div>

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

    <a class='Fadein3' href='http://arabian-demo.blogspot.com/2013/03/blog-post_28.html'>
    <img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7BDvWlpv5MkCcMBViAkrIZKJFTbv_eGCCKVN-jWlOQY-i-oNiG_O7XHkcZavZtQ-MdgmdDpK_F1uZzZxZWzJRnWiqZn6D0XizsyajF_LEJjlnoh_JLKEiR4GwXJCOjca7ZWYwYaf7QQI/s320/url.jpeg' width='170'/>

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

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

وقم بتغيير روابط الصور وكذلك روابط المواضيع !