اضافة شريط التقدم في القراءة في بلوجر

اضافة شريط التقدم في القراءة في بلوجر

لقد رأيت عددا قليلا من مواقع الويب التي تحتوي على نوع من المؤشرات لعرض موضع القرائة الحالي وهذه إضافة تضفي نوع من الجمالية و تحبب المستخدم في المدونة . و هذا ما سوف سنتناوله في الحذيث في هذه التدوينة . 

لإضافة الشريط ما عليك سوى ان تذخل الى مدونتك :

1-ادخل الى قالب 

2-تحرير HTML

3-ابحث على head/ واضف فوقه هذا الكود 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var getMax = function(){

return $(document).height() - $(window).height();

}

var getValue = function(){

return $(window).scrollTop();

}

if('max' in document.createElement('progress')){

// Browser supports progress element

var progressBar = $('progress');

// Set the Max attr for the first time

progressBar.attr({ max: getMax() });

$(document).on('scroll', function(){

// On scroll only Value attr needs to be calculated

progressBar.attr({ value: getValue() });

});

$(window).resize(function(){

// On resize, both Max/Value attr needs to be calculated

progressBar.attr({ max: getMax(), value: getValue() });

});

}

else {

var progressBar = $('.progress-bar'),

max = getMax(),

value, width;

var getWidth = function(){

// Calculate width in percentage

value = getValue();

width = (value/max) * 100;

width = width + '%';

return width;

}

var setWidth = function(){

progressBar.css({ width: getWidth() });

}

$(document).on('scroll', setWidth);

$(window).on('resize', function(){

// Need to reset the Max attr

max = getMax();

setWidth();

});

}

});

$(document).ready(function(){

$('#flat').addClass("active");

$('#progressBar').addClass('flat');

$('#flat').on('click', function(){

$('#progressBar').removeClass().addClass('flat');

$('a').removeClass();

$(this).addClass('active');

$(this).preventDefault();

});

});

//]]>

</script>

 4-بعد اضافة الكود ابحث على <b:includable id='post' var='post'>

اضف الكود التالي تحته مباشرة 

<progress id='progressBar' value='0'>

<div class='progress-container'>

<span class='progress-bar'/>

</div>

</progress>

 الى آن قد احرزنا تقدم كبير .

5-ابحث على</b:skin><[[

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

/* reading position indicator */

progress {

/* Positioning */

position: fixed;

left: 0;

bottom: 0;

z-index: 101;

/* Dimensions */

width: 100%;

height: .25em;

/* Reset the apperance */

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

/* Get rid of the default border in Firefox/Opera. */

border: none;

/* For Firefox/IE10+ */

background-color: transparent;

/* For IE10+, color of the progress bar */

color: red;

}


progress::-webkit-progress-bar {

background-color: transparent;

}

.flat::-webkit-progress-value {

background-color: red;

}

.flat::-moz-progress-bar {

background-color: red;

}

.progress-container {

width: 100%;

background-color: transparent;

position: fixed;

top: 0;

left: 0;

height: .25em;

display: block;

}

.progress-bar {

background-color: red;

width: 50%;

display: block;

height: inherit;
}

الأكواد

 ومبروك عليك الإضافة

احب قرائة تعليقك حول التدوينة و اذا واجهتك مشكلة لا تتردد في قولها في التعاليق .