اضافة صناديق الاشتراك اسفل الموضوع في بلوجر

اضافة صناديق المشاركة في مواقع التواصل الاجتماعي من اهم الاضافات لمدونات بلوجر

اليوم في موضوع جديد و اضافة جديدة و هي عبارة عن صناديق الاشتراك في مواقع التواصل الاجتماعي مثل فيس بوك و تويتر و جوجل بلس و الاضافة تظهر اسفل المواضيع في مدونات بلوجر و ما يميز هذه الاضافة انها متوافقة مع جميع الشاشات و اجهزة المحمول شاهد المثال التالي لتتعرف اكثر :

معاينة

طريقة التركيب

ابحث عن <data:post.body/> و اضف الكود التالي تحته

<b:if cond='data:blog.pageType == "item"'>
<link href='https://googledrive.com/host/0B3omcK7jIprqRm95VVpQZDJHRzQ' rel='stylesheet'/>
<div class="wpr">
        <a class="social" id="twitter" href="www.twitter.com/mudwnp" title="تويتر">
            <div class="icon"></div>

            <div class="shutter_frame">
                <div class="shutter">
                    <div class="number">1189</div>
                    <div class="bar"></div>
                    <div class="text">تابعنا</div>
                </div>
            </div>
        </a>

        <a class="social" id="google" href="https://plus.google.com/u/0/+mudwnpro" title="جوجل بلس">
            <div class="icon"></div>

            <div class="shutter_frame">
                <div class="shutter">
                    <div class="number">421</div>
                    <div class="bar"></div>
                    <div class="text">+1</div>
                </div>
            </div>
        </a>

        <a class="social" id="facebook" href="https://www.facebook.com/mudwnp" title="فيس بوك">
            <div class="icon"></div>

            <div class="shutter_frame">
                <div class="shutter">
                    <div class="number">973</div>
                    <div class="bar"></div>
                    <div class="text">اعجبني</div>
                </div>
            </div>
        </a>
    </div>
</b:if>

اهم الملاحظات حول الكود

استبدل ما هو باللون الاحمر بروابط حساباتك على مواقع التواصل الاجتماعي
استبدل الارقام التي باللون الازرق بما يناسبك
استبدل الكلمات التي باللون البرتقالي بما يناسبك

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/>
    <script>
        $(document).ready(function() {

            $('.social').hover(
                function() {
                    $(this).find('.shutter').stop(true, true).animate({
                        bottom: '-36px'
                    },
                    {
                         duration: 300,
                         easing: 'easeOutBounce'
                    });
                },
                function () {
                    $(this).find('.shutter').stop(true, true).animate({
                        bottom: 0
                    },
                    {
                         duration: 300,
                         easing: 'easeOutBounce'
                    });
                }
            );

        });
    </script>

الكود الاحمر يمكنك ازالته ان كان لديك مكتبة جي كويري في القالب

يمكنك ايضا مشاهدة : اضافة صناديق المشاركة و الإعجاب اسفل مواضيع بلوجر
اضافة ازرار التواصل الاجتماعي في الشريط الجانبي
اضافة ازرار مشاركة مواقع التواصل الاجتماعي الاحترافية 2014

بالتوفيق

201