كود HTML:
<div id="side_left">
<ul class="side_menu">
<li>
<h2>الرعاة الإعلاميون</h2>
<ul>
<li><a href="http://www.islamway.com"><img src="images/banner1.gif" /></a></li>
<li><a href="http://www.islamweb.net"><img src="images/banner2.gif" /></a></li>
<li><a href="http://www.gafelh.com"><img src="images/banner3.gif" /></a></li>
</ul>
</li>
</ul>
<ul class="side_menu">
<li>
<h2>شاركنا الآن</h2>
<ul>
<li>يمكنك المشاركة في دعم الموقع لنصرة الرسول صلى الله عليه وسلم ونشر مبادئه وقيمه العالية لتكسب الأجر العظيم من الله حيث الله أمرنا بالاقتداء به والسعي إلى طاعة الله وطاعة رسوله الكريم جعلني الله وإياكم من من يسمعون الكلام ويتبعون أحسنه</li>
</ul>
</li>
</ul>
</div>
بعد إضافة العناصر المطلوبة في القائمة الجانبية نقوم بتنسيقها باستخدام الـ CSS هناك بعض الأجزاء التي عُملت من قبل مثل القائمة ستكون بشكل أنيق بنفس القائمة الجانبية اليمنى وهنا تكمن قيمة الـ CSS فقط سنقوم بمواساتها بالجانب الأيسر وذلك من خلال التعديل على ملف style.css أول شي نضيف هذا الكود: