مساحة إعلانية

السبت، 26 يناير، 2013

السبت، 26 يناير، 2013

إضافة منزلقة لأزرار المشاركة على المواقع الإجتماعية

أزرار المشاركة على المواقع الإجتماعية أصبحت أساسية في جميع المواقع والمدونات وتوجد عدة طرق لإستخدام الأزرار وهذه إحدى الطرق المميزة والتي تجتذب عين الزائر وفي نفس الوقت تعطي لمسة جمالية لمدونتك
ولتركيب الإضافة على مدونتك قم بإتباع التالي
قم بتحرير قالبك وفوق الوسم </head> اضف الكود التالي
ملحوظة إن كان لديك كود مكتبة جي كويري فتجاوز هذه المرحلة ولا تضيف الكود

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

ثم إختر أحد الكودين التاليين وأضفه في اداة HTML/JavaScript


الإضافة على يسار المدونة

<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("https://lh5.googleusercontent.com/-_ukbGrxCISQ/UQOnOkTrUuI/AAAAAAAAAW4/6zfCMSYNd2s/s102/share-left.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        height:102px;
        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:#0502CD;
        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 src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </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='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://cnmu.blogspot.com/2013/01/Share-slider.html"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
        </div>
    </div>
</div>

الإضافة على يمين المدونة

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                right: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                right: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://lh3.googleusercontent.com/-KgklF6q4Bxg/UQOnO6tIrOI/AAAAAAAAAW8/OqtCfwr9c5w/s102/share-right.png") no-repeat scroll left top transparent !important;
        display: block;
        float: right;
        height: auto;
        padding: 0 0px 0 45px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        right:-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:right;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:right;
        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:#0502CD;
        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 src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </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='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://cnmu.blogspot.com/2013/01/Share-slider.html"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
        </div>
    </div>
</div>
موفقين بإذن الله
تحياتي

هناك 15 تعليقًا:

  1. بارك الله فيك يا غالي على الإضافة المميزة

    في انتظار الجديد بفارغ الصبـر ..،


    وتقبل مروري أخوك ~صلاح الدين ..،

    ردحذف
  2. وفيك بارك الله أخي الكريم صلاح الدين
    ونورت المدونة

    ردحذف
  3. انا ضفتها ومظهرتش

    دى مدونتى

    http://adwatmsmm.blogspot.com/

    ردحذف
    الردود
    1. الحقيقة لا أعلم سبب عدم عملها لديك لكن ان كنت ركبتها مضبوط ونسخت الكود مضبوط فأرجح ان المشكلة في عدم توافقها مع القالب لان قالبك من القوالب المتجاوبة أى أن حجمه متغير وهذا قد يسبب مشكلة مع بعض الأدوات خصوصا التي تعتمد مبدأ الإنزلاق

      حذف
    2. حسنا
      بس اخى انا ضفت من عندك الاداه دى وضفت اداه ترقيم الصفحات بس بعد ما ضفتهم تفاجات بان انا عندى فى المدونه فى الاقسام اللى فوق قسم الملحقات دا قائمه منسدله لقيت القائمه المنسدله مبتظهرش متعرفش ايه الحل ؟؟

      حذف
    3. الحل ان تقوم بتركيب النسخة الإحتياطية من القالب وملحوظة أخي الكريم القالب الذي تستخدمه من أكثر القوالب صعوبه في التنسيق فانا تعاملت معه من قبل وتصميمه به أخطاء وكثير من الأركان الأساسية موضوعه تحت وسوم مختلفه لهذا ستواجه دائما معه مشاكل حين التعديل فيه أنصحك أن تستخدم القالب كما هو بالتعديلات الخاصه به ولا تضيف شئ فيه واكتفي بالأدوات الخارجة التي تضاف داخل آداة HTML/JavaScript أما الادوات التي تحتاج تعديل في القالب فحاول قدر الإمكان أن لا تتعامل كثيراً بها في هذا القالب

      حذف
  4. نفذت المطلوب ولاكن لم يظهر شيئ
    وما المقصود ب , أضف هذه الآداة الى مدونتك.........كود الإضافة.
    http://fkhralrb.blogspot.com

    ردحذف
    الردود
    1. الحقيقة أخي الكريم لا أعرف ما المشكلة لديك بحيث لا تظهر الإضافة
      طيب اخي تأكد من نسخ الكود بشكل مضبوط وايضا تأكد من مسألة كود الجي كويري غير ذلك ربما تكون الآداة غير متوافقة مع القالب بالنسبة لكلمة أضف هذه الآداة الى مدونتك هذا كود حماية حقوق فقط لا تقلق لن تظهر لك تلك الجملة

      حذف
  5. اشتغلت معايا الحمد لله ولاكن لماذ لايتم الشاركه على الفيس ومكتوب 11 like منين 11 والمفروض ان هو بيشاركه على الفيس بس هو مبيشاركش بيعمل like بس مش عارف like لايه ؟

    ردحذف
    الردود
    1. عندما يتم الضغط على لايك يتم تجسيل الإعجاب ويظهر للمتابعين انك اعجبت بالموضوع فهو يعمل عمل المشاركة أيضا

      حذف
  6. الاضافة تعطلت وسقط احد اكوادها افرح =q

    ردحذف
    الردود
    1. الإضافة ما تزال تعمل أخي
      http://cnmu-test2.blogspot.com/2013/01/blog-post_2701.html

      حذف
  7. ممكن يعمل على الجميع

    ردحذف
    الردود
    1. لم افهم المقصود اخي الكريم يرجى التوضيح

      حذف
  8. شكرا لك اخي العزيز
    بارك الله فيك يا غالي على هذه الإضافة المميزة
    تقبل مروري

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©