구글 블로거(Blogger.com / Blogspot)에 랜덤 포스트 버튼(Random Post Button) 달기

요즘은 블로그에 랜덤포스트 버튼이 달린 경우를 많이 보셨을 겁니다. 처음에 이게 뭔가 하는 생각에 눌러 본 일이 있습니다만, 그 뒤로는 사용한 적이 없습니다. 과연 아무 포스트나 보기를 원하는 방문자가 몇이나 될까요?

개인적으로는 쓸데 없는 기능이라고 생각합니다만, 페이지뷰 1~2개라도 늘리고 싶은 분이나, 다른 사정으로 필요로 하는 분이 계시다면 한 번 달아 보실 수도 있겠네요.


1. CSS 스타일 코드
일단 다음의 코드를 원하는 곳에 붙여 넣으세요.
어디에 넣어야 하는지 모르는 생초보를 위해 설명드리면, 블로거 대시보드에 로그인 하셔서 템플릿 메뉴로 가세요. 거기서 Edit HTML 버튼을 눌러 코드 편집창을 열어 ]]></b:skin> 이라는 부분을 검색하여 찾은 다음 그 앞에(윗줄에) 붙여 넣으세요.

 #mbb-random a {
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#mbb-random a::before {
background-color:#ccd0d5;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding:8px;
left:-8px;
top:-8px;
z-index:-1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
#mbb-random a:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}





2. 버튼과 자바 스크립트
다음의 버튼 코드와 자바스크립트를 붙여 넣으세요.


<center><div id="mbb-random"></div></center>

이게 버튼 코드 입니다. 버튼이 위치하기 원하는 곳에 붙여넣으세요.
그리고 다음의 자바스크립트를 붙여 넣으세요. 버튼과 같이 넣든지, <head>와 </head>사이 적당한 곳에 넣든지 알아서 하세요.

<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('mbb-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>

이게 끝입니다. 간단하죠? 문제는 본인이 얼마나 적절한 곳에 적용하느냐 하는 것이 되겠습니다. 잘 어울리도록 CSS 수정하는 것 하구요.

No comments:

Post a Comment

Popular Posts