반응형

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

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

 

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

이때 가운데 정렬....참 골치죠....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개^^
잘 안되시거나 어렵다 하시는 분은 댓글 달아 주시면 바로 알려드리도록
하겠습니다.
술도였습니다~! 휘리릭~
반응형
반응형
반응형


간만에 티스토리 팁을 하나 올려봅니다....
고민하다가 적용을 하게 되어 이렇게 올리는데... 문제는 없겠죠?? 여러 가지 방법으로
많이들 하시니깐....

제가 이번에 올릴 팁은  다음에서 제공되는 다음 뷰ON 추천버튼을 티스토리 하단에
고정시키는 팁입니다.
아주 간단합니다..

아래 소스를 티스토리 HTML편집에서 style.css 파일 맨 하단에 넣어주시면 됩니다.


.blogger-news-widget{
 background: url(images/배경이미지주소(550*80_원하는 사이즈).jpg)  center bottom no-repeat;
text-decoration: none;
position: fixed;
right:0;
bottom: 0;
width:550px;
height:80px;
z-index:1;
}

아래와 같이 스크롤바를 내려도 고정되어서 나오죠~!ㅎㅎ


기본적으로 현재 제 티스토리에 적용된 소스이며 자신의 티스토리 환경에 맞게 수정해 주시면 됩니다.
작동확인은 IE8,FF4,CHROME10 에서 정상작동 확인 하였습니다~
이상입니다~ 궁금한 점은 댓글로 달아주세요~ 휘릭~
반응형
반응형
반응형


이번 팁은 기존 고정된 광고 달기+화면 넓이에 따라 HIDE/SHOW 를 활용한 팁입니다.

우선 코드는 아래와 같습니다.

1, TOP이미지가 보여지는 부분

<div id='scrolltop' name="scrolltop">
<a href="#" class="top" onclick="window.scrollTo(0,0); return false;"><img src="./images/top.png" border="0" title="맨위로"></a>
</div>
2, 화면길이에 따라 HIDE&SHOW를 해주는 스크립트

<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){
document.getElementById('scrolltop').style.display = "none";
}
else if (hightop > 3000){
document.getElementById('scrolltop').style.display = "block";
}
//-->
</script>

적용 방법은 먼저 TOP이미지로 쓸 이미지를 티스토리 스킨편집에 파일업로드를 통해
업로드 한후 적용하고 하는 위치에 1번 코드와 2번 코드를 같이 넣습니다.

그리고 2번코드에서 빨간색 부분을 자신이 나타내고자 하는 범위를 지정합니다.
저는 현재 2000px이하 일때는 숨기고 ,3000px 보다 길때 보여지도록 지정해
놓았습니다.

간단하죠?? 모르는 부분이 있으면 댓글 달아주시면 알려드릴게요^^
반응형
반응형
반응형


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

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

코드는 아래와 같습니다.

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를 가지고 있습니다.

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

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

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

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

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