티스토리 블로그에 'SNS아이콘' 달고 글을 쉽게 공유하게 만들어주세요.

 

사라진 내 SNS아이콘

 

티스토리에는 플러그인으로 SNS로 공유하기 아이콘이 제공되었는데요. 무슨이유에서인지 갑자기 어느날 블로그에서 공유하기 아이콘이 다 사라진거예요. 아무리 뒤져봐도 아이콘은 보이질않고 그래서 공유를 하는것에 불편을 느끼고 직접 공유하기 아이콘을 붙여야겠다고 다짐하고 실행에 옮겼습니다. 저처럼 아이콘 없어지신 분들 쉽게 따라할 수 있도록 알려드릴테니 따라해보세요.

 

원목과 주전자의 완벽한 조화가 아름답다고 표현할 수 있다. 전기포트 추천 ▼

 

 

 

SNS아이콘 글에 삽입하기

 

1. 가장 먼저 블로그관리화면에서 꾸미기 > 스킨 편집으로 이동하세요.

 

 

 

 

2. 각자의 스킨마다 나오는 이름은 다르겠지만 html편집창은 모두 같습니다. 눌러주세요.

 

 

 

 

3. html편집창에서 Ctrl+F키를 눌러서 1번처럼 검색창이 나오게 한다음

 

사라진 내 SNS아이콘

 

티스토리에는 플러그인으로 SNS로 공유하기 아이콘이 제공되었는데요. 무슨이유에서인지 갑자기 어느날 블로그에서 공유하기 아이콘이 다 사라진거예요. 아무리 뒤져봐도 아이콘은 보이질않고 그래서 공유를 하는것에 불편을 느끼고 직접 공유하기 아이콘을 붙여야겠다고 다짐하고 실행에 옮겼습니다. 저처럼 아이콘 없어지신 분들 쉽게 따라할 수 있도록 알려드릴테니 따라해보세요.

 

원목과 주전자의 완벽한 조화가 아름답다고 표현할 수 있다. 전기포트 추천 ▼

 

 

 

SNS아이콘 글에 삽입하기

 

1. 가장 먼저 블로그관리화면에서 꾸미기 > 스킨 편집으로 이동하세요.

 

 

 

 

2. 각자의 스킨마다 나오는 이름은 다르겠지만 html편집창은 모두 같습니다. 눌러주세요.

 

 

 

 

3. html편집창에서 Ctrl+F키를 눌러서 1번처럼 검색창이 나오게 한다음 을 입력한 후 엔터를 눌러 해당위치를 찾아주세요. 2번의 위치에 아래의 내용을 삽입하면 됩니다.

 

 

 

2번의 위치에 삽입해야할 코드입니다. 복사해서 붙여넣기 해주세요.

 

<!--sns 공유하기-->
	<div class="sns-go">
  <ul>
<!-- 네이버 블로그 공유 -->
    <li>
      <a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" ><img src="./images/sns_naver.png" width="40" alt="네이버 블러그 공유하기"></a>
    </li>
<!-- 페이스북 공유 -->		
    <li>
      <a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" ><img src="./images/sns_face.png" width="40" alt="페이스북 공유하기"></a>
    </li>
<!-- 트위터 공유 -->		
    <li>
      <a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" ><img src="./images/sns_tw.png" width="40" alt="트위터 공유하기"></a>
    </li>
<!-- 구글 플러스 공유 -->		
		<li>
      <a href="#" onclick="javascript:window.open('https://plus.google.com/share?url=' +encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=350,width=600');return false;" target="_blank" alt="Share on Google+"><img src="./images/sns_google.png" width="40" alt="구글 플러스 공유하기"></a>
    </li>
<!-- 카카오톡 공유 -->
		<li>
<a href="javascript:shareKatalk()"><img src="./images/sns_ka.png" width="40" alt="카카오톡 공유하기"></a></li>
<!-- 카카오스토리 공유 -->

 

복사가 안되는 분들을 위해서 아래에 txt파일을 올려드리니 파일을 열어서 복사해주세요.

삽입코드1.txt

0.00MB

 

 

 

4. 해당 위치에 붙여넣기한 모습입니다.

 

 

 

 

5. 이제 html편집창 옆에 CSS창을 누르고 아래처럼 코드를 삽입해주세요. CSS코드는 그냥 가장 하단에 붙여넣기해주면 됩니다. 특별한 위치를 찾지않아도 무방합니다.

 

 

/*SNS 공유*/
.sns-go {text-align:center; padding: 20px 0;}
.sns-go li {display:inline-block; margin: 0 5px; }
.sns-go li img {border-radius:50%;}

 

복사가 안되는 분들을 위해서 아래에 txt파일을 올려드리니 파일을 열어서 복사해주세요.

삽입코드2.txt

0.00MB

 

 

 

6. 마지막으로 파일업로드 창을 열고 1번처럼 추가버튼을 눌러 2번과 같이 아이콘을 모두 선택후 업로드 합니다.

 

 

