목차
구독버튼과 공유버튼 소스 공유 합니다
제 블로그 스킨에 보면 뭔가 요상 스러운 것들이 좀 많이 있습니다. 블로그에 가끔 소개 드리는 내용들로 블로그에 도움이 되는 웹서비스나 소셜 네트워크 서비스(SNS) 트위터나 미투데이등의 버튼들 그리고 관련된 서비스들이나 기타등등 정체를 알수 없는 웹 위젯부터 약간 독특한 형태의 상단 배너까지 달려있고요. 여러가지 다양한 것들을 직접 적용해서 사용을 해보고 관련 글을 적느라 제 블로그는 로딩이 좀 느리고 무거운 편입니다.
그리고 블로그를 찾아주시는 분들이 스킨의 이런 부분들을 보시고 마음에 드셨는지 특정 부분이나 스킨전체를 공유를 해달라고 댓글이나 이메일등으로 요청을 하시는 분들이 종종 있습니다. 모든 분들에게 일일이 같은 내용을 답변을 드리기 버거워 이글을 쓰고 링크로 활용하려고 이렇게 글을 써봅니다.
스킨은 공유 할 수 없습니다
일단 스킨 전체를 공유해달라고 하시는분들에게 제가 사용하는 스킨은 3~4년전쯤에는 무료로 배포가 되던 무료 워드프레스 테마였습니다. 작년에 티스토리 블로그로 이전해 오기 전까지는 제가 워드프레스와 익스프레스 엔진, 제로보드를 사용을 했었는데 그당시 다운을 받아 사용을 하던것으로 티스토리로 이전을 하면서 몇가지 워드프레스 테마를 컨버팅한것중 하나로 revolutiontwo 라는 곳에서 배포를 하던것인데 현재는 제작자 사이트가 바뀐것인지 판권을 양도 한것인지는 알수 없지만 studiopress 라는 곳에서 상용버전으로 바뀌여 판매가 되고 있습니다. 데모페이지 – https://www.studiopress.com/demo/church.html
아시는 분들은 아실테지만 제가 컨버팅한 현재의 스킨을 사용중인 블로그가 몇곳이 있긴 합니다. 잘 알고 지내는 블로그이고 도저히 거절을 하다하다 안되어 재공유를 절대 하지 말라고 다짐을 받고 공유를 했었는데 라이센스상 제 마음대로 배포와 공유를 할수가 없는 라이센스입니다. 자꾸 공유를 해달라고 하시면 결국 저는 공유를 해드릴수밖에는 없고 결국 저는 잘못된 행동을 하게 되는것이니 앞으로 더이상은 현재 사용중인 스킨에 대해 공유를 해달라는 요청을 하지 말아주셨으면 하고 부탁을 드립니다.
요청 하시면 100% 공유 해드리겠습니다
블로그 스킨중 소셜 네트워크 서비스(SNS)관련 버튼이나 공유버튼, RSS피드 구독버튼들 그외에 추가된 부분적인 소스는 요청을 하시면 100% 공유를 해드리겠습니다. 어차피 HTML과 CSS를 좀 아시는 분들은 공유 요청을 할것도 없이 소스만 보시면 금방 뽑아 사용을 하실수 있을것이라 판단이 되니 이런 요청을 하시는 분들은 HTML에 대해 잘 모르시는 분들이니 시간이 되는대로 자세하게 글을 써서 올려놓겠습니다.
요청이 들어와 있는것이 블로그 상단 우측의 배너에 위치한 이미지 슬라이드쇼로 여러 이미지를 슬라이드쇼 형식으로 미려하게 보여주는 형태입니다. 텍스트 문구도 좀더 멋드러지게 넣을수 있는 형태로 티스토리에서 최근글에 대한 치환자를 공개해주면 첫화면에 써먹으려고 대충 쑤셔놓고 로딩시간좀 체크해보고 있네요. 조만간 정리해서 올려놓겠습니다.
이번에 믹시가 먹통이 되어 본문 하단부분을 정리를 하면서 포스트 쉐어 기능의 버튼은 좌측으로 얼추 빼놓은 상태인데 IE6에서 position:fixed 가 안먹어 이부분은 소스를 공개를 하더라도 제대로 구현하기는 쉽지 않을듯 보입니다.
간단한 공유 버튼을 스킨에 설치하는 정도와는 차원이 다르기 때문에 블로그에 적용하려고 도전을 하는 블로거들이 생고생을 할 위험이 많기 때문에 좀 위험스러운데.. 일단 요청이 들어온거니 관련 글을 시간나는대로 적어 올리겠습니다. 어려울수도 쉬울수도 있긴한데..
메타사이트와 RSS피드 구독 버튼 소스
일단 오늘은 많은 분들이 요청을 하시는 부분으로 블로그 본문 하단의 구독 버튼 이미지와 소스를 공개를 해드리겠습니다.
좌측부터 펌플 공유버튼, 믹시 마이글 리스트, 올블로그 마이글 리스트, 블로그코리아 리스트, 구글 구독, 이메일 구독, 마이야후 구독, 트위터, 피드구독, 다음뷰 구독 입니다. 불펌을 막기 위해 소용도 없는 우클릭을 막아두었지만 그래도 드래그가 안되는 분이 있을 터이니 하단 소스 설명을 잘 보시고 .txt 첨부파일 받으시고 수정을 하시면 되겠습니다.
title=”러드브웹” alt=”lovedweb” 두가지 문구는 공통적으로 원하는 문구를 넣으셔도 되고 수정을 하지 않으셔도 상관이 없고 width=”36″ height=”36″ 아이콘 이미지의 가로 세로는 원하는 크기로 수정을 하시면 되고 이미지 경로가 src=”./images/i-mixsh.webp” 이런형태이면 티스토리의 경우 관리자 페이지 HTML/CSS 편집->파일 업로드탭을 통해 해당 이미지를 업로드 하셔야 합니다.
<!– HTML에 추가할 소스 –>는 티스토리의 경우 관리자 페이지 HTML/CSS 편집에서 상단의 skin.html에 소스를 추가를 하시면 되고 본문하단쯤 적당한 위치에 넣어주시면 되고 /* CCS 에 추가할 소스 */ 는 하단의 style.css에 추가를 해주시면 됩니다.
<!– 내용 –> /* 내용 */ 이런식으로 주석 처리된 부분은 삭제 해도 안해도 상관 없습니다.
더보기
<!– HTML에 추가할 소스 –> <div class=”metablog_Div_2″> <div style=”float:left; margin-right: 5px; “> <a href=”https://www.pumpl.com/submit” onclick=”document.location.href = ‘https://www.pumpl.com/submit?url=’ + encodeURIComponent(location.href)+ ‘&title=’ + encodeURIComponent(document.title); return false”><img src=”https://www.pumpl.com/sites/all/themes/drigg_theme/img/pumplus.webp” border=”0″ width=”36″ height=”36″ /></a> </div> <!– 믹시 로그인후 상단우측 블로그관리 클릭 -> 좌측의 등록된 블로그 클릭시 주소창의 URL로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://mixsh.com/media/46729″ onclick=”window.open(this.href); return false” alt=”믹시” title=”믹시”> <img src=”./images/i-mixsh.webp” title=”믹시” width=”40″ height=”40″ alt=”믹시” /></a> </div> <!– 올블 검색창에서 본인의 블로그명으로 블로그 검색후 주소창의 URL로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://search.allblog.net/?keyword=%EB%9F%AC%EB%B8%8C%EB%93%9C%EC%9B%B9&type=100&sort=1&page=1&view=issue” onclick=”window.open(this.href); return false” alt=”올블로그” title=”올블로그”> <img src=”./images/i-allbl2.webp” title=”올블로그” width=”40″ height=”40″ alt=”올블로그” /></a> </div> <!– 블코 로그인후 상단우측 내글목록 클릭시 주소창의 URL로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=521530″ onclick=”window.open(this.href); return false” alt=”블로그코리아” title=”블로그코리아”> <img src=”./images/i-blko.webp” title=”블로그코리아” width=”40″ height=”40″ alt=”블로그코리아” /></a> </div> <!– 구글구독 본인 블로그 RSS피드 주소로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://fusion.google.com/add?feedurl=https://feeds2.feedburner.com/Lovedweb” onclick=”window.open(this.href); return false” alt=”iGoogle or 구글리더로 구독하기” title=”iGoogle or 구글리더로 구독하기”> <img src=”./images/Google.webp” title=”iGoogle or 구글리더로 구독하기” width=”40″ height=”40″ alt=”iGoogle or 구글리더로 구독하기” /></a> </div> <!– 이메일구독 피드버너 본인 피드명으로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://feedburner.google.com/fb/a/mailverify?uri=Lovedweb&loc=en_U” onclick=”window.open(this.href); return false” alt=”Email로 구독하기” title=”Email로 구독하기”> <img src=”./images/GMail.webp” title=”Email로 구독하기” width=”40″ height=”40″ alt=”Email로 구독하기” /></a> </div> <!– 마이야후 구독 본인 블로그 RSS피드 주소로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://kr.my.yahoo.com/rss?url=https://feeds2.feedburner.com/Lovedweb” onclick=”window.open(this.href); return false” alt=”myYahoo에 추가 하기” title=”myYahoo에 추가 하기”> <img src=”./images/Yahoo 2.webp” width=”40″ height=”40″ title=”myYahoo에 추가 하기” alt=”myYahoo에 추가 하기” /></a> </div> <!– 트위터 본인의 트위터 아이디로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://twitter.com/lovedweb” onclick=”window.open(this.href); return false” alt=”트위터 Follow” title=”트위터 Follow”> <img src=”./images/Twitter 2.webp” width=”40″ height=”40″ title=”트위터 Follow” alt=”트위터 Follow” /></a> </div> <!– 피드구독 본인 블로그 RSS피드 주소로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://feeds2.feedburner.com/Lovedweb” onclick=”window.open(this.href); return false” alt=”RSS 구독하기” title=”RSS 구독하기”> <img src=”./images/RSS 2.webp” width=”40″ height=”40″ title=”RSS 구독하기” alt=”RSS 구독하기” /></a> </div> <!– 다음뷰구독 본인 블로그 주소로 수정할것 –> <div style=”float:left; margin-right: 5px; “> <a href=”https://v.daum.net/user/plus?blogurl=https://loved.pe.kr” onclick=”window.open(this.href); return false” alt=”다음뷰 구독하기” title=”다음뷰 구독하기”> <img src=”./images/bt_plus_b03.webp” width=”40″ height=”40″ title=”다음뷰 구독하기” alt=”다음뷰 구독하기” /></a> </div> </div> <!– HTML 소스 끝–> /* CCS 에 추가할 소스 */ .metablog_Div_2 { border:1px solid #E5E5E5; /* 박스테두리 굵기와 색상 */ margin:0px 0px 10px 0px; /* 순서대로 상단 우측 하단 좌측 외부 여백 */ padding:5px; /* 안쪽 여백 */ height: 40px; /* 박스 높이 */ } |
메타사이트와 RSS피드 버튼 이미지
사용된 이미지는 Social and Web Icons by =umar123 제작으로 CC by-nc-nd 로 저작자표시 상업적이용금지 변경금지 라이센스로 사용을 하실수가 있습니다. 개인 블로그일 경우 사용과 배포는 저작권자 표시만으로 누구나 가능한 라이센스입니다. 이미지 형식은 PNG 파일로 64 x 64 크기이며 총 57개이니 맘에 드시는것을 사용하시면 되겠습니다. 제가 사용한 10개의 이미지중 펌플에서 끌어다 사용을 하는 이미지를 제외한 9개는 별도로 .zip 압축파일로 올립니다.
메타 사이트 믹시, 올블로그, 블로그코리아 이미지는 krang 님께서 제작 배포중이신 이미지 인데 예전에 CSS 메뉴 메타사이트 추천버튼 공유 에서 이미지에 대한 배포를 허락을 받은 상태입니다. 해당 이미지가 첨부된 lovedweb.zip 파일에는 해당 이미지가 포함 되어 있기때문에 사용은 자유이나 재배포에 대한 권한이 제게 없어 재배포는 금지가 되겠습니다.
원 제작자 krang 님의 아이폰 스타일 메타블로그 추천버튼 2탄!(https://krang.tistory.com/378)
좀 다른 형태의 이미지가 필요하신 분은 이것을 다운 받으시고 수정을 하시면 되겠습니다.
CC by-sa 3.0 Unported License. by icondock(https://icondock.com/free/vector-social-media-icons)
귀차니즘으로 구글번역:
맛, 플리커, 트위터, Retweet 버튼을, 페이스북, 마이스페이스, StumbleUpon, 디그, 슬래시 닷, Mixx, 스카 이프, 테크노, Reddit, FriendFeed, 유튜브, 링크드인, Newsvine, SlideShare, 구글, 구글 토크, 야후, 야후 버즈 , netvibes에, AOL은, 마이크로 소프트, MSN 친구, 애플, MobileMe, 응용 프로그램 스토어, 아마존, Last.fm, ‘미스터 웡, Qik, Vimeo, Viddler, Virb, Tumblr, 워드 프레스, Blogger에 복사, Posterous, Behance 네트워크, 디자인 플로트, 일탈의 꿈 — 아트, 디자인 범프, 프렌드 스터, 베보, Squidoo, 공유했고, RSS, 및 이메일
이미지 형식은 PNG 파일로 16 x 16, 64 x 64 크기이며 각 74개 씩입니다. social media vector set.eps 파일이 제공되니 능력되시면 수정을 하시고 사용을 하시면 되겠습니다.
트위터를 사용하시는 분은 @lovedweb 으로 문의를 하시면 알려드리겠지만 가급적이면 블로그 댓글로 문의를 하세요. 댓글이 너무 안달려서 요즘 너무 썰렁 합니다~