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

 

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




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


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 03-31-2013, 04:09 PM   #1
efada.net
مدون جديد
 
الصورة الرمزية efada.net
 
تاريخ التسجيل: Aug 2012
المشاركات: 99
افتراضي إضافة أزرار عائمة للمواقع الإجتماعية في المدونة

أنا : efada.net





السلام عليكم ورحمة الله

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


ننتقل الى شرح إضافة الأزرار الى المدونة

1- في لوحة تحكم بلوجر انقر على قالب ثم تحرير HTML
ضع علامة في المربع ثم قم بالبحث عن الكود التالي :

]]></b:skin>

قم بوضع هذا الكود أعلاه مباشرة

كود:
 .social-buttons {
    position: fixed; 
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon, 
.social-buttons #facebook-btn .social-icon, 
.social-buttons #google-btn .social-icon, 
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
} 
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
2- قم بالبحث عن هذا الكود

</head>

قم بوضع هذا الكود أعلاه مباشرة

كود:
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
 <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $('.social-buttons .social-icon').mouseenter(function(){
            $(this).stop();
            $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});  
        });
        $('.social-buttons .social-icon').mouseleave(function(){
            $(this).stop();
            $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
        });
    });
</script>
3- قم بالبحث عن الكود التالي :

</body>

قم بوضع هذا الكود أعلاه مباشرة

كود:
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB'  id='facebook-btn' target='_blank'><span  class='social-icon'><span class='social-text'>Follow via  Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter'  id='twitter-btn' target='_blank'><span  class='social-icon'><span class='social-text'>Follow via  Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+'  id='google-btn' target='_blank'><span  class='social-icon'><span class='social-text'>Follow via  Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID'  id='youtube-btn' target='_blank'><span  class='social-icon'><span class='social-text'>Follow via  Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed'  id='rss-btn' target='_blank'><span  class='social-icon'><span class='social-text'>Follow via  RSS</span></span></a>
</div>
* قم باستبدال الروابط المؤشر عليها باللون الأحمر الى روابط حساباتك الخاصة

ومبروك عليك الإضافة الجديدة
أي استفسار أو مشكل اتركه في تعليق
في أمان الله :)

للمزيد من الاضافات تابعنا : www.efada.net



الدعم العربي

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

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

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

الكلمات الدلالية (Tags)
إضافة،أزرار،عائمة،للمدونة


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

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

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

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

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز Jaabiriovic إضافات وأدوات بلوجر 9 06-21-2013 05:54 PM
أزرار المواقع الإجتماعية روعة أعجبتني,,,, cheb-bilal إضافات وأدوات بلوجر 5 05-11-2013 05:02 PM
إضافة أزرار تابعني عبر المواقع الإجتماعية بتأثيرات رائعة Jaabiriovic إضافات وأدوات بلوجر 3 02-09-2013 02:14 PM
إضافة المواقع الإجتماعية في قمة الإحترافية .. لن تجدها في موقع أخر overboy إضافات وأدوات بلوجر 7 08-09-2012 01:59 AM
إضافة الأيقونات الإجتماعية بالأبعاد الثلاثية مع تأثير الدوران yosefssss إضافات وأدوات بلوجر 3 08-06-2012 12:02 AM





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

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