رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 07-23-2013, 06:10 PM   #1
awesome
مدون جديد
 
الصورة الرمزية awesome
 
تاريخ التسجيل: Jul 2013
المشاركات: 13
Thumbs up كود قائمة متحركة مع الصفحة مثل تويتر css سهلة التركيب لا تفوتها

أنا : awesome




اتشرف بكتابة اول مواضيعي على معهد خبراء بلوجر المنتدى العظيم
وهو اضافة مميزة - قائمة متحركة مع الصفحة مثل توتير css وهى سهل التركيب
اولا شاهدوا مثال للاضافة وهو من مدونتي
mlwn.blogspot.com

اذا اعجبكم شكل الاضافة في المثال
فهاهى طريقة تركيبها على مدونتكم

أولاََ ادخل على حسابك فى بلوجر » التخطيط » اضف اداة جديدة HTML/JavaScript
ضع الكود التالى بعد اضافة الروابط وتعديل الروابط

كود PHP:
<style
    
#wg-rosebar { 
    
width:100%; 
    
position:fixed
    
top:0
    
left:0
    } 

    
#wg-rosebarbtm { 
    
border-bottom:3px solid #000; 
    
background-color:#7f103c; 
    
overflow:none
    
width:100%; 
    
height:40px
    
position:fixed
    
top:0
    
left:0
    } 

    
#wg-rosebarbtmdata { 
    
color:#fff; 
    
padding:5px
    } 

    
#wg-rosebarbtmhide { 
    
position:absolute
    
top:4px
    
right:12px
    
width:20px
    
height:20px
    
cursor:pointer
    } 

    
#wg-rosebarbtmshow { 
    
position:absolute
    
top:0
    
right:5px
    
width:30px
    
height:25px
    
cursor:pointer
    
background-color:#F60; 
    
padding-top:5px
    
border-bottom:3px solid #000; 
    
border-left:3px solid #000; 
    
border-right:3px solid #000; 
    
border-bottom-right-radius:5px
    
border-bottom-left-radius:5px
    } 

    .
wg-rosebarbtmdownarrow 
    
width:0
    
height:0
    
border-left:10px solid transparent
    
border-right:10px solid transparent
    
border-top:10px solid #CC5200; 
    


    .
wg-rosebarbtmblock 
    
width:8px
    
height:10px
    
background-color:#CC5200; 
    


    .
wg-rosebarbtmuparrow 
    
width:0
    
height:0
    
border-left:10px solid transparent
    
border-right:10px solid transparent
    
border-bottom:10px solid #CC5200; 
    

    </
style
    <
div id="wg-rosebar" 
      <
div id="wg-rosebarbtm" 
     <
style

    .
wg-ribmenu span 
        
background:#7f103c; 
        
display:inline-block
        
color:#FFFFFF; 


        
line-height:40px
        
padding:0 1em
        
margin-top:0.0em
        
position:relative
          -
webkit-transitionbackground-color 0.2smargin-top 0.2s;  /* Saf3.2+, Chrome */ 
        
-moz-transitionbackground-color 0.2smargin-top 0.2s;  /* FF4+ */ 
        
-ms-transitionbackground-color 0.2smargin-top 0.2s;  /* IE10 */ 
        
-o-transitionbackground-color 0.2smargin-top 0.2s;  /* Opera 10.5+ */ 
        
transitionbackground-color 0.2smargin-top 0.2s
    } 
    .
wg-ribmenu a:hover span 
        
background:#FFD204;

        
margin-top:0
       
    } 
    .
wg-ribmenu span:before 
        
content""
        
position:absolute
        
top:40px
        
right:0
        
border-left:0.5em solid #9B8651; 
        
border-bottom:0.5em solid #7f103c; 
    


    .
wg-ribmenu span:after 
        
content""
        
position:absolute
        
top:40px
        
left:0
        
border-right:0.5em solid #9B8651; 
        
border-bottom:0.5em solid #7f103c; 
    

    .
wg-ribmenu a:link, .wg-ribmenu a:visited 
        
color:#000; 
        
text-decoration:none
        
float:right
        
height:40px
        
overflow:hidden
    } 
    
    </
style>  

    <
div class='wg-ribmenu'
        <
a href='/index.html'><span><img src="http://i.imm.io/1759N.png"/></span></a
        <
a href='رابط1'><span>قسم1</span></a
        <
a href='رابط2'><span>قسم2</span></a
        <
a href='رابط3'><span>قسم3</span></a
        <
a href='رابط4'><span>قسم4</span></a
        <
a href='رابط5'><span>قسم5</span></a
    </
div

      </
div></div

الدعم العربي

awesome غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
متحركة, بلوجر, تويتر, قائمة


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
سلايد شو بلوجر جميل وسهل التركيب 3li إضافات وأدوات بلوجر 3 11-13-2013 07:42 PM
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) admin إضافات وأدوات بلوجر 8 06-12-2013 03:37 PM
كيف اضع قائمة أفقية في اعلى الصفحة دون مشاكل ساجد عابد طلبات الدعم الفني 4 12-02-2012 03:13 PM
جديد أضف صور و نصوص ملونة و متحركة لتعليقاتك على بلوجر السيد ابو جبل إضافات وأدوات بلوجر 4 08-24-2012 10:26 PM
مدونة تويتر من اقوى المدونات العربيه في شرح تويتر واكثرمن 12 الف متابع قاسم بني هاني المنتدى الإشهاري 2 07-15-2012 01:55 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 01:19 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)