본문 바로가기
블로그

티스토리 버튼의 중요성

by 튜터쌤 2024. 9. 21.

티스토리로 애드센스를 하게 되면 정말 중요한 것이 클릭률이다. 물론 유입수도 중요하지만 클릭을 통한 전면광고를 띄우는 것도 정말 중요하다. 이번시간에는 티스토리에 버튼을 다는 방벙을 알아보도록 하자

 

티스토리 버튼만들기 

티스토리 버튼을 이미지로 만들수도 있지만, CSS를 통해서 버튼을 적용할수 있다. 스킨편집에 CSS 편집으로 들어가 아래 CSS코드를 붙여넣기 후 저장을 해준다. 

.mybluebtn{
    -webkit-text-size-adjust: 100%;
    word-break: break-word;
    background-color: #0404b4;
    border-radius: 28px;
    border: none;
    display: inline-block;
    cursor: pointer;
    color: #faf8f8 !important;
    font-family: Arial;
    font-size: 20px;
    font-weight: 550;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    padding: 10px 35px;
    box-shadow: 2px 4px 6px #646363;
    text-shadow: 0px 1px 0px #bb2154;
    width: 80%;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    transition: background 0.3s, transform 0.3s;
    text-decoration: none;
}
.mybluebtn:hover{
    transform: scale(1.05);
    background-color: #5353b1;
    text-decoration: underline;
}

 

CSS코드를 등록했다면 서식에 아래 코드를 넣어주고 "링크"위치에 이동할 링크주소를 입력하고 포스팅에 버튼으로 넣어준다. 그리고 버튼 이름을 바로가기 같은 이름으로 변경해 주면 된다. 

<center><a class="mybluebtn" href="링크"> 버튼 이름</a></center>

 

 

티스토리 버튼만들기 주의사랑

TMHL코드에 새로운 창열기로 하게 되면 전면광고가 나오지 않는다. 떄문에  target="_blank" 가 있다면 삭제해 주거나 링크를 걸때 새창으로 열기에 체크를 풀고 링크를 걸어주어야 한다. 하지만 이렇게 해도 가끔씩 코드가 변경되는 경우가 있기 때문에 HTML코드를 서식으로 만들어두고 불러오기 하는 방법이 가장 좋다.