الأربعاء، 6 نوفمبر 2013

اضافة ازرار التواصل الاجتماعي أسفل عنوان التدوينة يطفو عند النزول الى الاسفل

12:15 م  دون ياقلم  لا يوجد تعليقات

اضافة اليوم عبارة عن أزرار التواصل الاجتماعي (+facebook-twitter-google ...)لتمكين الزوارمن مشاركة الموضوع مع اصدقائهم في حساباتهم على مواقع التواصل الاجتماعي.
هذه الاضافة تتميز بكونها في شريط يطفو عند النزول الى الاسفل اي ان هذه الازرار تظل امام الزائر يمكنه في اية لحظة مشاركة موضوعك في مواقع التواصل الاجتماعي.

اضافة ازرار التواصل الاجتماعي أسفل عنوان التدوينة يطفو عند النزول الى الاسفل

تركيب الاضافة :
1- من لوحة التحكم   >>>   قالب   >>>    تحريرhtml   (احفظ نسخة من القالب )
2- ابحث بواسطة  ctrl+f  عن  :
</head> 
3- انسخ الكود التاتلي قبله مباشرة :
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /*<![CDATA[*/ #mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #mblSocialFloat td{padding:4px;margin:0;border:none;} #mblSocialFloat td iframe{max-width:82px;width:82px !important;} #mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style> <script type='text/javascript'> /*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"> </div> ').closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script> <script src='http://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.js' type='text/javascript'/> <script type='text/javascript'> /*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script> </b:if>
4- الان ابحث عن :
<data:post.body/>
5- انسخ الكود التالي قبله مباشرة :
        <!-- http://rydnet.blogspot.com/ Floating Social Bar --> <b:if cond='data:blog.pageType == "item"'> <div class='mblSocialFloat' id='mblSocialFloat'> <table class='mblSocialFloat' width='100%'> <tr> <td> <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </td> <td> <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </td> <td> <div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'> <data:post.body/> <script type='text/javascript'> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSzhAjtEjAjelQ0ZBn-90P55M_Y5cCHhpx-lf9zr6OzRxqhZhmkUJYSTB_ApZeb3rope-jr6PzB2dGEXkebAOXQVaBXhbFPhn0Ue-3_29t1dd713vpJRdu9jzB_kzw6KBL0j0T3AJi-3y/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div> </td> <td> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/> </td> <td> <su:badge expr:location='data:post.url' layout='1'/> </td> <td> <a class='DiggThisButton DiggCompact'/> </td> </tr> </table> </div> </b:if> <!-- http://rydnet.blogspot.com/ Floating Social Bar -->
تنبيه : في بعض القوالب تجد <data:post.body/>  اكثر من مرة (انا عندي 5) قم بتجربة الكود قبل كل واحد ثم احفظ القالب فان لم تعمل الاضافة احذفه وضعه قبل الثاني و هكذا حتى تعمل الاضافة.
6- احفظ القالب.
مبروك تمت الاضافة .......
مع تحيات حمزة رمزي.......

اشكال اخرى من اضافات التواصل الاجتماعي:

اضافة صندوق المتابعة في google+

منشورة في: ,

0 التعليقات:

إرسال تعليق