قائمة عمودية جانبية مع روابط وايقونات HTML CSS معدلة

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته
قائمة عمودية جانبية مع روابط وايقونات HTML + CSS | معدلة
قائمة جميلة وبخصائص بسيطه تعطي منظر اجمل لموقعك وتوفر سهولة في الاستخدام للزائر
صورة من الاداة :

طريقة التركيب :
اولاَ ادخل مدونتك كالعادة
ثم أذهب مباشرة الى التخطيط , حيث اننا سنقوم بزرع الاداة هناك
اضف اداة جديدة عبارة عن HTML/javacript

ضع هذا الكود داخلها مع تعديل ماسأذكره

<style>
#menu {background: white;width: 280px;padding:10px;margin: 0 auto;direction: rtl;}
#menu ul {margin:0; padding:0;list-style: none;}
#menu ul li {margin: 0;padding: 5px 0 10px;border-bottom: 1px dashed #EAEAEA;}
#menu ul li img {padding: 3px 10px 0 0px;}
#menu ul li a {font: normal 18px tahoma ,arial;color: #007195;float: right;text-align: right;text-decoration:none;}
#menu ul li a:hover {color:#CC3332;}
#menu ul li span {font: normal 13px tahoma ,arial;color:#7D7D7D;float: right;text-align: right;}
#menu li span:hover {color: #494949;}
< /style>
< head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
< div id="menu">
< ul>
< li><img src="https://cdn1.iconfinder.com/data/icons/free-red-cloud-icons/48/Youtube_TV.png" border="0" alt="" /><a href="#">قنوات تلفزونية تعليمية<br />
< span>هنا ضع وصف قصير كالذي كتبته الأن ..</span></a></li>
< li><img src="https://cdn1.iconfinder.com/data/icons/humano2/48x48/actions/bookmark-new.png" border="0" alt="" /><a href="#">أدوات جديدة خاصة بالتطوير<br />
< span>هنا ضع وصف قصير كالذي كتبته الأن .</span></a></li>
< li><img src="https://cdn1.iconfinder.com/data/icons/snowish/48x48/apps/gnome-control-center.png" border="0" alt="" /><a href="#">دعم فني مجانا لموقعك<br />
< span>هنا ضع وصف قصير كالذي كتبته الأن .</span></a></li>
< li><img src="https://cdn1.iconfinder.com/data/icons/humano2/48x48/emblems/emblem-symbolic-link.png" border="0" alt="" /><a href="#">ضع رابطك في موقعنا<br />
< span>هنا ضع وصف قصير كالذي كتبته الأن .</span></a></li>
< /ul>

اللون الأحمر : رابط الموضوع او الصفحة اللون الأصفر : عنوان الموضوع او الصفحة اللون الازرق : رابط الأيقونة في حال اردت تغيرها اللون البرتقالي : وصف قصير للموضوع او الصفحة