X

CSS 메뉴 메타사이트 추천버튼 공유합니다

지금은 없지만 블로그 본문 하단 부분에 사용하던 메타 버튼들입니다. brainchaos님께서 공유 좀 해 달라하여 게시물로 작성하네요. 마우스 롤오버 시 오뚜기(?) 두더지게임 처럼 쑤~욱 올라오는데요. IE6에서는 아무 반응도 없을겁니다. IE6이 원체 쓰레기이니 브라우저를 업그레드 하세요. 이미지는 krang 님께서 제작 배포중이신 이미지 인데 제가 약간 수정만 했습니다.

원 배포페이지 : https://krang.tistory.com/378 아이폰 스타일 메타블로그 추천버튼 2탄!

이미지의 저작권은 krang 님에게 있습니다. 공유를 허락해주셔서 감사드립니다. ^^ 이미지의 모든 권한은 저에게 없으므로 별도의 문의는 krang 님에게 하시면 됩니다.


공유 버튼

이미지를 다운로드 받아 업로드 하시고(우측에 빈 여백이 있으니 추가로 이미지 넣어 사용하세요)

1.skin 소스를 skin.html 원하시는 위치에 넣으시고
2.style 소스는 style.css 제일 아래 넣어주시면 됩니다. 참 쉽죠~~

수정할 곳

소스 내용은 자신의 계정에 맞게 수정하셔야 합니다.

블로그코리아 = 로그인 후 상단 우측 내 글 목록 클릭 시 주소 창의 URL
믹시 = 로그인 후 상단 우측 블로그 관리 클릭 -> 좌측의 등록된 블로그 클릭 시 주소 창의 URL
올블로그 = 검색 창에서 본인의 블로그 명으로 블로그 검색 후 주소 창의 URL
다음뷰 = https://bloggernews.media.daum.net/reporter/본인아이디
한RSS = https://www.hanrss.com/add_sub.qst?url=https://사이트 피드 주소
RSS = 사이트 피드 주소

1.skin

 <div class=”metablog”>
<ul class=”socials”>
   <li class=”blogkorea”><a href=”https://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=521530” title=”블로그코리아에 블UP하기” target=”_blank”> </a></li>
   <li class=”mixshup”><a href=”https://mixsh.com/media/46729”  title=”믹시에 믹스UP하기” target=”_blank”> </a></li>
   <li class=”allblog”><a href=”https://search.allblog.net/?keyword=ID&type=100” title=”올블로그에 추천하기” target=”_blank” > </a></li>
   <li class=”bloggernews”><a href=”https://bloggernews.media.daum.net/reporter/xxxxxx” title=”블로그뉴스에 추천하기” target=”_blank”> </a></li>
   <li class=”hanrss”><a href=”https://www.hanrss.com/add_sub.qst?url=https://feeds2.feedburner.com/Lovedweb” title=”한RSS에 추가” target=”_blank”> </a></li>
   <li class=”rssfeed”><a href=”https://feeds2.feedburner.com/ID” alt=”RSS 구독하기” title=”RSS 구독하기” target=”_blank”> </a></li>
   <li class=”google”><a href=”https://www.google.com/ig/adde?moduleurl=https://feeds2.feedburner.com/ID” title=”iGoogle에 추가” target=”_blank”> </a></li>
   <li class=”google”><a href=”https://fusion.google.com/add?feedurl=https://feeds2.feedburner.com/ID” title=”iGoogle or 구글리더에 추가” target=”_blank”> </a></li>
   <li class=”yahoo”><a href=”https://kr.my.yahoo.com/rss?url=https://feeds2.feedburner.com/ID” title=”myYahoo에 추가하기” target=”_blank”> </a></li>
   <li class=”feedburner”><a href=”https://feeds2.feedburner.com/ID” title=”Share this on feedburner” target=”_blank”> </a></li>
</ul>
</div>

2.style 수정할 곳

.metablog 에서 스킨에 맞게 여백값만 설정하시면 됩니다.
margin:0px 0px 20px 90px;  (상 우 하 좌)

 /*메타추천버튼*/
.metablog {
       margin:0px 0px 20px 90px;
}
ul.socials {}

ul.socials li {
   display:inline-block;
   float:left;
   list-style-type:none;
   margin:0 2px 0 0;
   height:29px;
   width:50px;
   cursor:pointer;
}

ul.socials a {
   display:block;
   width:50px;
   height:29px;
   font-size:0;
   color:transparent;
   
}

.bloggernews, .bloggernews:hover, .rssfeed, .rssfeed:hover,
.allblog, .allblog:hover, .mixshup, .mixshup:hover, .blogkorea,
.blogkorea:hover, .yahoo, .yahoo:hover, .google, .google:hover,
.feedburner, .feedburner:hover, .hanrss, .hanrss:hover  {
   background:url(‘images/loved.pe.kr.gif’) no-repeat;
}

.bloggernews {
   background-position:-150px top;
}
.bloggernews:hover {
   background-position:-150px bottom;
}
.rssfeed {
   background-position:-250px top;
}
.rssfeed:hover {
   background-position:-250px bottom;
}
.allblog {
   background-position:-100px top;
}
.allblog:hover {
   background-position:-100px bottom;
}
.mixshup {
   background-position:-50px top;
}
.mixshup:hover {
   background-position:-50px bottom;
}
.blogkorea {
   background-position:left top;
}
.blogkorea:hover {
   background-position:left bottom;
}
.yahoo {
   background-position:-350px top;
}
.yahoo:hover {
   background-position:-350px bottom;
}
.google {
   background-position:-300px top;
}
.google:hover {
   background-position:-300px bottom;
}
.feedburner {
   background-position:-400px top;
}
.feedburner:hover {
   background-position:-400px bottom;
}
.hanrss {
   background-position:-200px top;
}
.hanrss:hover {
   background-position:-200px bottom;
}
/*메타추천버튼*/

추천 게시물

  1. 아이폰4G 출시 미리 준비하세요, 아이폰 책 “도와주세요 아이폰이 생겼어요” 인터파크 무료배송 공동구매 할인 찬스
  2. 아이폰 VS 모토로이 비교 리뷰 동영상, 아이폰 스펙, 모토로이 가격, 모토로이 스펙
  3. 구글폰 넥서스 원(Nexus One) 공식발표-구글 넥서스 원 vs 모토로라 드로이드 vs 애플 아이폰 스펙비교
  4. 티스토리 상단 가로 카테고리 메뉴 소스 사용법

Leave a Comment