قائمة جانبية ذات شكل انيق لبلوجر بتقنية css

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

قائمة انيقة ذات الوان جميلة جدا لبلوجر بتقنية الcss لتسهيل للزائر الدخول الى صفحاتك المختصرة 

معاينة القائمة

للمعاينة اضغط هنا

شرح التركيب

قم باخد نسخة احتياطية من قالب ودائما قم بستخدامها قبل اى شئ تقوم بتعديلة حتى تحافظ على مدونتك من الاخطاء



لوحة التحكم - القالب - تحرير HTML



ثم قم بالبحث عن ]]></b:skin>



وضع قبلها هذا الكود

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

ثم اذهب الى لوحة تحكم مدونتك مرة اخى وقم باضافة اداة جديدة  HTML/Javascript

وضع بها الكود التالى مع تغير ما يلزم 

<div style='position: fixed; top: 40%; left: 0%;'/><br /> <br /><br /><ul id="navigationMenu"><br /><li> <br /><a class="Home" href="http://7loll.blogspot.com/"> <br /><span>الرئيسية</span> <br /></a> <br /></li><br /><li> <br /><a class="about" href="http://7loll.blogspot.com/"> <br /><span>عن المدون</span> <br /></a> <br /></li><br /><li> <br /><a class="services" href="http://7loll.blogspot.com/"> <br /><span>خدمات</span> <br /></a> <br /></li><br /><li> <br /><a class="portfolio" href="http://7loll.blogspot.com/"> <br /><span>فهرس المدونة</span> <br /></a> <br /></li><br /><li> <br /><a class="contact" href="http://7loll.blogspot.com/"> <br /><span>إتصل بنا</span> <br /></a> <br /></li><br /></ul><br /></div><br /><a href="http://7loll.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a><br />

ومبروك عليك القائمة ^__^

منشورة في: اضافات بلوجر, بلوجر