다음의 뷰 서비스가 종료되고  다음 뷰의 최신글 보기로 최신글을 불러 오신 분들이 많이 있으신데, 이제는 블로그 자체의 플러그인으로 최신글 불러오기를 해야헤서 한번 만들어 봤습니다. 


지금은 포스팅과 테스트를 한번에 하고 있습니다. 키보드와 태블릿의 테스트입니다. 역시 말은 거창하지만 신규 장비로 글을 쓰는 즐거움을 만끽하고 있다는 것입니다.

   

다음 뷰의 종료가 너무 아쉬워하면서 글을 씁니다. 최근에 다음 뷰에서 오던 트레픽이 많이 줄어 들었습니다. 그나마 구글의 트레픽이 늘면서 겨우 방문자를 유지하고 있지만 지나 달에 비하면 거의 10만 단위로 줄어드는 느낌입니다. 다음 뷰에서 유입이 정말 많이 빠지고 있는 것 같습니다.

   

  

다음 뷰 순위 전체 21위로 체널 1위로 마무리를 할 것 같습니다.

   

   

저는 신규 글을 다음 뷰의 최신 글로 대신 하고 있습니다. 그렇다 보니 일주일 정도 되면 신규 글을 보여주는 플러그 인을 설치를 해야 합니다.

   

그래서 이번에 바로 신규 글에 대한 플러그인의 디자인을 손을 봐야 하는데, CSS를 잘 모르는 분들은 조금 어려울 것입니다.

   

티스토리 꾸미기 - 최신 글의 디자인을 변경하자!

   

   

오늘은 이곳의 대처할 소스입니다. 가장 심플하면서 디자인적인 구성 요소로 쓸 수 있는 소스입니다.

   

<div class="txc-textbox" style="margin-top:20px; width:280px; border: 1px solid rgb(203, 203, 203); background-color: rgb(255, 255, 255); padding: 10px;">

   

 

<div id="recentPost" class="module" style="margin-left:-14px;">

<span style="font-size:14.0pt;font-family:맑은 고딕;font-weight:bold;color:#204187">Recent Post</span>

   

<ul style="margin-top:8px">

<s_rctps_rep>

<li>

