شرح لاضافة قائمة مشابهة لWindows 7

13‏/07‏/2010


مثال (Demo)




أخوانى الأحباب  كلنا يعرف القول المأثور 


"التجربة خير دليل"


وهنا أقدم لكم هذه التجربة التى أذهلتنى نتائجها بعد أن مللت التجربة ...لقد قمت 

 
بتجربة العديد من الاكواد والنتائج تكاد تكون معدومة


اولا دعوني اقدم لكم مصدر الاكواد 







بحيث الموقع لم يقدم لنا شرحا كافيا ووافيا لهته القائمة


نتحدث اليوم عن إضافة قائمة مشابهة لWindows 7


يمكنك من اختصار مواضيع مدونتك وعرضها بشكل بسيط وواضح أما زوار مدونتك 



خاصة عندما تكون القائمة علوية


تظهر لكل الزوار بدون عناء كما يمكنك تقسيم مدونتك الى عدة أقسام وتخصيص كل 


قسم لمواضيع معينة .





لأضافة قائمة مميزة و مشابهة لWindows7



اتبع الشرح  التالي و الحصري جدا


- من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم  ثم تصميم اختر تحرير html


- قم بحفظ نسخة من قالب مدونتك .


- اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :







]]></b:skin>
 






- ثم مباشرة قبل الكود السابق قم بنسخ و لصق الكود التالي :






<style type="text/css">

        body { font-family:Segoe UI, Arial, Sans-Serif; font-size:12px; color:#4b4b4b; background:#fff url(bkg.jpg) no-repeat scroll center center;}

        #meta { position:absolute; top:70px; right:20px; }

        #meta div { padding:20px; color:#000; margin: 0 0 20px;

                -moz-border-radius:5px;-webkit-border-radius:5px;

                background:rgba(255,255,255,0.50)}

        #meta a {color:#005aff;}

        #meta a img {margin:0 10px 0 0; border:solid 1px #000;}

 

        #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;

                     -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;

                     box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;

background-color:#619bb9;

                     background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));

                     background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

        #programs, #links {float:left; display:block; padding:0; list-style:none;}

        #programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;

                    box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;

                    -moz-border-radius:3px;-webkit-border-radius:3px;}

        #programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;

                      color:#4b4b4b; text-decoration:none; min-width:220px;}

        #programs a:hover {border:solid 1px #7da2ce;

                     -moz-border-radius:3px; -webkit-border-radius:3px;

                     box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;

                     background-color:#cfe3fd;

                     background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);

                     background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}

        #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}            

        #links {margin:7px; margin-top:-30px;}

        #links li.icon {text-align:center;}

        #links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;

                      color:#fff; text-decoration:none; min-width:120px;}

        #links a:hover {border:solid 1px #000;

                     -moz-border-radius:3px; -webkit-border-radius:3px;

                     box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;

background-color:#658da0;

          background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));

background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));

}

        #links a span { padding:5px; display:block; }

        #links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));

background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),

color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }

    </style>






ثم ابحث عن الكود التالي :






</head>






- ثم مباشرة قبل  أو بعد الكود السابق قم بنسخ و لصق الكود التالي :






<script src='http://blogspacetech.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>


 





شرح كيفية الإستخدام






انتقل الى تصميم..اضافة اداة HTML




و ضع الكود التالي القابل للتعديل






<div id="startmenu">

<ul id="programs">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgmiijFp2Q2tNVQBNqXAY-cgF3S25N69qKiYYYdDKzMX49euu1kC_JfyALbLFk8ODtaNv1tsl4NSiE1ql7v10AOpFvvqspVqvbk9LGDvBfPfz_3OKbeE-32wRiJ7zA1NtOJgaMEKhAIVu/s320/chrome.png" alt="" />Mozilla Firefox</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgmiijFp2Q2tNVQBNqXAY-cgF3S25N69qKiYYYdDKzMX49euu1kC_JfyALbLFk8ODtaNv1tsl4NSiE1ql7v10AOpFvvqspVqvbk9LGDvBfPfz_3OKbeE-32wRiJ7zA1NtOJgaMEKhAIVu/s320/chrome.png" alt="" />Google Chrome</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhhQNyH3csigI2E1XS8gle1IOwEtZFSk2lB6vOjDHGJzfPIe9p0A9BRf1LUfRkO9WaRfv4Jgiit9jXlz4Z1JoNp0GFPaGQKR2tCmYW0iD3r0AlbPO3sIwiF115Vf8N5eZQRladJ3srkbK/s320/safari.png" alt="" />Safari</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hcCBtW21pvvLy5CRXaMMmREdm573ppdvFrZ63kC7YZQ4yjAuNEFOpJLLzmRNlg2BvdW2jiRBBbXMqqiQQB-Jjw5Cd5pM2EzHmDPix8duuWkNPd62Rr8uy7JLjTtJ3DKG64Yo56ZiQ65T/s1600/opera.png" alt="" />Opera</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimkYa8q6IpN0JNOhJwD88CXxJxoCx_CjbrIo-1GgCh3tgge2l0JXi2XH0d5ixRBhNeFMqNWOQ9SEQtkfbznVHGAOcFUSIPi9yZihiRDRbADP4NBuZ1rkF_EjHbwa2pioRub7Cfz0WVy6Nc/s320/ie.png" alt="" />Internet Explorer</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaZYN7Z2rhA6H0bb7Y0b7lBBmeFj-FJAzZDAH7jAjkvpamvAUTA1FtkUE3Lk0buBMRbEVgfbnUgG4XAWuVRXAJAkNkfWxdXGXxg7ymSD3wJy4h-vygdKx4tPDGS91sjDbCLNcccGIj7pG/s320/rss_32.png" alt="" />RSS Feeds</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQMf5glqaq3r2Vlkx2qxdKcfCn6CL7zYZNoBlxfyuqiDwuT1fIySX99cBAHCKxnKmfKEU3vmDIOkmGeAlwNLqJj1TgS5WeNjFHDUBOvE93iNO-MoHDZVaq4PzTsGVfEB9RzkJvmD9UfTy/s320/twitter_32.png" alt="" />Twitter</a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyMXK59pC_tCefoSqE3zgYU68xBIhVLMqDHzTg_dY3NxFap03xm8dRvumP1mScLa0XBWAKmSy92qzgDxrtmCnCYlbYR4twwatFhRwebaxHD1WMISoApHvvCCGfbOJqdYq8rz6VQQTpiS9j/s320/delicious_32.png" alt="" />Delicious</a></li>

</ul>

<ul id="links">

<li class="icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj-UUm7Xzj_BsOZSXAqsUJVqwYRwJcwP8u0he_mLrHxvOGDx68R-EgymiXZr4MpVq-hwhbpV1spz2nfksHmGQoc5Pv5NwLJonikyVTyOZzCdcQJGqwGRA09tCEPsm8ITiyqoXqSw9kDJdw/s320/folder.png" alt="" /></li>

<li><a href="#"><span>Documents</span></a></li>

<li><a href="#"><span>Pictures</span></a></li>

<li><a href="#"><span>Music</span></a></li>

<li><a href="#"><span>Computer</span></a></li>

<li><a href="#"><span>Network</span></a></li>

<li><a href="#"><span>Connect to</span></a></li>

</ul>

</div>



</div>

</div>






- يمكنك تغير لون خلفية القائمة من خلال تغير رمز اللون الذي تريد .


- وتغير لون القائمة عند المرور عليها بزر الماوس


- وتغير لون النص



تحياتي