현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 쇼핑몰에 SNS 배너(아이콘) 추가하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2022-03-18
  • 추천 추천하기
  • 조회수 22






































































































 






























































---------------------------------------------------------------------------



PC디자인에 SNS배너를 노출시키시려면

아이콘 이미지들을 파일업로드를 이용하여 업로드 해주세요.

공통 레이아웃 하단에 아래 소스를 넣어주세요.


<!-- SNS 배너 -->

<div class="banner_sns_outer">

      <ul class="banner_sns">

      <li><a href="https://blog.naver.com" target="_blank"><img src="/web/upload/byulmoa17/images/banner_blog.jpg" alt="블로그" border="0"></a></li>

      <li><a href="https://cafe.naver.com" target="_blank"><img src="/web/upload/byulmoa17/images/banner_cafe.jpg" alt="카페" border="0"></a></li>    

      <li><a href="https://instagram.com" target="_blank"><img src="/web/upload/byulmoa17/images/banner_instar.jpg" alt="인스타그램" border="0"></a></li>

      <li><a href="https://facebook.com" target="_blank"><img src="/web/upload/byulmoa17/images/banner_facebook.jpg" alt="페이스북" border="0"></a></li>

       <li><a href="https://facebook.com" target="_blank"><img src="/web/upload/byulmoa17/images/banner_twiter.jpg" alt="트위터" border="0"></a></li>      

       <li><a href="https:/youtube.com" target="_blank"><img src="/web/upload/byulmoa17/images/banner_youtube.jpg" alt="유튜브" border="0"></a></li>  

     </ul>

      </div><br />



main_contents.css 파일 하단에 아래 소스를 넣어주세요.



/* 하단 블로그, 카페, 인스타그램, 페이스북 배너 */

.banner_sns_outer { width:100%; text-align:center; }

.banner_sns { margin:0 auto 0 -20px;  padding-top:5px; }

.banner_sns li { display:inline-block;  }

.banner_sns li img { padding-left:20px; }



------------------------------------


모바일 디자인에 SNS 아이콘 삽입시

아이콘 이미지들을 파일업로드를 이용하여 업로드 해주세요.



공통 레이아웃 layout.html 페이지 하단에 아래 소스를 넣어주세요.



  <!-- 블로그, 카페, 인스타그램, 페이스북 유튜브 배너 -->

      <div class="banner_sns_outer">

      <ul class="banner_sns">

      <li><a href="https://blog.naver.com" target="_blank"><img src="/web/upload/b_mobile83/images/banner_blog.png" alt="블로그" border="0"></a></li>

      <li><a href="https://cafe.naver.com" target="_blank"><img src="/web/upload/b_mobile83/images/banner_cafe.png" alt="카페" border="0"></a></li>    

      <li><a href="https://instagram.com" target="_blank"><img src="/web/upload/b_mobile83/images/banner_instar.png" alt="인스타그램" border="0"></a></li>

      <li><a href="https://facebook.com" target="_blank"><img src="/web/upload/b_mobile83/images/banner_facebook.png" alt="페이스북" border="0"></a></li>   

       <li><a href="https:/youtube.com" target="_blank"><img src="/web/upload/b_mobile83/images/banner_youtube.png" alt="유튜브" border="0"></a></li>  

     </ul>

      </div>




layout.css 파일 하단에 아래 소스를 삽입해주세요.



/* 하단 블로그, 카페, 인스타그램, 페이스북 배너 */

.banner_sns_outer { width:100%; text-align:center; }

.banner_sns { margin:0 auto 0 -20px;  padding-top:5px; }

.banner_sns li { display:inline-block;  }

.banner_sns li img { width:35px; height:auto; padding-left:20px; }




첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.