بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته
قائمة عمودية جانبية مع روابط وايقونات HTML + CSS | معدلة
قائمة جميلة وبخصائص بسيطه تعطي منظر اجمل لموقعك وتوفر سهولة في الاستخدام للزائر
صورة من الاداة :
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته
قائمة عمودية جانبية مع روابط وايقونات HTML + CSS | معدلة
قائمة جميلة وبخصائص بسيطه تعطي منظر اجمل لموقعك وتوفر سهولة في الاستخدام للزائر
صورة من الاداة :
طريقة التركيب :
اولاَ ادخل مدونتك كالعادة
ثم أذهب مباشرة الى التخطيط , حيث اننا سنقوم بزرع الاداة هناك
اضف اداة جديدة عبارة عن HTML/javacript
ضع هذا الكود داخلها مع تعديل ماسأذكره
اولاَ ادخل مدونتك كالعادة
ثم أذهب مباشرة الى التخطيط , حيث اننا سنقوم بزرع الاداة هناك
اضف اداة جديدة عبارة عن 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>
#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>
اللون الأحمر : رابط الموضوع او الصفحة
اللون الأصفر : عنوان الموضوع او الصفحة
اللون الازرق : رابط الأيقونة في حال اردت تغيرها
اللون البرتقالي : وصف قصير للموضوع او الصفحة
اللون الأصفر : عنوان الموضوع او الصفحة
اللون الازرق : رابط الأيقونة في حال اردت تغيرها
اللون البرتقالي : وصف قصير للموضوع او الصفحة
ليست هناك تعليقات:
إرسال تعليق