티스토리 블로그 : 항상 따라다니는 링크버튼의 수정과 다른 스타일보기

 

 

 

바람1223님이 요청하셨어요

링크버튼을 적용했는데 글자가 많아지면 2줄로 변하는 현상이 나와서 불편하신것 같아요. 저도 그 현상을 발견했지만 2줄도 나쁘지않은것 같아서 그대로 두었는데 1줄이 깔끔한것 같기도해서 다시 변경된 소스코드를 아래에 소개해드릴께요.

 

컴퓨터하는데 손목이 아프거나 뼈가 찌릿찌릿하다면 버티컬마우스를 추천드려요.

 

 

 

글자 1줄로 적용한 소스코드

이 소스코드는 CSS만 그대로 복사해서 다시 적용하면 되기에 별도의 html코드는 알려드리지않겠습니다. 이 글을 먼저 읽으시는 분들은 아래의 먼저 작성한 글을 보고 이 글을 읽어주세요.

 

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

 

 

 

글자를 1줄로 만들어주는 수정코드

이 코드는 PC버전에서만 1줄로 작동할 수 있습니다.

/* 플로팅 버튼 시작 */
/* 콤마군 https://commagun.tistory.com/ */
.float-button-container { 
    z-index: 1000; /* 다른 요소들보다 앞에 배치되도록 설정 */
    position: fixed; /* 스크롤해도 화면의 고정된 위치에 버튼이 위치하도록 설정 */
    left: 50%; /* 화면의 수평 중앙에 배치 */
    bottom: 140px; /* 화면의 아래에서 140px 위로 배치 */
    transform: translateX(-50%); /* 정확히 가운데 정렬되도록 설정 */
    display: flex; /* 플렉스 박스를 사용하여 내부 요소를 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    padding: 0 10px; /* 좌우 여백 설정 */
    height: 60px; /* 높이 설정 */
    border-radius: 12px; /* 모서리를 둥글게 설정 */
}

.float-button { 
    width: auto; /* 버튼의 너비를 자동으로 설정 */
    max-width: calc(100% - 40px); /* 최대 너비를 화면 너비에서 40px 뺀 값으로 설정 */
    margin: 0 auto; /* 수평 중앙 정렬 */
    box-shadow: 0px 10px 14px -7px #000000; /* 그림자 설정 */
    background-color: #000000 !important; /* 배경색을 검정색으로 고정 */
    border-radius: 10px; /* 모서리를 둥글게 설정 */
    display: block; /* 블록 요소로 설정 */
    cursor: pointer; /* 마우스 커서가 포인터로 변경 */
    color: #ffffff !important; /* 글자색을 흰색으로 고정 */
    font-family: Arial; /* 글꼴을 Arial로 설정 */
    font-size: 20px; /* 폰트 크기 설정 */
    font-weight: bold; /* 글자 굵기를 볼드체로 설정 */
    padding: 20px 40px; /* 패딩 설정 (위아래 20px, 좌우 40px) */
    text-decoration: none; /* 텍스트의 밑줄 제거 */
    text-align: center; /* 텍스트를 중앙 정렬 */
    transition: transform 0.2s; /* 트랜지션 효과 설정 */
    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
}

.float-button:hover { 
    background-color: #ff0000 !important; /* 배경색을 빨간색으로 변경 */
    color: #ffffff !important; /* 글자색을 흰색으로 고정 */
    transform: translateY(-5px); /* 버튼이 5px 위로 이동 */
    box-shadow: 0px 10px 14px -7px #333333; /* 그림자 색상을 약간 밝게 변경 */
}

.float-button:active { 
    position: relative; /* 부모 요소에 상대적인 위치 설정 */
    top: 1px; /* 클릭 시 버튼이 1px 아래로 이동 */
}

/* 모바일 화면 전용 스타일 */
@media screen and (max-width: 768px) { 
    .float-button {
        font-size: 4vw; /* 모바일 화면에서 폰트 크기를 화면 너비의 4%로 설정 */
        padding: 15px 20px; /* 패딩을 줄여서 텍스트가 한 줄에 나오도록 설정 (위아래 15px, 좌우 20px) */
    }
}
/* 플로팅 버튼 끝 */

 

위의 코드가 복사가 안되는 분들은 아래의 txt파일을 다운로드 받아서 안의 내용을 복사해 css편집창에 붙여넣기 하세요.

콤마군-플로팅 링크버튼 css코드복사2번.txt

0.00MB

 

 

 

버튼의 다른 스타일 소스코드

버튼이 그냥 단색의 색상만을 가지고 있어서 뭔가 심심하거나 잘 눈에 안띈다고 생각했다면 이 소스코드로 변경하시는것도 고려해보세요. 이 코드는 주기적으로 버튼의 테두리 색상이 변경되면서 방문자의 시선을 끌 수 있습니다. 색상을 변경하는것도 가능하니 원하는 색상으로 변경해보시는것도 좋습니다.

 

 

 

테두리 색상이 바뀌는 css소스코드

 

/* 플로팅 버튼 시작 */
/* 콤마군 https://commagun.tistory.com/ */
.float-button-container {
    z-index: 1000; /* 다른 요소들보다 앞에 배치되도록 설정 */
    position: fixed; /* 스크롤해도 화면의 고정된 위치에 버튼이 위치하도록 설정 */
    left: 50%; /* 화면의 수평 중앙에 배치 */
    bottom: 140px; /* 화면의 아래에서 140px 위로 배치 */
    transform: translateX(-50%); /* 정확히 가운데 정렬되도록 설정 */
    display: flex; /* 플렉스 박스를 사용하여 내부 요소를 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    padding: 0 10px; /* 좌우 여백 설정 */
    height: 60px; /* 높이 설정 */
    border-radius: 12px; /* 모서리를 둥글게 설정 */
}

@keyframes sparkle {
    0% {
        box-shadow: 0 0 2px #FFFF00, 0 0 4px #FFFF00, 0 0 6px #FFFF00, 0 0 8px #FFFF00, 0 0 10px #FFFF00, 0 0 12px #FFFF00;
    } /* 버튼의 테두리 색상을 바꾸려면 #FFFF00을 다른 색상으로 바꿀 수 있습니다 */
    50% {
        box-shadow: 0 0 4px #FFA500, 0 0 8px #FFA500, 0 0 12px #FFA500, 0 0 16px #FFA500, 0 0 20px #FFA500, 0 0 24px #FFA500;
    } /* 버튼의 테두리 색상을 바꾸려면 #FFA500을 다른 색상으로 바꿀 수 있습니다 */
    100% {
        box-shadow: 0 0 2px #ff0000, 0 0 4px #ff0000, 0 0 6px #ff0000, 0 0 8px #ff0000, 0 0 10px #ff0000, 0 0 12px #ff0000;
    } /* 버튼의 테두리 색상을 바꾸려면 #ff0000을 다른 색상으로 바꿀 수 있습니다 */
}

.float-button {
    width: auto; /* 버튼의 너비를 자동으로 설정 */
    max-width: calc(100% - 20px); /* 최대 너비를 화면 너비에서 20px 뺀 값으로 설정 */
    margin: 0 auto; /* 수평 중앙 정렬 */
    box-shadow: 0px 10px 14px -7px #000000; /* 그림자 설정 */
    background-color: #000000 !important; /* 배경색을 검정색으로 고정 */
    border-radius: 10px; /* 모서리를 둥글게 설정 */
    display: block; /* 블록 요소로 설정 */
    cursor: pointer; /* 마우스 커서가 포인터로 변경 */
    color: #ffffff !important; /* 글자색을 흰색으로 고정 */
    font-family: Arial; /* 글꼴을 Arial로 설정 */
    font-size: 20px; /* 폰트 크기 설정 */
    font-weight: bold; /* 글자 굵기를 볼드체로 설정 */
    padding: 20px 40px; /* 패딩 설정 (위아래 20px, 좌우 40px) */
    text-decoration: none; /* 텍스트의 밑줄 제거 */
    text-align: center; /* 텍스트를 중앙 정렬 */
    transition: transform 0.2s; /* 트랜지션 효과 설정 */
    animation: sparkle 2s infinite; /* 반짝이는 효과 애니메이션 설정 */
}

.float-button:hover {
    background-color: #ff0000 !important; /* 배경색을 빨간색으로 변경 */
    color: #ffffff !important; /* 글자색을 흰색으로 고정 */
    transform: translateY(-5px); /* 버튼이 5px 위로 이동 */
    box-shadow: 0px 10px 14px -7px #333333; /* 그림자 색상을 약간 밝게 변경 */
}

.float-button:active {
    position: relative; /* 부모 요소에 상대적인 위치 설정 */
    top: 1px; /* 클릭 시 버튼이 1px 아래로 이동 */
}

/* 모바일 화면 전용 스타일 */
@media screen and (max-width: 768px) {
    .float-button {
        font-size: 4vw; /* 모바일 화면에서 폰트 크기를 화면 너비의 4%로 설정 */
        padding: 15px 20px; /* 패딩을 줄여서 텍스트가 한 줄에 나오도록 설정 (위아래 15px, 좌우 20px) */
    }
}
/* 플로팅 버튼 끝 */

 

콤마군-테두리색상이 바뀌는 버튼 css코드.txt

0.00MB

 

 

 

위의 코드를 적용하면 아래와 같이 노랑 > 주황> 적색의 순서대로 테두리 색상이 반짝이며 바뀌는 것을 보실 수 있습니다. 버튼의 css만 이소스코드로 변경하여 적용하고 버튼을 html코드로 적용하는것은 모두 같게 해주시면 되겠습니다.

 

컴퓨터하는데 손목이 아프거나 뼈가 찌릿찌릿하다면 버티컬마우스를 추천드려요.

 

 

 

이글이 도움이 되었다면 공감과 댓글을 부탁드립니다.

 

 

 

관련링크

 

이 글의 썸네일처럼 나도 쉽게 썸네일을 만들어보고싶다 생각하면 클릭

 

내 썸네일도 만들어보기

 

 

이 블로그에 쓰인 스킨 다운로드 받아서 내 블로그에 적용해보기

 

이 스킨 다운로드

 

 

 

관련글

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

 

티스토리 블로그에 글을 복사,붙여넣기 할 때   코드 삭제해주는 사이트

티스토리 블로그에 글을 복사,붙여넣기 할 때   코드 삭제해주는 사이트

 

티스토리 블로그 미넴스킨 링크스타일 변경하기

티스토리 블로그 미넴스킨 링크스타일 변경하기

 

 

 

참고하세요

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 쿠팡, 알리익스프레스등의 파트너스 활동으로 인한 수익금을 얻는 링크가 있습니다.
· 이 블로그의 홈으로 가시려면 여기를 누르셔도 됩니다.

 

📣 먼저 알려드린 버튼 적용글 보기