티스토리 비밀 글 체크박스(checkbox) 이미지로 꾸미기

background-image:url(http://csscheckbox.com/checkboxes/lite-green-check.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-blue-check.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-gray-check.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-cyan-check.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-orange-check.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-red-check.png)

background-image:url(http://csscheckbox.com/checkboxes/lite-x-cyan.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-x-gray.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-x-blue.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-x-orange.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-x-green.png)

background-image:url(http://csscheckbox.com/checkboxes/mac-style.png)
background-image:url(http://csscheckbox.com/checkboxes/mario-style.png)
background-image:url(http://csscheckbox.com/checkboxes/alert-style.png)
background-image:url(http://csscheckbox.com/checkboxes/lite-plus.png)
background-image:url(http://csscheckbox.com/checkboxes/dark-plus.png)
background-image:url(http://csscheckbox.com/checkboxes/dark-plus-cyan.png)
background-image:url(http://csscheckbox.com/checkboxes/dark-plus-orange.png)
background-image:url(http://csscheckbox.com/checkboxes/dark-check-cyan.png)
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png)
background-image:url(http://csscheckbox.com/checkboxes/dark-check-orange.png)

background-image:url(http://csscheckbox.com/checkboxes/depressed-lite-small.png)
background-image:url(http://csscheckbox.com/checkboxes/elegant.png)
background-image:url(http://csscheckbox.com/checkboxes/depressed.png)
background-image:url(http://csscheckbox.com/checkboxes/chrome-style.png)
background-image:url(http://csscheckbox.com/checkboxes/web-two-style.png)
background-image:url(http://csscheckbox.com/checkboxes/vlad.png)
background-image:url(http://csscheckbox.com/checkboxes/klaus.png)

이미지 주소들 입니다. 주소를 따라가면 이미지 확인이 가능하고 우 클릭으로 다운 받아서 자신의 블로그에 이미지를 등록 시켜 놓고 사용하셔도 되고 링크 걸어서 사용해도 됩니다. 

티스토리에 파일 업로드 하고 적용은 background-image:url(images/Checkbox.png); 입니다.

<input class="checkbox" id="[＃＃_guest_input_is_secret_＃＃]" name="[＃＃_rp_input_is_secret_＃＃]" type="checkbox"/>
<label for="[＃＃_guest_input_is_secret_＃＃]" class="secret">Secret</label>

<input class="checkbox" id="[＃＃_rp_input_is_secret_＃＃]" name="[＃＃_rp_input_is_secret_＃＃]" type="checkbox"/>
<label for="[＃＃_rp_input_is_secret_＃＃]" class="secret">Secret</label>

input[type=checkbox] { display:none; }
input[type=checkbox].checkbox + label.secret {
	padding-left:20px;
	height:20px; 
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer; }
input[type=checkbox].checkbox:checked + label.secret { background-position: 0 -20px; }
.secret{ background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png); }

티스토리에 쉽게 적용 가능하게 수정한 코드입니다. Ctrl + F 검색 기능으로 ＃＃_guest_input_is_secret_＃＃ 치환자들을 검색하시면 쉽게 찾아 적용할 수 있습니다. 더블 클릭 하여 복사해 가시면 되고 ＃＃ 코드는 쉬프트 + 3으로 다시 입력해 주셔야 합니다.