티스토리 블로그 로딩아이콘으로 블로그를 꾸며 보세요.
티스토리 블로그 로딩이미지 삽입하는 방법
로딩이미지 선택
먼저 자신의 블로그에 사용할 로딩 이미지를 아래 사이트에서 선택하여 다운로드 합니다.
URL
원하는 로딩 이미지를 선택
아래 DOWNLOAD 를 눌러 해당 이미지 파일을 다운로드 합니다. 파일이름은 간편하게 loading 으로 합니다. (이처럼 저장하셔야 아래 코드를 변경안해도 됩니다.)
옆의 메뉴들은 이미지의 상세설정입니다.
색/이미지의 속도/크기 등을 설정할 수 있습니다.
아래는 로딩 이미지의 종류입니다. 원하는 이미지가 없다면 스크롤을 조금 내려 다른 타입에서 찾아보세요.
티스토리 블로그에 파일 업로드
사이트에서 다운로드 받은 파일을 아래와 같이 티스토리 블로그에 업로드하고 적용을 눌러줍니다.
코드를 복사하여 <body>~</body> 사이에 삽입하기
<!-- 로딩 이미지 소스코드 시작 -->
<script src="https://code.jquery.com/jquery-1.8.0.js"
integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load', function () {
$("#load").hide();
});
</script>
<style type="text/css">
#load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: white;
z-index: 99;
text-align: center;
}
#load > img {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
</style>
<div id="load">
<img src="./images/loading.gif" alt="loading">
</div>
<!-- 로딩 이미지 소스코드 끝-->
수정
해당 코드를 삽입하면 PC에서는 로딩 이미지가 중앙에 구현되지만 모바일에서는 중앙에 구현되지 않는 것을 보고 수정했습니다.
#load > img { position: absolute; top: 50%; left: 50%; z-index: 100; |
해당 코드를
#load > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: 100; |
이렇게 수정하시면 됩니다.
아래 파일에는 수정본으로 다시 올렸습니다.
소스코드 파일
소스코드.txt
