그건 그렇고.. 배너가 참 예쁘네~!! 근래 본 배너 중에 젤! 종류도 많고~! 하나같이 다 훌륭해!! 본 순간 달고 싶어졌다니깐.. 깔깔~ 몰랐는데.. 사이트도 참 예뻐졌네.. 요즘 올블 볼거 조낸 없는데.. 올블 말고 블코 가봐야겠다!
그건 그렇고.. 선물 안 주면.. 배너는........
내린다.. ㅡ┏
"banner"에 해당되는 글 4건
그건 그렇고.. 배너가 참 예쁘네~!! 근래 본 배너 중에 젤! 종류도 많고~! 하나같이 다 훌륭해!! 본 순간 달고 싶어졌다니깐.. 깔깔~ 몰랐는데.. 사이트도 참 예뻐졌네.. 요즘 올블 볼거 조낸 없는데.. 올블 말고 블코 가봐야겠다!
그건 그렇고.. 선물 안 주면.. 배너는........
내린다.. ㅡ┏
딱지 만들기..
150 x 70 px
150 x 50 px
100 x 40 px
공모전 이야기만 꺼내 놓고, 아무것도 만들지 않으면 안될것 같아서 끄적여 봤습니다. 이런거 만들기엔 별로 소질이 없어, 그저 그렇게 만들었지요. :') 결론부터 얘기하면.. "구리구리"합니다. 막상 만들려고 하니, Deskshooters 사이트에서 무엇인가를 따와서 배너로 만들어야 할텐데.. 따오거나 가져올것이 별로 없었습니다. 게다가 사이트 리뉴얼 작업을 하고 있는 지금, 아무래도 다소 엉뚱한 디자인이 된듯합니다. 하하.. 사실 Deskshooters 의 이렇다할 마크 하나도 없는데.. 그저 할수 있는거라곤 Deskshooters 글자 나열 정도밖엔..... ^^;;;
아무튼, 슈터즈가 리뉴얼 되면.. 그에 어울리는 배너를 다시 생각해 봐야겠습니다. 역시, 큰 사이즈보단 작은 사이즈가 쉽네요. 100x40 px 사이즈가 제일 맘에 듭니다. 낄낄. 배경색은 각자 블로그의 배경색에 맞게 수정해도 괜찮을 것 같습니다.
Deskshooters Link 패널을 여는 배너
그러니까 병뚜껑 버젼.. :) 위 배너들에서 억지로 색상만 끼워 맞췄지요. 까만 병뚜껑은 좀 이상하네요.
슈터즈의 앞으로의 방향에 대해서 까지 이야기가 나오고 있습니다. 아무래도 배너공모는 시기가 적절치 못했을런지도 모르겠어요. ;_; 하지만 뭐 아무려면 어떻습니까? 상품까지 등장했는데 안 할수는 없잖아요. "아.. 이거 뭐 이렇게 구려..", "아무래도 안되겠다. 다시 만들어라.." 등등의 표현 환영합니다~! 하하.. 하.. v_v''
150 x 50 px
100 x 40 px
공모전 이야기만 꺼내 놓고, 아무것도 만들지 않으면 안될것 같아서 끄적여 봤습니다. 이런거 만들기엔 별로 소질이 없어, 그저 그렇게 만들었지요. :') 결론부터 얘기하면.. "구리구리"합니다. 막상 만들려고 하니, Deskshooters 사이트에서 무엇인가를 따와서 배너로 만들어야 할텐데.. 따오거나 가져올것이 별로 없었습니다. 게다가 사이트 리뉴얼 작업을 하고 있는 지금, 아무래도 다소 엉뚱한 디자인이 된듯합니다. 하하.. 사실 Deskshooters 의 이렇다할 마크 하나도 없는데.. 그저 할수 있는거라곤 Deskshooters 글자 나열 정도밖엔..... ^^;;;
아무튼, 슈터즈가 리뉴얼 되면.. 그에 어울리는 배너를 다시 생각해 봐야겠습니다. 역시, 큰 사이즈보단 작은 사이즈가 쉽네요. 100x40 px 사이즈가 제일 맘에 듭니다. 낄낄. 배경색은 각자 블로그의 배경색에 맞게 수정해도 괜찮을 것 같습니다.
Deskshooters Link 패널을 여는 배너
그러니까 병뚜껑 버젼.. :) 위 배너들에서 억지로 색상만 끼워 맞췄지요. 까만 병뚜껑은 좀 이상하네요.
슈터즈의 앞으로의 방향에 대해서 까지 이야기가 나오고 있습니다. 아무래도 배너공모는 시기가 적절치 못했을런지도 모르겠어요. ;_; 하지만 뭐 아무려면 어떻습니까? 상품까지 등장했는데 안 할수는 없잖아요. "아.. 이거 뭐 이렇게 구려..", "아무래도 안되겠다. 다시 만들어라.." 등등의 표현 환영합니다~! 하하.. 하.. v_v''
(글꼴은 Corbel 과 Greg's Hand, HelvCondensedCaps 라는 글꼴을 사용했습니다. )
배너 이미지들과 psd 파일을 함께 압축해서 올려둡니다. 공모전에서 벌써 수상한것도 아니고, 벌써부터 배포할 이유는 없는것 같긴 하지만.. 다른분들이 이렇게 하셨길레... 테스트 삼아 제 블로그에 한번 달아 놓도록 하겠어요. 낄낄..
ds_banner.zip배너 이미지들과 psd 파일을 함께 압축해서 올려둡니다. 공모전에서 벌써 수상한것도 아니고, 벌써부터 배포할 이유는 없는것 같긴 하지만.. 다른분들이 이렇게 하셨길레... 테스트 삼아 제 블로그에 한번 달아 놓도록 하겠어요. 낄낄..
New~! ds_corner Banners
적용방법이 조금 추가 되었습니다~!
이미 보신분들도 많겠지만, 하지 말란 짓만 골라하는 성격덕분에, 여러개가 만들어졌습니다. -_ㅡ;;
입맛대로 골라붙이는 재미... ;)
부착하는(?)법은 이전에 사용하던 코드와 별로 다르지 않습니다. 다만 이미지 롤오버 효과가 더해졌습니다.
테스트는 현재 제 블로그의 좌측상단 튜브 처럼 생긴녀석에 마우스를 대보시면 보실수 있습니다.
위 배너 이미지들은..
http://deskshooters.com/ds_link/colored/
의 경로에 모두 올려져 있습니다. 파일명은 위 그림에서 잘려서 잘 안 보이지만 대략 파악 가능하실겁니다.
예를 들어..
ds_corner_black.png 와 ds_corner_black2.png 가 한 쌍입니다. 앞의 파일이 보통때의 그림, 뒷 파일이 마우스가 올려졌을때의 그림입니다.
위 그림의 윗부분부터.. ds_corner_black.png(기본검정) ds_corner_blackrose.png(검정장미) ds_corner_camouflage.png(국방무늬) ds_corner_fall.png(가을분위기) ds_corner_fantastic.png(판타스틱) ds_corner_flower.png(꽃무늬) ds_corner_pinkmaple.png(분홍단풍) ds_corner_purplemaple.png(보라단풍) ds_corner_rush.png(왕골무늬) ds_corner_stone.png(돌무늬) ds_corner_swirl.png(골뱅이무늬) ds_corner_yellow.png(노란체크) ds_corner_yellowcross.png(노란십자가) 의 순서입니다.
우선.. html 파일에 아래와 같은 코드를 상단부에 삽입합니다.
<head>와 </head> 사이에 위치하면 안됩니다. <body> 가 시작된 이후에 넣어주세요.
사실 body가 시작된 이후에 다른 div와 겹치지 않게만 넣으시면 어느곳이든 크게 상관 없습니다.
<div id="dscorner">
<h1><a href="http://deskshooters.com/ds_link/ds_link.html" target="_search" title="Deskshooter's Link">deskshooter's link</a></h1>
</div><a> 태그안에 링크가 걸릴 글자는 어짜피 저 멀리 모니터 밖, 안보이는 왼편에 존재 할테니 아무렇게나 적으셔도 상관없습니다.
CSS에는 아래의 코드를 아무곳에나 넣습니다.
#dscorner {
position: absolute;
left: 0; top: 0;
}
#dscorner h1 {
margin: 0;
padding: 0;
text-indent: -10000px;
}
#dscorner h1 a {
background: transparent url('http://deskshooters.com/ds_link/colored/ds_corner_blackrose.png')no-repeat;
display: block;
height: 80px;
width: 80px;
cursor: pointer;
}
* html #dscorner h1 a { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=http://deskshooters.com/ds_link/colored/ds_corner_blackrose.png); ;}/*for IE*/
#dscorner h1 a:hover {
background: transparent url('http://deskshooters.com/ds_link/colored/ds_corner_blackrose2.png')no-repeat;
display: block;
height: 80px;
width: 80px;
text-decoration: none;
cursor: pointer;
}
* html #dscorner h1 a:hover { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=http://deskshooters.com/ds_link/colored/ds_corner_blackrose2.png); ;}/*for IE*/
html > body #dscorner { position: fixed; }파일명을 총 4군데 수정해 주셔야 합니다.
#dscorner h1 a 부분에는 보통때의 그림 주소로 수정합니다.
#dscorner h1 a:hover 부분에는 마우스 오버시의 그림 주소로 수정합니다.
무슨 이유에서인지 IE에서는 마우스 커서가 포인터로 바뀌지 않아서 "cursor: pointer;"를 추가했습니다.
그림자를 넣는데 있어.. 한가지로 다 복사 해 버렸더니.. 밝은색 배너들은 그림자가 별로 보기가 좋지 않을수 있습니다.
이글루스 이용자 분들은 스크립트가 필요없게 되었으니.. 더이상 GIF냐 PNG냐를 두고 고민하시지 않아도 됩니다!
IE에서는 반응이 상당이 무딥니다. 떄로는 사라져 버리기도 합니다. :) 불여우를 이용해 보아요~! 언제나 그렇듯, 아직 파악안된 오류가 있을 수 있습니다. PSD 파일은 이미 여기에 공개 되어 있으니 자신만의 버튼도 만들어 보아요~! ;)
처음에 마우스를 올릴때.. 깜박임이 있으신분들은.. 위 코드를 아래와 같이 수정해 보세요.
background: transparent url('http://deskshooters.com/ds_link/colored/ds_corner_blackrose.png')no-repeat scroll center top;
background: transparent url('http://deskshooters.com/ds_link/colored/ds_corner_blackrose2.png')no-repeat scroll center top;그러니까.. 원래의 소스에서 no-repaet 뒤에.. scroll center top 을 더 써 넣는겁니다. 제 경우에는 깜박임이 좀 덜한것 같은데.. 다른분들은 어떠실지 모르겠습니다.
Entry RSS 
Entry ATOM