![[ 25x25 transparent png ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LfGiWXGtSJn0k6bp00k3CtErbzC6BufvaCmzrvIoS6QJCW4-Q2kuMqAkmhZIdfM9p4rKVD2X2UwBZEa6XYU8Rnwv2iOBKMCXoCq3m5I3xQM2LdHfXfeeZ3U87oPYD2lBpv7s6rzhjDA/s25/25x25+transparent+img.png){kind=small}
[ images for this blogger ]
[ tipps for decoration ]
#01 css에 첨부해서 이미지 테투리와 그림자 제거
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
padding: 0px !important;
background: none !important;
border: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
#02 css에 첨부해서 이미지 테두리는 남기고 그림자만 제거
.post img {
box-shadow: none !important;
border:1px solid #dddddd;
padding:8px;
}
#03 css에 첨부해서 헤드 이미지와 description 센터정렬
#header-inner {text-align:center !important;} #header-inner img {margin: 0 auto !important;}
#04 css에 첨부해서 페이지 가젯 센터정렬
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
#05 텍스트 가젯 센터정렬
.widget {
text-align: center;
}
#06 자바스크립트로 랜덤포스트 설치
<style type='text/css'>
#random-posts{width:100%;background:none;}
#random-posts ul {margin:0 auto!important; padding:0 !important; text-align:center}
#random-posts ul li {background:none; list-style-type:none; margin:0; padding:0 !important}
#random-posts li{float:left; list-style:none; border-radius:10%; width:121px; height:121px; overflow:hidden; margin-right:5px !important; margin-top:5px !important}
#random-posts img{float:left; width:100%; height:100%; max-width:none; max-height:none; min-width:0; min-height:0; border-radius:10%; outline:0; border:2px solid #999999; position:static; transition:all .8s ease-out;}
#random-posts img:hover {-webkit-transform:scale(1.2); -ms-transform:scale(1.2); -o- transform:scale(1.2); transform:scale(1.2);}
</style>
<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=7;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGfHPKsw2hM_92ZMCTi_6Qbrq_SlF2jttqdx1p0MjJriwm5FObrOSEmp65jHonp8BaO14ojS22At-ZvCtkxwKQBuSBWL8yUJoRZxV9BBDsHVbTb0b3JzBkWIXFXT1V07BciP3dmn5HmrC/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>
#07 css에 첨부해서 이미지 가젯 센터정렬
.Image img{
display: block;
margin-left: auto;
margin-right: auto;
}
#08 자바스크립트로 피춰드포스트 설치
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0; list-style::none;border-radius:5%; width:340px; height:340px; position:relative; margin:0 auto;}
ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){display:block; line-height:0}
ul.featured-widget-list img{border-radius:5%; border:2px solid #999999; width:100%; height:auto}
ul.featured-widget-list
.featuredbg:hover{opacity:.1}
ul.featured-widget-list h5{position:absolute; left:0; right:0; text-align:center; bottom:10px; z-index:2; color:#fff; text-shadow:1px 1px 1px #000; margin:0; text-transform:capitalize; padding:10px 20px; line-height:1.9em; letter-spacing:0.3px; font:600 14px 'Georgia'; overflow:hidden}
ul.featured-widget-list li:hover h5{bottom:30px}
ul.featured-widget-list
.featured-meta{font: 12px 'Georgia'; letter-spacing:0.3px; position:absolute; bottom:0; left:0; right:0; text-align:center; z-index:2; color:#fff; text-shadow:1px 1px 1px #000; opacity:0}
ul.featured-widget-list h5, ul.featured-widget-list
.featured-meta {-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;}
ul.featured-widget-list li:hover
.featured-meta{bottom:20px; opacity:1}
.feat-buttons{position:absolute; top:50%; left:0;z-index:5; width:100%}
.feat-buttons a{text-indent:-9999px; margin:0 7px; width:10px; height:10px; padding:5px; position:relative}
.feat-prev{float:left;}
.feat-next{float:right;}
.feat-buttons a.feat-prev::before,
.feat-buttons a.feat-next::before{content:"";width:0;height:0; border-width:12px 12px; border-style:solid;border-color:transparent #999999 transparent transparent; position:absolute; top:50%; margin-top:-6px; margin-left:-15px; left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #999999; margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://vishnoir.blogspot.com/",
featuredNum:84,
listbyLabel:false,
feathumbSize:640,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:640,interval:3000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUdR5hxNdYH6UMlUZdbuFjSRaMqS9-O27Fylivwo22BK_yQiDajsNtjRxciaZsPIVUrckc_itZ9n_BuaXR8wLIJqhKi40Hp85x4ulIwcgpJCZetKhJ5SF_j-5J9NQ3CD2Y1506mncQZk/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
#09 추천게시물 모바일에 노출
html 판에서 html3 으로 위젯점프
<b:widget id='HTML3' locked='false' title='[ featured posts ]' type='HTML'> 찾기
가운데에 mobile='yes' 첨부
<b:widget id='HTML3' locked='false' mobile='yes' title='[ featured posts ]' type='HTML'>
#10 css에 첨부해서 포스트 날짜 센터정렬
.date-header {
text-align:center;
}
#11 css에 첨부해서 포스트 타이틀 센터정렬
.post-title {
text-align:center;
}
#12 css에 첨부해서 포스트 타이틀 색깔
.post-title a {
color:#ffbbbb;
}
#13 css에 첨부해서 포스트 쉐어박스 센터정렬
.post-footer {
text-align: center;
}
#14 html 코드로 뉴 홈 올더버튼 바꾸기
(http://www.probloggertricks.com/2013/03/change-older-posts-newer-posts-links-to.html 참조)
new 버튼 원래코드 <data:newerPageTitle/>
new 버튼 개정코드 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoCvc4drOamdDTxm41mK1bCfRYeua1pvJdTmFxb3LuCBEECqiUVr4ZhRmru6mCyUasT3pFNdFKuAVcmIpVkThIhMvgUagFobDtJaP-I5LpihhoYC4XkveUyLd7nT1mNXOYs8wYysHCd8/s1600/gray+new+01.png"/>
home 버튼 원래코드 <data:homeMsg/>
home 버튼 개정코드 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRfFuMAovsKusz4ANIZVMJpy6lLxqin-7Q-T-bv7KT2Mzn17-chOrIFJT-j2Da32pSSDTEPRKJQAcioo6Vx908qjfRbkvhDIm0Fl8YtW_GdbW_RVUXL-MA-aOPhGHDz1JClgUIVuQvAQ/s1600/gray+home+01.png"/>
older 버튼 원래코드 <data:olderPageTitle/>
older 버튼 개정코드 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kVEpRoHzZpLegWyLb5aFVj2UDtO_-tC2I1LWkXiEK21TfL-gUf-IBAgO0Siu5Qi0iXboTt6mLc6SnN4hWarPbsGJwgJEcs5Q2xTOIsghlPN2o9nmWFA8-L0n-DMMQCckDgBxCclnFtE/s1600/gray+older+01.png"/>
원래코드
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
바뀐코드
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoCvc4drOamdDTxm41mK1bCfRYeua1pvJdTmFxb3LuCBEECqiUVr4ZhRmru6mCyUasT3pFNdFKuAVcmIpVkThIhMvgUagFobDtJaP-I5LpihhoYC4XkveUyLd7nT1mNXOYs8wYysHCd8/s1600/gray+new+01.png"/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kVEpRoHzZpLegWyLb5aFVj2UDtO_-tC2I1LWkXiEK21TfL-gUf-IBAgO0Siu5Qi0iXboTt6mLc6SnN4hWarPbsGJwgJEcs5Q2xTOIsghlPN2o9nmWFA8-L0n-DMMQCckDgBxCclnFtE/s1600/gray+older+01.png"/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRfFuMAovsKusz4ANIZVMJpy6lLxqin-7Q-T-bv7KT2Mzn17-chOrIFJT-j2Da32pSSDTEPRKJQAcioo6Vx908qjfRbkvhDIm0Fl8YtW_GdbW_RVUXL-MA-aOPhGHDz1JClgUIVuQvAQ/s1600/gray+home+01.png"/></a>
#15 css 첨부해서 Atom 링크 없애기
.feed-links {display:none !important;}
#16 쿠키 노티스 박스
1) CSS 첨부해서 하단고정
.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;}
2) </b:skin> 아래에 아래의 코드 첨부
<script type="text/javascript">
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Okey",
learn: "More" };
</script>
<style>.cookie-choices-info {z-index:999999!important; background-color:#000000!important; border-top: 1px solid #999999!important; border-bottom: 1px solid #999999!important;}
.cookie-choices-info .cookie-choices-text {font-size:12px !important; color:#999999!important;}
.cookie-choices-info .cookie-choices-button {background-color: #000000!important; text-transform: none!important;}
</style>
3) </head> 바로 위에 아래의 코드 첨부 - 한번만 노출시키는 기능
<script type="text/javascript">cookieChoices = {};</script>
#17 쿠키 노티스 박스 디자인변경
]]></b:skin> 바로 아래에 아래의 코드 첨부
<!--Custom EU Cookies Notice by STCnetwork.org-->
<script type='text/javascript'>
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Okay",
learn: "Learn More" };
</script>
<style>.cookie-choices-info {z-index:999999!important;background-color:#000000!important;border-top: 1px solid #999999;
box-shadow: 1px 2px 2px #000!important; padding:3px 0px!important;}.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#999999!important;}.cookie-choices-info .cookie-choices-button{ background-color: #000000!important;border-radius: 2px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}</style>
#18 백투톱 버튼 설치하기
1. <head> 와 <meta> 사이에 아래의 코드 첨부
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
2. 블로거레이어에서 자바스크립트 가젯을 열고 아래의 코드 첨부
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 8em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: transparent;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6akN4t7h1SwYMS5_3OjN2WoGMqOI97C7ixVfrrMQ6IsvB1KDBw-0v8PWAQylCeFOyfnCEJZw24TY9zzT4XLdr-dP8OuU-YrPqMDgx9DHtXiIE46hOv9iJKOntvR-1xOS75TooYVQTbzI/s1600/back+to+top+-+new+-+PSD+03.png" alt="Back to Top" / ></a>
#19 블로그 모든 링크 새탭
</header> 찾아서 그 앞에 <base target='_blank'/> 첨부
#20 다른 도메인으로 포워딩을 해도 파비콘이 보이는 기능
<b:skin> 찾아서 그 앞에 아래 코드 첨부
(오류가 뜨면서 이 웹사이트에는 적용되지 않았음)
<link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71eTV0hx1DH3henx-ZjV4T-bw5Iw-jB5cAkC8Bdyvcl8g4NfHzto9oDpw1QOh4kQYz6s52l5HU2zbdIYePK4dSNzze_fxt39k2dkeC1lW0-RGhVzX5Zrtg9D9zVdocokeGiFc0smK1fs/s1600/V+fabicon+1.png" type="image/x-icon">
이 코드는 나중에 확인해보면, 아래의 코드로 자동전환됨
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71eTV0hx1DH3henx-ZjV4T-bw5Iw-jB5cAkC8Bdyvcl8g4NfHzto9oDpw1QOh4kQYz6s52l5HU2zbdIYePK4dSNzze_fxt39k2dkeC1lW0-RGhVzX5Zrtg9D9zVdocokeGiFc0smK1fs/s1600/V+fabicon+1.png' rel='shortcut icon' type='image/png'/>
#21 블로그 색깔
#ffffff
#dddddd
#b4b4b4
#999999
#ffbbbb
#f99999
#f48886
#22 블로그 설명
Here I stand on the hazy boundaries between reality and fantasy. I'm just weeping and covering my body with dreams. I become human, monster, or god at different moments... Sometimes dark, sometimes bright.
·•● I am an outsider ●•·
#01 css에 첨부해서 이미지 테투리와 그림자 제거
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
padding: 0px !important;
background: none !important;
border: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
#02 css에 첨부해서 이미지 테두리는 남기고 그림자만 제거
.post img {
box-shadow: none !important;
border:1px solid #dddddd;
padding:8px;
}
#03 css에 첨부해서 헤드 이미지와 description 센터정렬
#header-inner {text-align:center !important;} #header-inner img {margin: 0 auto !important;}
#04 css에 첨부해서 페이지 가젯 센터정렬
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
#05 텍스트 가젯 센터정렬
.widget {
text-align: center;
}
#06 자바스크립트로 랜덤포스트 설치
<style type='text/css'>
#random-posts{width:100%;background:none;}
#random-posts ul {margin:0 auto!important; padding:0 !important; text-align:center}
#random-posts ul li {background:none; list-style-type:none; margin:0; padding:0 !important}
#random-posts li{float:left; list-style:none; border-radius:10%; width:121px; height:121px; overflow:hidden; margin-right:5px !important; margin-top:5px !important}
#random-posts img{float:left; width:100%; height:100%; max-width:none; max-height:none; min-width:0; min-height:0; border-radius:10%; outline:0; border:2px solid #999999; position:static; transition:all .8s ease-out;}
#random-posts img:hover {-webkit-transform:scale(1.2); -ms-transform:scale(1.2); -o- transform:scale(1.2); transform:scale(1.2);}
</style>
<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=7;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGfHPKsw2hM_92ZMCTi_6Qbrq_SlF2jttqdx1p0MjJriwm5FObrOSEmp65jHonp8BaO14ojS22At-ZvCtkxwKQBuSBWL8yUJoRZxV9BBDsHVbTb0b3JzBkWIXFXT1V07BciP3dmn5HmrC/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>
#07 css에 첨부해서 이미지 가젯 센터정렬
.Image img{
display: block;
margin-left: auto;
margin-right: auto;
}
#08 자바스크립트로 피춰드포스트 설치
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0; list-style::none;border-radius:5%; width:340px; height:340px; position:relative; margin:0 auto;}
ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){display:block; line-height:0}
ul.featured-widget-list img{border-radius:5%; border:2px solid #999999; width:100%; height:auto}
ul.featured-widget-list
.featuredbg:hover{opacity:.1}
ul.featured-widget-list h5{position:absolute; left:0; right:0; text-align:center; bottom:10px; z-index:2; color:#fff; text-shadow:1px 1px 1px #000; margin:0; text-transform:capitalize; padding:10px 20px; line-height:1.9em; letter-spacing:0.3px; font:600 14px 'Georgia'; overflow:hidden}
ul.featured-widget-list li:hover h5{bottom:30px}
ul.featured-widget-list
.featured-meta{font: 12px 'Georgia'; letter-spacing:0.3px; position:absolute; bottom:0; left:0; right:0; text-align:center; z-index:2; color:#fff; text-shadow:1px 1px 1px #000; opacity:0}
ul.featured-widget-list h5, ul.featured-widget-list
.featured-meta {-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;}
ul.featured-widget-list li:hover
.featured-meta{bottom:20px; opacity:1}
.feat-buttons{position:absolute; top:50%; left:0;z-index:5; width:100%}
.feat-buttons a{text-indent:-9999px; margin:0 7px; width:10px; height:10px; padding:5px; position:relative}
.feat-prev{float:left;}
.feat-next{float:right;}
.feat-buttons a.feat-prev::before,
.feat-buttons a.feat-next::before{content:"";width:0;height:0; border-width:12px 12px; border-style:solid;border-color:transparent #999999 transparent transparent; position:absolute; top:50%; margin-top:-6px; margin-left:-15px; left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #999999; margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://vishnoir.blogspot.com/",
featuredNum:84,
listbyLabel:false,
feathumbSize:640,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:640,interval:3000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUdR5hxNdYH6UMlUZdbuFjSRaMqS9-O27Fylivwo22BK_yQiDajsNtjRxciaZsPIVUrckc_itZ9n_BuaXR8wLIJqhKi40Hp85x4ulIwcgpJCZetKhJ5SF_j-5J9NQ3CD2Y1506mncQZk/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
#09 추천게시물 모바일에 노출
html 판에서 html3 으로 위젯점프
<b:widget id='HTML3' locked='false' title='[ featured posts ]' type='HTML'> 찾기
가운데에 mobile='yes' 첨부
<b:widget id='HTML3' locked='false' mobile='yes' title='[ featured posts ]' type='HTML'>
#10 css에 첨부해서 포스트 날짜 센터정렬
.date-header {
text-align:center;
}
#11 css에 첨부해서 포스트 타이틀 센터정렬
.post-title {
text-align:center;
}
#12 css에 첨부해서 포스트 타이틀 색깔
.post-title a {
color:#ffbbbb;
}
#13 css에 첨부해서 포스트 쉐어박스 센터정렬
.post-footer {
text-align: center;
}
#14 html 코드로 뉴 홈 올더버튼 바꾸기
(http://www.probloggertricks.com/2013/03/change-older-posts-newer-posts-links-to.html 참조)
new 버튼 원래코드 <data:newerPageTitle/>
new 버튼 개정코드 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoCvc4drOamdDTxm41mK1bCfRYeua1pvJdTmFxb3LuCBEECqiUVr4ZhRmru6mCyUasT3pFNdFKuAVcmIpVkThIhMvgUagFobDtJaP-I5LpihhoYC4XkveUyLd7nT1mNXOYs8wYysHCd8/s1600/gray+new+01.png"/>
home 버튼 원래코드 <data:homeMsg/>
home 버튼 개정코드 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRfFuMAovsKusz4ANIZVMJpy6lLxqin-7Q-T-bv7KT2Mzn17-chOrIFJT-j2Da32pSSDTEPRKJQAcioo6Vx908qjfRbkvhDIm0Fl8YtW_GdbW_RVUXL-MA-aOPhGHDz1JClgUIVuQvAQ/s1600/gray+home+01.png"/>
older 버튼 원래코드 <data:olderPageTitle/>
older 버튼 개정코드 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kVEpRoHzZpLegWyLb5aFVj2UDtO_-tC2I1LWkXiEK21TfL-gUf-IBAgO0Siu5Qi0iXboTt6mLc6SnN4hWarPbsGJwgJEcs5Q2xTOIsghlPN2o9nmWFA8-L0n-DMMQCckDgBxCclnFtE/s1600/gray+older+01.png"/>
원래코드
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
바뀐코드
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoCvc4drOamdDTxm41mK1bCfRYeua1pvJdTmFxb3LuCBEECqiUVr4ZhRmru6mCyUasT3pFNdFKuAVcmIpVkThIhMvgUagFobDtJaP-I5LpihhoYC4XkveUyLd7nT1mNXOYs8wYysHCd8/s1600/gray+new+01.png"/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kVEpRoHzZpLegWyLb5aFVj2UDtO_-tC2I1LWkXiEK21TfL-gUf-IBAgO0Siu5Qi0iXboTt6mLc6SnN4hWarPbsGJwgJEcs5Q2xTOIsghlPN2o9nmWFA8-L0n-DMMQCckDgBxCclnFtE/s1600/gray+older+01.png"/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRfFuMAovsKusz4ANIZVMJpy6lLxqin-7Q-T-bv7KT2Mzn17-chOrIFJT-j2Da32pSSDTEPRKJQAcioo6Vx908qjfRbkvhDIm0Fl8YtW_GdbW_RVUXL-MA-aOPhGHDz1JClgUIVuQvAQ/s1600/gray+home+01.png"/></a>
#15 css 첨부해서 Atom 링크 없애기
.feed-links {display:none !important;}
#16 쿠키 노티스 박스
1) CSS 첨부해서 하단고정
.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;}
2) </b:skin> 아래에 아래의 코드 첨부
<script type="text/javascript">
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Okey",
learn: "More" };
</script>
<style>.cookie-choices-info {z-index:999999!important; background-color:#000000!important; border-top: 1px solid #999999!important; border-bottom: 1px solid #999999!important;}
.cookie-choices-info .cookie-choices-text {font-size:12px !important; color:#999999!important;}
.cookie-choices-info .cookie-choices-button {background-color: #000000!important; text-transform: none!important;}
</style>
3) </head> 바로 위에 아래의 코드 첨부 - 한번만 노출시키는 기능
<script type="text/javascript">cookieChoices = {};</script>
#17 쿠키 노티스 박스 디자인변경
]]></b:skin> 바로 아래에 아래의 코드 첨부
<!--Custom EU Cookies Notice by STCnetwork.org-->
<script type='text/javascript'>
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Okay",
learn: "Learn More" };
</script>
<style>.cookie-choices-info {z-index:999999!important;background-color:#000000!important;border-top: 1px solid #999999;
box-shadow: 1px 2px 2px #000!important; padding:3px 0px!important;}.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#999999!important;}.cookie-choices-info .cookie-choices-button{ background-color: #000000!important;border-radius: 2px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}</style>
#18 백투톱 버튼 설치하기
1. <head> 와 <meta> 사이에 아래의 코드 첨부
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
2. 블로거레이어에서 자바스크립트 가젯을 열고 아래의 코드 첨부
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 8em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: transparent;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6akN4t7h1SwYMS5_3OjN2WoGMqOI97C7ixVfrrMQ6IsvB1KDBw-0v8PWAQylCeFOyfnCEJZw24TY9zzT4XLdr-dP8OuU-YrPqMDgx9DHtXiIE46hOv9iJKOntvR-1xOS75TooYVQTbzI/s1600/back+to+top+-+new+-+PSD+03.png" alt="Back to Top" / ></a>
#19 블로그 모든 링크 새탭
</header> 찾아서 그 앞에 <base target='_blank'/> 첨부
#20 다른 도메인으로 포워딩을 해도 파비콘이 보이는 기능
<b:skin> 찾아서 그 앞에 아래 코드 첨부
(오류가 뜨면서 이 웹사이트에는 적용되지 않았음)
<link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71eTV0hx1DH3henx-ZjV4T-bw5Iw-jB5cAkC8Bdyvcl8g4NfHzto9oDpw1QOh4kQYz6s52l5HU2zbdIYePK4dSNzze_fxt39k2dkeC1lW0-RGhVzX5Zrtg9D9zVdocokeGiFc0smK1fs/s1600/V+fabicon+1.png" type="image/x-icon">
이 코드는 나중에 확인해보면, 아래의 코드로 자동전환됨
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71eTV0hx1DH3henx-ZjV4T-bw5Iw-jB5cAkC8Bdyvcl8g4NfHzto9oDpw1QOh4kQYz6s52l5HU2zbdIYePK4dSNzze_fxt39k2dkeC1lW0-RGhVzX5Zrtg9D9zVdocokeGiFc0smK1fs/s1600/V+fabicon+1.png' rel='shortcut icon' type='image/png'/>
#21 블로그 색깔
#ffffff
#dddddd
#b4b4b4
#999999
#ffbbbb
#f99999
#f48886
#22 블로그 설명
Here I stand on the hazy boundaries between reality and fantasy. I'm just weeping and covering my body with dreams. I become human, monster, or god at different moments... Sometimes dark, sometimes bright.
·•● I am an outsider ●•·
