no-style

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


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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب
سنتعرف اليوم عن كيفية إضافة زر المتابعة منزلق على مدونتك بشكل احترافي 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://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/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://1.bp.blogspot.com/-HViEx99kxmQ/VyPMrPGAvEI/AAAAAAAAD7M/bWz5CKpHrHkxtVdgL0z-xJQa_nA_tK0gACLcB/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>
إستبدل المعرف 5984441404945568808 بمعرف مدونتك
إستبدل العبارة with Google Friend Connect 

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


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

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

4 تعليقات

  1. وإياكم إن شاء الله
    يسلم مرورك الكريم أخي

    ردحذف
  2. السلام عليكم ورحمه الله وبركاته
    هل تعني ب html/javascript ام ماذا
    بماذا نستبدل العباره with google frind connect نكتب إيه بدل عنها

    ردحذف
  3. وعليكم والسلام ورحمة الله وبركاته
    أهلا وسهلا أخي الكريم
    يمكنك استبدال العبارة بـ انضم الى متابعي المدونة أو شيء مثل هذا القبيل

    ردحذف
  4. اين اجيب معرف المدونه

    ردحذف

إرسال تعليق

أحدث أقدم