أحدث المواضيع

قائمة جانبيه أحترافيه بخصائص CSS3

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله , سيدنا محمد عليه الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

قائمة جانبيه أحترافيه بخصائص CSS3 - ستعجبك !

اليوم كالعادة درس جديد وإضافة جميلة ولا أروع , الأضافة من تعديلي وتطويري وقمت بدعمها بأفضل خصائص الـ CSS3 لمتابعين مدونتي فقط :)
القائمة الجانبيه هذه تتميز بخصائص جدأَ رائعه ومن أفضل المميزات انها حصريه وخفيفه جداَ ومنظرها انيق لكل المدونات ولكل الأذواق بأذن الله .

على العموم لن اطيل وللنبداء :

نأخذ اولاَ صورة : 


مثال مباشر : 


طريقة التركيب : 

  1. ادخل مدونتك .
  2. ثم التخطيط .
  3. أضف اداة عبارة عن HTML.
  4. انسخ والصق هذا الكود بها مع تعديل ما سأذكره : 
<div class='menu-by-7lolblogger'>
  <ul>
<li>
<a dir="rtl" href="http://www.7lolblogger.com/">أخبار تقنية</a>
</li>
<li>
<a dir="rtl" href="http://www.7lolblogger.com/">أيقونات</a>
</li>
<li>
<a dir="rtl" href="http://www.7lolblogger.com/">إضافات بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://www.7lolblogger.com/">إضافات للمتصفحات</a>
</li>
 <li>
<a dir="rtl" href="http://www.7lolblogger.com/">قائمة احترافيه</a>
</li>
 <li>
<a dir="rtl" href="http://www.7lolblogger.com/">مدونة حلول بلوجر</a>
</li>
 <li>
<a dir="rtl" href="http://www.7lolblogger.com/">حلول بلوجر</a>
</li>
 <li>
<a dir="rtl" href="http://www.7lolblogger.com/">حلول بلوجر</a>
</li>
</ul>
</div>
<style>
  /* this is menu by : http://www.7lolblogger.com -- */
.menu-by-7lolblogger ul{width:300px;float:right;display:block;}.menu-by-7lolblogger li{margin: 0;text-align: right;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.menu-by-7lolblogger li a{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.1em 0 .1em 2.5em;background:#F1F1F1;border:1px solid #DDD;border-radius:3px;color:#444;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.48);}.menu-by-7lolblogger li a:before{content:'#';position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#39C4FF;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}.menu-by-7lolblogger li a:after{position:absolute;content:'';border:.5em solid rgba(0, 0, 0, 0);left:-1em;top:50%;margin-top:-.5em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.53);}.menu-by-7lolblogger li a:hover:after{left:-.5em;border-left-color:#39C4FF;}
</style>

         استبدله بالرابط .
         استبدله بأسم الرابط .


منقولة من مدونة حلول بلوجر بعد حذفها للفائدة

1 تعليق على " قائمة جانبيه أحترافيه بخصائص CSS3 "

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×