14 أكتوبر، 2014

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

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

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

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


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

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

بالتوفيق

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

0 التعليقات :

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r