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

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

معاينة

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

ابحث عن <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><!-- / .shutter_frame -->
        </a>
    </div><!-- / .wpr -->
</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

بالتوفيق

10/14/2014

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 10/14/2014 اضف تعليق