(jQuery) 블로그 본문 중 랜덤 위치에 광고 삽입하기

이전글: (jQuery) 본문 중간에 구글 애드센스 광고를 자동으로 삽입하기 준비 이전글을 참고하여 임의의 위치에 광고 코드를 삽입한다. ... 광고 코드 방법 아래 코드를 참고하여 이전에 결과 페이지를 불러올 때마다 본문의 태그들 중, 임의의 위치 다음 줄에 광고가 삽입된다. 참조 https://stackoverflow.com/a/14638679/11857653

PC&웹/웹프로그래밍 2023. 8. 18. 20:36

(jQuery) 광고 스크립트 제거하기

jQuery를 사용하여 쉽고 깔끔한 방법입니다. 증상 블로그 관리 페이지에서 애드센스 광고 노출을 비활성화 했는데도 블로그의 코드를 보면 자동으로 삽입된 스크립트 광고 코드가 보입니다. 조치 자동으로 삽입된 코드를 전부 찾아내어 지우는 코드를 적용하면 됩니다. 스킨 편집의 HTML 탭에서 태그 사이에 코드를 삽입합니다. [ ]는 요소 선택기이며 W3C 표준을 따릅니다. https://www.w3.org/TR/selectors-3/#attribute-selectors '=' 왼쪽의 이름은 속성 이름이며, '*=' 는 우측의 문자를 포함한다는 뜻입니다. [ ] 앞의 '*' 별표는 모든 요소를 나타내는 기호이며, 없어도 동작합니다. 4번째 제거 코드(src ~ .js)는 다음 광고를 이용하지 않기 때문에 추가..

PC&웹/웹프로그래밍 2023. 8. 18. 19:25

(jQuery) 본문 중간에 구글 애드센스 광고를 자동으로 삽입하기

티스토리의 광고 정책 때문에 구글 애드센스 광고 연동, 본문 내 자동 삽입 기능을 껐을 때 사용하는 방법이다. 수동으로 넣는 방법은 광고 스크립트 서식을 사용하여 넣는 것인데, 번거롭고 이미 작성된 글은 수정을 해야 한다. 자동으로 본문 광고 삽입 자동으로 본문에 광고를 삽입해보자. 1. 구글 애드센스에서 광고 단위를 만든다. 광고 형식은 인아티클 광고로 선택한다. 예제 그림과 같이 본문 내에 광고가 삽입된다. 페이지 우측의 저장 및 코드 생성 버튼을 누르고 광고 코드를 복사한다. 2. 스킨 HTML에 코드를 추가한다. 티스토리 스킨 편집에서 HTML 탭로 이동한다. 임의의 위치에 복사한 코드를 붙여넣고 로 감싼다. 고유 요소이므로 id를 설정한다. ... 구글 광고 코드 3. jQuery 스크립트 코드..

PC&웹/웹프로그래밍 2023. 8. 18. 12:59

(jQuery) 티스토리 이전 글에서 문단 공백이 적용되지 않을 때

증상 문단 앞뒤에 공백이 적용되지 않는다. Shift+Enter만 붙어야 하는데, Enter를 아무리 눌러도 줄 바뀜 사이에 공백이 추가되지 않는다. 문단 설정하라는 글은 쉽게 볼 수 있지만, 설마 그걸 안 해본 사람이 있을까? 할 정도로 전혀 도움이 되지 않는다. 글 편집 화면에서 HTML을 보면 와 뿐이다. 도대체 뭐가 문단 공백을 막는 걸까? 🤔 F12 개발자 도구를 사용하여 문단을 찍어보았다. 🔍 그랬더니... 찾았다! 정상으로 문단 공백이 표시되는 글에는 나타나지 않던 CSS 클래스가, 비정상으로 표시되는 글에 나타나 있는 것이다. .tt_article_useless_p_margin 클래스는 서버 측에서 생성하는 것 같다. 이 클래스는 다음 파일에 정의되어 있다. uselessPMargin.cs..

PC&웹/웹프로그래밍 2023. 8. 17. 17:53

(jQuery) 블로그 자동 목차 삽입

이전에 작성된 글까지 목차 기능을 적용하려면 자동 삽입 스크립트를 사용하는 것이 편리하다. 자동 삽입 조건 수동 목차 요소가 없을 것 H2, H3 제목이 1 개 이상 있을 것 중복 삽입 되지 않을 것 추가 기능 제목을 누르면 목차로 이동 설치하기 위 js 파일을 내려받은 후, 티스토리 관리자 페이지에서 스킨 편집 메뉴로 이동한다. 원본 소스를 변경 하지 않는한, 압축버전인 .min.js 파일만 있으면 된다. 스킨 편집 메뉴 클릭 html 편집 버튼 클릭 파일 업로드 탭으로 이동 후, 페이지 아래의 +추가 버튼을 눌러서 jquery.toc.min.js 파일을 업로드한다. 예제 코드 HTML ... 내용 아래에 추가 본문에 id="toc" 개체가 없고, H2, H3 요소가 1개 이상 있으면 목차 코드를 삽입..

