Fiksioner 테마 버튼 4색 모음

Fiksioner 테마 버튼 4색

오늘은 '블로소득님'이 제안한 블로그 글쓰기에서 사용하는 '링크버튼'을 사용하는 방법을 여러분과 공유합니다. 준비한 버튼을 레드, 블루, 블랙 3가지 색상 버전에다. 그린버튼을 추가했습니다. 먼저 구현되는 버튼은 링크의 글에 따라 길이를 달리해서 보여드립니다. 아래의 코드값은 16진수값을 이용해서 RGB각각의 16진수값(헥사hex값)을 조합하면 우리가 눈으로보는 컬러값을 지정하게 됩니다. 컴퓨터는 2진수와 2진수를 표기하기 쉽게하는 16진수값을 사용해서 프로그램을 하게 됩니다. 그리하여,

버튼 4색 코드 넣는 위치

아래의 코드를 복사하여 어디에 이 코드를 입력해야하는지 알려드리도록 하겠습니다. 우리가 사용하는 블로그스팟, 관리자페이지에 들어가면 왼쪽 사이드바에 '테마', 그리고 '설정' 이 있습니다. 이때 설정을 통해서 우리가 사용하는 스킨(블로그 스팟에서는 테마라고 불립니다.)의 html편집에 들어가 아래의 코드를 입력하고 사용하시면 됩니다.

테마를 누르면 나타나는 화면은 다음과 같습니다. 여기서 맞춤설정의 옆에 있는 역삼각형을 누르면 아래 오른 쪽 이미지처럼 팝업된 메뉴를 만날수 있고 우리는 'html편집'을 선택하여 테마를 편집(주어진 코드를 삽입)하면 됩니다.

편집모드로 들어간 후, 마우스를 테마코드창에 클릭을 한후 CTRL+F키(검색find)를 눌러서 검색창이 오른쪽 상단에 뜨면 그곳에 ]]></b:skin> 입력합니다. 그리고 앤터키를 치면 노란색바탕의 ']]></b:skin>' 코드가 있는 위치를 찾을 수 있습니다.

]]></b:skin>를 이렇게 찾아서 그 위에 코드를 붙여넣기(Ctrl-v)만 하시면 됩니다.

이제 복사(ctrl-c)하여 붙여넣기 할 '버튼코드'를 알아보도록 하겠습니다.

Fiksioner 테마 버튼 4종 코드

아래 코드를 전체선택하고 복사(ctrl-c)하고 앞서 보인 위치에 붙여넣기(ctrl-v)하시면 됩니다.

/* 파란색 버튼 (Button Blue) */
.btn-b {
    display: block !important;
    width: 20% !important;
    padding: 8px 20px !important;
    background-color: #0074D9 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-b:hover {
    background-color: #0056A4 !important;
    color: white !important;
}

/* 빨간색 버튼 (Button Red) */
.btn-r {
    display: block !important;
    width: 40% !important;
    padding: 8px 20px !important;
    background-color: #FF4136 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-r:hover {
    background-color: #E30022 !important;
    color: white !important;
}

/* 검은색 버튼 (Button Black) */
.btn-k {
    display: block !important;
    width: 60% !important;
    padding: 8px 20px !important;
    background-color: #000000 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-k:hover {
    background-color: #333333 !important;
    color: white !important;
}

/* 그린 버튼 (Button Green) */
.btn-g {
    display: block !important;
    width: 80% !important;
    padding: 8px 20px !important;
    background-color: #024702  !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-g:hover {
    background-color: #22ff00 !important;
    color: white !important;
}

버튼 4종 코드 사용법

버튼 코드를 테마에 잘 적용하셨다면 이제 본문에 버튼을 넣어 사용해야 합니다. 본문에 글을 작성한 후에 왼쪽에 있는 연필 모양을 클릭해서 HTML 보기를 누릅니다. 우리가 글을 작성하는 모드는 두가지로 word입력모드과 html 코드입력모드가 있습니다. 대개는 워드 입력으로 문서를 작성하고 이 문서는 html코드로 저장됩니다. 우리는 지금 html모드로 직접들어 가는 것입니다.

아래의 코드는 설정에서 글템플릿에 저장하여 사용하시면 좋습니다. 사용해 보시조!

이 버튼이 만들어 지게 됩니다. 링크이용시 버튼이 생겨 가독성이 올라가는 효과를 느껴보십시요. 감사합니다. 블로소득님께 코드공유에 감사드립니다. 허락없이 참조해서 만들었습니다.