طريقة إضافة قائمة جانبية بتقنية CSS

من المهم الإهتمام بشكل الموقع وتسهيل العديد من الخدمات للمستخدم لذلك هذه قائمة جانبية بتقنية Css نبدأ باسم الله

أولاً توجه إلي الرابط التالي

https://www.blogger.com

ثم ادخل علي قالب

ثم اضغط علي تحرير HTML

قم بالبحث عن

]]></b:skin>

ثم ادخل الكود التالي فوقه مباشرة كما في الصورة

الكود:-

<#navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ /* The background sprite: */ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnslZCScQujYMAjB75RrSmdKewMQt5V08ZgwdYiMMa0WwrKUwgsnSynGR0oBqGugxxOOrP7x5jMuG3kbvb75WG_x7CtNXMYcTx_aOoig1J2wIZRzlEdkLHkI8WCrJMQAuGvJjFSl1rWZk/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; }</a>

ثم توجه بعدها إلي التخطيط