قائمة أفقية أنيقة جدا وسهلة التنسيق

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

معاينة

طريقة التركيب 

بلوجر >> قالب >> تحرير html وفوق هذا الوسم ]]></b:skin> نضع الكود التالي 

.cnmot {

background: #ddfaf8;

border: 1px solid #BACAD9;

padding: 10px;

}

نظرة عامة علي الكود  

#ddfaf8 : هذا الكود المسؤول عن الخلفية 

#BACAD9 : وهذا لون خط البوردر 

10px : وهذا مسؤول عن المسافة بينهما 

الخطوة الثانية والأخيرة من طريقة تركيب القائمة

تخطيط >> اضافة آداة >> نختار >> java /html ونضع بها الكود التالي 

<div align="center" class='cnmot'>

&nbsp;<a href='#'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWhDqWVhRFC2LzHLzLlp1RXJSoAxfzO8RoOKvs8pMVKzwps1V05SeWfmepbhyQK3DG1voSQhi6QQm72yS4lZShjv_FIbIC4pwXaM5PUpVe7RD_iMr9jrKfe_yT8CJV8EUCqCNFqUYzTY/s1600/home.png' title='الصفحة الرئيسية'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Quran' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1m8gsM7gBbDB3TzCxmNH9nVAxPmwCTdtHHC2W7PP0E8ZgsHl4KxwLe-qjDZsvLjLedurcm6vnmny_La1YZ10ig7Tc87NTJQ0AcK5tIibEpr7nNeXjAHrzbL2Jjlb7PrR6LSItwOU1vXg/s1600/alQuran.png' title='القرآن الكريم'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Culture' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsvWKORNSt6zJyUiQLh51jhIZGPkBJ3uDJgDRfx6D2j5Y_lSxo1qePx91p786CkpkdVpGEShaPqys92CO1OYzOlfEfDIlcKvGbt-Qkc9JPAsZ2A0VtqI2q8H4eqchh7QNTCNgdcnQkKFk/s1600/book-icon.png' title='مواقع ثقافية'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='TV' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlUeq7vgs7gK31HTYKhfFrqGjERlQQJg3qDVtvLyJ0porA9u76AYA_qHTGeH4sfNwPtdfLZnG_HuoDoozYf5B3FUMDgyXyUcQI2kpJ2B8G8RRsiN2NIVmU08KixCF0K3q2k2TgXERUU4/s1600/tv-icon.png' title='البث المباشر'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Business' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERwwmyYLaK16PKPKM544Z29yU7pNHgF3VyTxEknTynfBH35ORJJCDgwKWZu0V3Q3W0BZlO2TUpKxktsYFcFWesOL2w8BABAvXpSkbENJ6AmJ-Em-hGdi0PXwRGJgPiuN3MARRoQITtvM/s1600/finance-and-business.png' title='أخبار الاقتصاد'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Sport' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqfUAIba4KGehV33zt8EhUGQqlZ2itSyufsMLCaVSt0DQCPfJ0ffQ0w1Avb0-J6e8DTHNSzyzXA1Ku4ANLSwAFCowExTn2YX92S4SpkHM4_Tn1vgHRK-hgrSFZhLpvYqYTbAdnVdGpOk/s1600/sport.png' title='أخبار الرياضة'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Contact us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOgrmeE6zJi9mY0ANBPVLbpG6b3qoq-pwmJUzbOyWikoFU31G7Oj35sM1G17UbyI7r6DVTo5JxP_Y99S2OFPpVJUeHjamRdTohPAIBWHR5EgzdoYuJLVzmcUIfDLg9x-tdIb0rI0XeR0o/s1600/contact-us.png' title='اتصل بنا'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='FRANÇAIS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ba1Dqz2weGKi16KuZ09HVODI2UGLyA9tgJEtBglL-U9koqI57KnnbYZari6fKofgaw2CQBldZdbx5rEDthWh10l3RXle_vxcHwxAezv0EYVw2jeDIY5i6fN5-XiichsQVLIy_LDWfNE/s1600/fr.png' title='المدونة با الفرنسية'/></a>

</div>

نظرة عامة علي الكود  

# : استبدله برابط الذي تريد 

الملون بلون الأحمر هو رابط الصور ان اردتم استبدالهم 

والي هنا ينتهي موضوعنا اليوم في أمان الله 

شارك الموضوع مع أصدقائك

Facebook Google+ Twitter Digg