|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
|
09-29-2012, 10:34 PM | #1 |
مدون نشيط
|
ملف تعريف بصيغة الjquery والcss
معلومات السلام عليكم و رحمة الله تعالى و بركاته يا من طرقت باب واحتي .. فـلا ماء و لا خضراء و لا وجه حسن إنها صحراء بيضاء بلون الثلج .. لا تسر الناظرين زيارتك لصفحتي بدون جواز سفر أسعدتني و شرفتني ، لأنك في ضيافتي ؛ برغم أني لا أعرفك و لكني أحترمك و أقدرك .. فمرحباً بك ليس مهم عمرك أو لونك و لا جنسك و مهنتك أو في أي بقعة أنت ، و لا يقلقني سبب زيارتك .. فانت ( إنسان ) مثلي وهذا يكفي كما ترى : فـلا أقفال و لا أسوار حولي .. لا تفاصيل عني ؟ كود الcss كود بلغة HTML:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px} .panel p{color:#ccc;margin:0 0 15px;padding:0} .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0} .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0} a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://lh4.googleusercontent.com/-4lFn75jpuCw/TYaVhY6cEFI/AAAAAAAAAQg/ugOLsvsAXMs/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px} a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://lh4.googleusercontent.com/-4lFn75jpuCw/TYaVhY6cEFI/AAAAAAAAAQg/ugOLsvsAXMs/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px} a.active.trigger{background:#222 url(https://lh4.googleusercontent.com/-jxV_yGL9vk4/TYaVULxNcdI/AAAAAAAAAQc/p0GszpGRcNk/d/minus.png) 85% 55% no-repeat} .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px} .colleft{float:left;width:130px;line-height:22px} .colright{float:right;width:130px;line-height:22px} a:focus{outline:none} .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px} .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700} .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0} كودالjquery كود بلغة HTML:
<script src='http://bilokr.googlecode.com/files/jquery.min.js' type='text/javascript'/> <script type="text/javascript"> $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script> و هدا الكود الدي سوف تضعه أسفل أو اعلى كود بلغة HTML:
</body> <div class='panel'> <h3>معلومات</h3> <p style='text-align:justify'>هنا ملف تعريفك. <a href='http://xxx.blogspot.com/' title='Hendriono Online'>هنا ضع كلامك أو رسالتك</a></p> <h3>معلومات</h3> <img src='هنا ضع رابط الصورة' width='73px' height='73px'/> <p>هنا ضع أي شيء</p> <div style='clear:both;'/> <div class='columns'> <div class='colleft'> <h3>الرئيسية</h3> <ul> <li><a href='#' title='home'>Home</a></li> <li><a href='#' title='about'>About</a></li> <li><a href='#' title='portfolio'>Portfolio</a></li> <li><a href='#' title='contact'>Contact</a></li> <li><a href='#' title='blog'>Blog</a></li> </ul> </div> <div class='colright'> <h3>للتواصل;/h3> <ul> <li><a href='http://twitter.com/infokhaled31' title='Twitter'>Twitter</a></li> <li><a href='http://facebook.com/infokhaled31' title='Facebook'>Facebook</a></li> <li><a href='http://digg.com/users/infokhaled31' title='Digg'>Digg</a></li> <li><a href='http://delicious.com/infokhaled31' title='Del.Icio.Us'>Del.Icio.Us</a></li> <li><a href='infokhaledz:[email protected]' title='Gmail'>Gmail</a></li> </ul> </div> </div> <div style='clear:both;'/> </div> <a class='trigger' href='#'>Info</a> هام جداا: للمبدئين و عليه يمكنك إيجاد رابط مباشر لعرض المكتبة دون تحميلها بالدخول على Google AJAX Libraries وأحصل على وصلة لآخر إصدار من المكتبة لربطها برأس الصفحة داخل الوسم <head> هكذا: بخبرتك في Jquery يمكنك التحكم في شكل حركة فتح القائمة، لكن في نفس الوقت الشفرة غير مسئولة عن ظهور القائمة، فهي تظهر مباشرة من خلال خصائص css والشفرة هي مجرد تأثير إضافي... اتمنى ان تكون قد فمهت الفكرة اما خصائص ال css فهي توضع مابين الوسمين التاليين
الان بقي لك فقط ال HTML ..
__________________
مدونة بلوجر توب أضافات بلوجرقوالب مجانى ادوات بلوجر أشهار مدزنتك مجانى ربط المدونة http://bilokr.blogspot.com |
09-30-2012, 06:49 AM | #2 |
مدون جديد
تاريخ التسجيل: Sep 2012
الدولة: العراق
المشاركات: 15
|
رد: ملف تعريف بصيغة الjquery والcss
__________________
http://ps-tek.blogspot.com/ http://ahmed-iq.blogspot.com/ |
10-01-2012, 05:24 AM | #3 |
مدون نشيط
|
رد: ملف تعريف بصيغة الjquery والcss
__________________
مدونة بلوجر توب أضافات بلوجرقوالب مجانى ادوات بلوجر أشهار مدزنتك مجانى ربط المدونة http://bilokr.blogspot.com |
10-29-2012, 02:53 PM | #4 |
مدون نشيط
تاريخ التسجيل: Oct 2012
المشاركات: 107
|
رد: ملف تعريف بصيغة الjquery والcss
__________________
|
11-04-2012, 09:23 PM | #5 |
مدون جديد
تاريخ التسجيل: Nov 2012
المشاركات: 88
|
رد: ملف تعريف بصيغة الjquery والcss
__________________
منتديات ستار سيفن http://www.star7ar.com/ |
مواقع النشر (المفضلة) |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
اضافة تعريف الكاتب لمدونات بلوجر | ilyass kéng | إضافات وأدوات بلوجر | 9 | 04-21-2013 10:52 AM |
جوجل ادسنس تعريف شامل | OSMON | الربح عن طريق أدسنس | 0 | 04-13-2013 02:20 PM |
مشكل حول تعريف المدونة | imad-05 | طلبات تعديل القوالب | 0 | 03-15-2013 11:21 PM |
نمودج اتصل بنا اكثر اثارة بصيغة jquery | السيد ابو جبل | إضافات وأدوات بلوجر | 0 | 09-26-2012 10:22 PM |
دورة الربح من كليك بانك ClickBank ~ الحلقة 1 : تعريف مبدئي | admin | الربح بطرق أخرى | 0 | 07-20-2012 08:37 PM |
الساعة الآن 06:56 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |