كيفية إضافة زر المتابعة منزلق على مدونتك بشكل احترافي

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

سنتعرف اليوم عن كيفية إضافة زر المتابعة منزلق على مدونتك بشكل احترافي 2017
إذا كنت تبحث عن فكرة أو أداة لزيادة متابعيك، أنت في المكان الصحيح زر المتابعة سوف يوفر لك فرصة كبيرة لتحويل زوار مدونتك إلى متابعين.

مشاهدة عرض توضيحي

للمعاينة

خطوات تركيب زر المتابعة منزلق على مدونتك :

تابع معي ...

أولا - توجه إلى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير HTML >>

3 - إضغط Ctrl+F وإبحث عن الوسم التالي

]]></b:skin>

4 - أضف فوقه مباشرة الكود التالي.

#arlinafollowSubscribe {
    background-color: #464646;
    width: 220px;
    color: #fff;
    position: fixed;
    z-index: 999;
    right: 10px;
    bottom: 0
}
.arlinafollowButton {
    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
}
.arlinafollowButton span {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2M21nO6Kcvod2oqy3ToQnpArf41fYsZyuFwM_240Y1V-kwFZataGnYHhUWaTPlMoWKYxVBx-i6z7AjMuySw87LXXxeVA8J5xIjWaQaZ5CMslqR1olbZ1PxDhS0vIvJZfL4PROMCvD2ZNk/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;
    padding-left: 15px
}
.arlinafollowButton:hover,
.arlinafollowButton:focus,
.followActive,
.followActive:hover {
    color: #fff
}
.arlinafollowButton:hover span,
.followActive span {
    background-position: 0 -37px!important
}
.followactive {
    background-color: #333
}
.arlinafollowForm {
    padding: 15px;
    margin: auto;
    text-align: center;
    font-size: 12px
}
.arlinafollowForm p {
    margin: 10px 0
}
.arlinaFollowFooter {
    text-align: center;
    font-size: 11px;
    padding: 7px 0;
    margin: 0 0 -15px;
    border-top: 1px solid #3c3c3c
}
.arlinaFollowFooter a {
    color: #aaa;
    background: none;
    text-decoration: none
}
.arlinaFollowFooter a:hover {
    color: #fff;
    background: none
}

5 - إبحث الآن عن الوسم

</head>

6 - أضف الكود التالي فوقه مباشرة

<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("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").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> 

7 - اضغط على زر حفظ المظهر.

8 - الآن توجه الى التخطيط >> إضافة أداة HTML >>

9 - وألصق الكود التالي في مربع HTML.

<div id="arlinafollowSubscribe" style="bottom: -971px;">
  <div class="arlinafollowForm">
    <a class="arlinafollowButton" href="#" title="Follow"><b>+ Follow</b></a>
    <br />
    <a href="http://www.Blogger.com/follow-blog.g?blogID=5984441404945568808" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTeqeMXi_N0OjW3JSrJ8O50RzMgYdZVyHHlgc8geORUlpzs1fH8Ej_f4Z9UjtCkAk395VTjw6I0VEsmkZ8LDUpIO4D22UxfvHptw1N_69inrFFF5uUPEARAtWZTBVAS4930tQYh_VkzSqN/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

إستبدل المعرف 5984441404945568808 بمعرف مدونتك
إستبدل العبارة with Google Friend Connect 

إحفظ الأداة وتوجه لمدونتك لمشاهدة النتيجة. 

تم بحمد الله ...

 أي أسئلة أو إستفسار لا تتردد في طرحها
باب التعليقات مفتوح للجميع