아래의 zip파일을 다운로드 받고 압축을 풀어서 모두 업로드해주세요. 

SNS아이콘이미지.zip

0.02MB

 

이렇게 모두 진행하고 나서 내 블로그의 글을 들어가보면 글하단에 3번의 그림처럼 SNS아이콘이 삽입되어있는것을 확인할 수 있습니다. 이제 자유롭게 클릭하여 SNS에 글을 업로드해주세요.

 

LG전자 디오스 오브제컬렉션 양문형냉장고 7%할인에 카드 8%할인까지 받고 사세요.▼

 

 

 

관련글

 

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

 

티스토리블로그 업로드이미지 용량줄이기 사이트 TinyPNG

티스토리블로그 업로드이미지 용량줄이기 사이트 TinyPNG

 

티스토리블로그 미넴스킨의 H2, H3 제목앞에 바 제거하는 팁

티스토리블로그 미넴스킨의 H2, H3 제목앞에 바 제거하는 팁

 

티스토리블로그 - 형광펜효과 주는 html소스코드

티스토리블로그 - 형광펜효과 주는 html소스코드

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 다양한 어필리에이트 활동으로 수익금을 지급받을 수 있는 링크가 있습니다.
· 이 글은 블로그정보 카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.

반응형

을 입력한 후 엔터를 눌러 해당위치를 찾아주세요. 2번의 위치에 아래의 내용을 삽입하면 됩니다.

 

 

 

2번의 위치에 삽입해야할 코드입니다. 복사해서 붙여넣기 해주세요.

 

<!--sns 공유하기-->
	<div class="sns-go">
  <ul>
<!-- 네이버 블로그 공유 -->
    <li>
      <a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" ><img src="./images/sns_naver.png" width="40" alt="네이버 블러그 공유하기"></a>
    </li>
<!-- 페이스북 공유 -->		
    <li>
      <a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" ><img src="./images/sns_face.png" width="40" alt="페이스북 공유하기"></a>
    </li>
<!-- 트위터 공유 -->		
    <li>
      <a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" ><img src="./images/sns_tw.png" width="40" alt="트위터 공유하기"></a>
    </li>
<!-- 구글 플러스 공유 -->		
		<li>
      <a href="#" onclick="javascript:window.open('https://plus.google.com/share?url=' +encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=350,width=600');return false;" target="_blank" alt="Share on Google+"><img src="./images/sns_google.png" width="40" alt="구글 플러스 공유하기"></a>
    </li>
<!-- 카카오톡 공유 -->
		<li>
<a href="javascript:shareKatalk()"><img src="./images/sns_ka.png" width="40" alt="카카오톡 공유하기"></a></li>
<!-- 카카오스토리 공유 -->

 

복사가 안되는 분들을 위해서 아래에 txt파일을 올려드리니 파일을 열어서 복사해주세요.

삽입코드1.txt

0.00MB

 

 

 

4. 해당 위치에 붙여넣기한 모습입니다.

 

 

 

 

5. 이제 html편집창 옆에 CSS창을 누르고 아래처럼 코드를 삽입해주세요. CSS코드는 그냥 가장 하단에 붙여넣기해주면 됩니다. 특별한 위치를 찾지않아도 무방합니다.

 

 

/*SNS 공유*/
.sns-go {text-align:center; padding: 20px 0;}
.sns-go li {display:inline-block; margin: 0 5px; }
.sns-go li img {border-radius:50%;}

 

복사가 안되는 분들을 위해서 아래에 txt파일을 올려드리니 파일을 열어서 복사해주세요.

삽입코드2.txt

0.00MB

 

 

 

6. 마지막으로 파일업로드 창을 열고 1번처럼 추가버튼을 눌러 2번과 같이 아이콘을 모두 선택후 업로드 합니다.

 

 

아래의 zip파일을 다운로드 받고 압축을 풀어서 모두 업로드해주세요. 

SNS아이콘이미지.zip

0.02MB

 

이렇게 모두 진행하고 나서 내 블로그의 글을 들어가보면 글하단에 3번의 그림처럼 SNS아이콘이 삽입되어있는것을 확인할 수 있습니다. 이제 자유롭게 클릭하여 SNS에 글을 업로드해주세요.

 

LG전자 디오스 오브제컬렉션 양문형냉장고 7%할인에 카드 8%할인까지 받고 사세요.▼

 

 

 

관련글

 

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

 

티스토리블로그 업로드이미지 용량줄이기 사이트 TinyPNG

티스토리블로그 업로드이미지 용량줄이기 사이트 TinyPNG

 

티스토리블로그 미넴스킨의 H2, H3 제목앞에 바 제거하는 팁

티스토리블로그 미넴스킨의 H2, H3 제목앞에 바 제거하는 팁

 

티스토리블로그 - 형광펜효과 주는 html소스코드

티스토리블로그 - 형광펜효과 주는 html소스코드

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 다양한 어필리에이트 활동으로 수익금을 지급받을 수 있는 링크가 있습니다.
· 이 글은 블로그정보 카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.