|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
11-21-2012, 07:07 AM | #1 |
مدون جديد
تاريخ التسجيل: Sep 2012
المشاركات: 15
|
كيفية اضافة قائمه جانبية انيقة لبلوجر , الورد برس
السلام عليكم!اقدم لكم اضافة جميله و انيقه للمدونات وهي عبارة عن قائمة جانبيه تحوي التبويبات التاليه: الرئيسيه , حول الموقع, الاقسام,شروط الخصوصيه,الاتصال بنا. الان لكيفية التركيب:
]]></b:skin> والصق قبلة مباشره الكود التالي: <!-- Start Shareaholic Sassy Bookmarks HTML Bloggertrix.com-->#hor { list-style:none; padding:0; margin:0;} #hor li { float:left; padding:5px;} #hor a { display:block; height: 12px; text-indent:-999em;} #hor a.home { width:46px; background:url(vHome.gif) no-repeat 0 0;} #hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0;} #hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0;} /* CSS Style for Vertical Menu */ #ver { list-style:none; padding:0; margin:0; } #ver li { padding:2px;} #ver li a { display:block; height:12px; text-indent:-999em; } #ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; } #ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; } #ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; } .clear { clear:both; } *{ /* A universal CSS reset */ margin:0; padding:0; } #navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat; /* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); font-family:Arial, Helvetica, sans-serif; } #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #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{ background:url('https://lh5.googleusercontent.com/-KwCHdatizWA/TrjY-aOvayI/AAAAAAAAS9M/UjjseDoabfA/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; }
<div style='position: fixed; top: 40%; left: 0%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="اضف رابط الصفحة الرائيسيه"> <span>الرائيسيه</span> </a> </li> <li> <a class="about" href="اصف رابط صفحة حول الموقع"> <span>حول الموقع</span> </a> </li> <li> <a class="categories" href="اضف رابط صفحة الاقسام"> <span>الاقسام</span> </a> </li> <li> <a class="services" href="اضف رابط صفحة حفظ الحقوق"> <span>حفظ الحقوق</span> </a> </li> <li> <a class="contact" href="اضف رابط صفحة الاتصال بنا"> <span>الاتصال بنا</span> </a> </li> </ul> </div> عدل الروابط في الكود ثم اضغط حفظ. :::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::: ولو بكلمة شكر ولا تنسى الضغط على ازرار المواقع الاجتماعية ادناه. تحياتي. المصدر
__________________
|
مواقع النشر (المفضلة) |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
حصريااا اضافة (أخر تعليقات) لبلوجر و بشكل احترافي | alam3arbcom | إضافات وأدوات بلوجر | 0 | 04-01-2013 10:03 PM |
اضافة قائمه للموقع الاجتماعيه بتقنيه cc3 لمدونات البلوجر | صلاح الجديمه | إضافات وأدوات بلوجر | 2 | 01-31-2013 05:25 PM |
اضافة جميلة داخل التدوينات لبلوجر | Nassro | إضافات وأدوات بلوجر | 6 | 12-31-2012 04:00 PM |
مشكلة فى اضافة الادوات لبلوجر . برجاء المساعدة | moon light | طلبات قوالب بلوجر | 8 | 12-02-2012 02:30 PM |
اضافة القائمة البريديه لبلوجر | بلال حمدان | إضافات وأدوات بلوجر | 2 | 09-09-2012 03:33 PM |
الساعة الآن 02:06 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |