반응형

우선 이 팁은 이미 많은 분들이 알고 계시는 팁 일수 있다는 점~

말씀드리며 포스팅하겠습니다.~

 

기본적으로 티스토리 본문 상단에 애드센스를 많이들 배치하는데 한개 또는 두개를 배치합니다.

이때 가운데 정렬....참 골치죠....table이나 center 같은 태그를 쓰자니..요즘 잘 안쓰는 추세이고.....

(물론 쓰지 말라는 법은 없습니다..^^;;)

그래서 DIV를 이용하여 간단하게 가운데 정렬 시키는 방법을 아주 간단하게 알려드릴게요.

안내를 드리기에 앞서 해당 팁을 적용하기 위해서는

본문 너비가 700px정도는 되어야 가능하다는 점~!참고하세요.

먼저 HTML/CSS 편집  style.css에 아래 코드를 추가 합니다.

 #ad_center {  
 width: 672px;   /* 애드센스 가로크기 x 2 = 전체너비 */  
 height: 280px;  /* 애드센스 높이 */  
 margin: auto; /* margin 값 auto 핵심 */
 }

다음 skin.html  소스에서 [##_article_rep_desc_##]  를 찾아 그 위에 아래 코드를 넣습니다.

코드중 애드센스 스크립트1 삽입 부분은 본인의 구글 애드센스 코드를 넣으시기 바랍니다.

336*280 사이즈 입니다.

 <!--애드센스----->
<div id="ad_center">
    <div style="width:336px; height:280px; float:left;">
 
<!--애드센스 스크립트1 삽입 ----------->

</div>
<div style="width:336px; height:280px; float:left;">
<!--애드센스 스크립트2 삽입 ----------->
</div>
</div>
<div style="clear:both;"></div><!---본문 레이어와 중첩되지 않도록 하기 위한 코드 --->


이상입니다. 궁금하신 점이 있으시면 댓글 고고~

 

반응형
반응형
반응형


오랜만에 티스토리 팁을 등록합니다.

최근 적용하게 된 팁인데요..모바일 티스토리에 애드센스 많이들 넣으시죠?

보통 상,하단으로 본문에 넣으시더군요. 저도 그렇게 사용해 왔었구요..

그러다 스크롤을 내려도 하단에 고정시키는 방법이 있을것 같고, 가능할것 같아서

시도해 보았습니다. 역시나 잘 적용이 되더군요~!

기본적으로 저는 포스팅할때  애드센스 적용시 서식을 이용합니다. 간편하니깐요..

서식사용을 기본으로 간단하게 설명 드리겠습니다.

우선 어떻게 보여지는지 이미지부터 보시죠.(이 글을 스마트폰으로 보시면 직접 확인가능!)

이건 일반적으로 본문 상단에 삽입되어 있는 구글 애드센스 입니다.

이건 스크롤바를 내려도 하단에 고정되어 있는 구글 애드센스 입니다.

더 내려 볼까요? 고정되어 있죠?

자 그럼 소스를 알려 드리겠습니다..간단하고 쉽습니다...

아래 소스를 본인의 광고코드를 수정하시고 적용하시면 됩니다.


 

<DIV style="HEIGHT: 50px; RIGHT: 0px; POSITION: fixed; MARGIN-LEFT: -8px; Z-INDEX: 1; MARGIN-TOP: -30px; WIDTH: 320px; BOTTOM: 0px">

<!--본인광고 스크립트--->


</DIV>

 

모바일용 구글광고플러그인용 플로팅

포스팅 본문에 html 모드로 삽입해주면 됩니다.

<style>
.adsbygoogle{HEIGHT: 100px; RIGHT: 20px; POSITION: fixed; MARGIN-LEFT: -8px; Z-INDEX: 1; MARGIN-TOP: -30px; WIDTH: 320px; BOTTOM: 0px}
</style>


이상입니다.

반응형
반응형
반응형


할라당~안녕하세요~!
이팁은 기존의 팁들을 모아서 짬뽕시킨 팁입니다...
블로그를 이용하다 보면 페이지가 짧은 글도 있고...
하루동일 스크롤바를 긁어 내려야 하는 글들도 많습니다...
그리하~~~여~~~!! 만들게 된 것이지요.....
지금 바로 오른쪽에 보이는 그놈입니다..


제목에도 나와 있듯이 페이지가 길때만 해당 버튼 메뉴들이 나타나고
스크롤바를 따라 다닌답니다...ㅎㅎ
간단하게 적용할수 있도록 쉽게 설명 하겠습니다욧~!
먼저 첫번째 소스인 스타일시트를 관리자 모드 스킨>HTML/CSS편집에서 style.css 암때나...
body {어쩌고~}  밑에 정도? 에 넣어줍니다..

/*-- (고정 css) --*/
#scrollmenu {
position: fixed;
right:0;
bottom: 0;
height: 250px; //이걸 조절하면 위치가 바뀌어요.
width: 32px; //이건 아이콘의 크기에 따라...
text-decoration: none;
}