<a href="[##_rctps_rep_link_##]"><span class="cnt" style="font-size:10.0pt; line-height:150%;">[##_rctps_rep_title_##].</span></a>

<span class="cnt" style="font-size:10.0pt;line-height:150%;">[##_rctps_rep_rp_cnt_##]</span>

</li>

</s_rctps_rep>

</ul>

</div>

 

</div>

      

붉은 부분이 제가 수정한 소스입니다. CSS없이 간단하게 DIV로 만들어 봤습니다. HTML을 너무 어렵게 생각을 하시는데 하나하나 연습을 하시면 어느덧 남들과는 전혀 다른 스킨이 될 것입니다.

   

"티스토리> 관리자 > 화면설정> 사이드 바: 최신 글 38글자"로 설정을 했습니다. 사이드 바의 폭에 따라 설정하시면 됩니다.

  

   

   

   

다음 은 더욱 간단한 디자인 팁이라고 할 수 있습니다.

   

페이스 북 플러그인은 배너로 티스토리에서 배너로 삽입이 가능합니다. 이전에 티스토리 꾸미기로 한번 설명을 드렸습니다.

  

플러그인을 다운 받을 수 있는 곳입니다.

https://developers.facebook.com/docs/plugins/like-box-for-pages

  

   

제 서브 페이지에 있는 페이스북 플러그인 소스입니다. 붉은 부분을 본인의 페이스북 페이지로 치환 하시면 사용이 가능합니다. 폭은 280px 기준입니다.

   

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fchunchu99&amp;width=280&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=true&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:395px;" allowTransparency="true"></iframe>

   

   

결과물은 제 블로그의 페이스 북 플러그인을 보시면 될 것 같습니다.

   

개인적으로는 스크립트를 이용하여 메인에서의 배너들과 서브에서의 배너를 다르게 보이게 하고 있습니다. 


일단 글의 반응이 좋으면 제가 알고 있는 티스토리 디자인에 관련된 소스를 하나 씩 올려보려고 합니다.

   

최근 들어 전업 블로거들의 입지가 줄어들고 있다고 합니다. 일부 블로거의 문제를 전체 블로거에게 적용을 하려고 하니 문제가 생기는 것 같습니다.

   

개인적으로는 마케팅 블로그를 운영을 해드리고 있기 때문에 "유료 리뷰" 등에서는 어느 정도 자유스럽다고는 하지만, 그래도 블로거들에게 입지가 줄어드는 것은 조금 아쉽다고 할 수 있습니다.



저가 태블릿의 가능성 한성 컴퓨터 Gadget V10 리뷰[3] Gadget V10과 윈도 8.1

윈도 8.1 태블릿을 쓰면서 느낀 클라우드 스토리지 이야기

세로본능 윈도 8.1 태블릿 ASUS VivoTab Note 8 [1] 개봉기

여러 대의 컴퓨터를 컨트롤하는 방법들

다음 뷰 종료로 불안한 블로거들에게 하고 싶은 조언

쉐어하우스 전원 주택 "문산 핀란드 마을"에서 주말을 보내다!

블로그 마케팅을 위한 블로그 운영 법[1] 마케팅 블로그 운영과 웹 표준

블로그 운영 잘하는 법 [4] 웹접근성을 활용하여 검색에 유리한 블로그 만들기

주성사이버 평생 교육원 2학기 개강안내 [7월 개강]

미라캐스트 어댑터 모두시스 'Twingle Air MDS -3000'



 


블로그 이미지

천추

IT 이야기를 중심으로 블로그를 운영하고 있습니다.

댓글을 달아 주세요

천추의 IT 이야기 블로그 디자인 개편

   

작년 말부터 준비하던 '천추의 IT 이야기'에 대한 디자인이 완료가 되었습니다. 이제까지 총 3회의 블로그 디자인이 개편이 된 것입니다.

   

원래 디자인을 하려던 디자인을 조금 변경하여 일반적인 디자인으로 만들어 버렸습니다. 그 동안 조금 부족하다고 느끼던 메인 배너 부분을 개선을 했습니다.

   

토요일에 디자인과 코딩을 마무리 했습니다. 만 하루에 홈페이지를 하나 만드는 정도의 업무의 집중이 있었습니다.

   

기존의 천추의 IT 이야기는 디자인에 거의 이미지를 쓰지 않고 페이지 오픈 속도를 중심으로 블로그 디자인을 유지를 했습니다. 그렇다 보니 다른 디자인 블로그 들과는 조금 다른 레이아웃을 유지하였지만 이제는 "홈페이지 형"레이아웃을 사용했습니다.

 

   

   

티스토리 블로그에 디자인을 입히는 작업은 티스토리 블로그를 시작하면서 조금씩 작업을 하기는 했지만 최근에는 스킨을 홈페이지와 거의 유사하게 디자인을 했습니다.

   

천추의 IT 이야기 블로그 디자인의 구성

   

메뉴의 추가 메뉴와 서브 메뉴를 추가하였습니다. 아직 메뉴의 구성에 대하여서는 조금 더 고민을 해보아야 할 것 같습니다.

   


   

롤오버 메뉴와 서브메뉴를 만들어서 보다 다양한 내용을 조금 더 편리하게 보실 수 있게 구성을 했습니다. 홈 버튼을 추가해서 인덱스인 첫 페이지로 보낼 수 있는 기능을 쓰게 했습니다.

   

메인 페이지는 티에디션에서 제공되는 기본 세트의 디자인이 마음에 들지 않아서 고민을 하다가 별도의 레이아웃으로 디자인을 했습니다. 개인적으로 볼 때 큰 코딩의 성과라고 볼 수 있습니다. 브랜들 블로그 등 2년 정도 티스토리의 블로그 디자인을 했지만 이번에서야 티에디션의 설정을 원하는 정도의 디자인 구성으로 바꾸어 놓은 것 같습니다.

   

다음은 메인 배너를 전체 화면에도 조금 어색하지 않게 배경과 함께 바뀌도록 했습니다. 성형외과나 웨딩 홀 같이 메인 이미지를 크게 넣는 블로그에 적용을 해보면 매우 멋있을 것 같습니다.

   



티스토리 블로그 디자인  - 천추의 IT 이야기 블로그 디자인티에디션을 이용한 인덱스 페이지입니다.


   

티스토리 블로그 디자인  - 천추의 IT 이야기 블로그 디자인서브 페이지 입니다. 메인 광고의 이미지를 같이 쓰고 있습니다.


현재 메인 배너는 움직임의 자연스러움을 포기한 대신 개별 링크나 배너간의 이동을 할 수 있게 하여서 기능성으로는 매우 만족스럽습니다.

   

지난주에 한미약품에서 블로그 마케팅에 대한 프레젠테이션을 했는데, 그때 현재의 디자인을 보여주지 못한 것이 조금 아쉽습니다.

   

다음 단계는 블로그의 기본기능을 이용하여 간단한 질문이나 상담을 받을 수 있는 시스템을 준비 중입니다. 별도의 서버를 사용하지 않기 때문에 운영비가 적은 중소기업을 위하여 필요할 것 같습니다.

   

앞으로 한동안은 블로그 디자인을 개선하는 작업을 해야 될 것 같습니다. 이번 주에는 혜은당 한의원의 코딩과 한국 마케팅 협회의 공식블로그의 디자인과 코팅을 해놓아야 해서 매우 바쁘고 재미있는 한 주가 될 것 같습니다.

   

   

블로그 코딩 작업 환경입니다. 디자인의 코딩에는 최근 쓰기 시작한 Adobe Edge code CC를 쓰고 있습니다. 무료 앱인데 맥 용 무료 에디터 프로그램 중에서는 현재 까지는 제일 좋은 것 같습니다. 위 이미지처럼 작업을 하면 상당한 업무효율로 작업 효율이 좋지만 목을 혹사하기 때문에 작업이 마무리 될 때는 두통이 몰려올 때도 있습니다.

   

다음에는 디자인과 코딩 작업에 대하여 포스팅을 준비해 보겠습니다.

   



블로그 이미지

천추

IT 이야기를 중심으로 블로그를 운영하고 있습니다.

댓글을 달아 주세요

스토리 블로그는설치 형 블로그에 가깝기 때문에  매우 것들을 할 수 있습니다. 디자인을 변경하거나 본문내부에 광고를 삽입하거나 하는 등의 일을 할 수가 있습니다. 그래서 배너광고 등으로 블로그에서 통하여 수익을 만들 수 있습니다.

   

수익형 블로그의 운영을 위하여 티스토리 블로그에 구글 배너와 같은 배너를 만들어 보려고 했습니다. 블로그에서 수익을 얻기 위한 블로그 수익형 블로그 운영은 제 블로그에서 시작을 하여도 3개월 정도의 장기 프로젝트로 준비를 해보고 있습니다.

   

수익형 블로그 운영을 위하여서는 기본적으로 어느 정도의 배너를 블로그에 삽입을 해야 하는 문제가 있었습니다. 제 경우는 이전의 다음 뷰에드가 있던 자리에 수익성 배너를 만들 계획을 짜고 있습니다.

   



   

   

제가 진행하고 있는 에드리더스(www.adleaders.com) 배너 광고로 보험상담 신청을 하는 경우 건당 10,000원 ~ 40,000원 까지 수입이 발생 할 수 있습니다. 개인적인 목표는 1일 1건의 보험 관련 고객 DB를 만들고 월 30만원 정도의 수익을 목표로 잡고 있습니다. 배너의 렌딩 페이지인 메리츠몰 의 공식 브랜드 블로그 운영도 함께 하고 있습니다.

   

개인적으로 비슷한 시간을 투자하는 브랜드 블로그에서 얻을 수 있는 수입의 70% 정도를 산정한 것입니다. 보험 정보 포스팅을 1주일에 1~2건 정도로 제한을 두고 있기 때문에 결코 쉬운 목표는 아니라고 생각합니다.

   

좌충우돌 티스토리 본문 배너 만들기

   

티스토리의 본문에 배너를 삽입을 하려면 간단한 코딩에 대하여 알아야 가능합니다. 저는 일단 간단한 코딩이 가하기 때문에 간단하게 배너를 만들었습니다.

   

배너의 만드는 단계

   

1. 이미지 만들기 - 저는 메리츠몰 배너를 제 블로그 사이즈로 조정하여 스킨편집>> 파일 업로드로 직접 제 블로그에 올렸습니다.

   

2. 포스팅 내부에 적합한 배너 코드 생성 - 배너 코드는 div를 이용하여 우측 상단에 고정으로 위치하게 만들었습니다.

   

3. 본문 삽입 - 블로그 변수 위에 코드를 집어넣고 마무리

   

* 배너의 본문 삽입은 블로그 변수인 "_article_rep_desc_" 검색하여 위와 아래에 광고를 넣을 수 있습니다.

<div class="article">

   

[##_article_rep_desc_##]

   

</div>



 변수의 상단에 넣은 첫 번째 배너 였습니다.


<div style="clear: both; float: right;width:250px; height:208px; margin-left:10px;margin-top:0px; font-size:10px;">

<a href="http://www.meritzdirectmall.com/H002/chunchu" target="_blank">

<img src="http://cfs.tistory.com/custom/blog/86/868489/skin/images/ben_20131030.jpg" width="250"></a>

</div>


원하는 위치 매우 만족스럽게 세팅이 되었습니다.

   


   

배너의 위치에 대한 미세 조정도 마치고 나니 매우 흡족했습니다.

   

   

사설 배너의 문제점

   

너무 편하게 생각을 하고 배너를 만들었던 것 같습니다. 본문에 제일 처음 나오는 이미지가 배너의 이미지다 보니 검색 페이지에 보이는 제 블로그는 아래와 같이 됐습니다.

   

검색 결과는 역시 배너가 메인 이미지로 검색

   

검색 로봇이 본문의 첫 이미지를 배너로 가지고 간 것입니다.

   

아차 하면서 1단계 수정 작업에 들어 갔습니다. 위의 내용을 별도의 별도의 HTML 페이지로 만들고 블러오는 방법을 썼습니다.

   

배노 소스 2번 -  iframe 활용


<div style="clear: both; float: right;width:250px; height:220px; margin-left:10px;margin-top:10px; font-size:10px;">

   

<IFRAME src="http://cfs.tistory.com/custom/blog/86/868489/skin/images/ad.htm" name="chuncuh" width="250" height="218" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"> </IFRAME>

   

</div>

   

제가 봐도 멋진 아이디어 였습니다. 하지만 역시 네이버에서 검색결과는 좌절이었습니다.



검색 결과는 역시 배너가 메인 이미지로 검색


   

그래서 아이패드에서 보이지 않는 단점을 감수하고 플래시로 만들어서 사용하는 방법을 생각하고 플래시를 만드려고 보니 플래시 파일을 만들 수 있는 프로그램이 없었습니다. 개인적으로는 거의 3년이상 플래시를 쓰지 않다 보니 관련 프로그램이 없었던 것입니다.

   

그래서 약간의 삽질(?) 이후에 대안으로 생각을 한 것이 div에 배경으로 배너의 이미지를 넣고

   

배너 넣기 최종

   

<div style="clear: both; float: right; margin-left:10px;margin-top:20px; width:250px; height:208px; background-image:url(http://cfs.tistory.com/custom/blog/86/868489/skin/images/ben_20131030.jpg) ">


<a href="http://www.meritzdirectmall.com/H002/chunchu" style="display:block; width:300px; height:208px;" target="_blank">

<fon size="10px" color="#ffffff">[ad] 메리츠 다이렉트몰 </font><br/>

</a>

   

</div> 



Div에 배경으로 배너 이미지를 넣고 하이퍼 링크에 스타일을 넣어서 빈 배너(배경에 이미지가 있기 때문에 내용은 없는 것입니다) 영역을 클릭이 가능하게 하였습니다.

   

위에 백그라운드 이미지는 제 블로그에 파일 올리기로 올리고 이미지 주소를 확인 한 것입니다.

   

   

이미지 주소 얻는 법은 위 이미지를 보시면 이해가 빠르 실 것입니다.  


배너이미지를 배경으로 넣고 하이퍼 텍스트 부분을 설정 값을 넣어서 빈공간에도 클릭이 가능하게 한 것입니다.  


프리랜서 블로거로 수익을 얻을 수 있는 방법에 대하여 다양한 이야기를 풀어가 보려고 합니다. 


개인적을 블로그가 제 취미여서 남서울대학교 관련 제안 작업이나 업무 때문에 컴퓨터 앞에 있는 시간이 늘어나면서 포스팅 글감이 폭주를 합니다. 





천추의 보험 이야기 첫 번째 - 의료 실비보험에 정보

아이폰 5의 거치대 추천! 벨킨 iPhone 5용 충전 + 싱크 독[Belkin Charge+ Sync Dock]

프리랜서 블로거 수익형 블로그에 도전하다!

원노트 강좌 [2] 원노트로 기본 시스템의 이해

2013년 소니 HRA 발표 행사장 스케치

원노트 강좌 [1] 원노트 강좌에 프롤로그

실제 해상도와 업무 해상도 디스플레이 설정

윈도 8.1 리뷰 [3] windows 필수 패키지를 아십니까?


   

블로그 이미지

천추

IT 이야기를 중심으로 블로그를 운영하고 있습니다.

댓글을 달아 주세요

티스토리 툴바