PC&웹/웹프로그래밍 2023. 8. 17. 11:30

MES 시스템 - 데이터 수집 분석 통계 웹프로그램

이번에 개발 중인 시스템입니다. 생산공장에서 사용합니다. 생산 제품의 검사 정보를 수집, 통계, 분석하는 웹 프로그램입니다. 개발시작: 2013년 05월 서버 개발언어: PHP, Javascript 서버 개발프레임웍: XE, jQuery(jQGrid, jQPlot) - opensource 서버 데이터베이스: MySQL 클라이언트 개발언어: Visual Basic 6 시스템 구성 1. 클라이언트PC에서 바코드 스캔 및 제품 검사 2. 서버 Database로 데이터 전송 3. 서버에서 데이터 조회 공정별 검사 시스템의 측정 결과를 Database 서버로 전송 하면 Database 서버에서 측정 결과를 볼 수 있습니다. 그림 설명은 아래 사이트를 참고하세요. http://simulz.kr/xe/board_ph..

PC&웹/웹프로그래밍 2013. 5. 25. 13:06

(jQueryMobile) 모바일용 디자인

jQuery의 Mobile을 사용하면 스마트폰용으로 디자인을 할 수 있다. IE9에서는 이미지가 깔끔하게 나오지 않고 효과도 볼 수 없다. 구글 크롬에서 완벽하게 테스트 해볼 수 있다. 아래 페이지는 BOINCSTATS 통계 보기를 모바일용으로 꾸민것이다. http://simulz.kr/dev/boinc/create_user_img_mobile.php Input의 type값을 search로 설정하면 아래처럼 내용 삭제 버튼이 추가 된다. Select에 data-native-menu="false" 속성을 추가하면 아래처럼 바꿀 수 있다.

PC&웹/웹프로그래밍 2011. 7. 30. 13:17

(jQuery) 7세그먼트, FND 포트 계산기

jQuery를 사용하여 FND 계산기를 만들었다. 미리보기 http://simulz.kr/dev/elec/7seg/ 기능 100% 버튼위에서 마우스 휠을 돌리면 확대·축소, 누르면 원래대로 FND 색상 설정 FND 추가·삭제 UI 테마 변경 추가할 기능 포트 순서 변경 결과 값 저장 등등등

PC&웹/웹프로그래밍 2010. 3. 29. 00:37

(jQuery) 이미지 카운터 실시간 갱신하기

