إضافة زر الإنتقال لأعلى الصفحة إلى المدونة بلوجر بأشكال متعددة وبطرق مختلفة مع طريقة أخرى بدون صور blogger
السلام عليكم ورحمة الله وبركاته
درس اليوم درس قد يكون مُكرر على صفحات الإنترنت
ولكن لدينا اليوم درس رائع يحمل بداخله طرق مختلفة لإضافة زر الإنتقال لأعلى الصفحة كما هو بالصورة السابقة.
الطريقة الأولى وهي إضافة كود جافا سكربت إلى المدونة باستخدام لوحة التحكم ثم الوصول إلى تخطيط ثم إضافة آداة
اختر اضافة html/javascript ثم انسخ الكود التالي...
[code type="JavaScript"]<script type="text/javascript">
//Scroll Top By MiniSoft
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZyX4-dG6cEBYHb82g-8VSouVsLtn3jZ1F0gB07SC2hsRXhz8g-dZF5oMZUoKHbC-lZz6C9OlCwZ0sBrwPGlQMWJKDPYmnXpEok4Wz31IhOrY2HZm3Ni0np3adsG2kksL1gSZ3EgcSq4gM/s1600/Blue-Arrow-Up--BloggerAdsenSeO.BlogSpot.Com.png" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:''})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})
})
}
}
scrolltotop.init()
</script>[/code]
ملاحظة هامة: إذا كانت مدونتك لا تحتوي على مكتبة jquery فيجب إضافة هذا السطر اعلى الكود السابق
[code type="JQuery"]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>[/code]
هذه الصورة جاهزة للعمل فقط اضغط كليك يمين على الصورة واختر نسخ رابط الصورة..
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZyX4-dG6cEBYHb82g-8VSouVsLtn3jZ1F0gB07SC2hsRXhz8g-dZF5oMZUoKHbC-lZz6C9OlCwZ0sBrwPGlQMWJKDPYmnXpEok4Wz31IhOrY2HZm3Ni0np3adsG2kksL1gSZ3EgcSq4gM/s1600/Blue-Arrow-Up--BloggerAdsenSeO.BlogSpot.Com.png" />',استبدل الرابط هذا برابط الصورة التي تريدها..
الطريقة الثانية
والآن مع الطريقة الثانية من إضافة الزر للصعود للأعلى داخل مدونتكوهي تعتمد على الجافا سكربت وCSS
ولا يتم استخدام صورة وهي كالتالي...
يتم إضافة الكود التالي اسفل الوسم <body>
[code type="JavaScript"]<script type="text/javascript" >
//<![CDATA[
//Scroll Top by MiniSoft
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>[/code]
</b:skin>
ثم انسخ الكود التالي وضعه اعلاه
[code type="CSS"]/* Scroll To Top By MiniSoft */
a#top{
position:fixed;
bottom:0;
right:50%;
width:30px;
display:none;
height:34px;
margin-right:-15px;
background-color:#01B8C0;
text-decoration:none;
outline:none;
cursor:pointer;
color:#FFFFFF;
text-indent:-9999px;
-moz-border-radius:3px 3px 0 0;
-webkit-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
}
a#top:before{
content:"";
width:0;
height:0;
border-width:9px 8px;
border-style:solid;
border-color:transparent transparent #FFFFFF transparent;
position:absolute;
top:2px;
left:7px;
}[/code]
وبهذا ايضاً يكون قد انتهى درسنا البسيط
بالتوفيق للجميع
التعليقات