티스토리 블로그 꾸미기 "최신 글 불러오기와 페이스북 플러그인 설치 " 디자인 소스 [티스토리 블로그 꾸미기]

마케팅/블로그 포트폴리오 2014. 11. 26. 10:00

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


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

   

다음 뷰의 종료가 너무 아쉬워하면서 글을 씁니다. 최근에 다음 뷰에서 오던 트레픽이 많이 줄어 들었습니다. 그나마 구글의 트레픽이 늘면서 겨우 방문자를 유지하고 있지만 지나 달에 비하면 거의 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'



 


'마케팅 > 블로그 포트폴리오' 카테고리의 다른 글

네이버 블로그 만들기[3] 네이버 상단 디자인  (6) 2015.04.14
티스토리 블로그 '천추의 IT' 디자인 리뉴얼 플랜  (5) 2015.03.19
티스토리 블로그 꾸미기 "최신 글 불러오기와 페이스북 플러그인 설치 " 디자인 소스 [티스토리 블로그 꾸미기]  (27) 2014.11.26
온라인 마케팅 전략 수립 - "청라오피스텔분양" 사례  (7) 2014.09.16
한국형 전자화폐를 꿈꾸는 해피코인 어플 소개[happy coin app]  (2) 2014.08.25
워드 프레스가 부럽지 않은 '티스토리 블로그 홈페이지'  (36) 2014.03.24
블로그 이미지

천추

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

Tag , , ,
트랙백 0개, 댓글 27개가 달렸습니다

댓글을 달아 주세요

공지사항

글 보관함

달력

«   2020/07   »
일 월 화 수 목 금 토
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

티스토리툴바