طريقة عرض الصور افقية

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

مرحلة التركيب :

كبداية توجه الى ادارة مدونتك ثم بعدها الى التخطيط مباشرة بعد ذلك قم باضافة اداة جديدة انصحك باضافتها أسفل المدونة أي فوق الفوتر مباشرة ( مجرد رأي ) قم بعد ذلك باختيار اداة HTML / JAVASCRIPT ثم قم بلصق الكود.

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8k_rrfkd72Vp3ggLNWcw7yDo9FRXiU3bdrVov5GJmmOJ7JCx42_zOYItBx-7hAxWnIq0mJF0nSLmsrk616CNWN_cgZo1srXRRjrg82h5F0DHFK4UFJNh7Bwr4BB5Zz4NpdWbg7mDS79y/s1600/waccity.jpg' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>عنوان الموضوع ضعه هنا</a></h3>
<p>ضع هنا وصف للموضوع</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='هنا رابط الموضوع'>
<img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8k_rrfkd72Vp3ggLNWcw7yDo9FRXiU3bdrVov5GJmmOJ7JCx42_zOYItBx-7hAxWnIq0mJF0nSLmsrk616CNWN_cgZo1srXRRjrg82h5F0DHFK4UFJNh7Bwr4BB5Zz4NpdWbg7mDS79y/s1600/waccity.jpg' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>عنوان الموضوع ضعه هنا</a></h3>
<p>ضع هنا وصف للموضوع </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='هنا رابط الموضوع'>
<img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8k_rrfkd72Vp3ggLNWcw7yDo9FRXiU3bdrVov5GJmmOJ7JCx42_zOYItBx-7hAxWnIq0mJF0nSLmsrk616CNWN_cgZo1srXRRjrg82h5F0DHFK4UFJNh7Bwr4BB5Zz4NpdWbg7mDS79y/s1600/waccity.jpg' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>عنوان الموضوع ضعه هنا</a></h3>
<p>ضع هنا وصف للموضوع</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='هنا رابط الموضوع' rel='nofollow'>
<img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8k_rrfkd72Vp3ggLNWcw7yDo9FRXiU3bdrVov5GJmmOJ7JCx42_zOYItBx-7hAxWnIq0mJF0nSLmsrk616CNWN_cgZo1srXRRjrg82h5F0DHFK4UFJNh7Bwr4BB5Zz4NpdWbg7mDS79y/s1600/waccity.jpg' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>عنوان الموضوع ضعه هنا</a></h3>
<p>ضع هنا وصف للموضوع</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='هنا رابط الموضوع'>
<img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8k_rrfkd72Vp3ggLNWcw7yDo9FRXiU3bdrVov5GJmmOJ7JCx42_zOYItBx-7hAxWnIq0mJF0nSLmsrk616CNWN_cgZo1srXRRjrg82h5F0DHFK4UFJNh7Bwr4BB5Zz4NpdWbg7mDS79y/s1600/waccity.jpg ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>عنوان الموضوع ضعه هنا</a></h3>
<p>ضع هنا وصف للموضوع</p>
</div>
</li>
</ul>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://rabetweb.blogspot.com/" title="Tabbed TOC">rabetweb</a>
</div>
</div>

بعد الانتهاء من الخطوة السابقة الآن توجه من جديد الى قالب المدونة ثم انقر على تحرير القالب ابحث عن الوسم ]]></b:skin>

و اضف الكود التالي فوقه يعني قبله مباشرة .

/*----------- POST 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;
}