이제 두번째 소스인 실 적용 스크립트 및 HTML소스 입니다.
skin.html 에서 맨아래로 내린다음 </body> 바로 위에 넣어주시면 됩니다~!

그리고 소스중에 이미지는 알아서 하셔야 겠죠잉~! 제가 쓰고 있는거 그대로 쓰셔도 무방합니다요~!

<!-- 스크롤바 제어메뉴 시작 --->
<script language="JavaScript">
<!--
function goTop(){
window.scrollTo(0,0); //맨위로
}
function goMiddle(){
window.scrollTo(0,4000); //중간쯤 위치를 입맛에 맞게 조절하세요.
}
function goBottom(){
var scr = document.body.scrollHeight; //페이지의 길이를 체크
window.scrollTo(0,scr); //맨아래로
}
//-->
</script>
<div id='scrollmenu' name="scrolltop">
<p align="center"><a href="javascript://" class="top" onclick="goTop(); return false;"><img src="./images/stop.png" border="0" title="맨꼭대기로"></a></p>
<p align="center"><a href="javascript://" class="center"onclick="goMiddle(); return false;"><img src="./images/scenter.png" border="0" title="긴 페이지는 중간쯤으로 짧은 페이지는 맨바닥으로"></a></p>
<p align="center"><a href="javascript://" class="bottom" onclick="goBottom(); return false;"><img src="./images/sbottom.png" border="0" title="맨바닥으로"></a></p>
</div>
<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){ // 페이지 길이가 2000px 이하일때는 메뉴숨김
document.getElementById('scrollmenu').style.display = "none";
}
else if (hightop > 3000){ // 페이지 길이가 3000px 이상일때는 메뉴보임
document.getElementById('scrollmenu').style.display = "block";
}
//-->
</script>
<!--- 스크롤바 제어메뉴 끝 -->


이상입니다~! 쉽죠???
* 이미지는 옆에 보이는 이미지를 저장하셔서 쓰시면 됩니다~
각각 되어 있어요~ 총 3개^^
잘 안되시거나 어렵다 하시는 분은 댓글 달아 주시면 바로 알려드리도록
하겠습니다.
술도였습니다~! 휘리릭~
반응형
반응형
반응형


또~!!! 간만에 티스토리 팁을 올립니다.
아주 예전 티스토리에 귀여운 캐릭터를 달아 볼까요 포스팅을 응용한 팁으로써
아주 간단하게 적용 하실수 있습니다.

우선 적용할 광고 또는 이미지링크 등을 만들어 둬야 겠죠?
저는 구글 애드센스를 이용하기 때문에 애드센스를 달아 보도록 하겠습니다.

코드는 아래와 같습니다.

1, 광고가 보여질 레이어

<div id='flotante' name="flotante">
광고 또는 이미지 링크 들어가는곳
</div>
2, 광고를 고정 시켜주는  스타일시트

/*-- (고정광고 css) --*/
#flotante {
position: fixed;
right: 0;
bottom: 0;
height: 250px;
width: 250px;
text-decoration: none;
}


3, 브라우저크기에 따라 노출 유무 스크립트

<script language="JavaScript">
<!--
var Wide = document.body.clientWidth;
if (Wide <= 1500){
document.getElementById('flotante').style.display = "none";
}
else if (Wide > 1500){
document.getElementById('flotante').style.display = "block";
}
//-->
</script>
<!---고정되어 있는 광고 코드 끝--->


