문서의 이전 판입니다!
텀블러 (Tumblr)
텀블러는 소셜네트워크 서비스로 블로그 형태로 SNS 처럼 사용을 하는 마이크로 블로그 플랫폼이다. 세계나라에서 약 1억만명이상이 이 서비스를 이용하고 있으며 사진.글.동영상등 공유가 쉬워서 많이들 이용하고 있다.
블로그와 트위터의 중간 정도 개념이라고 볼수 있다.
관리페이지도 아름답고, 자체에도 예쁜 틀이 많은 것이 특징이다.
마크다운을 잘 지원한다.
성인자료문제
외국 블로깅 사이트가 성인 컨텐츠에 관대한 것은 사실이지만, 대부분의 경우 링크를 타고 이동할 경우 장차 보게 될 내용이 성인물일 경우 진짜 보려는 것인지 확인을 하도록 되어 있다.
구글의 블로거닷컴도 성인물에 대해 차단이나 제제가 없지만, 블로그 운영자가 성인물이 올라오는 곳인지 아닌지를 미리 표시할 수 있고, 서핑하는 사람도 화면에 이상한 사진이 뜨기 전에 미리 선택을 할 수 있도록 되어 있다.
하지만 텀블러의 경우 그런 기능이 전혀 없으며, "회사에서 봐도 되는지 아닌지.." 에 대한 버튼은 있으나, 전혀 존재의 의미가 없는 정도로 활용도가 낮다. 링크나 태그를 타고 들어가다 허거덕.. 놀라는 일이 종종 생긴다.
이것은 분명이 개선되어야 할 문제이며, 국내에서처럼 '성인인증을 강제' 하지는 않더라도, 구경 다니는 사람이 '선택'할 수 있도록 하는 기능이라도 있어야 한다.
<!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>
누구나 수정하실 수 있다. 위키 사용법 참고하라.