أداة المشاركة الاجتماعي المتحركة مع jQuery في Blogger

مايو 22, 2012

0

الادوات المشاركة الاجتماعية تلعب دورا هاما في تعزيز المدونة . ولهذا السبب أجد دائما إشارة مرجعية الأدوات الاجتماعية تقريبا على كل مدونة / على الانترنت. اليوم نحن نشرح أداة المشاركة الاجتماعية صممه Chandeep والذي يعمل بــ jQuery. هذه الأداة ملتصقة جنبا إلى جنب مع أي صفحة، وعندما يحوم المستخدم على رمز، وبعض أزرار المشاركة الاجتماعية لزر الفيسبوك مثل زر التغريد تويتر، و زر stumbleupon الإرسال، وإرسال الصورة . أيضا تثبيت هذه الأداة سهلة للغاية ، والآن دعونا نرى كيف إضافة الأداة إلى مدونة بلوجر . رؤية التجريبية من أداة الأولى.

كيفية إضافة أداة المشاركة الإجتماعية المتحركة إلى بلوجر ؟

من أجل فهم أفضل وأنا قسمة هذا البرنامج التعليمي في 3 خطوات بسيطة، ما عليك سوى اتباع هذه الخطوات بعناية ، وسوف تضيف هذه الأداة بسهولة جدا مدونتك.

الخطوة 1: إضافة المكون الإضافي jQuery
الخطوة 2: إضافة زر Google + سكربت
الخطوة 3: إضافة الأداة

الخطوة 1: إضافة المكون الإضافي jQuery

لاحظ - تجاهل هذه الخطوة، إذا كنت قد قمت بالفعل بإضافة المكون jQuery مدونتك.

   1. انتقل إلى لوحة Blogger> قالب
     2. فوق تحرير HTML
   3. إضغط تابع
     4. ابحت الآن عن هذا رمز في القالب

        </head>

إضافة الكود أدناه فوقه تماما

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

  الخطوة 2: إضافة زر Google + سكربت

 ابحث عن رمز  أدناه في القالب

        <head>

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

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

  الخطوة 3: إضافة الأداة

      1.انتقل الآن إلى تخطيط الصفحة
     2.انقر على إضافة الأداة
     3.اختر HTML / JavaScript
     4.ترك عنوان الحقل فارغا
     5.لصق رمز أدناه وحفظه
     6.اسحب القطعة إلى أسفل الصفحة الخاصة بك.
     7.حفظ التغييرات التي قمت بها أخيرا


<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("http://3.bp.blogspot.com/-Dbq2keEcGbs/T7seLQzzy8I/AAAAAAAAByY/6olpRUktfhE/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
                
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
            <div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://www.Stupcomp.blogspot.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a>
            </div>
        </div>
    </div>
</div>

 أتمنى أن تعجبكم هذه الأداة ، :)

أداة المشاركة الاجتماعي المتحركة مع jQuery في Blogger

إرسال تعليق

Formulir Kontak