구글 블로그 맨 위로 가기 버튼 만들기 Back To Top Button

구글 블로그를 만들면서 맘에 드는 스킨을 적용시켜보았습니다.

설명하는 구글 블로그 템플릿은 알파를 적용하고 있습니다.

2020/10/18 - [블로그] - 구글 블로그 깔끔한 스킨 레이아웃 수정하는 방법입니다

이 스킨은 프로필 사진에 액션이 들어 있는 것과

제목과 본문 글자의 크기가 어울리는 등 전반적으로 마음에 들었습니다.

많은 내용은 아니더라도 사용자가 만들어갈 수 있는 것은 티스토리 처럼 재미있습니다.

하지만 이 스킨에서 한 가지 아쉬운 것은 맨 위로 가는 버튼이 없습니다.

방문자가 제목에 이끌려 찾기도 하지만

블로그 그 자체를 구경하기 위해 방문하는 사람도 많기 때문에

글을 읽고 아래로 내려갔다 다음 글을 읽기 위해 위로 올라 올 수 있는 버튼은 필수라고 할 수 있습니다.

이 버튼이 있으면 다른 글을 읽기 위해 카테고리가 있는 위치까지 클릭 한 번으로 올라올 수 있죠.

그래서 방문자를 더오랜 시간 체류할 수 있게 합니다.

이 내용은 https://sites.google.com/site/backtotopbuttonsforblogger/에서 가져왔습니다.

보통 위로가기 버튼은 오른쪽 아래에 위치시킵니다. 왼쪽이 아니라 오른쪽이죠.

왜 그럴까 생각해 보면

글을 왼쪽에서 오른쪽으로 쓰고 읽기 때문에 눈은 오른쪽 끝에서 마치게 됩니다.

마우스도 자연스럽게 오른쪽 끝에서 끝나게 되니까 오른쪽이 편한 것은 아닐까 생각해 봅니다.

반대로 오른쪽에서 왼쪽으로 글을 쓰는 중동 지방에서는 위로 가기 버튼이 왼쪽에 있을까요?

레이아웃 메뉴에서 오른쪽 위젯이 배치되어 있고 중간마다 가젯추가버튼이 있습니다.

가젯추가를 누르면 생성할 수 있는 26가지 종류가 나오는데 그중에서 HTML/JavaScript를 선택합니다.

어떤 내용인지 알 수 있게 제목을 넣고 코드를 넣습니다.

위 사이트에 들어가면 위로 가기 버튼을 위젯에 넣는 방법과 HTML로  넣는 방법을 소개하고 있습니다.

구글 번역으로도 이해할 수 있는데 코드를 복사할 때는 원문으로 돌려놓고 복사를 해야 합니다.

번역을 하면 코드도 번역이 되기때문입니다.

어떤 코드가 맞는지 모르겠다면 아래 코드를 그대로 위젯에 붙여넣으면 됩니다.

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script> <script type="text/javascript"> var scrolltotop={ //Modified by bloggerknown.blogspot.com more JQuery Scroll to Top Design //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://2.bp.blogspot.com/-ePqbjiLEGEI/TivrqfGbPvI/AAAAAAAAEZE/cFdcqMze9Bw/s400/Top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 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 //not IE or IE7+ browsers in standards mode 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:'Scroll to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

그리고 위로 가기 이미지 주소를 넣어야 합니다.

위 코드에는 이미지 주소가 들어있습니다.

코드 속에서 Your Image Link를 찾아 이 문장 대신에 이미지 주소를 넣습니다.

구글에서는 친절하게 위로 가기 이미지를 제공하는 것뿐만 아니라

링크 주소 자체를 제공하고 있는데 주소만 복사해서 붙여넣으면 됩니다.

사이트에 보면 몇 가지 위로 가기 이미지가 있습니다.

배경에 어울리는 이미지를 선택할 수도 있고 자신만의 아이콘을 만들 수도 있겠죠.

그리고 저장을 하고 확인을 해 보겠습니다.

위로 가기 화살표는 아주 멋지게 적용되었습니다.

그런데 위로 가기를 넣었던 위젯까지 그대로 노출이 되었네요.

이러면 안 되죠.

아무것도 없는 위젯이 노출된다면 방문자의 시선을 흩트릴 수 있고

클릭이 되지 않는 위젯을 보고는 블로그를 더는 탐색하고 싶지 않아 빠져나가게 될 겁니다.

HTML 편집으로도 넣어봤지만 마음에 드는 이미지로 교체가 되지 않고,

그렇다고 수정할 정도의 실력은 없어 한참 동안 여러 가지 스킨을 적용하면서 코드를 찾았습니다.

그런데 답은 아주 가까운 곳에 있었습니다.

위젯을 배치할 때 제목을 적지 않는 겁니다.

그러면 레이아웃에서는 위젯이 표시가 나지만 블로그 화면에서는 보이지 않는다는 겁니다.

그리고 이미지 주소를 바꾸는 방법이 궁금하셨다면 이 자리에 이미지 주소가 들어가면 됩니다.

결과가 나왔습니다.

블로그와 어울리는 위로 가기 화살표가 노출되고 그 화살표를 명령했던 위젯은 보이지 않습니다.

간단했는데 한참 걸렸네요.

2020/10/14 - [블로그] - 구글 블로그 만들기는 스킨부터 잘 골라야 합니다.(구글 블로그 무료 템플릿 사이트)