أضافة زر متابعة المدونة بشكل منزلق

السلام عليكم .... �� , اليوم لدينا أضافة مهمة لمدونات بلوجر وهي أضافة زر متابعة المدونة بشكل منزلق , لابد أن يكون بمدونتك زر متابعة المدونة بشكل احترافي , ما فائدة متابعة المدونة ; هي لمعرفة زوار مدونتك عن أحدث مواضيعك �� وتظهر مواضيعك لمتابعين �� مدونتك في لوحة تحكم بلوجر الخاصة بهم , مما يساعد في الوصول لمواضيعك بشكل اسرع ويكونون على علم بأحدث المواضيع لديك , لذالك قمت بتوفير لكم زر متابعة المدونة بشكل منزلق احترافي وإليكم المعاينة �� قبل شرح طريقة تركيب الاضافة على مدونتك .


شرح طريقة التركيب
1. من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة

الكود

<style scoped='' type="text/css">
/*<![CDATA[*/
#Pro7webfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.Pro7webfollowButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700}
.Pro7webfollowButton span{background:url("https://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}
.Pro7webfollowButton:hover,.Pro7webfollowButton:focus,.followActive,.followActive:hover{color:#fff}
.Pro7webfollowButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.Pro7webfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.Pro7webfollowForm p{margin:10px 0}
.Pro7webFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.Pro7webFollowFooter a{color:#aaa;background:none;text-decoration:none}
.Pro7webFollowFooter a:hover{color:#fff;background:none}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#Pro7webfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".Pro7webfollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
<div id="Pro7webfollowSubscribe" style="bottom: -971px;">
  <div class="Pro7webfollowForm">
    <a class="Pro7webfollowButton" href="#" title="Follow"><b>+ تابعنا</b></a>
    <br />
    <a href="http://www.Blogger.com/follow-blog.g?blogID=4222096331965947574" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://1.bp.blogspot.com/-HViEx99kxmQ/VyPMrPGAvEI/AAAAAAAAD7M/bWz5CKpHrHkxtVdgL0z-xJQa_nA_tK0gACLcB/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>كن من متابعينا الأوفياء</p>
  </div>
</div>

التغييرات الأساسية
1- قم بتغير كن من متابعينا الأوفياء " بأي كلمة تريدها
2- قم بتغيير 4222096331965947574 بـ ID مدونتك ( شاهد الصورة أسفل لتعرف اين تجد ID مدونتك )

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

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

المشاركات الشائعة

أحدث التعليقات

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا
تم النسخ