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

إعلان أدسنس

آخر المواضيع

breaking/اضافات/9
كل

الأحد، 27 أغسطس 2017

أغسطس 27, 2017

تكبير النص تصغير النص أعادة للحجم الطبيعي

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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب
سنتعرف اليوم عن كيفية إضافة زر المتابعة منزلق على مدونتك بشكل احترافي 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 

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


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

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

إرسال تعليق

كل