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

2009/05/18 10:38 by 러브드웹 블로그팁/블로그팁

메타 추천버튼 입니다.

CSS 메뉴-메타사이트 링크버튼이라고 해야맞겠죠~~
제사 사용중인 것인데요. 본문하단부분에 있는 메타사이트 버튼들입니다.
brainchaos님께서 공유좀 해달라해서 게시물로 작성하네요.

마우스 룰오버시 오뚜기(?) 두더지게임 처럼 쑤~욱 올라오는데요.
IE6에서는 아무 반응도 없을겁니다. IE6이 원체 쓰레기이니 브라우저를 업그레드 하세요.

이미지는 krang 님께서 제작배포중이신 이미지 인데 제가 약간 수정만 했습니다.
원배포페이지 : 아이폰 스타일 메타블로그 추천버튼 2탄!

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

적용하기

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

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

1.skin 수정할곳

메타사이트는 자신의 계정에 맞게 링크를 수정하셔야 합니다.

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

1.skin

2.style 수정할곳

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

2.style

/*메타추천버튼*/
.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;
}
/*메타추천버튼*/

본게시물은 스크랩을 허락하지 않습니다.
이미지의 저작권자가 별도로 있으므로 스크랩을 하실수 없습니다.

'블로그팁 > 블로그팁' 카테고리의 다른 글

댓글알리미 표준화를 지지해주세요 (16)	2009/07/03
블로그가 홈페이지 운영자들의 편견을 파괴했을까? (12)	2009/06/16
CSS 메뉴-메타사이트 추천버튼 공유합니다. (25)	2009/05/18
티스토리 댓글창에 이모티콘추가와 에디터사용하기[BBCode] (32)	2009/04/29
티스토리 방문자 통계그래프와 사이드바 설정이 수정되었습니다. (4)	2009/04/29
믹시업버튼 블러거뉴스 추천버튼 작게 만들기-카테고리글 더보기 위치바꾸기 (7)	2009/04/17

블로그의 모든 글은 러브드웹의 동의 없이 스크랩발행과 재배포를 할 수 없습니다.
인용과 직접 링크를 선호합니다. [저작권원칙]

css 메뉴, It, RSS, 구글, 다음, 다음뷰, 메타버튼, 메타추천버튼, 믹시, 블로그, 블로그코리아, 야후, 올블로그, 추천버튼, 피드버너, 한RSS, 홈페이지

트랙백4개 댓글 25 개가 달렸습니다.

강팀장님의 댓글

2009/05/18 11:24 Reply | (수정/삭제)

윤초딩님... 설정에 마우스 오른쪽 못쓰게 하는 플러그인 있지 않나요? 그걸 사용하면.... 퍼가기가 그나마 귀찮아져서 줄어 들듯 한데. ^^

추천버튼... 나도 달고 싶은데.. 이럴땐... 그동안 학교 다니며 배웠던 것들이 다 어디로 가출했는지.. 힘듭니다. 하하하하 ^^

오늘도 100번 못 누르고 한번만 꾹 눌러봅니다. ^^

윤초딩님의 답글

2009/05/18 11:36 Reply | (수정/삭제)

그거 아주 나쁜거임 마우스버튼 막는거..
소스적어놓고 막아놓으면 소스는 어찌 퍼가요~~~
그런 사이트보면 뚜껑열리더라고요.. 대부분 그런곳은 어디서 퍼와서
마우스버튼을 막으면 안된다는걸 몰라서 그런듯...

그리고 저는 공유에 대해서 적극권장하는 쪽이라서요..
라이센스 어쩌고 머리뽀개지지만요..

팀장님만 아세요.. 저도 요즘 가물가물해요..
믹시버튼도 먹통이고...