طريقة اضافة المواضيع الحصريه للمدونه بتقنية ال css

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

مثال حى على الاضافة

ان اعجبتك اضافة اليوم تستطيع تطبيقها باتباع الخطوات والتعليمات التي بالاسفل

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

<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='POST 1 LINK'>

<img height='100' src='POST 1 IMG LINK' width='170'/>

</a>

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

<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>

<p>POST 1 PARAGRAPH</p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 2 LINK'>

<img height='100' src='POST 2 IMG LINK' width='170'/>

</a>

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

<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>

<p>POST 2 PARAGRAPH </p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 3 LINK'>

<img height='100' src='POST 3 IMG LINK' width='170'/>

</a>

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

<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>

<p>POST 3 PARAGRAPH</p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>

<img height='100' src='POST 4 IMG LINK' width='170'/>

</a>

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

<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>

<p>POST 4 PARAGRAPH</p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 5 LINK'>

<img height='100' src='POST 5 IMG LINK ' width='170'/>

</a>

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

<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>

<p>POST 5 PARAGRAPH</p>

</div>

</li>

</ul>

</div>

</div>

قم بالتعديل على المتغيرات الموجوده داخل الكود كما هو موضح به

الان قم بالذهاب الى تحرير القالب وابحث عن الكود التالى

]]></b:skin>

وضع قبله الكود الموجود بالاسفل

/*----------- MBT Gallery -----------------*/

#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}

#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }

#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; 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:150px;height:100px; 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.8;

border:0;

}

.Fadein3:hover img {

filter:alpha(opacity=100);

opacity: 1.0;

border:0;

}

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