이제 코드 확인이 끝났다면 적용을 해보도록 하겠습니다.

1번코드를 skin.html 안의 맨 하단부분에 보시면   </s_t3> 바로 위에 순서대로 넣습니다.
그리고 2번 코드를 style.css 안에 적당한 위치에 넣습니다.

적용이 났습니다.

그럼 옵션인 3번 브라우저 크기(페이지 크기)에 따라 광고 노출 유무를 지정할수 있는
스크립트에 대해 알아 보겠습니다.

간단합니다. 해당 3번 코드를 skin.html 에 넣은 광고 레이어 바로 밑에 넣어주고
본인의 스킨에 맞는 브라우저 또는 페이지의 크기를 찾아 빨간색으로 보이는 숫자를
수정해 줍니다
. 저는 기본적으로 와이드 화면에서만 광고가 보이도록 1500으로 설정했습니다.
브라우저 크기가 1500이하로 내려가거나 그 이하의 해상도를 가진 방문자가 접속을
하면 광고는 보여지지 않습니다.
반응형
반응형
반응형
안녕하시죠?
오랜만에 티스토리 초대장을 나눠드릴까 합니다..
여전히 초대한 분들 운영률은 떨어지지만 그래도 열심히 나눠 볼랍니다..
오늘 나눠드릴 초대장은 총 4장입니다.^^

5분도 채 안걸리는군요....-0-;;
초대장 접수 및 발송 마감되었습니다...
총 4분께 드릴려고 했으나...
순식간에 7분이나 덧글을 남겨주셔서
모두 드렸습니다...
드리는건 제 맘이니까~~~~~ㅎㅎ

좋은 티스토리 멋진 티스토리 운영 부탁드립니다..

초대장을 원하시는 분은 덧글로 운영하실 티스토리에 주제와 함께 간략한
설명 남겨주시면 확인후 선착순으로 드리도록 하겠습니다.


주의 할 점은 트래백으로 신청하시면 안됩니다...
그리고..광고용으로 쓰실분들...제발 신청하지 마세요....가끔 초대한 분들 티스토리에
방문하는데 광고용으로 쓰이고 있으면 바로 신고 들어갑니다...ㅡ.,ㅡ;;

그럼 덧글 남겨주세요~


반응형
반응형
반응형

크핫.. 제 불찰로 미리 마감 공지를 못했습니다...
일하면서 적은거라 깜빡하고 있었네요..ㅜㅜ
이미 12시간이 넘게 지나버린...
후아...많은 분들이 신청해 주셨고..
제 불찰도 있는 만큼 신청하신 모든 분께 초대장을
드리도록 하겠습니다...(__);;;;; 
중복으로 신청하셨거나 이미 초대된 이메일은 초대 자체가 불가능하기 때문에
드리지 못합니다.
그 외 분들께는 모두 초대해 드렸습니다..^^


초대 합니다.

1차로 총 5 분께 드릴 예정이며 개설할 티스토리에 대한 간략한 설명과 함께
댓글 달아주시면 됩니다.

중복 스팸 광고용 등등등....체크해서 신고할겁니다. 정말 열심히 운영하실 분만
댓글 달아 주시면 고맙겠습니다.(__)


믹시 트랙백을 통해 많이 신청하시네요...흠...
경로가 어찌되었던 보내드렸습니다.(__)
부디 멋진 티스토리 만드시길!!! 나중에 확인 들어갑니다~~
반응형
반응형
반응형

크하..아주 난감한 미션입니다...ㅜㅜ
디자인 감각이라곤....안드로메다에 놔두고온 저로썬...
그래도 제 티스토리 환경(?)에 맞는 첫화면을 만들고자 해봤는데...
추천세트랑 비슷비슷하네요....-0-;;

우선 제 티스토리는 특별한 주제가 없는 일상이야기 를 다루는 곳이기 때문에
특정 주제에 맞는 첫화면을 딱히 만들어내기가 힘들었습니다.

그래서 고민한 결과 편의성을 위주로 아래와 같은 구성으로 만들어 봤습니다.

1단, 최신글 : 첫음 접속시 최신글을 바로 볼수 있습니다.

