친절한효자손 취미생활

친효스킨 1.17 버전에서 적용되는 기능인데, 물어보시는 분들이 좀 계셔서 아예 이렇게 따로 언급하는게 더 낫겠다는 생각으로 강좌글을 하나 올립니다. 방법은 어렵지 않습니다. 현재 친효스킨 사이드바에는 프로필 (블로그정보) 모듈이 있습니다. 이 아래에 페이스북, 트위터, 인스타그램, 유튜브, 그리고 이메일로 바로갈 수 있는 아이콘을 배치했습니다. 어떻게 배치하는지 알아보도록 합니다.

 

HTML 수정

먼저 친효스킨의 HTML에서 아래의 영역을 찾습니다. "블로그정보" 라고 검색하면 쉽게 찾을 수 있습니다.

 

<s_sidebar_element>
    <!--블로그정보-->
    <div class="blogInfo rgy-sidebar-title rgy-sidebar-content">
        <h3>블로그정보</h3>
        <ul>
            <li>
                <img class="blogInfoImg" src="[##_image_##]" alt="블로그 이미지">
            </li>
            <li class="blogInfo-text">
                <p>[##_blogger_##]</p>
                <p>[##_desc_##]</p>
            </li>
        </ul>
    </div>
</s_sidebar_element>

이 부분 입니다. 여기를 수정해 줘야 합니다. 아래의 첨부파일에 있는 태그로 모두 교체해주시면 됩니다.

 

친효스킨 블로그정보 SNS 아이콘 HTML.txt
0.00MB

 

위의 첨부파일 중에서 수정해야 할 부분은 다음과 같습니다.

 

<li class="blogInfo-sns">
    <p>
        <a href="#" target="_blank" title="페이스북"><i class="fab fa-facebook-square"></i></a>
        <a href="#" target="_blank" title="트위터"><i class="fab fa-twitter-square"></i></a>
        <a href="#" target="_blank" title="인스타그램"><i class="fab fa-instagram"></i></a>
        <a href="#" target="_blank" title="유튜브"><i class="fab fa-youtube"></i></a>
        <a href="https://www.google.com/gmail" target="_blank" title="이메일"><i class="fas fa-envelope"></i></a>
    </p>
</li>

바로 이 부분 입니다. 먼저 a href="#" 이라고 되어 있는 부분에서 #을 지우고 자신의 계정 URL 주소를 입력하면 됩니다. 예를 들어서 인스타그램의 경우라고 한다면 https://www.instagram.com/자신의계정 이 될 것 입니다. 이런 식으로 나머지 # 부분을 자신의 SNS 계정 URL 주소로 대체하면 됩니다. 이메일 주소 경우에는 그냥 GMail로 바로 갈 수 있도록 해 놨습니다. 원래는 mailto 매소드를 사용할 수 있지만, 이런 경우에는 자주 사용하지 않는 마이크로소프트 아웃룩 익스프레스가 실행 됩니다. 따라서 아웃룩 익스프레스보다 더 사용 효율이 높을 것 같은 지메일 링크로 대체했습니다. URL 링크를 제외한 나머지 부분에서는 수정할것이 없습니다. 다음은 CSS 입니다.

 

CSS 수정

친효스킨 CSS에 아래의 코드를 추가합니다.

 

/* 블로그정보 : SNS 아이콘 추가 */
#sidebar aside .blogInfo li.blogInfo-sns > p {
    margin-bottom: -5px;
    text-align: center;
}

#sidebar aside .blogInfo li.blogInfo-sns > p > a {
    display: inline-block !important;
    padding: 5px;
    width: 18%;
    font-size: 2.5em;
}

#sidebar aside .blogInfo li.blogInfo-sns > p > a::before {
    display: none !important;
}

이 매소드를 CSS의 빈 공간에 삽입하면 됩니다. 따로 수정할 부분은 없습니다. 위의 CSS 스타일 매소드는 아래의 첨부파일에 들어 있습니다. 편하게 다운로드해서 사용하시면 됩니다.

 

친효스킨 블로그정보 SNS 아이콘 CSS.txt
0.00MB

 

이렇게 하면 친효스킨의 블로그정보 프로필 모듈의 맨 아래에 5개의 SNS 아이콘이 생성 완료 됩니다. 하나씩 눌러보시면 자신의 SNS 계정으로 이동하는것을 확인할 수 있을 것 입니다. 끝.

 

 

 

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. Favicon of https://ajedelavie.tistory.com f.필링굿 2020.04.30 03:17 신고

    좋은 정보 감사합니다 스킨 바꾸고 나면 한번 적용해봐야겠어요 ^^

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.04.30 03:20 신고

      안녕하세요, 참고로 친효스킨 1.17 버전에서는 기본으로 적용되어 있습니다. 새 버전은 내일 자정에 업데이트 됩니다.

  2. Favicon of https://welfaretip.com 복지꿀팁 2020.05.17 15:42 신고

    혹시 다른 SNS 아이콘을 등록하고 싶어서 그런데, 다른 SNS 아이콘을 어떻게 연결하면 될까요? 친효스킨 항상 감사히 쓰고 있습니다. 감사합니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.17 15:44 신고

      안녕하세요. 어떤 아이콘인가요?

    • Favicon of https://welfaretip.com 복지꿀팁 2020.05.23 22:31 신고

      네이버 블로그와 카페를 등록하고 싶습니다. 혹시 가능할까요?

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.23 22:33 신고

      현재 폰트 어썸은 글로벌 플랫폼 위주로만 등록 가능합니다. 네이버 블로그나 카페는 국내에서만 자주 사용하는 플랫폼이어서 아이콘이 없어요.

    • Favicon of https://welfaretip.com 복지꿀팁 2020.05.23 23:13 신고

      아! 이 아이콘이 폰트어썸이라는 곳에서 링크로 온 이미지군요. 도무지 어디에 아이콘을 업로드해서 불러온건지 제가 아무것도 모르는 초보라서 이해를 못했었습니다. 고맙습니다! 제가 폰트어썸에서 사용할 수 있는 이미지로 골라서 쓰겠습니다! 감사합니다!!

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.23 23:14 신고

      넵! 파이팅입니다