إضافة بلوجر ازرار المواقع الاجتماعية بشكل عائم لمدونة بلوجر [Blogger]

اليوم اقدم لكم اضافة جميلة وخفيفة وذات مظهر جميل ولا تاخذ مساحة من مدونتك علي البلوجر انها ازرار للمواقع الاجتماعية بشكل عائم ومنظر جميل علي يمين الشاشة في بلوجر بتقنية jQuery.

معايتة

 من لوحة التحكم بمدونتك

قم بالضغط علي قالب

ثم تحرير 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; }#ixzz2T1CoxWBT

 وبعدها ابحث عن الكود التالي

  </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/3bdallahghanem' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك في صفحة الفيس بوك</span></span></a> <a class='itemsocial' href='https://twitter.com/abdullahghanem' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>تابعنا علي تويتر</span></span></a> <a class='itemsocial' href='https://plus.google.com/abdullahghanem' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك علي صفحة الجوجل بلس</span></span></a> <a class='itemsocial' href='http://pinterest.com/3lahwa' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>تابعنا علي البينترست </span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/Ton ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك علي قناة اليوتيوب</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/Ton flux' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>تتابع الجديد</span></span></a> </div>

غير ما بالون الازرق بروابط صفحاتك علي المواقع الاجتماعية

وأخيرا،قم بحفظ النموذج.