اضافة صندوق الشبكات الاجتماعية اسفل الموضوع بأحدث اشكالها

بسم الله الرحمن الرحيم

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

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

معاينة

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

ابحث عن <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>

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

~~المصدر:- مدون محترف~~

بالتوفيق للجميع ومبروك عليكم الاضافة

اضافة صندوق الشبكات الاجتماعية اسفل الموضوع بأحدث اشكالها

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

اهم التعديلات حول الكود

آخر المشاركات

تعليقات: 2