2020/03/03

[강조글] 박스형 & 상단표시

적용 후

Google 블로그
독특하고 멋진 블로그를 만들어 보세요.
내 관심사를 내 스타일대로 게시하세요.
공유하고 싶은 지식이나 경험, 최신 소식이 있으신가요?
독특하고 멋진 블로그를 무료로 손쉽게 만들 수 있습니다.










<style>
blockquote{font-size:100%;background-color:#ffeaa7;border-left:none;padding:40px 25px 30px;margin:20px 0 10px;position:relative;clear:both;border-radius:12px}
.post-body blockquote:before{content:'\f10e';position:absolute;top:0;left:42px;margin:auto;margin-top:-15px;font-size:16px;font-family:FontAwesome;color:#ff6b6b;display:block;width:40px;height:40px;background:#fff;line-height:36px;border-radius:99em;text-align:center;border:3px solid #ffeaa7}
</style>

2019/06/06

아이프레임 리사이저(iFrame Resizer)

아이프레임을 크기에 맞게 호출하는 스크립트


/*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v3.6.5 - 2019-02-03
*  Desc: Include this file in any page being loaded into an iframe
*        to force the iframe to resize to the content size.
*  Requires: iframeResizer.min.js on host page.
*  Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net
*  License: MIT
*/

!function(a){"use strict";function b(){}function c(a,b,c,d){"addEventListener"in window?a.addEventListener(b,c,!!Ia&&(d||{})):"attachEvent"in window&&a.attachEvent("on"+b,c)}function d(a,b,c){"removeEventListener"in window?a.removeEventListener(b,c,!1):"detachEvent"in window&&a.detachEvent("on"+b,c)}function e(a){return a.charAt(0).toUpperCase()+a.slice(1)}function f(a){var b,c,d,e=null,f=0,g=function(){f=La(),e=null,d=a.apply(b,c),e||(b=c=null)};return function(){var h=La();f||(f=h);var i=ya-(h-f);return b=this,c=arguments,i<=0||i>ya?(e&&(clearTimeout(e),e=null),f=h,d=a.apply(b,c),e||(b=c=null)):e||(e=setTimeout(g,i)),d}}function g(a){return na+"["+pa+"] "+a}function h(a){ma&&"object"==typeof window.console&&console.log(g(a))}function i(a){"object"==typeof window.console&&console.warn(g(a))}function j(){k(),h("Initialising iFrame ("+location.href+")"),l(),o(),n("background",X),n("padding",_),B(),t(),u(),p(),D(),v(),ja=C(),O("init","Init message from host page"),Ea()}function k(){function b(a){return"true"===a}var c=ia.substr(oa).split(":");pa=c[0],Y=a!==c[1]?Number(c[1]):Y,aa=a!==c[2]?b(c[2]):aa,ma=a!==c[3]?b(c[3]):ma,ka=a!==c[4]?Number(c[4]):ka,V=a!==c[6]?b(c[6]):V,Z=c[7],ga=a!==c[8]?c[8]:ga,X=c[9],_=c[10],va=a!==c[11]?Number(c[11]):va,ja.enable=a!==c[12]&&b(c[12]),ra=a!==c[13]?c[13]:ra,Ba=a!==c[14]?c[14]:Ba}function l(){function a(){var a=window.iFrameResizer;h("Reading data from page: "+JSON.stringify(a)),Da="messageCallback"in a?a.messageCallback:Da,Ea="readyCallback"in a?a.readyCallback:Ea,ua="targetOrigin"in a?a.targetOrigin:ua,ga="heightCalculationMethod"in a?a.heightCalculationMethod:ga,Ba="widthCalculationMethod"in a?a.widthCalculationMethod:Ba}function b(a,b){return"function"==typeof a&&(h("Setup custom "+b+"CalcMethod"),Ga[b]=a,a="custom"),a}"iFrameResizer"in window&&Object===window.iFrameResizer.constructor&&(a(),ga=b(ga,"height"),Ba=b(Ba,"width")),h("TargetOrigin for parent set to: "+ua)}function m(a,b){return-1!==b.indexOf("-")&&(i("Negative CSS value ignored for "+a),b=""),b}function n(b,c){a!==c&&""!==c&&"null"!==c&&(document.body.style[b]=c,h("Body "+b+' set to "'+c+'"'))}function o(){a===Z&&(Z=Y+"px"),n("margin",m("margin",Z))}function p(){document.documentElement.style.height="",document.body.style.height="",h('HTML & body height set to "auto"')}function q(a){var b={add:function(b){function d(){O(a.eventName,a.eventType)}Ha[b]=d,c(window,b,d,{passive:!0})},remove:function(a){var b=Ha[a];delete Ha[a],d(window,a,b)}};a.eventNames&&Array.prototype.map?(a.eventName=a.eventNames[0],a.eventNames.map(b[a.method])):b[a.method](a.eventName),h(e(a.method)+" event listener: "+a.eventType)}function r(a){q({method:a,eventType:"Animation Start",eventNames:["animationstart","webkitAnimationStart"]}),q({method:a,eventType:"Animation Iteration",eventNames:["animationiteration","webkitAnimationIteration"]}),q({method:a,eventType:"Animation End",eventNames:["animationend","webkitAnimationEnd"]}),q({method:a,eventType:"Input",eventName:"input"}),q({method:a,eventType:"Mouse Up",eventName:"mouseup"}),q({method:a,eventType:"Mouse Down",eventName:"mousedown"}),q({method:a,eventType:"Orientation Change",eventName:"orientationchange"}),q({method:a,eventType:"Print",eventName:["afterprint","beforeprint"]}),q({method:a,eventType:"Ready State Change",eventName:"readystatechange"}),q({method:a,eventType:"Touch Start",eventName:"touchstart"}),q({method:a,eventType:"Touch End",eventName:"touchend"}),q({method:a,eventType:"Touch Cancel",eventName:"touchcancel"}),q({method:a,eventType:"Transition Start",eventNames:["transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart"]}),q({method:a,eventType:"Transition Iteration",eventNames:["transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration"]}),q({method:a,eventType:"Transition End",eventNames:["transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend"]}),"child"===ra&&q({method:a,eventType:"IFrame Resized",eventName:"resize"})}function s(a,b,c,d){return b!==a&&(a in c||(i(a+" is not a valid option for "+d+"CalculationMethod."),a=b),h(d+' calculation method set to "'+a+'"')),a}function t(){ga=s(ga,fa,Ma,"height")}function u(){Ba=s(Ba,Aa,Na,"width")}function v(){!0===V?(r("add"),G()):h("Auto Resize disabled")}function w(){h("Disable outgoing messages"),sa=!1}function x(){h("Remove event listener: Message"),d(window,"message",T)}function y(){null!==$&&$.disconnect()}function z(){r("remove"),y(),clearInterval(la)}function A(){w(),x(),!0===V&&z()}function B(){var a=document.createElement("div");a.style.clear="both",a.style.display="block",document.body.appendChild(a)}function C(){function b(){return{x:window.pageXOffset!==a?window.pageXOffset:document.documentElement.scrollLeft,y:window.pageYOffset!==a?window.pageYOffset:document.documentElement.scrollTop}}function d(a){var c=a.getBoundingClientRect(),d=b();return{x:parseInt(c.left,10)+parseInt(d.x,10),y:parseInt(c.top,10)+parseInt(d.y,10)}}function e(b){function c(a){var b=d(a);h("Moving to in page link (#"+e+") at x: "+b.x+" y: "+b.y),S(b.y,b.x,"scrollToOffset")}var e=b.split("#")[1]||b,f=decodeURIComponent(e),g=document.getElementById(f)||document.getElementsByName(f)[0];a!==g?c(g):(h("In page link (#"+e+") not found in iFrame, so sending to parent"),S(0,0,"inPageLink","#"+e))}function f(){""!==location.hash&&"#"!==location.hash&&e(location.href)}function g(){function a(a){function b(a){a.preventDefault(),e(this.getAttribute("href"))}"#"!==a.getAttribute("href")&&c(a,"click",b)}Array.prototype.forEach.call(document.querySelectorAll('a[href^="#"]'),a)}function j(){c(window,"hashchange",f)}function k(){setTimeout(f,ca)}function l(){Array.prototype.forEach&&document.querySelectorAll?(h("Setting up location.hash handlers"),g(),j(),k()):i("In page linking not fully supported in this browser! (See README.md for IE8 workaround)")}return ja.enable?l():h("In page linking not enabled"),{findTarget:e}}function D(){h("Enable public methods"),Ca.parentIFrame={autoResize:function(a){return!0===a&&!1===V?(V=!0,v()):!1===a&&!0===V&&(V=!1,z()),V},close:function(){S(0,0,"close"),A()},getId:function(){return pa},getPageInfo:function(a){"function"==typeof a?(Fa=a,S(0,0,"pageInfo")):(Fa=function(){},S(0,0,"pageInfoStop"))},moveToAnchor:function(a){ja.findTarget(a)},reset:function(){R("parentIFrame.reset")},scrollTo:function(a,b){S(b,a,"scrollTo")},scrollToOffset:function(a,b){S(b,a,"scrollToOffset")},sendMessage:function(a,b){S(0,0,"message",JSON.stringify(a),b)},setHeightCalculationMethod:function(a){ga=a,t()},setWidthCalculationMethod:function(a){Ba=a,u()},setTargetOrigin:function(a){h("Set targetOrigin: "+a),ua=a},size:function(a,b){O("size","parentIFrame.size("+(a||"")+(b?","+b:"")+")",a,b)}}}function E(){0!==ka&&(h("setInterval: "+ka+"ms"),la=setInterval(function(){O("interval","setInterval: "+ka)},Math.abs(ka)))}function F(){function b(a){function b(a){!1===a.complete&&(h("Attach listeners to "+a.src),a.addEventListener("load",f,!1),a.addEventListener("error",g,!1),k.push(a))}"attributes"===a.type&&"src"===a.attributeName?b(a.target):"childList"===a.type&&Array.prototype.forEach.call(a.target.querySelectorAll("img"),b)}function c(a){k.splice(k.indexOf(a),1)}function d(a){h("Remove listeners from "+a.src),a.removeEventListener("load",f,!1),a.removeEventListener("error",g,!1),c(a)}function e(b,c,e){d(b.target),O(c,e+": "+b.target.src,a,a)}function f(a){e(a,"imageLoad","Image loaded")}function g(a){e(a,"imageLoadFailed","Image load failed")}function i(a){O("mutationObserver","mutationObserver: "+a[0].target+" "+a[0].type),a.forEach(b)}function j(){var a=document.querySelector("body"),b={attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0};return m=new l(i),h("Create body MutationObserver"),m.observe(a,b),m}var k=[],l=window.MutationObserver||window.WebKitMutationObserver,m=j();return{disconnect:function(){"disconnect"in m&&(h("Disconnect body MutationObserver"),m.disconnect(),k.forEach(d))}}}function G(){var a=0>ka;window.MutationObserver||window.WebKitMutationObserver?a?E():$=F():(h("MutationObserver not supported in this browser!"),E())}function H(a,b){function c(a){if(/^\d+(px)?$/i.test(a))return parseInt(a,W);var c=b.style.left,d=b.runtimeStyle.left;return b.runtimeStyle.left=b.currentStyle.left,b.style.left=a||0,a=b.style.pixelLeft,b.style.left=c,b.runtimeStyle.left=d,a}var d=0;return b=b||document.body,"defaultView"in document&&"getComputedStyle"in document.defaultView?(d=document.defaultView.getComputedStyle(b,null),d=null!==d?d[a]:0):d=c(b.currentStyle[a]),parseInt(d,W)}function I(a){a>ya/2&&(ya=2*a,h("Event throttle increased to "+ya+"ms"))}function J(a,b){for(var c=b.length,d=0,f=0,g=e(a),i=La(),j=0;jf&&(f=d);return i=La()-i,h("Parsed "+c+" HTML elements"),h("Element position calculated in "+i+"ms"),I(i),f}function K(a){return[a.bodyOffset(),a.bodyScroll(),a.documentElementOffset(),a.documentElementScroll()]}function L(a,b){function c(){return i("No tagged elements ("+b+") found on page"),document.querySelectorAll("body *")}var d=document.querySelectorAll("["+b+"]");return 0===d.length&&c(),J(a,d)}function M(){return document.querySelectorAll("body *")}function N(b,c,d,e){function f(){ea=m,za=n,S(ea,za,b)}function g(){function b(a,b){return!(Math.abs(a-b)<=va)}return m=a!==d?d:Ma[ga](),n=a!==e?e:Na[Ba](),b(ea,m)||aa&&b(za,n)}function i(){return!(b in{init:1,interval:1,size:1})}function j(){return ga in qa||aa&&Ba in qa}function k(){h("No change in size detected")}function l(){i()&&j()?R(c):b in{interval:1}||k()}var m,n;g()||"init"===b?(P(),f()):l()}function O(a,b,c,d){function e(){a in{reset:1,resetPage:1,init:1}||h("Trigger event: "+b)}function f(){return wa&&a in ba}f()?h("Trigger event cancelled: "+a):(e(),"init"===a?N(a,b,c,d):Oa(a,b,c,d))}function P(){wa||(wa=!0,h("Trigger event lock on")),clearTimeout(xa),xa=setTimeout(function(){wa=!1,h("Trigger event lock off"),h("--")},ca)}function Q(a){ea=Ma[ga](),za=Na[Ba](),S(ea,za,a)}function R(a){var b=ga;ga=fa,h("Reset trigger event: "+a),P(),Q("reset"),ga=b}function S(b,c,d,e,f){function g(){a===f?f=ua:h("Message targetOrigin: "+f)}function i(){var g=b+":"+c,i=pa+":"+g+":"+d+(a!==e?":"+e:"");h("Sending message to host page ("+i+")"),ta.postMessage(na+i,f)}!0===sa&&(g(),i())}function T(a){function b(){return na===(""+a.data).substr(0,oa)}function c(){return a.data.split("]")[1].split(":")[0]}function d(){return a.data.substr(a.data.indexOf(":")+1)}function e(){return!("undefined"!=typeof module&&module.exports)&&"iFrameResize"in window||"jQuery"in window&&"iFrameResize"in window.jQuery.prototype}function f(){return a.data.split(":")[2]in{true:1,false:1}}function g(){var b=c();b in l?l[b]():e()||f()||i("Unexpected message ("+a.data+")")}function k(){!1===da?g():f()?l.init():h('Ignored message of type "'+c()+'". Received before initialization.')}var l={init:function(){ia=a.data,ta=a.source,j(),da=!1,setTimeout(function(){ha=!1},ca)},reset:function(){ha?h("Page reset ignored by init"):(h("Page size reset by host page"),Q("resetPage"))},resize:function(){O("resizeParent","Parent window requested size check")},moveToAnchor:function(){ja.findTarget(d())},inPageLink:function(){this.moveToAnchor()},pageInfo:function(){var a=d();h("PageInfoFromParent called from parent: "+a),Fa(JSON.parse(a)),h(" --")},message:function(){var a=d();h("MessageCallback called from parent: "+a),Da(JSON.parse(a)),h(" --")}};b()&&k()}function U(){"loading"!==document.readyState&&window.parent.postMessage("[iFrameResizerChild]Ready","*")}if("undefined"!=typeof window){var V=!0,W=10,X="",Y=0,Z="",$=null,_="",aa=!1,ba={resize:1,click:1},ca=128,da=!0,ea=1,fa="bodyOffset",ga=fa,ha=!0,ia="",ja={},ka=32,la=null,ma=!1,na="[iFrameSizer]",oa=na.length,pa="",qa={max:1,min:1,bodyScroll:1,documentElementScroll:1},ra="child",sa=!0,ta=window.parent,ua="*",va=0,wa=!1,xa=null,ya=16,za=1,Aa="scroll",Ba=Aa,Ca=window,Da=function(){i("MessageCallback function not defined")},Ea=function(){},Fa=function(){},Ga={height:function(){return i("Custom height calculation function not defined"),document.documentElement.offsetHeight},width:function(){return i("Custom width calculation function not defined"),document.body.scrollWidth}},Ha={},Ia=!1,Ja=!1;try{var Ka=Object.create({},{passive:{get:function(){Ia=!0}},once:{get:function(){Ja=!0}}});window.addEventListener("test",b,Ka),window.removeEventListener("test",b,Ka)}catch(Pa){}var La=Date.now||function(){return(new Date).getTime()},Ma={bodyOffset:function(){return document.body.offsetHeight+H("marginTop")+H("marginBottom")},offset:function(){return Ma.bodyOffset()},bodyScroll:function(){return document.body.scrollHeight},custom:function(){return Ga.height()},documentElementOffset:function(){return document.documentElement.offsetHeight},documentElementScroll:function(){return document.documentElement.scrollHeight},max:function(){return Math.max.apply(null,K(Ma))},min:function(){return Math.min.apply(null,K(Ma))},grow:function(){return Ma.max()},lowestElement:function(){return Math.max(Ma.bodyOffset()||Ma.documentElementOffset(),J("bottom",M()))},taggedElement:function(){return L("bottom","data-iframe-height")}},Na={bodyScroll:function(){return document.body.scrollWidth},bodyOffset:function(){return document.body.offsetWidth},custom:function(){return Ga.width()},documentElementScroll:function(){return document.documentElement.scrollWidth},documentElementOffset:function(){return document.documentElement.offsetWidth},scroll:function(){return Math.max(Na.bodyScroll(),Na.documentElementScroll())},max:function(){return Math.max.apply(null,K(Na))},min:function(){return Math.min.apply(null,K(Na))},rightMostElement:function(){return J("right",M())},taggedElement:function(){return L("right","data-iframe-width")}},Oa=f(N);c(window,"message",T),c(window,"readystatechange",U),U()}}();
//# sourceMappingURL=iframeResizer.contentWindow.map

2019/05/31

블로그스팟 RSS feed URL

Blogger RSS feed URL format

Full site feed:

Atom 1.0: https://blogname.blogspot.com/feeds/posts/default
RSS 2.0: https://blogname.blogspot.com/feeds/posts/default?alt=rss

Comments-only feed:
Atom 1.0: https://blogname.blogspot.com/feeds/comments/default
RSS 2.0: https://blogname.blogspot.com/feeds/comments/default?alt=rss

Label-specific site feed:
To get a feed for a specific label, change [label].
Atom 1.0: https://blogname.blogspot.com/feeds/posts/default/-/[label]
RSS 2.0: https://blogname.blogspot.com/feeds/posts/default/-/[label]?alt=rss

define the number of posts returned
http://blogname.blogspot.com/feeds/posts/default?max-results=3

search parameter
http://blogname.blogspot.com/feeds/posts/default?q=searchword

return date defined posts (based on published date)
http://blogname.blogspot.com/feeds/posts/default?published-min=2014-12-01T00:00:00

combine the query parameters
http://blogname.blogspot.com/feeds/posts/default?max-results=4&q=searchword

BlogID
http://www.blogger.com/feeds/BlogID/posts/default

BlogID total
https://www.blogger.com/feeds/BlogID/archive?authuser=1

XML Sitemap

Sitemap: https://blogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: https://blogname.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500
Sitemap: https://blogname.blogspot.com/atom.xml?redirect=false&start-index=1001&max-results=500
Sitemap: https://blogname.blogspot.com/atom.xml?redirect=false&start-index=1501&max-results=500

2018/10/19

[강조글] 왼쪽바 & 쌍따옴표

적용 후


Google 블로그




<style>
blockquote {font-style: italic;color: #888;border-left: 5px solid #27ae60;margin-left: 0;padding: 10px 15px;}
blockquote:before {content: '\f10d';display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: 400;line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;margin-right: 10px;color: #888;}
blockquote:after {content: '\f10e'; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: 10px; color: #888;}
</style>

2018/10/18

[강조글] Animation Note

강조글 - 오른쪽 상단 모서리 변화

Google 블로그 독특하고 멋진 블로그를 만들어 보세요.



<style>
blockquote{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
blockquote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #d8b471 #d8b471;background:#d8b471;display:block;width:0}
blockquote:hover:before{display:none}
</style>

2018/10/16

자동으로 바뀌는 배너(Banner) 스크립트

페이지 연결시마다 자동으로 바뀌는 배너입니다.
auto refresh banner


<script type="text/javascript">
  var result = Math.floor(Math.random() * 11) + 1;
if(result == '1'){
document.writeln("<a href='연결주소' target='_blank'><img src='이미지' height='250' width='300' border='0'></a>");
}
else if(result == '2'){
document.writeln("<a href='연결주소' target='_blank'><img src='이미지' height='250' width='300' border='0'></a>");
}
else if(result == '3'){
document.writeln("<a href='연결주소' target='_blank'><img src='이미지' height='250' width='300' border='0'></a>");
}
else if(result == '4'){
document.writeln("<a href='연결주소' target='_blank'><img src='이미지' height='250' width='300' border='0'></a>");
}
else  {
document.writeln("<a href='연결주소' target='_blank'><img src='이미지' height='250' width='300' border='0'></a>");
}
</script>

주의점은 ""안에 들어가는 ''만 주의하세요

갯수가 만을경우
else if(result == '4'){
document.writeln("<a href='연결주소' target='_blank'><img src='이미지' height='250' width='300' border='0'></a>");
}

result == '5''6''7' 식으로 붙여넣기 한다음 사용하면 무한대로 광고삽입됩니다

2018/10/14

프로토콜(protocol) 변경 Script

코딩시 필요할때가 간간히 있습니다.


HTTP프로토콜 HTTPS로 변경

<script type='text/javascript'>
//<![CDATA[
    if (document.location.protocol == 'http:') {
        document.location.href = document.location.href.replace('http:', 'https:');
    }
//]]>
</script>


HTTPS프로토콜 HTTP로 변경

<script type='text/javascript'>
//<![CDATA[
    if (document.location.protocol == 'https:') {
        document.location.href = document.location.href.replace('https:', 'http:');
    }
//]]>
</script>


가능하면 프로토콜을(http:, https:) 지우고 작업해 줍니다. (안씀//www.uuuuuuuu)

2018/09/05

KS X 1001 특수문자 한번에 보기

브라우저 환경에 따라 일부 문자는 네모로 표시될 수 있습니다.

~ ! @ # $ % ^ & * \ " ' + = ` | ( ) [ ] { } : ; - _ - # & & @ § ※ ☆ ★ ○ ● ◎ ◇ ◆ □ ■ △ ▲ ▽ ▼ → ← ← ↑ ↓ ↔ 〓
◁ ◀ ▷ ▶ ♤ ♠ ♡ ♥ ♧ ♣ ⊙ ◈ ▣ ◐ ◑ ▒ ▤ ▥ ▨ ▧ ▦ ▩ ♨ ☏ ☎ ☜ ☞ ¶ † ‡ ↕ ↗ ↙ ↖ ↘ ♭ ♩ ♪ ♬ ㉿ ㈜
№ ㏇ ™ ㏂ ㏘ ℡ ® ª º ─ │ ┌ ┐ ┘ └ ├ ┬ ┤ ┴ ┼ ━ ┃ ┏ ┓ ┛ ┗ ┣ ┳ ┫ ┻ ╋ ┠ ┯ ┨ ┷ ┿ ┝ ┰ ┥ ┸ ╂ ┒
┑ ┚ ┙ ┖ ┕ ┎ ┍ ┞ ┟ ┡ ┢ ┦ ┧ ┩ ┪ ┭ ┮ ┱ ┲ ┵ ┶ ┹ ┺ ┽ ┾ ╀ ╁ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊
+ - < = > ± × ÷ ≠ ≤ ≥ ∞ ∴ ♂ ♀ ∠ ⊥ ⌒ ∂ ∇ ≡ ≒ ≪ ≫ √ ∽ ∝ ∵ ∫ ∬ ∈ ∋ ⊆ ⊇ ⊂ ⊃ ∪ ∩ ∧ ∨ ¬ ⇒ ⇔ ∀ ∃ ∮ ∑ ∏
! ' , . / : ; ? ^ _ ` |  ̄ 、 。 · ‥ … ¨ 〃 ­ ― ∥ \ ∼ ´ ~ ˇ ˘ ˝ ˚ ˙ ¸ ˛ ¡ ¿ ː
" ” 〔 〕 { } ‘ ’ “ ” 〔 〕 〈 〉 《 》 「 」 『 』 【 】
㉠ ㉡ ㉢ ㉣ ㉤ ㉥ ㉦ ㉧ ㉨ ㉩ ㉪ ㉫ ㉬ ㉭
㉮ ㉯ ㉰ ㉱ ㉲ ㉳ ㉴ ㉵ ㉶ ㉷ ㉸ ㉹ ㉺ ㉻
㈀ ㈁ ㈂ ㈃ ㈄ ㈅ ㈆ ㈇ ㈈ ㈉ ㈊ ㈋ ㈌ ㈍
㈎ ㈏ ㈐ ㈑ ㈒ ㈓ ㈔ ㈕ ㈖ ㈗ ㈘ ㈙ ㈚ ㈛
ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ
⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵
① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮
⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂
$ % ₩ F ′ ″ ℃ Å ¢ £ ¥ ¤ ℉ ‰ € ㎕ ㎖ ㎗ ℓ ㎘ ㏄ ㎣ ㎤ ㎥ ㎦ ㎙ ㎚ ㎛ ㎜ ㎝ ㎞ ㎟ ㎠ ㎡ ㎢ ㏊ ㎍ ㎎ ㎏ ㏏ ㎈ ㎉ ㏈ ㎧ ㎨ ㎰ ㎱
㎲ ㎳ ㎴ ㎵ ㎶ ㎷ ㎸ ㎹ ㎀ ㎁ ㎂ ㎃ ㎄ ㎺ ㎻ ㎼ ㎽ ㎾ ㎿ ㎐ ㎑ ㎒ ㎓ ㎔ Ω ㏀ ㏁ ㎊ ㎋ ㎌ ㏖ ㏅ ㎭ ㎮ ㎯ ㏛ ㎩ ㎪ ㎫ ㎬ ㏝ ㏐ ㏓ ㏃ ㏉ ㏜ ㏆
ㄱ ㄲ ㄼ ㄽ ㄾ ㄿ ㅀ ㄷ ㄸ ㄹ ㄺ ㄻ ㄼ ㄽ ㄾ ㄿ ㅀ ㅁ ㅂ ㅃ ㅄ ㅅ ㅆ ㅇ ㅈ ㅉ ㅊ ㅋ ㅌ ㅍ ㅎ
ㅏ ㅐ ㅑ ㅒ ㅓ ㅔ ㅕ ㅖ ㅗ ㅘ ㅙ ㅚ ㅣ ㅛ ㅜ ㅝ ㅞ ㅟ ㅠ ㅡ ㅢ ㅣ
ㅥ ㅦ ㅧ ㅨ ㅩ ㅪ ㅫ ㅬ ㅭ ㅮ ㅯ ㅰ ㅱ ㅲ ㅳ ㅴ ㅵ ㅶ ㅷ ㅸ ㅹ ㅺ ㅻ ㅼ ㅽ ㅾ ㅿ ㆀ ㆁ ㆂ ㆄ ㆅ ㆆ ㆇ ㆈ ㆉ ㆊ ㆋ ㆌ
ㆍ ½ ⅓ ⅔ ¼ ¾ ⅛ ⅜ ⅝ ⅞ ¹ ² ³ ⁴ ⁿ ₁ ₂ ₃ ₄
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω
0 1 2 3 4 5 6 7 8 9 ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ

ꊒ ꊓ ꊔ ꊕ ꊖ ꊗ ꊘ ꊙ ꊚ ꊛ
ꊈ ꊉ ꊊ ꊋ ꊌ ꊍ ꊎ ꊏ ꊐ ꊑ
ꊦ ꊧ ꊨ ꊩ ꊪ ꊫ ꊬ ꊭ ꊮ ꊯ
ꊝ ꊞ ꊟ ꊠ ꊡ ꊢ ꊣ ꊤ ꊥ
ꋍ ꋎ ꋏ ꋐ ꋑ ꋒ ꋓ ꋔ ꋕ ꋖ
ꋠ ꋡ ꋢ ꋣ ꋤ ꋥ ꋦ ꋧ ꋨ ꋩ
ꊰ ꊱ ꊲ ꊳ ꊴ ꊵ ꊶ ꊷ ꊸ ꊹ
ꊺ ꊻ ꊼ ꊽ ꊾ ꊿ ꋀ ꋁ ꋂ
꓌ ꓍ ꓎ ꓏ ꓐ ꓑ ꓒ ꓓ ꓔ ꓕ
꒐ ꒑ ꒒ ꒓ ꒔ ꒕ ꒖ ꒗ ꒘ ꒙
꒮ ꒯ ꒰ ꒱ ꒲ ꒳ ꒴ ꒵ ꒶ ꒷
꓂ ꓃ ꓄ ꓅ ꓆ ꓇ ꓈ ꓉ ꓊ ꓋
ꓖ ꓗ ꓘ ꓙ ꓚ ꓛ ꓜ ꓝ ꓞ ꓟ
ꓪ ꓫ ꓬ ꓭ ꓮ ꓯ ꓰ ꓱ ꓲ ꓳ
ꓠ ꓡ ꓢ ꓣ ꓤ ꓥ ꓦ ꓧ ꓨ ꓩ
① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮
⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂

ꈂ ꈃ ꈄ ꈅ ꈆ ꈇ ꈈ ꈉ ꈊ ꈋ ꈌ ꈍ ꈎ ꈏ ꈐ ꈑ ꈒ ꈓ ꈔ ꈕ
ꉭ ꉮ ꉯ ꉰ ꉱ ꉲ ꉳ ꉴ ꉵ ꉶ ꉷ ꉸ ꉹ ꉺ ꉻ ꉼ ꉽ ꉾ ꉿ ꊀ
ꆗ ꆘ ꆙ ꆚ ꆛ ꆜ ꆝ ꆞ ꆟ ꆠ ꆡ ꆢ ꆣ ꆤ ꆥ ꆦ ꆧ ꆨ ꆩ ꆪ
ꄽ ꄾ ꄿ ꅀ ꅁ ꅂ ꅃ ꅄ ꅅ ꅆ
㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈ ㊉
㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩
㆒ ㆓ ㆔ ㆕ ㆖ ㆗ ㆘ ㆙ ㆚ ㆛
ꈖ ꈗ ꈘ ꈙ ꈚ ꈛ ꈜ
ꊁ ꊂ ꊃ ꊄ ꊅ ꊆ ꊇ
ꆫ ꆬ ꆭ ꆮ ꆯ ꆰ ꆱ
㊊ ㊋ ㊌ ㊍ ㊎ ㊏ ㊐
㈪ ㈫ ㈬ ㈭ ㈮ ㈯ ㈰

㋀ ㋁ ㋂ ㋃ ㋄ ㋅ ㋆ ㋇ ㋈ ㋉ ㋊ ㋋
㏠ ㏡ ㏢ ㏣ ㏤ ㏥ ㏦ ㏧ ㏨ ㏩ ㏪ ㏫ ㏬ ㏭ ㏮
㏯ ㏰ ㏱ ㏲ ㏳ ㏴ ㏵ ㏶ ㏷ ㏸ ㏹ ㏺ ㏻ ㏼ ㏽ ㏾
㍘ ㍙ ㍚ ㍛ ㍜ ㍝ ㍞ ㍟ ㍠ ㍡ ㍢ ㍣ ㍤ ㍥ ㍦ ㍧ ㍨ ㍩ ㍪ ㍫ ㍬ ㍭ ㍮ ㍯ ㍰

ꆲ ꆳ ꆴ ꆵ ꆶ ꆷ ꆸ ꆹ ꆺ ꆻ ꆼ ꆽ ꆾ
ꆿ ꇀ ꇁ ꇂ ꇃ ꇄ ꇅ ꇆ ꇇ ꇈ ꇉ ꇊ ꇋ
ꇌ ꇍ ꇎ ꇏ ꇐ ꇑ ꇒ ꇓ ꇔ ꇕ ꇖ ꇗ ꇘ
ꇙ ꇚ ꇛ ꇜ ꇝ ꇞ ꇟ ꇠ ꇡ ꇢ ꇣ ꇤ ꇥ
ꈝ ꈞ ꈟ ꈠ ꈡ ꈢ ꈣ ꈤ ꈥ ꈦ ꈧ ꈨ ꈩ
ꈪ ꈫ ꈬ ꈭ ꈮ ꈯ ꈰ ꈱ ꈲ ꈳ ꈴ ꈵ ꈶ
ꈷ ꈸ ꈹ ꈺ ꈻ ꈼ ꈽ ꈾ ꈿ ꉀ ꉁ ꉂ ꉃ
ꉄ ꉅ ꉆ ꉇ ꉈ ꉉ ꉊ ꉋ ꉌ ꉍ ꉎ ꉏ ꉐ
ꍽ ꍾ ꍿ ꎀ ꎁ ꎂ ꎃ ꎄ ꎅ ꎆ ꎇ ꎈ ꎉ
ꎊ ꎋ ꎌ ꎍ ꎎ ꎏ ꎐ ꎑ ꎒ ꎓ ꎔ ꎕ ꎖ
ꅇ ꅈ ꅉ ꅊ ꅋ ꅌ ꅍ ꅎ ꅏ ꅐ ꅑ ꅒ ꅓ
ꅔ ꅕ ꅖ ꅗ ꅘ ꅙ ꅚ ꅛ ꅜ ꅝ ꅞ ꅟ ꅠ
ꅡ ꅢ ꅣ ꅤ ꅥ ꅦ ꅧ ꅨ ꅩ ꅪ ꅫ ꅬ ꅭ
ꅮ ꅯ ꅰ ꅱ ꅲ ꅳ ꅴ ꅵ ꅶ ꅷ ꅸ ꅹ ꅺ
ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ
ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ
⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨
⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵
a b c d e f g h i j k l m
n o p q r s t u v w x y z

ꂛ ꂜ ꂝ ꂞ ꂟ ꂠ ꂡ ꂢ ꂣ ꂤ ꂥ ꂦ ꂧ ꂨ
ꆉ ꆊ ꆋ ꆌ ꆍ ꆎ ꆏ ꆐ ꆑ ꆒ ꆓ ꆔ ꆕ ꆖ
ꇴ ꇵ ꇶ ꇷ ꇸ ꇹ ꇺ ꇻ ꇼ ꇽ ꇾ ꇿ ꈀ ꈁ
ꉟ ꉠ ꉡ ꉢ ꉣ ꉤ ꉥ ꉦ ꉧ ꉨ ꉩ ꉪ ꉫ ꉬ
㉮ ㉯ ㉰ ㉱ ㉲ ㉳ ㉴ ㉵ ㉶ ㉷ ㉸ ㉹ ㉺ ㉻
㈎ ㈏ ㈐ ㈑ ㈒ ㈓ ㈔ ㈕ ㈖ ㈗ ㈘ ㈙ ㈚ ㈛
ꂩ ꂪ ꂫ ꂬ ꂭ ꂮ ꂯ ꂰ ꂱ ꂲ
ꃳ ꃴ ꃵ ꃶ ꃷ ꃸ ꃹ ꃺ ꃻ ꃼ
ꇦ ꇧ ꇨ ꇩ ꇪ ꇫ ꇬ ꇭ ꇮ ꇯ ꇰ ꇱ ꇲ ꇳ
ꅻ ꅼ ꅽ ꅾ ꅿ ꆀ ꆁ ꆂ ꆃ ꆄ ꆅ ꆆ ꆇ ꆈ
ꉑ ꉒ ꉓ ꉔ ꉕ ꉖ ꉗ ꉘ ꉙ ꉚ ꉛ ꉜ ꉝ ꉞ
㈀ ㈁ ㈂ ㈃ ㈄ ㈅ ㈆ ㈇ ㈈ ㈉ ㈊ ㈋ ㈌ ㈍
㉠ ㉡ ㉢ ㉣ ㉤ ㉥ ㉦ ㉧ ㉨ ㉩ ㉪ ㉫ ㉬ ㉭

ꂳ ꂴ ꂵ ꂶ ꂷ ꂸ ꂹ ꂺ ꂻ ꂼ ꂽ ꂾ ꂿ ꃀ ꃁ ꃂ
ꃃ ꃄ ꃅ ꃆ ꃇ ꃈ ꃉ ꃊ ꃋ ꃌ ꃍ ꃎ ꃏ ꃐ ꃑ ꃒ
ꃓ ꃔ ꃕ ꃖ ꃗ ꃘ ꃙ ꃚ ꃛ ꃜ ꃝ ꃞ ꃟ ꃠ ꃡ ꃢ
ꃣ ꃤ ꃥ ꃦ ꃧ ꃨ ꃩ ꃪ ꃫ ꃬ ꃭ ꃮ ꃯ ꃰ ꃱ ꃲ
ꃽ ꃾ ꃿ ꄀ ꄁ ꄂ ꄃ ꄄ ꄅ ꄆ ꄇ ꄈ ꄉ ꄊ ꄋ ꄌ
ꄍ ꄎ ꄏ ꄐ ꄑ ꄒ ꄓ ꄔ ꄕ ꄖ ꄗ ꄘ ꄙ ꄚ ꄛ ꄜ
ꄝ ꄞ ꄟ ꄠ ꄡ ꄢ ꄣ ꄤ ꄥ ꄦ ꄧ ꄨ ꄩ ꄪ ꄫ ꄬ
ꄭ ꄮ ꄯ ꄰ ꄱ ꄲ ꄳ ꄴ ꄵ ꄶ ꄷ ꄸ ꄹ ꄺ ꄻ ꄼ

ꍟ ꍠ ꍡ ꍢ ꍣ ꍤ ꍥ ꍦ ꍧ ꍨ ꍩ ꍪ
ꍯ ꍺ ꍻ ꍼ ꎗ ꎘ ꎙ ꎚ ꎛ ꎜ ꎝ ꎧ ꎨ ꏁ ꏂ ꎯ
ꍫ ꍬ ꍭ ꍮ ꎞ ꎟ ꎠ ꎡ ꎪ
ꍰ ꍱ ꍲ ꍳ ꍴ ꍵ ꍶ ꍷ ꍸ ꍹ ꎼ ꎽ ꎾ ꎿ ꎮ ꎰ ꎲ ꎬ
ꎢ ꎣ ꎤ ꎥ ꎦ ꎩ ꎫ ꎭ ꎱ ꎳ ꎶ ꎷ ꎸ ꎹ ꎺ ꎻ ꏀ ꏃ ꏄ

困 囷 囹 固 囿 圁 圂 圃 圄 圈 圉 圊
國 圍 園 圓 圖 團 圜 囚 因 囦 囫 囮
囘 囙 囜 囝 囡 团 団 囤 囥 囧 囨 囩 囪 囬 园 囯 囱 囲 図 围 囵 囶
囸 囻 囼 国 图 圀 圅 圆 圇 圌 圎 圏 圐 圑 圔 圕 圗 圙 圚 圛 圝 圞
㈱ ㈲ ㈳ ㈴ ㈵ ㈶ ㈷ ㈸ ㈹ ㈺ ㈻ ㈼ ㈽ ㈾ ㈿ ㉀ ㉁ ㉂ ㉃
㊑ ㊒ ㊓ ㊔ ㊕ ㊖ ㊗ ㊘ ㊙ ㊚ ㊛ ㊜ ㊝ ㊞ ㊟ ㊠
㊡ ㊢ ㊣ ㊤ ㊥ ㊦ ㊧ ㊨ ㊩ ㊪ ㊫ ㊬ ㊭ ㊮ ㊯ ㊰

㋐ ㋑ ㋒ ㋓ ㋔ ㋕ ㋖ ㋗ ㋘ ㋙ ㋚ ㋛ ㋜ ㋝ ㋞ ㋟ ㋠ ㋡ ㋢ ㋣ ㋤ ㋥ ㋦ ㋧
㋨ ㋩ ㋪ ㋫ ㋬ ㋭ ㋮ ㋯ ㋰ ㋱ ㋲ ㋳ ㋴ ㋵ ㋶ ㋷ ㋸ ㋹ ㋺ ㋻ ㋼ ㋽ ㋾

㌀ ㌁ ㌂ ㌃ ㌄ ㌅ ㌆ ㌇ ㌈ ㌉ ㌊ ㌋ ㌌ ㌍ ㌎ ㌏ ㌐ ㌑ ㌒ ㌓ ㌔ ㌕
㌖ ㌗ ㌘ ㌙ ㌚ ㌛ ㌜ ㌝ ㌞ ㌟ ㌠ ㌡ ㌢ ㌣ ㌤ ㌥ ㌦ ㌧ ㌨ ㌩ ㌪ ㌫
㌬ ㌭ ㌮ ㌯ ㌰ ㌱ ㌲ ㌳ ㌴ ㌵ ㌶ ㌷ ㌸ ㌹ ㌺ ㌻ ㌼ ㌽ ㌾ ㌿ ㍀ ㍁
㍂ ㍃ ㍄ ㍅ ㍆ ㍇ ㍈ ㍉ ㍊ ㍋ ㍌ ㍍ ㍎ ㍏ ㍐ ㍑ ㍒ ㍓ ㍔ ㍕ ㍖ ㍗

ᐰ ᐱ ᐲ ᐳ ᐴ ᐵ ᐶ ᐷ ᐸ ᐹ ᐺ ᐻ ᐼ ᐽ ᐾ ᐿ ᑀ ᑁ ᑂ ᑃ ᑄ ᑅ ᑆ ᑇ ᑈ ᑉ ᑊ ᑋ ᑌ ᑍ ᑎ ᑏ
ᑐ ᑑ ᑒ ᑓ ᑔ ᑕ ᑖ ᑗ ᑘ ᑙ ᑚ ᑛ ᑜ ᑝ ᑞ ᑟ ᑠ ᑡ ᑢ ᑣ ᑤ ᑥ ᑦ ᑧ ᑨ ᑩ ᑪ ᑫ ᑬ ᑭ ᑮ ᑯ
ᑰ ᑱ ᑲ ᑳ ᑴ ᑵ ᑶ ᑷ ᑸ ᑹ ᑺ ᑻ ᑼ ᑽ ᑾ ᑿ ᒀ ᒁ ᒂ ᒃ ᒄ ᒅ ᒆ ᒇ ᒈ ᒉ ᒊ ᒋ ᒌ ᒍ ᒎ ᒏ
ᒐ ᒑ ᒒ ᒓ ᒔ ᒕ ᒖ ᒗ ᒘ ᒙ ᒚ ᒛ ᒜ ᒝ ᒞ ᒟ ᒠ ᒡ ᒢ ᒣ ᒤ ᒥ ᒦ ᒧ ᒨ ᒩ ᒪ ᒫ ᒬ ᒭ ᒮ ᒯ
ᓐ ᓑ ᓒ ᓓ ᓔ ᓕ ᓖ ᓗ ᓘ ᓙ ᓚ ᓛ ᓜ ᓝ ᓞ ᓟ ᓠ ᓡ ᓢ ᓣ ᓤ ᓥ ᓦ ᓧ ᓨ ᓩ ᓪ ᓫ ᓬ ᓭ ᓮ ᓯ
ᓰ ᓱ ᓲ ᓳ ᓴ ᓵ ᓶ ᓷ ᓸ ᓹ ᓺ ᓻ ᓼ ᓽ ᓾ ᓿ ᔐ ᔑ ᔒ ᔓ ᔔ ᔕ ᔖ ᔗ ᔘ ᔙ ᔚ ᔛ ᔜ ᔝ ᔞ ᔟ
ᔠ ᔡ ᔢ ᔣ ᔤ ᔥ ᔦ ᔧ ᔨ ᔩ ᔪ ᔫ ᔬ ᔭ ᔮ ᔯ ᔰ ᔱ ᔲ ᔳ ᔴ ᔵ ᔶ ᔷ ᔸ ᔹ ᔺ ᔻ ᔼ ᔽ ᔾ ᔿ
ᕀ ᕁ ᕂ ᕃ ᕄ ᕅ ᕆ ᕇ ᕈ ᕉ ᕊ ᕋ ᕌ ᕍ ᕎ ᕏ ᕐ ᕑ ᕒ ᕓ ᕔ ᕕ ᕖ ᕗ ᕘ ᕙ ᕚ ᕛ ᕜ ᕝ ᕞ ᕟ
ᕠ ᕡ ᕢ ᕣ ᕤ ᕥ ᕦ ᕧ ᕨ ᕩ ᕪ ᕫ ᕬ ᕭ ᕮ ᕯ ᕰ ᕱ ᕲ ᕳ ᕴ ᕵ ᕶ ᕷ ᕸ ᕹ ᕺ ᕻ ᕼ ᕽ ᕾ ᕿ
ᖠ ᖡ ᖢ ᖣ ᖤ ᖥ ᖦ ᖧ ᖨ ᖩ ᖪ ᖫ ᖬ ᖭ ᖮ ᖯ ᖰ ᖱ ᖲ ᖳ ᖴ ᖵ ᖶ ᖷ ᖸ ᖹ ᖺ ᖻ ᖼ ᖽ ᖾ ᖿ
ᗀ ᗁ ᗂ ᗃ ᗄ ᗅ ᗆ ᗇ ᗈ ᗉ ᗊ ᗋ ᗌ ᗍ ᗎ ᗏ ᗐ ᗑ ᗒ ᗓ ᗔ ᗕ ᗖ ᗗ ᗘ ᗙ ᗚ ᗛ ᗜ ᗝ ᗞ ᗟ
ᗠ ᗡ ᗢ ᗣ ᗤ ᗥ ᗦ ᗧ ᗨ ᗩ ᗪ ᗫ ᗬ ᗭ ᗮ ᗯ ᗰ ᗱ ᗲ ᗳ ᗴ ᗵ ᗶ ᗷ ᗸ ᗹ ᗺ ᗻ ᗼ ᗽ ᗾ ᗿ

ᘀ ᘂ ᘃ ᘄ ᘅ ᘆ ᘇ ᘈ ᘉ ᘊ ᘋ ᘌ ᘍ ᘎ ᘏ ᘐ ᘑ
ᘒ ᘓ ᘔ ᘕ ᘖ ᘗ ᘘ ᘙ ᘚ ᘛ ᘜ ᘝ ᘞ ᘟ ᘠ ᘡ ᘢ
ᘣ ᘤ ᘥ ᘦ ᘧ ᘨ ᘩ ᘪ ᘫ ᘬ ᘭ ᘮ ᘯ ᘰ ᘱ ᘲ ᘳ
ᘴ ᘵ ᘶ ᘷ ᘸ ᘹ ᘺ ᘻ ᘼ ᘽ ᘾ ᘿ ᙀ ᙁ ᙂ ᙃ ᙄ
ᙅ ᙆ ᙇ ᙈ ᙉ ᙊ ᙋ ᙌ ᙍ ᙎ ᙏ ᙐ ᙑ ᙒ ᙓ ᙔ ᙕ
ᙖ ᙗ ᙘ ᙙ ᙚ ᙛ ᙜ ᙝ ᙞ ᙟ ᙠ ᙡ ᙢ ᙣ ᙤ ᙥ ᙦ
ᙧ ᙨ ᙩ ᙪ ᙫ ᙬ ᙯ ᙰ ᙱ ᙲ ᙳ ᙴ ᙵ ᙶ

ઁ ં ઃ અ આ ઇ ઈ ઉ ઊ ઋ
ઍ એ ઐ ઑ ઓ ઔ ક ખ ગ
ઘ ઙ ચ છ જ ઝ ઞ ટ ઠ ડ ઢ

इ उ ऊ ऋ ऌ क ख ग घ ङ च छ ज झ ञ ट ठ ड ढ ण त द न ऩ प फ ब भ म य र ऱ ल ळ ऴ व श ष स ह क़ ख़ ग़ ज़ ड़ ढ़ फ़ य़ ॠ ॡ

Ա Բ Գ Դ Ե Զ Է Ը Թ Ժ Ի Լ Խ Ծ Կ Հ Ձ Ղ Ճ Մ Յ Ն Շ Ո Չ Պ Ջ Ռ Ս Վ Տ Ր
ա բ գ դ ե զ է ը թ ժ ի լ խ ծ կ հ ձ ղ ճ մ յ ն ո չ պ ջ ռ ս վ տ ր ց ւ փ ք օ ֆ և

ឃ ង ច ឆ ឈ ញ ដ ឋ ឌ ឍ ណ ត ថ ទ ធ ន ប ផ ភ ម យ ល ឝ
ឞ ស ឡ អ ឤ ឥ ឦ ឨ ឩ ឬ ឭ ឯ ឰ ឱ ឲ ឳ ឴ ឵ ា ១ ២ ៣ ៥ ៦ ៧ ៨ ៩

ஆ இ ஈ ஊ எ ஏ ஐ ஒ ஓ ஔ ஂ ஃ ா ி ௗ ங ஜ ஞ ண ந ன ம ய ற ல ள ழ வ ஸ ஹ ௧ ௨ ௩ ௪ ௫

а б в г д е ж з и й к л м н о п р с т у ф х ц
ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ

ހ ށ ނ ރ ބ ޅ ކ އ ވ މ ފ ދ ތ
ލ ގ ޏ ސ ޑ ޒ ޓ ޔ ޕ ޖ ޗ ޘ ޙ
ޚ ޛ ޜ ޝ ޞ ޟ ޠ ޡ ޢ ޣ ޤ ޥ

ਕ ਗ ਘ ਙ ਚ ਛ ਜ ਝ ਞ ਟ ਡ ਢ ਣ ਤ ਥ ਦ ਧ
ਨ ਪ ਫ ਬ ਭ ਯ ਰ ਲ ਲ਼ ਵ ਸ ਹ ਖ਼ ਗ਼ ਜ਼ ੜ ਫ਼

ଆ ଇ ଈ ଉ ଊ ଋ ଌ ଐ ଓ ଔ ଖ ଗ ଘ ଙ ଛ ଜ ଝ ଞ ଟ ଢ ଣ ତ ଥ ଧ ନ ପ ଫ ବ ଭ ମ ଯ ର ଳ ଶ ଷ ସ ହ

ం ః అ ఆ ఇ ఈ ఉ ఊ ఋ ఌ ఎ ఏ ఐ ఒ ఓ ఔ క ఖ గ ఘ ఙ చ ఛ జ ఝ ఞ ట
ఠ డ ఢ ణ త థ ద ధ న ప ఫ బ భ మ య ర ఱ ల ళ వ శ ష హ ా ి ౕ ౖ ౠ
ౡ ౨ ౩ ౪ ౫ ౬ ౭ ౮ ౯ ಂ ಃ ಅ ಆ ಇ ಈ ಉ ಊ ಋ ಌ ಎ ಏ ಐ ಒ ಓ ಔ ಕ ಖ ಗ ಘ ಙ ಚ ಛ ಜ ಝ ಞ ಟ ಠ ಡ ಢ ಣ ತ ಥ ದ ಧ ನ ಪ ಫ ಬ ಭ ಮ ರ ಱ ಲ ಳ ವ ಶ ಷ

૦ ૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯
੦ ੧ ੨ ੩ ੪ ੫ ੬ ੭ ੮ ੯

║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞
╟ ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬

ꋰ ꋱ ꋲ ꋳ ꋴ ꋵ ꋶ ꋷ ꋸ ꋹ ꋺ ꋻ ꋼ ꋽ
ꀢ ꀣ ꀤ ꀥ ꀦ ꀧ ꀨ ꀩ ꀪ ꀫ ꀬ ꀭ
ꀲ ꀳ ⇒ ⇔ ꀮ ꀯ ꀰ ꀱ
← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙
ꀹ ꀺ ꀻ ꀼ ꀽ ꁼ ꁽ ꁾ ꁿ
ꀴ ꀵ ꀶ ꀷ ꀸ
ꀾ ꀿ ꁂ ꁃ ꁄ ꁅ ꎴ ꎵ
ꍖ ꍗ ꍘ ꍙ ꍚ ꍛ ꍜ ꍝ

܁ ܂ ܃ ܄ ܅ ܆ ܇ ܈ ܉
ꌈ ꌉ ꌊ ꌋ ꌌ ꌍ ꌎ ꌏ ꌐ ꌀ ꌁ ꀞ ꀟ

ꀆ ꀇ ꀈ ꀉ ꀊ ꀋ ꀌ ꀍ ꀎ ꀏ ꀐ ꀑ
ꀒ ꀓ ꀔ ꀕ ꀖ ꀗ ꀘ ꀙ ꀚ ꀛ ꀜ ꀝ
༼ ༽ ༾ ༿ ⌠ ⌡ꌼ ꌽ ꌾ ꌿ ꍀ ꍁ ꍂ ꍃ ꍄ ꍅ ꍆ ꍇ ꍈ ꍉ ꍐ ꍑ

ꍊ ꍋ ꍌ ꍍ ꍎ ꍏ ꍒ ꍓ ꍔ ꍕ ᚛ ᚜

ꌑ ꌒ ꌓ ꌔ ꌕ ꌖ ꌗ ꌘ ꌙ ꌚ ꌛ ꌜ ꌝ ꌞ ꌟ ꌠ ꌡ ꌢ ꌣ ꌤ
ꌥ ꌦ ꌧ ꌨ ꌩ ꌪ ꌫ ꌬ ꌭ ꌮ ꌯ ꌰ ꌱ ꌲ ꌳ ꌴ ꌵ ꌶ ꌷ
ꏪ ꏫ ꏬ ▒ ▓
░

ꁳ ꁴ ꁵ ꁶ ꁷ ꁸ
ꁣ ꁤ ꁥ ꁦ ꁧ ꁨ
ꁩ ꁪ ꁫ ꁬ
ꁭ ꁮ ꁯ ꁰ ꁱ ꁲ ◆ ◇ ◈
ꂔ ꂕ ꂗ ꂘ ꂙ
▣ ▤ ▥ ▦ ▧ ▨ ▩

ᚠ ᚡ ᚢ ᚣ ᚤ ᚥ ᚦ ᚧ ᚨ ᚩ ᚪ ᚫ ᚬ ᚭ ᚮ ᚯ ᚰ ᚱ ᚲ ᚳ ᚴ ᚵ ᚶ ᚷ ᚸ ᚹ ᚺ ᚻ
ᚼ ᚽ ᚾ ᚿ ᛀ ᛁ ᛂ ᛃ ᛄ ᛅ ᛆ ᛇ ᛈ ᛉ ᛊ ᛋ ᛌ ᛍ ᛎ ᛏ ᛐ ᛑ ᛒ ᛓ ᛔ ᛕ ᛖ ᛗ ᛘ
µ ¶ ܏ᛙ ᛚ ᛛ ᛜ ᛝ ᛞ ᛟ ᛠ ᛡ ᛢ ᛣ ᛤ ᛥ ᛦ ᛧ ᛨ ᛩ ᛪ ᛫ ᛬ ᛭ ᛮ ᛯ ᛰ

ᚁ ᚂ ᚃ ᚄ ᚅ
ᚆ ᚇ ᚈ ᚉ ᚊ
ᚋ ᚌ ᚍ ᚎ ᚏ
ᚐ ᚑ ᚒ ᚓ ᚔ
ꁌ ꁍ ꁎ ꁏ ꁐ

♩ ♪ ♫ ♬ ♭ ꁔ ꁕ ꁖ ꁗ ꁛ ꁜ ꁝ ꁞ ꁟ ꁠ ꁡ
ꁑ ꁒ ꁓ ꁘ ꁙ ꁚ ꁢ

ꁇ ܀ ܊ ܋ ܌ ܍ ¤ ፨ ₪ ꂇ ◘ ◙ ⌂ ☺ ☻ ♀ ♂ ꋭ ꋯ ާ ި ީ ު ޫ ެ ޭ ޮ ᚗ ᚘ
፡ ። ፣ ፤ ፥ ፦ ፧ ‘ ’ ‚ ‛ “ ” „ ‥ … ‧ ′ ″ 〝 〞 〟

ꏯ ꏰ ꏱ ꏲ ꏳ ꏴ
ꏣ ꏤ ꏥ ꏦ ꏧ ꏨ ꏩ
ꏛ ꏜ ꏝ ꏞ ꏟ ꏠ ꏡ ꏢ
ꏍ ꏎ ꏏ ꏐ ꏑ ꏒ ꏇ ꏈ
ꏔ ꏕ ꏖ ꏮ ꂚ ꏅ ꏚ ꏋ
☼ ꀀ ꁋ ꂊ ꂐ ꏗ ꏘ ꏙ ꁉ ꏆ
ꁹ ꁺ ꁻ ꂂ ꂃ ꂅ ꂆ ꂈ ꂉ ꏊ ꏓ
ꂋ ꂌ ꂍ ꂎ ꂏ ꂑ ꂒ ꂓ ꂖ 〒

2018/07/17

CSS로 잔물결효과

CSS

.dot{width:12px;height:12px;background-color:#f33;border-radius:100%;display:inline-block}
.dot .ping{border:1px solid #f33;width:12px;height:12px;opacity:1;background-color:rgba(238,46,36,0.2);border-radius:100%;-webkit-animation-duration:1.25s;animation-durastion:1.25s;-webkit-animation-name:sonar;animation-name:sonar;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;display:block;margin:-1px 0 0 -1px}
@-webkit-keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(3);transform:scale(3);opacity:0}}
@keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(3);transform:scale(3);opacity:0}}

HTML

<span class="dot"><span class="ping"></span></span>

적용된모습

2018/07/15

구글블로그 사이드바 메뉴를 따라다니게 하기

블로그에 보시면 화면을 따라다니는 메뉴나 광고들이 있습니다.

구글 블로그에서는 간단하게 사이드바 위젯중 하나를 따라다니게 만들수 있습니다

</body>안에 삽입

<script type='text/javascript'>
//<![CDATA[ // Sticky Widget function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1"); //]]> </script>

헤드안에 </style> 삽입
<
.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);} #HTML1 .widget-content {padding:0;margin:auto;}

위 스크립트에 makemeSticky("HTML1"); 노란색으로 표시된 부분이 사이드바 아이디입니다.

원하는 아이디로 넣어주시면 됩니다.

2018/06/28

구글 이미지 : 간단하게 회전시키기

Rotate Blogger images

구글에 업로드한 이미지는 이미지주소(절대주소)에서 간단히 수정해 주는것만으로도 효과를 냅니다.

아래 예제를 확인후 이미지에 효과를 넣어보세요.

s1600 : 기본이미지
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiialaeR5QcZyQpJ_tRiESAMuJyMSCy3S7TYzLAgthyphenhyphenDK7_vpvNSl9893MeavAkw6evPt_uUZIbIhKe3qO2pHiDBzdg_rNbCndtMa6KTbMMShfVcq4amphw3cFm2VDWxSyrJY1wM3QtR0-m/s1600/1.jpg

s1600-r90 : 90°회전
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiialaeR5QcZyQpJ_tRiESAMuJyMSCy3S7TYzLAgthyphenhyphenDK7_vpvNSl9893MeavAkw6evPt_uUZIbIhKe3qO2pHiDBzdg_rNbCndtMa6KTbMMShfVcq4amphw3cFm2VDWxSyrJY1wM3QtR0-m/s1600-r90/1.jpg

s1600-r180 : 180°회전
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiialaeR5QcZyQpJ_tRiESAMuJyMSCy3S7TYzLAgthyphenhyphenDK7_vpvNSl9893MeavAkw6evPt_uUZIbIhKe3qO2pHiDBzdg_rNbCndtMa6KTbMMShfVcq4amphw3cFm2VDWxSyrJY1wM3QtR0-m/s1600-r180/1.jpg

s1600-r270 : 270°회전
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiialaeR5QcZyQpJ_tRiESAMuJyMSCy3S7TYzLAgthyphenhyphenDK7_vpvNSl9893MeavAkw6evPt_uUZIbIhKe3qO2pHiDBzdg_rNbCndtMa6KTbMMShfVcq4amphw3cFm2VDWxSyrJY1wM3QtR0-m/s1600-r270/1.jpg

If we switch the s1600 to s1600-r90,r180,r270 we get the following image instead.

버튼을 클릭하면 랜덤으로 포스팅출력

[Random Post Button widgets]
버튼을 누르면 랜덤으로 블로그의 포스트를 출력합니다.
사이드바 상단에 버튼을 생성하면 블로그 방문자의 체류시간을 늘이는 효과를 가져올수 있습니다.

CSS

#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}

JAVASCRIPT

<script>
//<![CDATA[
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('abt-random').appendChild(a); }
//]]>
</script>

HTML

<center><div id="abt-random"></div></center>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

특정 레이블만 표시할경우 {/-/레이블이름}
/feeds/posts/summary/-/블로그손질?max-results=8

적용된 모습




2017/06/03

CSS 마우스 올리면 이미지가 움직이는(Animation) 효과

[CSS/Animation] CSS로 구현한 GIF 애니메이션 효과 (zoom-in)
마우스 오버일때 커지고 작아지는(scale) 효과로 이미지가 움직이는 효과를 낼수 있습니다.
이미지가 약간 커지면서 조금 왼쪽으로 기울어짐

CSS
<style type='text/css'>
.block-image{float:left;width:247px;height:158px;margin-right:20px}
.block-image .thumb{width:100%;height:158px;position:relative;display:block;z-index:2;border-radius:2px;overflow:hidden}
.block-image a{width:100%;height:158px;display:block;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.block-image a:hover{-webkit-transform:scale(1.1) rotate(-1.5deg)!important;-moz-transform:scale(1.1) rotate(-1.5deg)!important;transform:scale(1.1) rotate(-1.5deg)!important;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
</style>
HTML

<div class="block-image"><div class='thumb'>
</div></div>

DIV안에 이미지를 넣으시면 나타납니다.

<div class="block-image">
<a href="https://2.bp.blogspot.com/-fFAvM9GTJ9U/VnaO_ny5OhI/AAAAAAAAAOg/7X9_xua3Fz0/s1600/blogger_log.png" imageanchor="1"><img border="0" src="https://2.bp.blogspot.com/-fFAvM9GTJ9U/VnaO_ny5OhI/AAAAAAAAAOg/7X9_xua3Fz0/s1600/blogger_log.png" /></a>
</div>

아래는 적용된 효과입니다.



Blogspot 레이블을 이용한 최신 관련게시물 위젯

Recent Posts Image Gallery For Blogger
[Recent and Related post widgets]
블로그에는 카테고리 기능이 없습니다.
이 위젯은 메뉴를 구성하거나 기존에 작성했던 관련포스팅을 재활용하는데 유용합니다.

CSS

.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}

JAVASCRIPT

<script>
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from blogjuin.blogspot.com">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yTUKeUmT7dr0b7Yjq6KzaSlpvhR7Aw76jDeEsV0ovFTfERW2TGb45yydIVIDaE6KYuYl642UZblIqP5kgtvknZJU2Smb5CcGjLY9lQwf2tc9U3-qYgOdlEhqtyUbDYTdIaIfRNG4YveE/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>

HTML

<script> 
var bsrpg_thumbSize = 100; 
var bsrpg_showTitle = true; 
</script> 
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

특정 레이블만 표시할경우 {/-/레이블이름}
/feeds/posts/summary/-/블로그손질?max-results=8

적용된 모습


2017/06/01

CSS만으로 꾸며진 움직이는 그림

재미있는 CSS효과가 있어 소개합니다. 보통은 포토샵으로 디자인을 하지만 포토샵을 잘 다루시지 못하시는 분은 CSS를 통해서 디자인을 하셔도 무방합니다. 오히려 예쁜 버튼을 만드실 수 있습니다. CSS의 기본적은 소스를 공개합니다.
재미있는 CSS효과가 있어 소개합니다. CSS만으로 만들어진 움직이는 그림입니다.

CSS

<style scoped="" type="text/css">
.ad-emots-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;margin-bottom:40px;}
.ad-emot{border-radius:50%;position:relative;width:100px;height:100px;background-color:#FFEB96;}
.ad-emot1:after,.ad-emot1:before{position:absolute;content:"";height:10px;width:10px;background-color:#414141;border-radius:50%;top:48px;-webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}
.ad-emot1:after{left:30px;}
.ad-emot1:before{left:85px;}
.ad-emot1 .mulut{position:absolute;height:3px;width:35px;background-color:#414141;border-radius:5px;top:68px;left:45px;-webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes ad-emot1-berkedip{0%{height:10px;}97%{height:10px;}100%{height:0;}}@keyframes ad-emot1-berkedip{0%{height:10px;}97%{height:10px;}100%{height:0;}}@-webkit-keyframes ad-emot1-muka-bergerak{0%{-webkit-transform:translateX(0);transform:translateX(0);}30%{-webkit-transform:translateX(0);transform:translateX(0);}35%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}65%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}85%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}90%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(0);transform:translateX(0);}}@keyframes ad-emot1-muka-bergerak{0%{-webkit-transform:translateX(0);transform:translateX(0);}30%{-webkit-transform:translateX(0);transform:translateX(0);}35%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}65%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}85%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}90%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(0);transform:translateX(0);}}
</style>


HTML

<div class="ad-emots-wrapper">
<div class="ad-emot ad-emot1">
<div class="mulut">
</div>
</div>
</div>


구글 검색엔진에 내 블로그 RSS 등록

이제 블로그를 등록합니다.

구글검색화면
블로그주소 등록화면

내 블로그 주소
http://blogjuin.blogspot.kr/
내 블로그 rss (블로그스팟에서는 아래의 3가지 형태로 제공함.)
http://blogjuin.blogspot.kr/feeds/posts/default

http://blogjuin.blogspot.kr/feeds/posts/default?alt=rss

http://blogjuin.blogspot.kr/atom.xml

블로그 주소,RSS 등록후 전송

블로그 최적화? 니 머니 복잡해서 4가지 모두등록~~

2017/05/31

블로그스팟 파비콘 설정

내 블로그 파비콘 설정 [blogger favicon installation]


레이아웃 - favicon - 클릭


정사각형이면서 용량 100KB 미만의 이미지만 등록가능

잘가꾼다는 의미로 나무이미지 파비콘 적용~~

구글블로그 BlogSpot 에 나눔고딕 적용

내 Blogger에 나눔고딕 폰트 적용

구글 폰트에 접속합니다.

접속하면 나눔고딕폰트와 나눔고딩코딩 폰트가 나옵니다. 이중에 나눔고딕 폰트를 적용합니다.

<link href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" />

위의 링크를 헤더안에 삽입

font-family: 'Nanum Gothic';
폰트 페일리 수정

완료..


구글블로그

  • 웹반응형
  • 모바일친화적
  • 검색최적화
  • 모두무료