준비물: (jQuery) 연결하기 블로그 이미지 그래프 카운터를 자동 새로고침 해보기. 아래 자바스크립트코드를 SCRIPT에 삽입하거나 JS 파일로 저장하여 연결한다. $(document).ready(function($){ var refresh_StatGraph = function() { var time = new Date().getTime(); var StatGraph = $("img[src*=StatGraph]"); //StatGraph.fadeOut('slow'); StatGraph.attr('src','/plugins/StatGraph/count/count.php?owner=개인번호&time='+time); //StatGraph.fadeIn('slow'); } self.setInterval(ref..

PC&웹/웹프로그래밍 2010. 2. 9. 14:14

(jQuery) 다음뷰 추천 버튼 바꾸기, 관련글 지우기

준비물: (jQuery) 연결하기 다음뷰 추천 플래시를 작은 것으로 바꾸고 그 아래에 표시되는 관련글을 삭제할 수 있다. 아래 자바스크립트 코드를 SCRIPT 태그로 감싸거나 JS 파일로 저장해서 연결한다. $(document).ready(function($){ var daumview = $('.blogger-news-widget'); $('.blogger-news-widget').html(daumview.html().replace('recombox1.swf', 'recombox3.swf').replace('400','67')); $('.article iframe[src*=daum]').remove(); }); var daumview = $('.blogger-news-widget'); 객체 재사용을 위해..

PC&웹/웹프로그래밍 2010. 2. 7. 17:56

(jQuery) JSONP로 크로스 도메인 원격 데이터 가져오기

오래된 글입니다. 준비물: (jQuery) 연결하기 브라우저 기본 보안 설정으로는 현재 페이지의 호스트가 아닌 다른 서버에 HTTP 요청을 할 수 없다. 하지만 JSONP를 사용하면 보안 설정을 바꾸지 않고도 원격 데이터를 가져올 수 있다. 이 블로그에서는 게시물 아래 인기순 Top 글 목록에 적용되어있다. 데이터를 보내줄 원격 도메인 쪽에 JSON 형식으로 출력하도록 PHP 스크립트 코드를 작성한다. $json['key'] 에 저장된 자료는 자바스크립트에서 data.key 형식으로 가져올 수 있다. json_encode() 배열을 JSON 형식으로 인코딩한다. 데이터를 보여줄 곳에 스크립트를 작성한다. $.getJSON("http://simulz.com?callback=?", function(data)..

PC&웹/웹프로그래밍 2010. 2. 6. 16:59

(jQuery Plugin) CyclicFade 깜빡이는 효과 적용하기

준비물: (jQuery) 연결하기 비표준 태그를 jQuery 플러그인으로 부드럽게 깜빡이는 효과를 줄 수 있다. 자바스크립트 연결하기 제작자 원문: http://www.bugzappy.com/cyclic-fade-jquery-plugin/ 적용하기$(selector).cyclicFade(); $(selector).cyclicFade(); selector로 지정한 요소들에 .cyclicFade() 플러그인 메서드를 적용한다. 편리한 방법으로는 HTML을 작성할 때 적용을 원하는 요소에 class='cyclicfade' 처럼 임의의 클래스를 지정해주고 $('.cyclicfade').cyclicFade(); 처럼 사용하면 cyclicfade 클래스를 가진 모든 요소에 적용이 된다. 다양한 옵션을 줄 수 있다...

PC&웹/웹프로그래밍 2010. 2. 6. 10:59

(jQuery) 블로그 태그 목록을 버튼으로 섞기

준비물 (jQuery) 연결하기 관련글 (jQuery) 태그 목록 섞기 (jQuery) 티스토리 태그 목록 컬러풀하게~ 이번엔 버튼으로 섞어보자. 버튼을 누르면 글자 색상, 크기가 임의로 지정되고 순서가 섞이게 된다. 이전 글(관련글 참고)에서 작성한 코드를 재사용하기 위해 함수 안에 넣는다. var tag_random = function() { var taglogli = $('.taglog li'); taglogli.find('a').each(function() { $(this).css('color', getRandomRGB).css('font-size', getRandomNumber(8,24)+'pt'); }); taglogli.shuffle(); } $("태그 섞기!").click(function(..

PC&웹/웹프로그래밍 2010. 2. 5. 20:12

(jQuery) 블로그에 로딩 중 표시하기

준비물: (jQuery) 연결하기 이 블로그에 적용되어 있다.HTML에서 로딩 메시지 코드를 추가한다. 문서 상단에 추가할 수록 빨리 보인다. 바로 밑에 넣어도 된다. 로딩 중... CSS에 추가한다. #loading { border: 1px #000 solid; background-color: #eee; font-size:20pt !important; color:#000; text-align:center; top: 50%; left: 50%; padding-top: 10px; margin: -100px 0 0 -50px; width: 200px; height: 100px; z-index:10; position: absolute; } width, height를 알맞게 바꾼 후, margin의 top, l..

PC&웹/웹프로그래밍 2010. 2. 5. 19:14

(jQuery) 태그 목록 섞기

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 관련글: (jQuery) 티스토리 태그 목록 컬러풀하게~ 새로고침할 때마다 목록이 섞인다. ABC, 가나다였던 태그 목록을 랜덤 정렬로 변경해보았다. $.shuffle Plugin http://mktgdept.com/jquery-shuffle 위 사이트에서 js 파일을 내려 받고 사이트나 블로그에 업로드 한다. HTML HEAD에 아래 코드를 추가하여 JS를 연결한다. $('.taglog li').shuffle(); $('.taglog li') taglog 클래스를 가진 요소의 자식 중에서 li 요소들을 선택한다. $.shuffle(selector) 처럼 사용 가능하다.

PC&웹/웹프로그래밍 2010. 2. 5. 17:56

(jQuery) 티스토리 태그 목록 컬러풀하게~

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 새로고침 할 때마다 색상과 크기가 변한다. 많아야 5가지 색상과 크기뿐이었던 태그 목록을 랜덤 색상, 크기로 변경해보았다. 목록 섞기: (jQuery) 태그 목록 섞기 var getRandomRGB = function() { return '#' + Math.floor(Math.random()*16777216).toString(16); } var getRandomNumber = function(f, t) { var num = -1; while(f > num) num = Math.floor(Math.random() * (t+1)); return num; } $('.taglog li a').each(function() { $(t..

PC&웹/웹프로그래밍 2010. 2. 5. 14:20

31 jQuery