오픈위키
문서 편집

텀블러 (Tumblr)

http://tumblr-search.com http://www.tumblr.com.onestore.pe.kr

텀블러는 소셜네트워크 서비스로 블로그 형태로 SNS 처럼 사용을 하는 마이크로 블로그 플랫폼이다. 세계나라에서 약 1억만명이상이 이 서비스를 이용하고 있으며 사진.글.동영상등 공유가 쉬워서 많이들 이용하고 있다.

블로그와 트위터의 중간 정도 개념이라고 볼수 있다.

관리페이지도 아름답고, 자체에도 예쁜 틀이 많은 것이 특징이다.

마크다운 (Markdown)을 잘 지원한다.

성인자료문제

외국 블로깅 사이트가 성인 컨텐츠에 관대한 것은 사실이지만, 대부분의 경우 링크를 타고 이동할 경우 장차 보게 될 내용이 성인물일 경우 진짜 보려는 것인지 확인을 하도록 되어 있다.

구글의 블로거닷컴도 성인물에 대해 차단이나 제제가 없지만, 블로그 운영자가 성인물이 올라오는 곳인지 아닌지를 미리 표시할 수 있고, 서핑하는 사람도 화면에 이상한 사진이 뜨기 전에 미리 선택을 할 수 있도록 되어 있다.

(19금)

하지만 텀블러의 경우 그런 기능이 전혀 없으며, "회사에서 봐도 되는지 아닌지.." 에 대한 버튼은 있으나, 전혀 존재의 의미가 없는 정도로 활용도가 낮다. 링크나 태그를 타고 들어가다 허거덕.. 놀라는 일이 종종 생긴다.

이것은 분명이 개선되어야 할 문제이며, 국내에서처럼 '성인인증을 강제' 하지는 않더라도, 구경 다니는 사람이 '선택'할 수 있도록 하는 기능이라도 있어야 한다.

템플릿 만들기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="image:Background" content="" />
<meta name="image:Header" content="" />
<meta name="color:Background" content="#FFFFFF" />
<meta name="text:Blog title size" content="75px" />
<meta name="text:Menu text size" content="13px" />
<meta name="text:Number of columns" content="4" />
<meta name="if:Infinite scroll" content="1" />
<meta name="if:Repeat background" content="1" />
<meta name="if:Fixed background" content="1" />
<meta name="if:Fit background" content="0" />
<meta name="if:Show description" content="0" />
<meta name="color:Body text" content="#444444" />
<meta name="color:Blog title" content="#000000" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/jw8fmba/JuPmhkses/theme.js"></script>

<style type="text/css">
    @import url(http://static.tumblr.com/jw8fmba/pXhlt5pzb/bebasneue.css);
	html, body {
		height: 100%;
	}
	body {
		background: url('{image:Background}') {color:Background} {block:IfFixedBackground}fixed{/block:IfFixedBackground} {block:IfNotRepeatBackground}no-repeat{/block:IfNotRepeatBackground} center 0;
		{block:IfFitBackground}background-size: cover;{/block:IfFitBackground}
		margin: 0;
		font-family: Calibri, Helvetica, Arial, sans-serif;
		color: {color:Body text};
		font-size: 12px;
		line-height: 160%;
	}
		a {
			color: inherit;
		}
			a img {
				border: none;
			}
		blockquote {
			margin: 0;
			padding: 0 0 0 9px;
			border-left: 1px dotted;
		}
		header {
			position: relative;
			width: 1040px;
			margin: 50px auto 25px auto;
			text-align: center;
		}
			header a {
				text-decoration: none;
			}
			header img {
				max-width: 100%;
			}
			header .title h1 {
				margin: 0;
				line-height: 100%;
				font-family: 'BebasNeueRegular', Arial, sans-serif;
				text-transform: uppercase;
				font-weight: normal;
				font-size: {text:Blog title size};
				color: {color:Blog title};
			}
			header p {
				margin: 5px 0;
			}
			header .menu_item {
				margin: 0 5px;
				{block:IfMenuTextSize}font-size: {text:Menu text size};{/block:IfMenuTextSize}
				font-weight: bold;
			}
		{block:IndexPage}.no_of_columns_1 {
			width: 260px;
		}
		.no_of_columns_2 {
			width: 520px;
		}
		.no_of_columns_3 {
			width: 780px;
		}
		.no_of_columns_4 {
			width: 1040px;
		}
		.no_of_columns_5 {
			width: 1300px;
		}
		.no_of_columns_6 {
			width: 1560px;
		}
		.no_of_columns_7 {
			width: 1820px;
		}
		.no_of_columns_8 {
			width: 2080px;
		}{/block:IndexPage}
		.posts {
			position: relative;
			margin: 25px auto;
			{block:PermalinkPage}
			width: 510px;
			{/block:PermalinkPage}
			height: 105%;
		}
			.post {
				float: left;
				position: relative;
				margin: 5px;
				width: {block:IndexPage}250{/block:IndexPage}{block:PermalinkPage}500{/block:PermalinkPage}px;
				/*box-shadow:1px 1px 3px 1px rgba(0,0,0,0.5);*/
			}
	
				.post h2 {
					margin: 0;
					font-size: 16px;
					line-height: 18px;
					letter-spacing: 1px;
					font-weight: normal;
				}
				.post h2.quote {
					font-family: Georgia, "Times New Roman", Times, serif;
					letter-spacing: 0;
					font-style: italic;
				}
				.post p, .post li {
					line-height: 175%;
				}
				.post p {
					margin: 10px 0 5px 0;
				}
				.post ol, .post ul {
					margin: 3px 0;
					padding: 0;
				}
					.post li {
						margin: 2px 35px;
					}
				{block:IndexPage}.post .controls {
					position: absolute;
					bottom: 0;
					
					padding:0.5em 0;
					left: 0;
					width: 100%;
					text-align: center;
					display: none;
				}
				.post:hover .controls {
					display: block;

					background-color: rgba(10,10,10,0.5);
				}
				    .post .controls a p {margin:1px;color:rgba(200,200,200,0.9);} .post .controls a {text-decoration:none;}
					.post .controls .item {
						display: inline-block;
						position: relative;
						vertical-align:top;
					}
					.post .controls .like {
						background-image: url('http://static.tumblr.com/jw8fmba/JQllum7dg/like.png');
						width: 21px;
						height: 20px;
						margin-right: 5px;
					}
					.post .controls .reblog {
						background-image: url('http://static.tumblr.com/jw8fmba/bPzlum7er/reblog.png');
						width: 24px;
						height: 20px;
					}
					.post .controls .note_count {
						background-image: url('http://static.tumblr.com/jw8fmba/Iosm7ri3a/note_count_middle.png');
						height: 16px;
						color: #FFF;
						font-weight: bold;
						font-size: 11px;
						padding: 2px 5px;
						margin-left: 7px;
						line-height: 1.6;
					}
						.post .controls .note_count:before {
							content: '';
							background-image: url('http://static.tumblr.com/jw8fmba/dIim7ri67/note_count_left.png');
							height: 20px;
							width: 5px;
							position: absolute;
							top: 0px;
							left: -5px;
						}
						.post .controls .note_count:after {
							content: '';
							background-image: url('http://static.tumblr.com/jw8fmba/gtqm7ri8i/note_count_right.png');
							height: 20px;
							width: 2px;
							position: absolute;
							top: 0px;
							right: -2px;
						}{/block:IndexPage}
			.post .photo {
				position: relative;
				overflow: hidden;
			}
				.post img {
					max-width: 100%;
					height: auto;
				}
				.post img.main_photo {
					width: 100%;
					float: left;
				}
			.post .player {
				padding: 0 10px;
				background: #FFF;
				margin: 0;
			}
			.post .lines {
				margin: 0 0 5px 0;
			}
				.post .lines .line {
					padding: 5px 10px;
				}
				.post .lines .even {
					background: {color:Body text};
					color: {color:Background};
				}
					.post .lines .even * {
						color: {color:Background};
					}
			.post ol.notes {
				padding: 0;
				list-style-type: none;
			}
				.post ol.notes li.note {
					border-bottom: solid 1px #F6F6F6;
					padding: 6px 0;
					margin: 0 !important;
				}
					.post ol.notes li.note img.avatar {
						vertical-align: -4px;
						margin-right: 10px;
						width: 16px;
						height: 16px;
					}
					.post ol.notes li.note .answer_content {
						font-weight: normal;
					}
					.post ol.notes li.note blockquote {
						border-color: #F6F6F6;
						padding: 4px 10px;
						margin: 10px 0px 0px 25px;
					}
						.post ol.notes li.note blockquote a {
							text-decoration: none;
						}
		.pagination {
			display: none;
		}
	.posts h2 a { text-decoration:none;}
	.post h2 {margin-top:0.5em;color:#560c6e;}
	.post {overflow:hidden;background-color:rgba(100,100,100,0.2);
	text-shadow: 1px 1px 3px #777;}
	.test {border:1px red dotted};
	{CustomCSS}
</style>
<noscript>
	<style>
		.posts {
			opacity: 1 !important;
		}
    </style>
</noscript>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-16671750-8', 'vaslor.net');
  ga('send', 'pageview');

</script>
</head>

<body class="{Name}" data-theme-network="level82" data-theme-id="32615">

	{block:Pagination}<ul class="pagination">
		<li>{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">Next</a>{/block:NextPage}</li>
	</ul>{/block:Pagination}

	<header>
		<a class="title" href="/">{block:IfHeaderImage}<img src="{image:Header}" />{/block:IfHeaderImage}{block:IfNotHeaderImage}<h1>{Title}</h1>{block:IfNotHeaderImage}</a>
        {block:IfShowDescription}{block:Description}<p>{Description}</p>{/block:Description}{/block:IfShowDescription}
		<p>{block:AskEnabled}<a class="menu_item" href="/ask">{AskLabel}</a>{/block:AskEnabled}{block:SubmissionsEnabled}<a class="menu_item" href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}{block:HasPages}{block:Pages}<a class="menu_item" href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}{block:Pagination}{block:PreviousPage}<a {block:IfInfiniteScroll}style="display:none"{/block:IfInfiniteScroll} href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}{block:NextPage}<a {block:IfInfiniteScroll}style="display:none"{/block:IfInfiniteScroll} href="{NextPage}">{lang:Next page}</a>{/block:NextPage}{/block:Pagination}<a class="menu_item" href="/archive">{lang:Archive}</a></p>
    </header>

<center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 위키상단 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-2592234474265189"
     data-ad-slot="3811017742"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>

    <div class="posts no_of_columns_{text:Number of columns}{block:IfNotNumberOfColumns}4{/block:IfNotNumberOfColumns}" {block:IndexPage}style="opacity: 0"{/block:IndexPage}>    
    	{block:Posts}
    
                <div class="post {block:IfInfiniteScroll}load{/block:IfInfiniteScroll}" id="post_{PostID}">
        

        {block:Text}{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}{Body}{block:More}<h3><a href="{Permalink}">{lang:Read more}</a></h3>{/block:More}
                
        {/block:Text}
        
        {block:Answer}<p><strong>{lang:Asker asked}: {Question}</strong></p><p>{Answer}</p>{/block:Answer}{block:Chat}{block:Title}<h2>{Title}</h2>{/block:Title}<div class="lines">{block:Lines}<div class="line {Alt}">{block:Label}{Label}{/block:Label} <em>{Line}</em></div>{/block:Lines}</div>{/block:Chat}{block:Quote}<h2>"{Quote}"</h2>{block:Source}<p>- {Source}</p>{/block:Source}{/block:Quote}
        
        {block:Link}<a href="{URL}" {Target}><h2>{Name}</h2>{block:Description}{Description}{/block:Description}</a><br />{/block:Link}
        
        
        {block:Photo}<div class="photo">{LinkOpenTag}<a href="{Permalink}"><img src="{block:IndexPage}{PhotoURL-250}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-500}{/block:PermalinkPage}" alt="{PhotoAlt}" class="main_photo" /></a>{LinkCloseTag}</div>{/block:Photo}
        
        {block:Photoset}{block:IndexPage}{Photoset-250}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
        
        {block:Video}{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:Video}
        
        {block:Audio}{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}" class="main_photo" /></a>{/block:AlbumArt}<div class="player">{AudioPlayerWhite}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}{block:IndexPage}
        
        <div class="controls">
        {PostSummary}
         <a href="{Permalink}">{PostTitle} {PostSummary}{Caption}</a>
        <a class="like item" onclick="LikePost('{PostID}','{ReblogURL}',this); $(this).css('background-image', 'url(http://assets.tumblr.com/images/iframe_like_active_alpha.png)')"></a>
        <a href="{ReblogURL}?redirect_to=http%3A%2F%2F{Name}.tumblr.com%2Fpage%2F{CurrentPage}" class="reblog item" target="_blank"></a>
        <a href="{Permalink}"><div class="note_count item" id="note_count_{PostID}">{NoteCount}</div></a>
          
        </div>{/block:IndexPage}</div>
        
        {block:PostNotes}<div class="post">
        	{block:NoteCount}<h2>{NoteCountWithLabel}</h2>{/block:NoteCount}
        	{PostNotes}
        </div>{/block:PostNotes}

        {/block:Posts}
    
    </div>
    
    <script>
 window.scrollback = {
  streams:["vaslor"],
  theme: 'light',
  ticker: true
 };
 
 /***** don't edit below *****/
 (function(d,s,h,e){e=d.createElement(s);e.async=1;
 e.src=h+'/client.min.js';scrollback.host=h;
 d.getElementsByTagName(s)[0].parentNode.appendChild(e);}
 (document,'script',(location.protocol====="https:"?"https:":"http:")+'//scrollback.io'));
</script>
    <script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 0);
    </script>
{block:IndexPage}<script type="text/javascript">
	$(function(){
		var $container = $('.posts').css({
			opacity: 0
		});
		$container.imagesLoaded(function(){
			$container.animate({
				opacity: 1
			});
			$container.masonry({
				itemSelector: '.post',
				columnWidth: 260
			});
		});
		$container.infinitescroll({
			navSelector: '.pagination',
			nextSelector: '.pagination li a.pagination_nextlink',
			itemSelector: '.load',
			loading: {
				img: 'http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png',
				donetext: ''
			}
		},function( newElements ) {
			var $newElems = $( newElements ).css({
				opacity: 0
			});
			$newElems.imagesLoaded(function() {
				$newElems.animate({
					opacity: 1
				});
				$container.masonry( 'appended', $newElems, true );
			});
		});
	});
</script>{/block:IndexPage}
</body>
</html>
누구나 수정하실 수 있다. 위키 사용법 참고하라.

연결문서

CC Attribution-Noncommercial-Share Alike 4.0 International 별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Noncommercial-Share Alike 4.0 International
15.3 KB tech/tumblr.txt · 마지막으로 수정됨 2018/02/15 06:54 저자 175.223.49.124 V_L 밍키찡짱 숙키으 밍키밍키다

0.054 seconds in processing this page on this powerful server.