|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
03-31-2013, 04:09 PM | #1 |
مدون جديد
تاريخ التسجيل: Aug 2012
المشاركات: 99
|
إضافة أزرار عائمة للمواقع الإجتماعية في المدونة
السلام عليكم ورحمة الله في تدوينة اليوم سنتابع شرح إضافة أزرار عائمة للمواقع الاجتماعية في يمين المدونة تعطيها شكلا جميل واحترافية أكثر. ننتقل الى شرح إضافة الأزرار الى المدونة 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; } </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> </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
__________________
مـدونـة أمــيــن { www.AmineBlog.com } |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
إضافة،أزرار،عائمة،للمدونة |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز | 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 |
الساعة الآن 10:55 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |