티스토리 메인 갤러리 + 웹진형 만들기

짱구나라 | 컴퓨터 | 조회 수 2298 | 2016.03.29. 21:17

http://ys0006.tistory.com/

이런식으로 메인 화면을 갤러리 , 웹진형으로 설정 가능하게 해보도록 하겠습니다.

1. 티에디션 아이템을 추가합니다.

html을 수정 합니다

<span class="hx">YS's Blog</span>

</div>

<s_tabloid>

<s_article_rep>

<a href="[##_article_rep_link_##]" title="[##_article_rep_title_##]"><span class="thumb"><img src="http://rgo4.com/files/attach/images/external/tip/[##_article_rep_thumb_hash_##]" alt="[##_article_rep_title_##]" class="dno"><span id="str">Loading..</span></span> <strong>[##_article_rep_title_excerpt_##]</strong></a>

<p>[##_article_rep_date_##]</p>

</li>

</s_article_rep>

</s_tabloid>

</ul>

</div>

YS's Blog 부분에 자신의 블로그 인사말 같은것으로 적당히 수정 해주세요.

css/html 추가

.hbar{border-bottom:2px solid #bbb !important;width:auto !important;}

.trb:after,.hbar:after{display:block;clear:both;content:""}

.hbar a{background:#fff url(http://cfs.tistory.com/custom/blog/55/553473/skin/images/gol_btn.png) 0 0 no-repeat;height:16px !important;margin:5px 0 !important;border:1px solid #d7d7d7 !important;border-right:0;padding:4px 4px 5px 4px !important;float:right;line-height:20px !important}

.hbar a.chk{background-position:4px -264px;width:15px;border-right:1px solid #d7d7d7}

.hbar a.chk.on{background-position:4px -294px}

.hbar a.gal{background-position:4px -505px;width:16px;border-left:0 !important;border-right:1px solid #d7d7d7 !important;margin-right:10px !important}

.hbar a.web{background-position:4px -475px;width:16px;border:1px solid #888!important}

.gal a.gal{border:1px solid #888 !important}

.gal a.web{border:1px solid #d7d7d7 !important;border-right:0 !important}

span.hx{margin:0;font-size:18px !important;color:#0f0f0f;font-family:'Open Sans',NanumGothic,'Malgun Gothic',tahoma !important;padding-bottom:10px !important;margin-bottom:20px !important;font-weight:bold !important}

span.hx em {color:#777;font: 80% Verdana, Arial, Helvetica, sans-serif}

.fixed_img_col{background:#fff;margin-bottom:10px;font-family:tahoma !important}

.fixed_img_col ul{margin:0;padding:0;font-size:12px;list-style:none}

.fixed_img_col li{position:relative;padding:15px 0 15px 340px !important;vertical-align:top;*zoom:1;border-top:1px dashed #ddd !important;display:block;width:960px}

.fixed_img_col li:first-child{border-top:0 !important}

.fixed_img_col li:after{display:block;clear:both;content:""}

.fixed_img_col a{text-decoration:none;cursor:pointer}

.fixed_img_col a .cmt{color:#f00 !important;font-size:10px !important}

.fixed_img_col a strong{display:inline-block;margin:0 0 4px 0;color:#333}

.fixed_img_col a strong{color:#0f0f0f;font-family:'Open Sans',NanumGothic,'Malgun Gothic',tahoma !important;font-size:18px !important}

.fixed_img_col .thumb{display:inline;overflow:hidden;float:left;position:relative;text-align:center;width:320px;height:180px;margin:0 15px 0 -325px !important;background:#eee;color:#666;line-height:180px;text-align:center;border:1px solid #e7e5e6 !important}

.fixed_img_col .thumb img{border:0;width:320px;height:180px;}

.fixed_img_col .thumb img.dno{display:none}

.fixed_img_col p{margin:0;color:#767676 !important;line-height:1.4 !important}

.fixed_img_col p div{margin:7px 0 0;color:#555;line-height:1.6}

.fixed_img_col a:hover strong{text-decoration:underline !important}

.fixed_img_col a:hover .thumb{border-color:#999 !important}

.flexible_img_col {margin-left:-15px !important}

.flexible_img_col ul{margin:0;padding:0;font-size:12px;font-family:Tahoma, Geneva, sans-serif !important;list-style:none;*zoom:1}

.flexible_img_col ul:after{display:block;clear:both;content:""}

.flexible_img_col li{float:left !important;width:310px;margin:15px 0 0 15px !important;padding:0 !important;background:#fff}

.flexible_img_col li.masonry-brick{margin-top:0}

.flexible_img_col .thumb{display:block;overflow:hidden;position:relative;color:#333;width:308px !important;text-align:center;border:1px solid #ddd !important;border-bottom:0 !important;background:#fafafa;line-height:172px;text-align:center;white-space:nowrap}

.flexible_img_col .noi .thumb{border-color:#ddd !important}

.flexible_img_col .thumb span{width:auto;font-weight:bold;font-family:'Open Sans',NanumGothic,'Malgun Gothic',tahoma;font-size:32px}

.flexible_img_col .thumb img{width:auto;border:0}

.flexible_img_col .thumb img.dno{display:none}

.flexible_img_col a{display:block;width:auto !important;margin:0 auto !important;padding:0;text-decoration:none;cursor:pointer}

.flexible_img_col strong{display:block;width:auto;overflow:hidden;padding:10px 10px 5px;border:1px solid #ddd ;border-top:0;border-bottom:0;font-size:15px !important;color:#0f0f0f;font-family:'Open Sans',NanumGothic,'Malgun Gothic',tahoma}

.flexible_img_col strong span{color:#f00;font-size:12px;margin-left:5px}

.flexible_img_col p{display:normal;font-size:11px !important;color:#444 !important;line-height:normal;line-height:normal !important;padding:0 10px 10px !important;border:1px solid #ddd !important;border-top:0 !important}

.flexible_img_col a:hover strong{color:#f00 !important}

.flexible_img_col a:hover .thumb,.flexible_img_col a:hover strong,.flexible_img_col a:hover p{border-color:#333 !important}

css를 추가 해 줍니다.

html 수정

function thumbon2(a){

if(a == 'gal'){

$(".hbar").addClass("gal");

$("#masonry").attr("class","flexible_img_col");

}else{

$(".hbar").removeClass("gal");

$("#masonry").attr("class","fixed_img_col");

a = "";

}

rem();

SetCookie("lstyle",a,365);

}

function SetCookie(name,value,expiredays)

{

var todayDate = new Date();

todayDate.setDate(todayDate.getDate() + expiredays);

document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"

}

function getCookie(cname)

{

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++)

{

var c = ca[i].trim();

if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

return "";

}

if(getCookie("lstyle") != "gal"){

$(".hbar").removeClass("gal");

$("#masonry").attr("class","fixed_img_col");

}

</script>

html 하단에 수정 합니다.

마무리

너비조정과 +- 를 이용하여 위치 및 크기를 조절 해주세요.

[AD] 캐릭터 AI 대화 사이트 가상 연애 - 로판 AI

[AD] 김치프리미엄 김프 실시간 확인 - 김프판

로그인해주세요

공지 드디어 알고사 공식 어플 출시!! 어플 설치하고 구매정보 받아보세요! 16.04.07.

컴퓨터
컴퓨터로 영화나 드라마 다운받아 보실때 리모콘 [125]
- 토담토담 ·
- 17.09.05. ·
- 조회 수 3489 ·
- 21 ·
황금벌레 리모컨 어플 좋고 편해요 침대에 누워서 폰으로 넘기거나 되감고 정지시키고 도움되셨담 추천 부탁드려요 ㅎㅎ
컴퓨터
로지텍마우스 [56]
- 라이추 ·
- 17.06.26. ·
- 조회 수 2054 ·
- 1 ·
제가쓰고있는 로지텍 m305라는 무선마우스 입니다 저 빨간 원을 보시면 휠양쪽으로 화살표가 있는데요 휠을 위아래로 굴리는거 외에도 좌우로 움직일수있어요 저 휠을 좌우로 움직이는 동작에...
컴퓨터
GTX 1070 INTEL CORE [29]
- 꾸미! ·
- 17.06.18. ·
- 조회 수 1208 ·
- 1 ·
요즘에 VGA의 발전이 하루 이틀만에 급성장하는 것을 보실수가 있을텐데 요즘시세에 GTX1000 번 이상으로 올라가도 거뜬히 중고가격으로는 10만원까지도 구할수있습니다. 하지만 가장 최신버전인...
컴퓨터
이브이 진화방법 추가 [42]
- nalra ·
- 17.02.20. ·
- 조회 수 12353 ·
- 1 ·
이브이 진화방법 추가(에브이, 블래키) 에브이 - Sakura 블래키 - Tamao 추가 : 제 경험상 다른 진화 방법들처럼 이름별로 첫 1회만 적용이에요. 좋은 이브이로 좋은 진화체 얻으시길! * 확정 진...
컴퓨터
카비레이크에 윈도우7 설치가능합니다 [18]
- kabyi7 ·
- 17.01.25. ·
- 조회 수 10989 ·
- 0 ·
다만 마소에서 윈도우10만 밀고 있기에 대부분의 싸이트에서 윈도우10만 가능하다고 합니다. 하지만 이번에 해외나 국내에서 테스트한 영상으로는 윈도우7도 설치가 가능합니다. 다만 윈도우10을...
컴퓨터
가격대 괜찮은 게이밍 노트북! [20]
- 카카로톳 ·
- 16.12.21. ·
- 조회 수 3184 ·
- 0 ·
지포스gtx960m // 메모리 8기가 // 쿼드코어 cpu 면 오버워치는 상옵 이상 가능하며 롤과 피온3는 풀옵에서 렉없이 즐길 수 있습니다. 빠른 속도를 위해 SSD는 장착하는 것이 좋아 ssd가 장착된 ...
컴퓨터
블루스크린이 자주 뜰때 [18]
- yosiro ·
- 16.11.07. ·
- 조회 수 2087 ·
- 0 ·
블루 스크린이 자주 뜰때는 컴퓨터 내장에 램메모리 모듈을 뺐다가 청소해 주세요.
컴퓨터
보노 퀵차지 숏케이블 대박상품 [1]
- 니니니니니케이 ·
- 16.10.14. ·
- 조회 수 2588 ·
- 0 ·
http://www.wemakeprice.com/deal/adeal/1493065/ 고속 충전 모두 구매합시다 990원은 거져먹는거죠 두개씩 사달라고 하는거보면 홍보로 뿌리는거로 보고 있습니다
컴퓨터
YouTube에서 자신이 업로드한 동영상을 최상의 화질로 인코딩시키는 방법 [4]
- Riche_KIM ·
- 16.05.11. ·
- 조회 수 6477 ·
- 0 ·
유튜브의 화질은 업로드 이후에 1080p 이하와 1440p 이상, 그리고 H.264 (레거시 코덱)와 VP9 (차세대 코덱)에 의해 변수가 존재합니다. 1440p 이상은 단위시간 당 픽셀에 대한 비트레이트 배분...
컴퓨터
QHD모니터에서 4개화면으로 나오는 현상 + 케이블 종류 [7]
- 쭈형 ·
- 16.05.11. ·
- 조회 수 7556 ·
- 0 ·
요즘 백수라 주식카페에 심심풀이로 올렸던 글인데 생각보다 많은분들이 같은 문제로 골치썩고있는거 같아 공유합니다. 지금은 아니더라도 QHD모니터가 많이 보급되면 분명 유행처럼 같은 증세...
컴퓨터
화면 캡쳐, 녹화 방법 [1]
- 알고사 ·
- 16.04.03. ·
- 조회 수 14234 ·
- 2 ·
■목차 1. 화면 녹화 (가장추천) 2. 페이지 PDF로 저장 (추천) 3. 알툴바로 캡쳐방법(추천) 4. 브라우저에서 캡쳐방법(비추천) * 핸드폰 구매할때 아래와 같이 필히 제품 페이지를 캡쳐해두세요.(...
컴퓨터
컴퓨터 느려졌을때 [1]
- 에밀리야넨코 ·
- 16.03.29. ·
- 조회 수 7262 ·
- 0 ·
컴퓨터느려젔을대 싸용하는 무료 프로그램입니다 하드디스크최적화 한번만하셔도 많이 빨라집니다. 링크따라 가셔서 설치 하시면 됩니다. 악성코드없고 유료결제없습니다. 믿고쓰세요.
컴퓨터
pdf 파일 변환하는 사이트 [2]
- hitazo ·
- 16.03.29. ·
- 조회 수 4494 ·
- 0 ·
https://smallpdf.com ppt, word, excel 등의 문서를 pdf로 변환, 비밀번호 풀기, 합치기, 나누기 등 pdf와 관련된 다양한 기능을 제공하는 사이트입니다.
컴퓨터
구글,6년간 SSD를 사용하여 얻은정보 입니다
- 골대맞추기 ·
- 16.03.29. ·
- 조회 수 2794 ·
- 0 ·
2차 출처는 클리앙 http://www.clien.net/cs2/bbs/board.php?bo_table=news&wr_id=2131413 구글이 6년간 데이터센터에서 수많은 SSD를 사용하면서 얻은 정보를 공개하였습니다.6년간 10여...
컴퓨터
이거 저만몰랐나요??? 인터넷탭켜기
- 레알나미 ·
- 16.03.29. ·
- 조회 수 2221 ·
- 0 ·
3. If you accidentally close a tab, CTRL+SHIFT+T reopens it. 인터넷 탭을 실수로 끄면 CTRL+SHIFT+T를 누르면 다시 열릴 것이다 검색하다가 찾았네요.....
컴퓨터
PC그램 (스카이레이크 기반) 노트북에서 windows7 설치 [1]
- 뿡뿡대왕 ·
- 16.03.29. ·
- 조회 수 7255 ·
- 0 ·
저렴하지만 쓸만하다고 생각해서 LG PC그램 15.6" 노트북을 구매했습니다. (15ZD960-GA~~) 한마디로 윈도우7이 설치되지 않습니다. -_-; 원인: 대부분 USB CDROM이나 부팅메모리로 설치를 ...
컴퓨터
크롬 사용자 분들 꿀팁 [1]
- 굿바이리무버 ·
- 16.03.29. ·
- 조회 수 2681 ·
- 0 ·
크롬 확장프로그램 Chrome Currency Converter 화면에 $로 표기 되어있는 부분이 있으면 사진과 같이 $를 자동으로 \으로 환율적용하여 표시하여 줍니다. 링크로 들어가시면 설치 페이지 ...
컴퓨터
영문 키보드 한영키 및 한자키 적용
- 쿤이쿤 ·
- 16.03.29. ·
- 조회 수 7711 ·
- 0 ·
기계식 키보드의 경우 한자키 및 한영키 적용이 인식이 안될 경우가 가끔있습니다. 키보드의 문제라기 보다는 기존에 사용하던 키보드 설정값 차이 때문인 경우가 많아 레지스트리 수정 파일 ...