منتديات ابداع توداى - اكبر موقع عربى للبرامج والعاب الاونلاين وتطوير المنتديات واخبار العالم
 
الرئيسيةالرئيسية  س .و .جس .و .ج  بحـثبحـث  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 عمل ايقونات ( فيس بوك - تويتر - اليوتيوب - جوجل بلس - rss ) بطريقة جميله

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
malakwab
..:: أدارة المنتدى ::..
..:: أدارة المنتدى ::..
avatar

الجنس : ذكر
مشاركاتى : 2962
نقودى : 5068
سمعتى : 14
عمرى : 18
التسجيل : 04/05/2012
العمل/الترفيه : مبرمج

مُساهمةموضوع: عمل ايقونات ( فيس بوك - تويتر - اليوتيوب - جوجل بلس - rss ) بطريقة جميله   الإثنين يونيو 29, 2015 6:17 pm

الفيسبوك & تويتر & اليوتيوب & قوقل بلس & rss feed .... بجانب المنتدى على اليمين 


شوف الفيديو وبتعرف 


شوف المقطع الفيديو من اليوتيوب بيوضح عمل الكود في صفحات ال html



ملاحظه : انا جربت الكود ومااإشتغل معايا الا بصفحه HTML 

اولا كود HTML 

الكود:



   [font=monospace]<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Social Media Buttons</title>
        <script src="dkthemes.forumotions.in/38797.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $(".takip").mouseover(function(){
              $(this).filter(':not(:animated)').animate({width:135},{duration:500});
        });
        $(".takip").mouseout(function(){
            $(this).animate({width:42});
        });
        });
        </script>
        
        
        <div id="takip">
            <div class="facebook takip" onclick="location.href='http://www.facebook.com/'">
            </div>
            <div class="twitter takip" onclick="location.href='http://www.twitter.com/'">
            </div>
            <div class="Google takip" onclick="location.href='http://www.flickr.com/'">
            </div>
            <div class="Youtube takip" onclick="location.href='http://www.friendfeed.com/'">
            </div>
            <div class="rss takip" onclick="location.href='http://www.vimeo.com/'">
            </div>[/font]


ثانيا كود css


الكود:

      #takip {
          position: fixed;
          right: 0;
          top: 220px;
          z-index: 999;
      }
      .takip {
      background-image: url('http://i49.servimg.com/u/f49/16/79/78/79/social17.png');
      background-repeat: no-repeat;
      height: 42px;
      width: 42px;
      top: 100px;
      margin-left: auto;
      opacity:0.3;
      filter:alpha(opacity=50); /* For IE8 and earlier */
      }
      .takip:hover {
      background-image: url('http://i49.servimg.com/u/f49/16/79/78/79/social17.png');
      cursor: pointer;
      opacity:1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      }
      
      .facebook {
          background-position: 0px 0px;
      }
      .twitter {
          background-position: 0px -42px;
      }
      .Google {
          background-position: 0px -84px;
      }
      .Youtube {
          background-position: 0px -126px;
      }
      .rss {
          background-position: 0px -168px;
      }


منقول من منتديات احلي حكاية


الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.ibda3today.0wn0.com
 
عمل ايقونات ( فيس بوك - تويتر - اليوتيوب - جوجل بلس - rss ) بطريقة جميله
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات ابداع توداى :: اقسام التطوير و المساعدة :: متجر الاكواد :: أكواد HTML-
انتقل الى: