По-рано имах запазена в черновите си подобна публикация за такава опция, но тя така си и остана на чернова. Досещате се, че кодът, който осъществяваше тази опция спря да работи. И затова днес ви предлагам една алтернатива.
Представете си тази ситуация. Попаднали сте на нещо много интересно. Текст от любим ваш блог. Текст, който е достатъчно голям. Текст, който ви предизвиква да споделите мнение, да напишете коментар, да зададете въпрос. Но това изисква добре да анализирате прочетеното и да си водите бележки, например. А и двете ви ръце се налага да са свободни. И вместо да въртите с колелцето на мишката монотонно, докато ви се схване ръката, натискате единия бутон и четете, и водите бележките си едновременно с това. Да, може и дори с чаша кафе в ръка.
Това, което ви предлагам е за вашите постоянни читатели. За най-активно коментиращите читатели на вашия блог.
Ето за какво става въпрос. Бутоните са вляво, в два различни варианта на техните изображения.
DEMO-1
DEMO-2
А кодът на първия вариант е:
<style>#abt-scroll{position:fixed;z-index:9999;bottom:0;left:10px;top:380px!important;}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px!important;}
#abt-scroll a.abt-scroll{font-family:FontAwesome;border-radius:50%;}
#abt-scroll a.abt-stop{font-family:FontAwesome;margin-left:2px;border-radius:50%;}
#abt-scroll a.abt-stop{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcN4NIlSxrg-U3V0Vn6O08B0jMi_Cs8YtHP_79CnRn2jou4xQdOk8hGHVLe3YOFJecJr5l10QIhyHYJWZOuwxtpYHkWgAp32HEfvoIdN9nr3TRK57tYqNzx_Se8ICbouocf-jkuqflQzM/s1600/pause.png");}
#abt-scroll a.abt-scroll{width:33px;height:33px;!important;}
#abt-scroll a.abt-stop{width:34px;height:34px;}
#abt-scroll a.abt-scroll{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxWDDOWT2pB3p4_s1asRXVOGsLXRiFnJwUPOomLNRGLTUCdPWALWhc1XieK-ScSSkAUe6xqys12UDaBZEgtR_OIbsWfAMBMGsb1_uLqVCekfbIfXqypz4PDpS6VuoXeSyWBg2uPigTcQi/s1600/play.png");}</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',60)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Play'>Play</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Pause'>Пауза</a>
</div>
Кодът на втория вариант е:
<style>#abt-scroll{position:fixed;z-index:9999;bottom:0;left:10px;top:380px!important;}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px!important;}
#abt-scroll a.abt-scroll{font-family:FontAwesome;border-radius:50%;}
#abt-scroll a.abt-stop{font-family:FontAwesome;margin-left:2px;border-radius:50%;}
#abt-scroll a.abt-stop{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNm4AccAUFgejcYY6tziRftDex1ZJd8rV4iMkT5owFZqvUDAABxY_oMWv67RNjttTmZS-OheCtDcBlVABMiqFGF8YRWNka75z84WwYid3hdHajZ6DSHAwi1lWnycJ2sBsw86gR7C8FnM/h120/Pause-Button1.png");}
#abt-scroll a.abt-scroll{width:33px;height:33px;!important;}
#abt-scroll a.abt-stop{width:34px;height:34px;}
#abt-scroll a.abt-scroll{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tGii5NQM3qvUUd-LEB1ONFlSjQAn9PxBuQCe4OyPN_mQo4udufWkl1DMrr30cxKCwHMOXn420K_v0p0ta2q-wqpZamn-4j15UJGgHwtcffQlGt5NzmVUwVhDJhJpZG82z5M71hNAvvQ/h120/play1.png");}</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',60)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Play'>Play</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Pause'>Пауза</a>
</div>
Инсталирайте избрания код в притурката HTML / JavaScript и я позиционирайте някъде в оформлението на блога.
В кода можете да промените:
➤изображенията на бутоните - оцветеното в синьо са адресите на изображенията, можете да сложите свои;
➤размера на бутоните - оцветеното в червено, променете, както вие прецените;
➤скоростта на превъртане - оцветеното в зелено, в случая е 60;
➤разположението на притурката - оцветено в розово - лесно се заменя left с right;
Ако вместо left сложите right, top или bottom е желателно да пренаредите кода, за да смените местата на бутоните в него. Ако желаете, пробвайте.
Това е.
Всички сте добре дошли тук и благодаря за вашето посещение. Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и гласувате за блога на:
Следвайте Blogzablogove
Няма коментари:
Публикуване на коментар