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

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

• معاينة

شرح طريقة التركيب
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 مدونتك )

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

شارك المقال على :

فيس بوك

تويتر

جوجل بلس

لينكد إن

Karim Ali El Sayed‏.

المزيد عني

السابق التالي

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