2단, 인기글 : 티스토리에서 유입키워드 및 인기글을 직접 수동!!!으로 추출하여 보여줍니다.
(자동으로 추출하는 기능이 있었으면 좋겠네요.^^)

3단, 전체글 : 큰 의미는 없으나 많은 글들을 한번에 바로 선택하여 볼수 있도록 하였습니다.

디자인 감각이 전혀 없는 관계로... 열심히..ㅡ.ㅡ? 꾸며본 결과는 현재 보시는바와 같습니다.

티스토리 첫화면꾸미기 베타테스터 두번째 미션인 디자인이라는 취지에 전혀...
맞지 않는것 같아 죄송할 따릅니다....ㅜㅜ

마지막으로 디자인시 현재는 글꼴,글자색,크기,글자수, 배경색, 테두리, 아이콘  등 간단한 부분만
설정 및 수정이 가능한데, 이 부분을 사용자화시켜서 원하는 이미지나 배경들로 꾸밀수 있게하고
(물론, HTML로 가능하겠지만! 대 부분의 사용자는 HTML을 모르는 사람이 많다는것!)
그리고  HTML 직접입력 부분에도 좀더 쉽게 입력할수 있도록 치환자 설명이나 바로입력
기능도 있었으면 하는 바람입니다...

이상으로 오늘도 역시나 간략한 내용으로 마무리 하도록 하겠습니다.. 
반응형
반응형
반응형
안녕하세요? 이번 티스토리 베타테스터에 선정된 술도라고 합니다.^^
이번 티스토리 첫화면 꾸미기 베타테스터에 많은 분들이 선정이 되셔서
벌써 많은 리뷰들이 올라왔더군요.^^

저는 개인적으로 회사일로 조금 늦게 올리게 되었습니다.
그리고 이미 첫화면 꾸미기에 대한 도움말이 있기에 자세한 설명과 UI등에 대한 부분은
생략하고 조금은 간략한 리뷰를 쓰고자 합니다.
자~ 시작할게요^^


화면 꾸미기란?

말그대로 티스토리의 첫화면을 사용자의 취향에 따라 꾸미는 기능입니다.
기존에는 최근글을 간단하게 보여주는 식의 티스토리 였다면 첫화면 꾸미기는
최근글과 원하는 카테고리의 글들을 지정된 틀안에 넣어서 꾸밀수 있는 기능이라 할수
있겠습니다.

첫화면에 한눈에 많은 글과 이미지를 보여줄수 없었던 기존의 티스토리와는 달리
한눈에 여러 글과 이미지를 보여줄수 있게 되어 방문자들로 하여금 좀더 빠르고
간편하게 티스토리를 이용 할수 있도록 접근성을 높였다고 할수 있겠습니다.

또한 여러가지 형식의 틀로 구성되어 있어 좀더 색다른 티스토리를 만든수 있다는
부분입니다.

위 글을 종합해보면 티스토리 첫화면 꾸미기의 장점은
접근성(편의성)과 개성(?)이 아닐까 생각합니다.
접근성과 개성!

이제 다른 부분들을 살펴보자면 기능에 대한 부분이 있습니다.
티스토리 첫화면 꾸미기의 기능들을 보자면 어디선가 많이 본듯한
UI를 가지고 있습니다.

바로 네*버의 리모콘이라는 기능입니다.
개인적으로 네*버 블로그를 많인 쓰진 않지만 가끔 운영은 하는데 보자마자 딱!
그거랑 비슷하구나 하는 생각이 들었습니다.
물론 실제론 그 기능들이 다르지만 말입니다.^^ 네*버 랑 비교해서 그렇지만
아직은 초반인지라 그 기능은 적을수 밖에 없을것이고 이 부분이 저희를 통해
개선해 나가야 할 부분이 아닌가 생각되며 몇가지 기능들에 대한 개선사항을
적어 보도록 하겠습니다.

우선 눈에 딱~!보이는 것중 이미지가 없는 글은 너무 허무하게 보인다는점..
말그대로 이미지가 없는 글일 경우에는 그 부분을 대체 할수 있는 이미지가
있었으면 좋겠고 더 나아가 대체이미지를 사용자가 직접 지정할수 있도록
했으면 좋겠습니다.

