블로그 마케팅 강좌 - 프롤로그..

강좌의 대상 층은 "전업 블로거"의 수입을 조금 늘릴 수 있는 방법을 제시하고, 마케팅 비의 부담을 느끼는 소기업이나 소상 점을 위한 내용을 중심..

블로그 1:1 멘토링 교육 안내..

블로그가 요동을 치고 있는 상황입니다. 덕분에 저도 블로그 교육을 다시 시작을 하려고 합니다. 교육 방식은 1:1교육으로 메토링을 진행 하려고 ...

IT 제품 등에 대한 리뷰를하고...

브랜드 블로그와 블로그 마케팅을 블로그를 전문적으로 운영해드리고 있습니다.
TEL.010-2776-9081 / chunchu99@gmail.com

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

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


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

   

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



 


홍보배너링크

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://korezn.tistory.com BlogIcon 코리즌

    오랫만에 들러봅니다.
    아주 유용한 포스트이군요.
    감사합니다.

  3.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://yoongun63.tistory.com BlogIcon 안티에이징

    좋은정 매일 매일 보면서 공부하고 있습니다. 티스토리 초보자라서~~ 감사합니다.

  4.  댓글주소  수정/삭제  댓글쓰기 Favicon of https://exocet2015.tistory.com BlogIcon 낯선공간

    정성스런 포스팅 잘 보구 가요. 좋은하루되세요~

  5.  댓글주소  수정/삭제  댓글쓰기 Favicon of https://ssoqubae.tistory.com BlogIcon 쏘쿠베

    좋은 정보 잘 알아 갑니다. 늘 행복하세요^^

  6.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://maker.so BlogIcon sky@maker.so

    다음뷰도 빼버린지 오래고 믹시도 있으나 마나인듯하고........

    전 그냥 아무 생각 없이 포스팅만 하고 있는 것같습니다.

  7.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://beauty1234.tistory.com BlogIcon 뷰티톡톡

    다음뷰 제대로 활용을 못하고 있는데...
    좋은 정보 잘보고갑니다.

  8.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://aviation.tistory.com BlogIcon 일진언니

    최신글 디자인 정말 이쁘네요~~!!!!! 요즘 일진언니블로그 네이버검색에서 아예 제외되서 고민중이에요 ㅠ.ㅠ 그래서 새로하나 만들긴했는데 막막하답니다....

  9.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://dlaoblog.tistory.com BlogIcon Cacka Imae

    저거 어캐하는데 잘모르겟어요

  10.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://silviantf.tistory.com BlogIcon 은방울꽃story

    님~
    최신글 디자인 변경하는거요~
    그거 다음뷰의 최신글을 변경하는건가요?
    모르겠어서 저거 소스 그대로 했는데 툴만 형성되고 글은 안보이네요?
    다음뷰 사용하고 있었는데 종료되면서 그때 최신글과 인기글이 그대로네요...

  11.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://powerjm.tistory.com BlogIcon 제우스v

    아...스킨을 좀 꾸며야 하늗네..공부 많이 해야 할듯 해요 ㅠ.ㅠ
    좋은 정보 잘 보고 갑니다...

  12.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://su1624.tistory.com BlogIcon 도느로

    저번에 올려주신 글을 보고 스킨의 중요성을 잘 알고 있습니다.
    그래서 요즘은 좋은 스킨만 보면 그저 부러워만 하고 있지요 ㅜㅜ

  13.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://miso100473.com BlogIcon 미소바이러스

    유익한 정보 입니다
    덕분에 잘알게 됩니다

  14.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://tjdrnr1990.tistory.com BlogIcon 그대라는말

    제대로 여러글 읽어보고 저도 시간좀되면 바꿔봐야겠어요 천추님 블로그는 마치
    블로그가아니라 타 사이트를보는듯한 !! 자주들릴게요 ^,^!

  15.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://cbdok.tistory.com BlogIcon 명태랑 짜오기

    유용한 정보 잘 보고 갑니다.
    즐거운 하루 되세요^^

  16.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://www.ibagu.co.kr BlogIcon 이바구™

    최신글이 예쁘게 나오네요.

  17.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://social-communication.tistory.com BlogIcon 진실된

    유용한 팁이네요, 잘 보고 갑니다.
    :-)

  18.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://zoahaza.net BlogIcon 조아하자

    제 블로그는 원래부터 네이버 검색따위 안되는지라... ㅠㅠ 그냥 이웃들과 교류만 좀 하면서 블로그 운영하고 있습니다.

  19.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://sangsaeng7.tistory.com BlogIcon 알아야산다구

    유용한 팁입니다. 감사합니다.

  20.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://gothink.tistory.com BlogIcon 개인이

    블로그가 상당히 깔끔하네요. 덕분에 좋은 정보 잘 보고 갑니다. 앞으로 자주 와야 겠어요 ^^