حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us

اضافة قائمة مميزة على المدونة

حلولي

مشرف

المزيد

ليست هناك تعليقات

تم النشر فى قسم

تم النشر منذ

تحميل ...
قائمة جميلة ورائعة

قائمة جميلة ورائعة 
طريقة الاضافة
اذهب للتخطيط - اضافة اداة- HTML/Javascript 
 وألصق الكود التالي مع تغيير مايلزم

<div class="ar1webmb"> <input type="checkbox" id="tm" /> <!-- The menu --> <ul class="sidenav"> <li><a href="#"><i class="fa fa-check"></i><b>المهام</b></a></li> <li><a href="#"><i class="fa fa-inbox"></i><b>الرسائل</b></a></li> <li><a href="#"><i class="fa fa-pencil"></i><b>المواضيع </b></a></li> <li><a href="#"><i class="fa fa-cog"></i><b>الإعدادات</b></a></li> <li><a href="#"><i class="fa fa-star"></i><b>جديد المدونة</b></a></li> <li><a href="#"><i class="fa fa-power-off"></i><b>الخروج</b></a></li> </ul> <section> <!-- Label for #tm checkbox --> <label for="tm">قائمة<br/> </label> </section> </div> <style> @import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300); #addku1,#addku2 {display:none;} .ar1webmb { float: none; position: relative; overflow: hidden; } #tm { display: none; } .ar1webmb section { background: url("http://3.bp.blogspot.com/-YOrUvAOGxpw/Vd3Wf8IaXtI/AAAAAAAAIf0/OXbB6V72x4M/s1600/ar1web44.jpg"); width: 300px; height: 500px; position: relative; transition: all 0.25s;background-size: cover; box-shadow: 0 0 10px 0px #000000; } .ar1webmb section label { color: white; font: bold 22px 'Adobe Arabic','serif'; text-align: center; border: 2px solid white; display: block; padding: 6px 0; width: 60%; position: absolute; left: 20%; top: 100px; cursor: pointer; text-transform: uppercase; background-color: rgba(49, 46, 47, 0.36); } .sidenav { background: rgb(169, 106, 70); width: 160px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px; } .sidenav li { list-style-type: none;padding-right: 19px; } .sidenav a { color: white; text-decoration: none; } .sidenav b { font: bold 19px/48px 'Adobe Arabic','serif'; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s; } .sidenav i { display: block; width: 50px; float: left; font-size: 16px; line-height: 48px; text-align: center; } #tm:checked ~ section { transform: translateX(160px); } #tm:checked ~ .sidenav b { opacity: 1; transform: translateX(0); } #tm:checked ~ .sidenav li:nth-child(1) b { transition-delay: 0.08s; } #tm:checked ~ .sidenav li:nth-child(2) b { transition-delay: 0.16s; } #tm:checked ~ .sidenav li:nth-child(3) b { transition-delay: 0.24s; } #tm:checked ~ .sidenav li:nth-child(4) b { transition-delay: 0.32s; } #tm:checked ~ .sidenav li:nth-child(5) b { transition-delay: 0.40s; } #tm:checked ~ .sidenav li:nth-child(6) b { transition-delay: 0.48s; } </style> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

مشاركة الموضوع

انسخ كود الشكل الذى تريده وضعه فى تعليق
اذا كنت لا تملك حساب على بلوجر قم بإختيار التعليق باسم " مجهول "
تعليقات بلوجر
تعليقات الفيس بوك

ليست هناك تعليقات:

إرسال تعليق

مساحة إعلانية متجاوبة

مواضيع مميزة

التعليقات

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

ادخل الاسم (إختيارى)

ادخل البريد الإلكترونى (مطلوب)

ادخل الرسالة (مطلوب)