قائمة css فى قمة الإحترافية (صورة ، عنوان ، وصف)

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

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

تركيب القائمة بالنسبة لمدونات بلوجر كالعادة من التخطيط / إختار أداة جافاسكريبت وضع بها الكود التالى

<style>
#menu {
 background: white;
 width: 280px;
 padding:10px;
}
#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 {
 float: right;
 padding: 3px 0 0 10px;
}
#menu ul li a {
 font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
 color: #007195;
 text-decoration:none;
}
#menu ul li a:hover {
 color:#CC3332;
}
#menu ul li span {
 font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
 color:#7D7D7D;
}
#menu li span:hover {
 color: #494949;
}
</style>
<div id="menu">
 <ul>
<!--design:mdwanblog.blogspot.com-->
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCn5O5c5V3fYH9diLBfPObIqXPoA0pji4PlLPb6nnHZFwJ13UDaYjCxcOu4MwNxloS0jFSqK6_SjAJ3mlyBL9L1PnXasC4pCtQpFVkxqeqwjsnh0kZKzipgu34Loxyp1LGbu4xN_OA7sY/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvww6u93meKJ4hFWvFGwMV4YB1E9pvHHwNKy8dOl9tu453Sa528XdItbyOk3FgaDpFlT7m0bPMBp_83QiTXEtqOqr2obqh6HgkNApoaE1jLmTfOSdIvLOoVx6lBC65C26cDmS0WS1NqQ/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySP5Nm1hl97Clj3eUAVC-ruYdYnAg4mHa8XPf-0NpqGdimlp5OTri1QNr7yq81LZ7RZXBxTlLFDzsYwh7lY3gdZi1v8yHIrgKBELLXNA-WLIl_A6VvxIl0Sf0d66oYzRlDLqykt3oV_w/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-7PBq6n_fMZUiu5wkjDwEKh6QFgug7i2tfMEk-TKbJXSGA5g9kev1tKCdoh28W8kSj25YGP4g0aDmfn69hXZU4lEKJRMFZ1_M-0WsMBKGLqggsoYorDbqJpTWcrkGsDptwtz2VQHx10/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<!--design:mdwanblog.blogspot.com-->
 </ul>
</div>

أتمنى إنها تنال إعجابكم