그리고 두번째
속도 부분입니다. 첫화면 꾸미기에서 첫화면에 나오는 이미지를 보면 큰 이미지를
보여주는 틀에서는 원본이미지를 보여줘도 상관이 없다고 하지만 작은이미지만 보여주는
아래와 같은 틀의 경우 원본이미지의 사이즈를 줄여서 보여주는 것 같습니다.

이 같은 경우 첫 접속시 로딩속도가 저하되는 현상이 발생할수 있을것 같으며
가능하다면 썸네일이미지를 생성해서 보여주는게 어떨까 생각됩니다.

글재주가 없어서 횡설수설하는것 같습니다.
간단하게 쓴다고 했으니 리뷰는 여기서 마치도록 하겠습니다.(__)/
나날이 발전 하는 티스토리가 되기를 바랍니다.
반응형
반응형
반응형




마감되었습니다.

안녕하세요?
오랜만에 초대장을 드리는것 같습니다.
요즘은 초대장...여기저기 많아서 잘 나갈지(?) 모르겠네요..

자 우선.기본적인 사항들 입니다..

선착순으로 나누어 드릴 거구요..

댓글에 비밀글로 이메일주소랑 간략하게 만드실 티스토리에 대한 설명 적어주시면
보는대로 바로 오프라인 초대장 번호를 보내드리도록 하겠습니다.^^

제발!! 초대받으시고 운영해주세요....
대부분 운영을 안하더군요..



아래 해당하시는 분들께는 초대장을 나누어 드릴수 없습니다.

1, 불법스팸블로그를 만드실 분(추후 발견시 신고합니다.)
2, 이미 다른분께 받으신 분(초대 자체가 불가능합니다.)
3, 초대장 받으신후 운영 안하실 분(제발..)
4, 초대장 보냈는데도 받지 않으시는 분(2일안에 안받으시면 회수합니다.)
5, 한사람이 여러장의 초대장 신청시

그럼 진정한 티스토리를 원하시는 분들! 신청해 주세요~^^
반응형
반응형
반응형
초대장이 모두 소진되었습니다..^^
오프라인 초대장이다보니 한분한분께 직접 이메일로
초대장 번호를 보내드렸습니다..^^ 좀 귀찮은 일이었지만
작게나마 도움이 되셨기를 바랍니다..^^

곧! 온라인 초대장 쏠게요^^ 오늘은 여기까지~~~~




안녕하세요?
오랜만에 초대장을 드리는것 같습니다.
요즘은 초대장...여기저기 많아서 잘 나갈지(?) 모르겠네요..

자 우선.기본적인 사항들 입니다..

선착순으로 나누어 드릴 거구요..

댓글에 비밀글로 이메일주소랑 간략하게 만드실 티스토리에 대한 설명 적어주시면
보는대로 바로 오프라인 초대장 번호를 보내드리도록 하겠습니다.^^


아래 해당하시는 분들께는 초대장을 나누어 드릴수 없습니다.

1, 불법스팸블로그를 만드실 분(추후 발견시 신고합니다.)
2, 이미 다른분께 받으신 분(초대 자체가 불가능합니다.)
3, 초대장 받으신후 운영 안하실 분(제발..)
4, 초대장 보냈는데도 받지 않으시는 분(2일안에 안받으시면 회수합니다.)
5, 한사람이 여러장의 초대장 신청시

그럼 진정한 티스토리를 원하시는 분들! 신청해 주세요~^^


P.S  오프라인 초대장은 온라인 초대장과 다르게 초대장 번호로 티스토리에
가입을 합니다.
즉, 제가 오프라인 초대장을 보내드려야 하는데.. 여긴 촌구석 산동네라
그러지 못하기에 신청하신 이메일로 제가 해당 코드를 보내드리도록 하겠습니다.

받으신 코드를 가지고 아래 링크로 가셔서 등록하시면 개설 됩니다.^^

초대장 번호 입력하러가기

오프라인 초대장을 직접 드리고 싶지만 그렇게 못한점 양해 바랍니다...^^

조만간 온라인 초대장도 나눠 드릴게요~~~^^ 기분 좋은 하루 되시기 바랍니다.!!

마감~!

현재 12:57분까지 달린 댓글까지는 온라인 초대장으로 드릴게요^^
반응형
반응형