http://scmplayer.net/


위 링크로 들어가서 첫번째 탭인 Choose Skin 
자신이 원하는 스킨을 선택해준다. 그리고 Next.





다음은 재생목록 편집(Edit Playlist)이다. 

Manual Playlist을 선택하면 유튜브에서 끌어올수 있다. 


Song Title에 노래제목을 적고, Song URL에는 노래 유튜브주소를 적어주면 된다. 그리고 Next.






환경설정 탭에서는

Auto Play 체크하면 자동재생되는것

Shuffle Playback 셔플재생

Default Volume 블로그에 처음들어왔을대 볼륨크기

Repeat Mode 반복재생

Placement of Player Bar 음악재생바를 위/아래 선택할수 있다.

Show Playlist by Default 플레이리스트를 보여주는것인데 체크 안해도 버튼을 누르면 플레이리스트가 나오기때문에 체크를 안해주는것이 좋다.

그리고 Done.






코드가 생성되었다. 코드 복사(Ctrl+C)





티스토리 관리 -> 꾸미기 -> HTML/CSS 편집으로 들어가서,

<Body> 태그 밑에다가 위에서 복사한 코드를 붙여넣기(Ctrl+V) 해준다. 그리고 저장






블로그에 음악재생기가 잘 설치되어있는지 확인한다.





저작자 표시
신고
Posted by emotrav Trackback 0 : Comment 0




아이콘들은 

https://www.iconfinder.com/ 에서 무료다운로드함.

(카카오스토리 아이콘만 구글이미지에서 검색)


다운로드 받은 파일(.png)은 티스토리 글쓰기에서 비공개로 올리면 아이콘별로 이미지주소를 얻을수 있다. 



티스토리 관리 -> 꾸미기 -> 사이드바 -> HTML배너출력 후에

치환자에 적을 소스(기본소스는 파일을 다운로드하면 된다.)


소스.txt



-- 소스내용 --


<div align="left">


<a target="_blank" class="con_link" href="자신의 텀블러 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="텀블러 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 트위터 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="트위터 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 카카오스토리 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="카카오스토리 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 페이스북 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="페이스북 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 유튜브 채널 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="유튜브 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 인스타그램 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="인스타그램 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 깃허브 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="깃허브 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 워드프레스 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="워드프레스 아이콘 이미지주소" type="w2"" border="0" />

</a>



<a target="_blank" class="con_link" href="자신의 구글플러스 주소">

<img style="WIDTH: 48px; HEIGHT: 48px" src="구글플러스 아이콘 이미지주소" type="w2"" border="0" />

</a>


</div>



각각 자신의 SNS주소와 이미지주소를 넣어주면 된다. 

사이즈는 가로 세로 48px로 해놓았지만 자신에게 맞게 변경가능하다. 



그리고 원하는곳에 위치시킨후 저장하면 된다. 




 





저작자 표시
신고
Posted by emotrav Trackback 0 : Comment 0





먼저 자신의 PC버전 카카오스토리로 가서 주소를 확인해둔다.

그리고 배너에 사용될 이미지가 필요한데, 왼쪽위의 로고를 캡쳐도구로 가져왔다.






사용할 이미지




이미지 주소를 얻기 위해 티스토리 글쓰기에 비공개로 사진을 업로드.

마우스 오른쪽을 누른후 이미지주소 복사를 누르면 복사된다.



이제 배너를 만들준비가 되었다.



<div align="left">

<a target="_blank" class="con_link" href="자신의 카카오스토리 주소">

<img style="WIDTH: 150px; HEIGHT: 40px" src="이미지주소" type="w2&quot;" border="0" />

</a>

</div>


파랗게 표시된 부분만 자신에게 맞게 바꾸어주면 된다. 

자신의 카카오스토리 주소와, 이미지주소는 위에서 알수 있고, 

너비와 높이도 자신의 블로그에 맞게 수정하면 된다. 



위의 기본코드는 밑의 텍스트파일을 다운로드하면 된다.


코드.txt






티스토리 관리 -> 꾸미기 -> 사이드바 -> HTML배너 출력을 추가한후

이름을 정해주고, HTML 소스에 방금 복사한것을 붙여준다. 

그리고 확인 후 저장. 





블로그 사이드바에 들어갔는지 확인한다. 

클릭하여 자신의 카카오스토리로 들어갈수 있는지도 확인한다.





저작자 표시
신고
Posted by emotrav Trackback 0 : Comment 0
prev 1 2 3 4 5 ... 54 next


티스토리 툴바