أداة لعرض المواضيع بقائمة أفقية لمدونات البلوجر

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

السلام عليكم ورحمة الله وبركاته

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

كما أنه توجد حدود للصور التي تعرض بحيث تكون بشكل جميل

صورة للمعاينة الأضافة

 

طريقة التركيب سهلة جدا

توجه للوحة التحكم

تصميم

أضافة أداة

أختار الجافا هتمل(تهيئة HTML/JavaScript)
قبل أن تضيفها قم بتعديل الروابط المواضيع والصور وكذلك عناوينها 

وهي موضحة في الكود
وبعدها أضف الكود التالي داخل الصندوق المخصص لذلك

<div dir = 'rtl' style="text-align: right;" trbidi="on">
<ul style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 15px; line-height: 1.2; list-style-type: none; margin:0px -15px 0px 0px; padding:0px 1.25em 0px 0px; position: relative; text-align: -webkit-auto; width: 965px;">
<li style="float: right; height: 180px; margin: 0px; padding:2px 0px 4px 13px; width: 180px;"><div>
<a href="أضافة رابط1 " rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="أضف الصورة1" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding:5px 10px 0px 0px; position: relative; text-align: center; text-transform: uppercase;">
<a href="أضافة رابط1 ">أضف العنوان1</a></h3>
</div>
</li>
<li style="float: right; height: 180px; margin: 0px; padding:2px 0px 4px 13px; width: 180px;"><div>
<a href="أضافة رابط2 " rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="أضف الصورة2" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding:5px 10px 0px 0px; position: relative; text-align: center; text-transform: uppercase;">
<a href="أضافة رابط2 ">أضف العنوان2s</a></h3>
</div>
</li>
<li style="float: right; height: 180px; margin: 0px; padding:2px 0px 4px 13px; width: 180px;"><div>
<a href="أضافة رابط3 " rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="أضف الصورة3" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding:5px 10px 0px 0px; position: relative; text-align: center; text-transform: uppercase;">
<a href="أضافة رابط3 ">أضف العنوان3</a></h3>
</div>
</li>
<li style="float: right; height: 180px; margin: 0px; padding:2px 0px 4px 13px; width: 180px;"><div>
<a href="أضافة رابط4 " rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="أضف الصورة4" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding:5px 10px 0px 0px; position: relative; text-align: center; text-transform: uppercase;">
<a href="أضافة رابط4 ">أضف العنوان4</a></h3>
</div>
</li>
<li style="float: right; height: 180px; margin: 0px; padding:2px 0px 4px 13px; width: 180px;"><div>
<a href="أضافة رابط 5" rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="أضف الصورة5" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding:5px 10px 0px 0px; position: relative; text-align: center; text-transform: uppercase;">
<a href="أضافة رابط5 ">أضف العنوان5</a></h3>
</div>
</li>
</ul>
</div> 

كما تلاحظ في الكود كل ماأشير له بلون الأحمر أعمل على تعديله كما هو مطلوب

وسلام عليكم ورحمة الله وبركاته