Material T 스킨 상단바 고정 공유버튼 (고급)
지난번 글을 통해 티스토리에서 제공하는 공유버튼을 항상 고정시키는 방법을 알아봤습니다.
하지만 애드센스 정책위반이 염려되는 부분이 있기때문에 애드센스를 이용중인 블로그는 사용을 권장하지 않았는데요.
오늘 소개해드릴 내용은 애드센스 정책위반을 하지 않고 공유버튼을 항상 보이게 하는 방법에 대한 것입니다.
스킨과 통합이 필요하기 때문에 이번글은 Material T 스킨에 한정된 내용입니다.
애드센스 정책중에서 의도하지않은 광고클릭, 오버랩되는 레이아웃 부분이 문제가 되는 부분인데요,
이 정책의 요지는 어떤 요소라도 광고위에 오버랩되어서 의도하지않은 클릭을 유도한다면 정책위반에 해당한다는것입니다.
애드센스로부터 확인받은 내용을 소개해드리자면
공유버튼이 헤더에 위치하는것은 괜찮지만 의도하지 않은 클릭이 발생하지 않도록 충분히 거리를 두라고 하고있습니다.
추가적으로 material T에 적용된 메뉴(좌측상단)를 클릭했을때 나타나는 드로워가 광고와 오버랩되는 부분에 대해서 material T 스킨은 오버랩되는 상황에서 백그라운드의 클릭을 방지하는 조치를 취하고 있으므로 정책위반에 해당하지 않는다고 하고 있습니다.
이건 제 추측이지만 애드센스에서 정책위반으로 패널티를 부여할 때는 의도하지 않은 클릭등의 지표가 올라갔을 때 인것같습니다. 모든 웹페이지를 일일히 확인할 수는 없고 비정상적으로 큰 무효클릭등의 지표가 발견되면 확인하는 방식일 것이기 때문에 애초에 의도하지 않은 클릭을 방지하고있다면 점검을 받을 일도 없지 않을까요?
아래부터 소개해드리는 코드는
상단헤더에 공유버튼을 넣어도 좋다는점과 의도하지않은 클릭은 발생하지 않아야된다는 점을 모두 고려해서
상단바에 공유버튼을 띄우되 일정부분은 클릭이 되지 않도록 해서 정책위반을 방지하는 방법입니다.
실제 적용하면 위 스크린샷 처럼 공유버튼들이 나타나게되고
그아래 붉은색 박스부분은 실제로 클릭이나 터치를해도 터치가되지 않도록했습니다.
(실제로는 투명해서 보이지 않습니다.)
의도하지 않은 클릭을 방지해줄 수 있겠죠?
추가로 블로그 제목도 노출이 되어야하므로 스크롤을 내리는중에는 공유버튼이, 스크롤을 올리는 중에는 블로그 제목이 나타나도록 했습니다.
(물론 검색버튼을 눌렀을때는 공유버튼이 사라집니다.)
(참고, - 아래로 스크롤하면 사라졌다가 위로 스크롤하면 나타나는 상단바)
적용하는 방법
아래 코드를 스킨편집 - html수정으로 들어가 맨 밑에서 2번째줄, 즉 </body>뒤에 붙여넣습니다. (</html> 윗줄)
<script>
$('.layer_sns .bg_layer, .layer_sns .btn_close').remove();
$('.layer_sns').css({
'position': 'relative',
'display':' block'
});
$('.layer_sns .list_sns').css({
'position': 'absolute',
'top':' 0',
'left':'calc(50% - 144px)',
'padding':' 4px 0 0',
'margin':' 0 auto',
'border-radius':' unset',
'border':' unset',
'height':' auto',
'text-align':' center',
'background':'none'
});
$('.layer_sns .list_sns li').css({
'float':'none',
'display':' inline-block',
'margin':' 0px',
'list-style':' none',
'transform':' scale(0.7)'
});
$("header").append($(".layer_sns"));
setTimeout(function(){
$('.container_postbtn .postbtn_like label:has(.ico_sns)').click().css({
'display': 'none'
});
$('.layer_sns').hide();
},1000);
var didScroll=false;
var lastScrollTop = 0;
var delta = 5;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if( $("#searchBox").hasClass("opened") ) {
$('.layer_sns').hide();
}
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta) return false;
if (st > lastScrollTop && st > delta){
// Scroll Down
$('header h3').hide();
$('.layer_sns').show();
} else {
//Scroll up
if(st + $(window).height() < $(document).height()) {
$('header h3').show();
$('.layer_sns').hide();
}
}
lastScrollTop = st;
}
</script>
<style>
header::after {
content: "";
display: block;
width: 100%;
height: 50px;
position: absolute;
top: 56px;
}
</style>
주의사항
자칫하면 애드센스 정책을 위반할 수 있기때문에 정책에대한 이해가 있는 상태에서 본문을 적용하시기바랍니다.
상단바 아래로 50px은 앞으로 클릭이나 터치가 되지 않으므로 너무 면적이 크다 싶으면 빨간색 50을 적당한 숫자로 변경해서 사용하세요.
일부 게시글에서 신고창팝업이뜨던 문제는 수정했습니다.
