[텍스트큐브]텍스트큐브닷컴 초대장 배포합니다.

웹미니에서 3번째 발송하는 초대장입니다.

나날이 발전하고 있는 텍스트큐브(http://www.textcube.com/) 입니다.
블로그를 이전할 마음이 있거나, 새롭게 블로그를 만드실분들은 마구마구 초대장 신청해주세요.

총 4장입니다.

댓글에 초대장 받으실 이메일만 남겨주세요.^^ (이메일은 텍스트큐브의 아이디가 됩니다.)

감사합니다.

[잡담]구글 텍스트큐브닷컴 티셔츠 도착

구글 텍스트큐브닷컴에서 진행한 구글 우수 블로거 지원 프로그램 이벤트가 있었다.
얼마전에 '텍스트큐브닷컴에서 새로운 블로그를 꽃피우세요.' 라는 포스팅을 했었는데, 기존사용자라 선착순 200명 티셔츠에 당첨이 되었다.

와이프와 같이 응모를 했는데, 와이프도 같이 당첨이 된것이다.^^
구글 코리아에서 전화가 와서 설마했는데, 택배주소가 같아서 한묶음으로 같이 보내준다는 내용이었다.
얼씨구나~

구글로고를 보니 색다른걸?

근데 두벌다 사이즈가 XL 였다. 나한테는 잘 맞았는데, 와이프가 입으면 힙합스탈이겠는걸?

두벌의 티셔츠와 두장의 카드

개인적으로 흰색 티셔츠이길 바랬는데, 남색도 나름 괜찮은거 같다..

이번 이벤트에 맥북 프로를 받는 블로거는 누구일까? 부럽...

여튼 좋은 티셔츠 보내주신 구글 텍스트큐브 관계자분들께 다시한번 감사의 말씀 드립니다.^^

[IT뉴스]텍스트큐브 음원서비스

5월 21일자로 텍스트큐브 닷컴의 음원서비스가 오픈이 되었다.

 

1. 소리바다의 음악정보 삽입기능추가

2. 첨부파일 업로드를 통한 MP3, WMA, WAV등 음원 파일 업로드 및 음원 파일이 포함된 압축파일의 업로드 제한

 

예전부터 그래왔지만, 음악저작권에 대한 말들이 참 많다.

구글 텍스트큐브에서도 저작권때문에 알게모르게 불이익을 당하는 회원이 있을수도 있어서 생각해낸 방안이라고 한다.

 

원문보기

텍스트큐브닷컴에서는 음원 저작물의 저작권 보호 및, 본의 아닌 저작권 위반으로 인한 회원 피해를 방지하고자 음원파일의 블로그 업로드를 제한하기로 하였습니다. 최근 들어 저작권과 관련된 여러 사안들이 발생하면서, 이로 인해 서비스 사업자는 물론 회원까지도 불이익을 당할 소지가 있다고 판단하여 이같은 기능 변경을 결정하게 된 점 깊은 양해 부탁드립니다.

 

운영하는 블로그의 주제는 정말 다양하다. 자신이 키우는 애완견 이야기, 일상생활을 담은 일기형식의 글들, 새로운 제품을 소개하는 리뷰 블로그 등등

이안에는 작곡자도 있을수 있으며, 작곡자가 아니더라도, 본인이 만든 음악을 블로그라고 곳에 담아 두는 사람도 있을것이다.

 

본인의 생각을 블로그라는 곳에 담고,  또 그것을 공유하고 의사소통하는게 블로그의 좋은 특징이자 장점이라 할수있다.

 

하지만 아예 막아버린다면?

음원서비스에 대해 관심이 없는 유저는 크게 상관이 없겠지만, 음원과 관련된 블로그를 운영하는 회원은 어디로 가게 될까?

 

구글 텍스트큐브에서도 좋은의도로 고민끝에 결정한 부분이겠지만, 이번 업데이트에 대해서 유저들의 반응은 어떠할지 의문이다.

 

그럼 업데이트된 '소리바다'의 음원서비스를 이용해 보자.

 

 

 

크게 삽입했을때

 

 

작게 삽입했을때

 

 

곡선택 - 가사포함

 

노래 재생시간은 얼마 되지 않는거 같다.^^;

노래가 좋으면 구매하는건 당연하겠지만, 자신이 만든 노래는 어디에 업로드 해야하는건가..?

 

좋은 서비스이긴 하나, 음원파일 업로드를 막는 방법 말고 다른 방법은 없었던 것일까?

좋은 서비스를 추가하고, 더 좋은 서비스를 뺀경우인가...

 

구글 텍스트큐브 닷컴에서도 적합한 방향이라고 믿고 있고, 각종 음악 위젯을 제공할 계획이라니, 정식버전이 나올때쯤이면 어떤변화가 있을지 기대해 본다.

[IT뉴스]텍스트큐브닷컴에서 새로운 블로그를 꽃피우세요.

 

 

텍스트큐브닷컴에서 신규 이주자에게 푸짐한 선물을 주는 이벤트를 진행합니다.

 

상품목록

 

개인적으로 맥북이 탐나긴 하지만, 신규가입자만 해당이 되므로 두번째 이벤트를 노려야겠네요..^^

 

텍스트큐브닷컴 초대장 신청/프로그램 응모 기간: 2009년 5월 7일 ~ 2009년 5월 28일

텍스트큐브닷컴 활동 평가 기간: 2009년 5월 29일 ~ 2009년 6월 11일

우수 블로거 발표: 2009년 6월 18일 경

 

텍스트큐브닷컴에서 스킨편집기능이 가능하게 되어서, 더이상 꼼수를 사용할 필요도 없습니다.

 

텍스트큐브닷컴 초대장이 없으시다구요? [초대장받기]

 

차별화된 블로그 텍스트큐브닷컴에서 시작해보세요.^^

[텍스트큐브]텍스트큐브 초대장을 배포합니다.

웹미니에서 두번째로 배포하는 초대장이네요..

텍스트 큐브에서는 6차 초대장이 되겠습니다.

 

 

초대장은 3장만 배포하며, 받으실 이메일 주소를 댓글로 남겨주세요.

 

감사합니다.

[텍스트큐브]따라다니는 탑버튼 만들기

텍스트큐브(제공형)에서 따라다니는 Top 버튼 만드는 방법입니다.

 

먼저 아래 내용들을 확인해주세요.

 

1. 텍스트큐브닷컴 블로그 수정하기

2. 텍스트큐브에 로고를 이미지로 바꿔보자!

 

위와 동일한 방법입니다.

 

 

제사이트 오른쪽에 보시면 위와 같은 따라다니는 이미지가 보이실 겁니다. 이걸 적용하는 것입니다.

 

텍스트큐브 관리자 > 꾸미기 > 위젯에서 html 위젯을 추가합니다.

 

 

해당 위젯안에 아래와 같이 기술합니다.

 

단, 텍스트큐브에서 제공되는 스킨 (Simple Gray, Simple Brown, Simple Black)을 토대로 적용시켰으며, 다른스킨일경우 id 값과 class 명이 다를수 있으니, 다른스킨 사용자들은 해당스킨에 맞는 id와 class명에 동일한 방법으로 적용시키면 됩니다.

 

<style type="text/css">

#menu {position:relative; z-index:2;}

.area {position:relative; z-index:1;}

.area #floatdiv {
        position:absolute;
        left:0;
        top:0;
        padding:10px;
        background:#FFFFFF;
        border:2px solid #c1d4f5;

}

</style>

 

간단히 설명을 드리자면, #menu 에 position과 z-index:2 를 주는 이유는 아래와 같이 '더보기' 버튼을 클릭시 해당 레이어가 위로 보이게 하기 위함입니다.

 

그리고 위로가기 버튼 사이즈나, 박스의 padding 값으로 인해 위치가 조금씩 다를수 있으니, 위치부분은 알맞게 수정해주셔야 합니다.

 

 

스타일 적용이 완료되었으면, Top버튼 소스를 위젯에 추가해보겠습니다.

역시나 html 위젯을 추가하신후 사이드바 적당한 곳에 위치시킵니다. 그후 아래소스를 삽입합니다.

 

소스보기..

 

<div id="floatdiv">
<!--input type="image" onclick="move_upper_left()" title="좌측위로" src="http://fs.textcube.com/blog/0/2036/attach/XLDzuyQxDO.gif" /><br />
<input type="image" onclick="move_upper_center()" title="중간위로" src="http://fs.textcube.com/blog/0/2036/attach/XFARCbmqq0.gif" /><br />
<input type="image" onclick="move_upper_right()" title="우측위로" src="http://fs.textcube.com/blog/0/2036/attach/XdVNJ6j7RM.gif" /><br />
<input type="image" onclick="move_center_left()" title="좌측중간" src="http://fs.textcube.com/blog/0/2036/attach/XJyIwhCKCp.gif" /><br />
<input type="image" onclick="move_center_center()" title="중앙중간" src="http://fs.textcube.com/blog/0/2036/attach/Xdb3Hpm2so.gif" /><br />
<input type="image" onclick="move_center_right()" title="우측중간" src="http://fs.textcube.com/blog/0/2036/attach/XRfmBsG1yl.gif" /><br />
<input type="image" onclick="move_lower_left()" title="좌측아래" src="http://fs.textcube.com/blog/0/2036/attach/XAI2kWEOu4.gif"/><br />
<input type="image" onclick="move_lower_center()" title="중간아래" src="http://fs.textcube.com/blog/0/2036/attach/XFhw2Sx3Vs.gif" /><br />
<input type="image" onclick="move_lower_right()" title="우측아래" src="http://fs.textcube.com/blog/0/2036/attach/XH5VDDiyrb.gif" /><br /-->
<input type="image" onclick="javascript:scroll(0,0)" title="최상위로" src="http://fs.textcube.com/blog/0/2036/attach/XCEKL7RiIA.gif" />

<span id="script_source">
<script type="text/javascript">
<!--  
/* Script by: www.jtricks.com 
 * Version: 20071017 
 * Latest version: 
 * www.jtricks.com/javascript/navigation/floating.html 
 */ 
var floatingMenuId = 'floatdiv';  
var floatingMenu =  
{  
    targetX: 910,  
    targetY: 0,  
 
    hasInner: typeof(window.innerWidth) == 'number',  
    hasElement: typeof(document.documentElement) == 'object' 
        && typeof(document.documentElement.clientWidth) == 'number',  
 
    menu:  
        document.getElementById  
        ? document.getElementById(floatingMenuId)  
        : document.all  
          ? document.all[floatingMenuId]  
          : document.layers[floatingMenuId]  
};  
 
floatingMenu.move = function ()  
{  
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';  
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';  
}  
 
floatingMenu.computeShifts = function ()  
{  
    var de = document.documentElement;  
 
    floatingMenu.shiftX =    
        floatingMenu.hasInner    
        ? pageXOffset    
        : floatingMenu.hasElement    
          ? de.scrollLeft    
          : document.body.scrollLeft;    
    if (floatingMenu.targetX < 0)  
    {  
        floatingMenu.shiftX +=  
            floatingMenu.hasElement  
            ? de.clientWidth  
            : document.body.clientWidth;  
    }  
 
    floatingMenu.shiftY =   
        floatingMenu.hasInner  
        ? pageYOffset  
        : floatingMenu.hasElement  
          ? de.scrollTop  
          : document.body.scrollTop;  
    if (floatingMenu.targetY < 0)  
    {  
        if (floatingMenu.hasElement && floatingMenu.hasInner)  
        {  
            // Handle Opera 8 problems  
            floatingMenu.shiftY +=  
                de.clientHeight > window.innerHeight  
                ? window.innerHeight  
                : de.clientHeight  
        }  
        else 
        {  
            floatingMenu.shiftY +=  
                floatingMenu.hasElement  
                ? de.clientHeight  
                : document.body.clientHeight;  
        }  
    }  
}  
 
floatingMenu.calculateCornerX = function()  
{  
    if (floatingMenu.targetX != 'center')  
        return floatingMenu.shiftX + floatingMenu.targetX;  
 
    var width = parseInt(floatingMenu.menu.offsetWidth);  
 
    var cornerX =  
        floatingMenu.hasElement  
        ? (floatingMenu.hasInner  
           ? pageXOffset  
           : document.documentElement.scrollLeft) +   
          (document.documentElement.clientWidth - width)/2  
        : document.body.scrollLeft +   
          (document.body.clientWidth - width)/2;  
    return cornerX;  
};  
 
floatingMenu.calculateCornerY = function()  
{  
    if (floatingMenu.targetY != 'center')  
        return floatingMenu.shiftY + floatingMenu.targetY;  
 
    var height = parseInt(floatingMenu.menu.offsetHeight);  
 
    // Handle Opera 8 problems  
    var clientHeight =   
        floatingMenu.hasElement && floatingMenu.hasInner  
        && document.documentElement.clientHeight   
            > window.innerHeight  
        ? window.innerHeight  
        : document.documentElement.clientHeight  
 
    var cornerY =  
        floatingMenu.hasElement  
        ? (floatingMenu.hasInner    
           ? pageYOffset  
           : document.documentElement.scrollTop) +   
          (clientHeight - height)/2  
        : document.body.scrollTop +   
          (document.body.clientHeight - height)/2;  
    return cornerY;  
};  
 
floatingMenu.doFloat = function()  
{  
    var stepX, stepY;  
 
    floatingMenu.computeShifts();  
 
    var cornerX = floatingMenu.calculateCornerX();  
 
    var stepX = (cornerX - floatingMenu.nextX) * .07;  
    if (Math.abs(stepX) < .5)  
    {  
        stepX = cornerX - floatingMenu.nextX;  
    }  
 
    var cornerY = floatingMenu.calculateCornerY();  
 
    var stepY = (cornerY - floatingMenu.nextY) * .07;  
    if (Math.abs(stepY) < .5)  
    {  
        stepY = cornerY - floatingMenu.nextY;  
    }  
 
    if (Math.abs(stepX) > 0 ||  
        Math.abs(stepY) > 0)  
    {  
        floatingMenu.nextX += stepX;  
        floatingMenu.nextY += stepY;  
        floatingMenu.move();  
    }  
 
    setTimeout('floatingMenu.doFloat()', 10);   //이동 숫자가 적을수록 빠름
};  
 
// addEvent designed by Aaron Moore  
floatingMenu.addEvent = function(element, listener, handler)  
{  
    if(typeof element[listener] != 'function' ||   
       typeof element[listener + '_num'] == 'undefined')  
    {  
        element[listener + '_num'] = 0;  
        if (typeof element[listener] == 'function')  
        {  
            element[listener + 0] = element[listener];  
            element[listener + '_num']++;  
        }  
        element[listener] = function(e)  
        {  
            var r = true;  
            e = (e) ? e : window.event;  
            for(var i = element[listener + '_num'] -1; i >= 0; i--)  
            {  
                if(element[listener + i](e) == false)  
                    r = false;  
            }  
            return r;  
        }  
    }  
 
    //if handler is not already stored, assign it  
    for(var i = 0; i < element[listener + '_num']; i++)  
        if(element[listener + i] == handler)  
            return;  
    element[listener + element[listener + '_num']] = handler;  
    element[listener + '_num']++;  
};  
 
floatingMenu.init = function()  
{  
    floatingMenu.initSecondary();  
    floatingMenu.doFloat();  
};  
 
// Some browsers init scrollbars only after  
// full document load.  
floatingMenu.initSecondary = function()  
{  
    floatingMenu.computeShifts();  
    floatingMenu.nextX = floatingMenu.calculateCornerX();  
    floatingMenu.nextY = floatingMenu.calculateCornerY();  
    floatingMenu.move();  
}  
 
if (document.layers)  
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);  
else 
{  
    floatingMenu.init();  
    floatingMenu.addEvent(window, 'onload',  
        floatingMenu.initSecondary);  
}  
 
//-->
</script>
</span>
<script type="text/javascript"><!--
function move_upper_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY=0;
}

function move_upper_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY=0;
}

function move_upper_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY=0;
}

function move_center_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY='center';
}

function move_center_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY='center';
}

function move_center_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY='center';
}

function move_lower_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY=455;
}

function move_lower_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY=455;
}

function move_lower_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY=455;
}
//--></script>
</div>

 

소스출처 : http://www.jtricks.com/javascript/navigation/floating.html

 

소스를 보시면 Top 기능이외에 좌측,중간,우측,하단등 몇가지 기능이 더 있지만, 현재 텍스트큐브는 스킨편집기능이 되지 않아서 해당소스를 사이드바에만 적용시킬수 밖에 없습니다. 그래서 다른 기능은 주석처리하고 Top 기능만 활성화 시켜논 상태입니다. 차후에 스킨편집기능이 되면, 다르게 마크업후 모든기능을 활성화 시키면 되겠습니다.

 

위에 붉은 색표시에 이미지는 자신의 계정또는 텍스트큐브에 이미지를 업로드후 해당 이미지주소로 수정하시면 됩니다. 현재는 제사이트에 적용된 이미지로 되어있지만, 혹여나 제가 이미지를 바꾸거나 삭제할경우 괜한 낭패를 당하는 일이 없도록 해주세요.^^;

 

이상입니다. 모두들 예쁜 블로그 만드세요. 화이팅!

[텍스트큐브]텍스트큐브와 스프링노트 연동하기

텍스트큐브와 스프링노트 연동하는 방법입니다.

텍스트큐브닷컴 이하 '텍큐'라고 표시하겠습니다.

먼저 블로그에 있는 글들을 스프링노트로 옮겨보겠습니다.

일단 텍큐의 관리자 > 환경설정 > 글쓰기에서 'BlogAPI를 사용합니다.' 에 체크합니다.

 

 

 

그후 자신의 스프링노트에 관리하기로 들어가서 설정을 해줍니다.

 

 

 

 

 

블로그 탭을 선택후 아래와 같이 자신의 블로그를 추가해줍니다.

 

 

 

XML-RPC 주소는 자동으로 입력이 되며, 사용자 아이디와 비밀번호는 텍큐 사용자 아이디/비번을 입력하시면 됩니다.

 

 

 

연결테스트후 정보를 가져오시면 됩니다.

 

 

 

 

 

보시는바와 같이 자신의 블로그에 포스팅했던 글들이 카테고리와 함께 옮겨졌습니다.

 

그럼 반대로 스프링노트에서 작성한 글을 내블로그로 옮겨보도록 하겠습니다.

블로그로 보낼 글을 선택후 오른쪽 메뉴 > 블로그로 보내기로 클릭

 

 

 

아래와 같이 원하는 옮기고 싶은 위치를 클릭하시면 됩니다.

 

 

 

이동된 글은 하단에 '이 글은 스프링노트 에서 작성되었습니다.' 라고 표기가 됩니다.

 

 

이 글은 스프링노트에서 작성되었습니다.

[텍스트큐브]초대장 3장배포합니다.

텍스트큐브닷컴 초대장을 배포합니다.
총 3장이며, 댓글순으로 3명만 드리겠습니다.

댓글에 아래와 같이 남겨주세요.

이메일 :

이메일만 있으면 됩니다.
추가로 하실말 있으시면 써주시면 더좋구요..^^

감사합니다.

===== 초대장이 마감되었습니다. ====

[IT뉴스]Daum블로거뉴스와 미투데이 보내기기능

텍스트큐브가 12월 18일자로 또 업데이트가 되었습니다.
개인적으로 이번업데이트는 꼭 필요했던거였는데, 마침 업뎃이 되었습니다.

Daum블로거뉴스 에서 송고할때 Daum에 직접 들어가서 글을 내보냈는데, 텍큐에서 이런부분을 블로그에서 직접보낼수 있게 했습니다. 참 편리하군요..^^

트랙백 뿐만 아니라, 블로거뉴스, 미투데이까지 같은 방법으로 글을 내보낼수 있습니다.
플러그인을 설치할필요도 없고, 해당 소스를 본문 하단에 넣을필요도 없으니, 얼마나 경제적인 기능인지 모르겠습니다.

Daum블로거뉴스와 미투데이 설정방법은 여기에서 확인하시면 됩니다.

박스의 모양도 설정할수 있으며, 가입이 되어있지 않은 분들도 쉽게 가입할수 있습니다.
아직 베타 버전이라 불편한점도 많지만, 다른 블로그보다 차별화된 무언가가 나올지 기대가 됩니다.

정식오픈때까지 화이팅 입니다.^^

[텍스트큐브]텍스트큐브에 로고를 이미지로 바꿔보자!

텍스트큐브 제공형(?)의 블로그 로고를 이미지로 바꾸는 방법입니다.

 

텍스트 큐브닷컴은 아직 beta 버전이라 스킨편집 기능을 지원하지 않습니다.

그래서 이만 저만 불편한게 아니지요..  다행이도 html 코드위젯은 지원함으로, 그걸이용하는 방법입니다.

예전에 텍스트큐브닷컴 블로그 수정하기 라는 글을 포스팅한적이 있습니다. 꼭참고 하시길 바랍니다.

 

텍스트 로고를 이미지로 바꾸는 방법은 다음과 같습니다.

 

먼저 원하는 로고이미지를 만든후 아무곳(?)이나 업로드합니다. 계정이 있으면 자신의 계정에 올리셔도 됩니다만, 저같은 경우는 아래와 같은 방법을 이용했습니다.

 

 

공지사항에 이미지를 업로드후 해당 이미지 주소를 복사하는 방법입니다.

 

 

이렇게 업로드된 이미지의 주소를 알기위해 이미지 속성을 확인합니다.

 

 

주소는 이런식으로 알아두시면 됩니다.

 

그런 다음 html 코드위젯에 이미지를 넣도록 하겠습니다.

코드위젯은 관리자 > 꾸미기 > 위젯에 위치해 있습니다.

 

 

html 코드위젯을 선택하시고 style을 주시면 됩니다. 예전에 포스팅 했을때도 언급했지만, 스타일의 우선순위는 인라인 > 내부 > 외부 로 인식을 하기때문에 외부보다 먼저인식하는 내부스타일을 이용하는 방법입니다.

 

 

소스는 다음과 같습니다.

 

<style type="text/css">
#header h1 {width:220px; height:35px; background:url(http://fs.textcube.com/blog/0/2036/attach/XA7VmjmTfX.png); text-indent: -99999px;}
* html #header h1 {background:none;  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://fs.textcube.com/blog/0/2036/attach/XA7VmjmTfX.png, sizingMethod=crop);}
</style>

 

저같은 경우는 로고를 투명 png 로 저장했기에, 위와 같이 IE6 핵을 사용했습니다. [참고글]

이미지 주소는 처음 알아낸 이미지 경로를 적어주시면 됩니다.

 

/* 주의 */

1. 로고사이즈(가로,세로)를 꼭 적어주세요.

2. 텍스트를 없애야 하기때문에 text-indent (들여쓰기)를 -99999px 로 주고, 텍스트를 숨깁니다.

3. png가 아닐경우 스타핵을 사용할필요는 없습니다.

4. 스킨마다 class 또는 id 명이 다르니 해당 명을 정확히 입력하셔야 합니다. (여러 방법이 있죠? 소스보기나, 파폭 부가기능을 이용하시면 됩니다.)

 

응용해 보세요.^^

 

 

[텍스트큐브]텍스트큐브닷컴 블로그 수정하기

텍스트큐브닷컴이 (http://blog.textcube.com/) 아직 베타 버전이라 스킨편집기능을 제공하고 있지 않습니다.

 

어쩌면 텍큐닷컴 베타 사용자들(저를포함)이 가장 우선적으로 필요로 하는 기능이 아닐까? 라는 생각을 해봅니다.

스킨편집 기능이 되어야 구글광고도 포스팅부분에 달수있고, 스킨도 자기 스타일데로 꾸밀수 있을텐데 말이죠.

그래서 생각해낸게 html 위젯 기능을 이용한 방법입니다. 마크업을 마음데로 할수는 없어도, css로 스킨스타일은 바꿀수가 있습니다.

 

제블로그를 보시면 텍큐에서 기본제공되는 스킨에서 스타일만 바꿔준것입니다.

아마도 이게 css 구조의 사이트에 장점이 아닐까 하는 생각을 합니다.

 

그럼 사용방법을 잠깐 알아보도록 하겠습니다.

먼저 '내 블로그 관리하기'를 클릭후 관리자 페이지로 들어가십시오.

그후 상단메뉴 꾸미기 > 위젯 > 위젯 추가를 해주세요.

 

 

다행이도 베타이긴 하지만 html 코드 위젯을 제공합니다. 숨쉴구멍은 남겨두었네요.^^

위젯 코드를 선택하시고, 그안에 스타일을 기술합니다.

 

 

위와 같이 내부스타일을 이용하는 방법입니다. 스타일 우선순위는 인라인 > 내부 > 외부순입니다.

이걸 이용한것입니다. 스킨 구조를 보아하니 외부로 css를 불러들였습니다. 그래서 우선순위가 높은 내부스타일을 적용시켰습니다. [자세히보기]

 

위젯안에

 

<style type="text/css">

원하는 스타일

</style>

 

썩 좋은 방법은 아닙니다만, 이렇게 하는 방법도 있구나! 라고 알고 넘어가시면 감사하겠습니다.

 

위까지 해놓고 질문이 나올수 있습니다.

여기서 해당 레이아웃 id나 class 명을 어떻게 알아내나요?

 

파이어폭스 부가기능중에 firebug 라는 기능이 있습니다. 그걸 사용하시면 쉽게 알아낼수 있습니다.

어떻게요? 아래 이미지를 참고해주세요.

 

 

보시는 바와 같이 오른쪽 사이드바 id 명을 쉽게 찾을수 있습니다.

고로 위젯에 바꾸고자하는 id 명에 스타일만 추가해 주시고, class 도 같은 방법으로 하시면 됩니다.

 

이게 싫은신분은 소스보기로 해당소스를 찾는 방법도 있습니다. 요건 아마 귀찮을겁니다.

 

수정이 끝나셨으면, 해당 위젯을 사이드 바 적당한 위치에 넣으시면 되겠습니다.

저같은 경우는 프로필 위에 위치시켰습니다.

 

 

css를 이용해서 배경이미지도 바꿀수가 있으며 시간이 많으시다면, 레이아웃 위치도 바꿈으로 전혀 다른 스킨으로 재탄생시킬수도 있겠습니다.

 

다시 말씀드리지만, 위방법은 썩 좋은 방법은 아니며, 성격이 급한 분들을 위한 임시방편으로 보셨으면 합니다.

 

ps) 원상복구 시키고자 할시 해당 위젯을 삭제하시면 됩니다.^^

[잡담]제로보드XE와 텍스트큐브의 로딩속도비교

오늘 아무생각없이 제 사이트(웹미니)의 상단 메뉴를 집에와서 클릭을 해보았습니다.
개인사이트를 운영하시는 분이시라면 가끔 메뉴를 아무생각없이 클릭해 본적이 있으리라 생각합니다.
저같은 경우는 메뉴를 마구 클릭하다보면 문제점을 발견한 경우가 많아서 가끔 이런 행동(?)을 하곤 합니다.
오늘도 어김없이 이런 행동을 했다죠...

평상시에 제로보드XE와 텍스트 큐브를 한계정에 같이 이용하면서 약간의 속도 차이가 있다는것은 알고 있었습니다. 물론 제로보드XE가 거의 두배가량 속도가 빨랐습니다.
그런데 예전에는 크게 신경을 쓰지 않았습니다. 왜냐하면 서로 스킨이 틀렸고 디자인이 틀렸기 때문에 속도 차이가 나는건 당연한거였기 때문입니다.

이번 기회에 저는 웹미니(제로보드XE)와 웹미니블로그(텍스트큐브)를 같은 디자인에 맞춰 통일감 있게 보이고자 리뉴얼을 했습니다. 분명 용량의 차이도 거의 비슷했습니다. 웹미니 메인 경우 311KB 를 불러들였고, 텍스트 큐브 같은 경우 (현재 포스팅되어있는 상태) 329KB 크기였습니다.
저희 집경우 광랜을 사용해서 18KB 정도는 로딩속도에 큰지장을 받을 정도는 아닌데, 거의 두배가량의 속도 차이가 있음을 확인했습니다. 정확한 속도를 위해 익스에서 네비툴바를 사용했고, 브라우저의 특성을 고려해서 파폭에서도 확인했는데 눈에 보일정도로 속도의 차이를 느낄수 있었습니다.

위에 보시는 이미지는 제로보드 XE로 된 메인 입니다. 0.61초라는 로딩속도가 나오는군요.. 물론 네비툴바의 특성상 약간의 차이는 있음을 확인한 상태였으나, 이부분을 인지해서 몇번을 테스트한 속도 입니다.
아래 이미지는 같은 XE 메뉴 입니다. 페이지가 바뀌는 속도가 0.52초 였습니다. 확인 결과 바뀌는 부분만 리로드 되더군요.. 그래서 더욱도 속도가 빨랐을지도 모릅니다.

아래 이미지는 텍스트큐브입니다. (확인하실려면 제홈 블로그 메뉴를 클릭하시면 됩니다.)
속도를 확인해 보시면 XE의 비해 2.5배 ~ 3배가량 차이가 남을 확인 할 수 있었습니다.

혹시나 해서 이미지가 많이 없는 '태그'메뉴를 클릭해 보았습니다.

마찬가지로 텍스트 큐브는 1.45초라는 로딩 속도를 보이더군요.. 가만보니 텍스트 큐브는 페이지가 바뀔때마다 전체페이지를 다시 reload 하더군요..
그렇습니다. 우리나라는 인터넷 속도가 엄청(?) 빠른쪽에 속합니다. 이용에는 크게 불편이 없을정도의 속도일지 모르나 중국이나 기타 인터넷속도가 느린곳에서는 이부분이 크게 다가올수도 있다는 겁니다.

둘다 훌륭한 프로그램임은 틀림이 없고 의심도 하지 않습니다만, 두개를 같이 사용하는 입장에서 아니 비록 하나만 사용을 한다 하더라도 좀더 좋은 프로그램으로 발전시키기에 이부분도 집고 넘어가야 하지 않을까 하는 생각을 해봅니다.
요즘 웹사이트는 대부분이 훌륭합니다. 하지만 우리가 잊고 사는 부분이 있습니다. 물론 저역시도 그렇구요. 어떤것이던간에 기본이 가장 중요한거 같습니다. 우리는 웹에 대한 기본적인걸 잠시나마 잊고 있었던거 같습니다.

계속적으로 좋은 프로그램을 만들고자 노력하시는 분들께 이런식으로나마 제안아닌 포스팅을 해봅니다.^^

[운영일지]웹미니쩜넷 리뉴얼 시작

웹미니쩜넷 운영일지 NO.1

회사에 다니면서 사이트에 신경을 못쓴 관계로 블로그를 만들어서 주로 포스팅 위주로 블로그에만 신경을 쓰다가, 제로보드 XE 발표에 따라서 기존 웹미니쩜넷 v3.8 (제로보드4)의 디비정보를 백업받고, xe로 갈아탔다.

서브도메인(http://blog.webmini.net)을 그대로 사용하고, 전체 계정을 utf-8이 지원되는 계정으로 옮기는 작업부터 시작 되었다.

웹미니쩜넷의 계정을 무료로 지원해 주는 호스팅회사에서 아직 xe를 설치할수 있는 서버가 도입이 되지 않았기에, 기다리다가 일단 cafe24에 계정을 얻고, 테스트겸 작업을 시작했다. (차후에 호스팅을 옮길수도 있음)

그전에 자주 서버 문제가 발생해서 사이트도 잘 안열리고, xe 지원도 되지 않았던게 스트레스를 자주 받아서 그런지 결정적으로 옮기게 된 요인이었다.

먼저 기존 계정의 파일과 디비를 백업받고 도메인의 네임서버를 변경후 차츰차츰 시작했다.
그런데 문제가 발생된것이다. 네임서버를 바꾸고 난후에 작업을 하는데 블로그의 디비가 복구를 하면 텍스트가 다 깨져서 나오는게 아니던가. 주말에 호스팅에 전화해서 해결책을 찾았지만 모든게 허사였다.

모든것이 기존 서버환경과 새로옮긴 xe 의 서버환경이 달라서 발생하는 문제점으로 파악하고, sql이 아닌 xml 로 블로그를 다시 백업받기로 결정했다.
전체 백업파일을 다른계정에 설치하고, 임시로 블로그를 열어서 블로그쪽만 xml 로 백업을 받았다.

계정을 옮김으로 해서 수정해줘야 할것이 많았고, 역시 글자깨짐현상은 해결이 안되었지만, 관리자쪽 로그인안되던 문제는 가능해졌다.

관리자로 들어와서 데이터 복구를 하고 모든걸 교정하고 났더니, 블로그가 기존과 동일하게 복구가 완료 되었다.

한계정에 제로보드XE와 텍스트큐브 1.5를 동시에 깔려니 약간의 불편함도 있었다.

다음은 제로보드 XE를 설치할 차례였다.
루트에 바로 제로보드 XE를 설치하고, 업데이트 되고 나서 새롭게 접하는 부분이기때문에 구성과 소스파악을 해야 할 필요성이 있었다.

몇번의 디비를 복구하고 삭제했는지 모른다.

어느정도 파악을 다하고 나서 기존의 제로보드4의 디비를 옮기는 작업을 시작했다.
먼저 기존 제로보드 데이터 폴더 data 를 루트에 올리고, 회원정보부터 옮겼다.

회원정보 선택을 한후 "다음"을 클릭

마이그레이션을 통해 백업받은 회원정보 디비를 ftp를 통해 원하는 곳에 위치시킨후 불러들인다.
./ 는 같은 위치에 백업파일이 있을경우이며, backup 폴더에 위치했다면 ./backup/member.xml 이런식으로 될거이다.

먼저 회원정보를 복구 하고 다음은 게시물 복구 할 차례였다.

게시물 정보를 선택하고 다음을 누른다.

나는 포토샵이란 게시판에 기존에 있던 포토샵 디비를 그대로 복구 할려구 한다..
그러기 위해서는 먼저 xe에서 게시판을 만들어 놔야한다. (이름은 상관없음)
그후에 포토샵을 선택하고 Path/URL 부분에 백업받아놓은 data 폴더가 어디에 있는지 적어야 한다. 나같은 경우는 http://www.webmini.net/bbs 에 있기에 이렇게 적었다. 그리고 다음을 클릭

전에 카테고리를 나누어 썼기때문에 나같은 경우는 각 카테고리 별로 백업을 받은 상태였다. 원래 마이그레이션을 통해 백업을 받을때 카테고리가 있는 경우 전체로 백업받으면 된다고 하던데, 뭔이유인지 나같은 경우는 카테고리가 정보만 가져오고 분류별로 글이 뿌려지지 않아서 각각 하나씩 백업받았다.

역시 백업받은후 복구할때 각카테고리에 맞추워서 복구하면 된다. (그전에 게시판에서 분류는 미리 만들어둔다)
이렇게 하면 일단 복구는 다되었으며, 기존에 있던 첨부파일까지 복구가 된 상태이다.

그리고 마지막으로 회원정보 동기화를 선택후 다음버튼을 클릭하면 된다.

이렇게 해야 해당 글들의 주인을 찾을수 있고, 게시물의 이름을 클릭했을때 해당 정보 레이어가 뜨는걸 확인할 수 있을 것이다.

이로서 모든 데이터 이전 작업과 정리는 다끝난 상태가 되었다.

주소같은 경우 webmini.net 접속했을때와 www.webmini.net 로 접속했을때 로그인 풀림현상이 나타나서 webmini.net 로 접속했을때 자동으로 www.webmini.net 로 접속 되게 해야만 했다.

역시나 여러 팁들을 적용해보았는데 오류가 뜰뿐 아니라 적용도 되지 않는게 아닌가.
할수 없이 호스팅에 문의를 해서 .htaccess 파일을 수정할수 밖에 없었다.

알ftp에서 숨김파일로 되어있어 보이지 않기 때문에 환경설정에서 숨긴파일을 볼수 있게 설정한후
.htaccess 파일을 메모장으로 연후 2~4 줄에 아래소스를 추가해 주었다.

RewriteCond %{HTTP_HOST} !^www\.webmini\.net$ [NC]
RewriteCond %{HTTP_HOST} !^$
RewriteRule ^(.*)$ http://www\.webmini\.net/$1 [L,R]

쉽게 말하면 RewriteEngine On 아래에 위에 소스를 추가하는 것이다.
그럼 www 붙히지 않고 접속해도 자동으로 www 가 붙어서 연결되는걸 확인할수 있다.

예를 들어 네이버에서 naver.com 으로 접속시 www.naver.com 으로 바뀌는 것을 알수 있을 것이다.
메타 태그로 자동으로 넘어가게 하는 방식은 정말 비추이다. 한번에 페이지가 열리는게 좋지 한번더 페이지를 읽혀들이면 과연 그게 좋은 방식인가? 그건 아니라고 본다.

이제 모든것이 끝났다.
사이트에 디자인을 입히고, 기타 편리한 기능을 차츰차츰 추가시키면 웹미니쩜넷 v4.0이 완성될듯 하다.
시간을 많이 투자할수 없기에 작업은 조금씩 수정하는 방향으로 진행해야 할듯 싶다.

[잡담]텍스트 큐브로 업데이트

[footnote]11[/footnote]

테터툴즈를 사용하다 텍스트 큐브로 갈아탔습니다.
굉장히 간단한 방법으로 되어있어서 업데이트하기가 참 쉬웠습니다.

먼저 예쁜 로고와 관리자단 페이지들.. 정말 깔끔해진 느낌이 설치후에 느껴지더군요.
속도에서도 빨라진 느낌이 납니다.

텍스트 큐브로 갈아타는 방법은 의외로 간단했습니다. [텍스트큐브 다운로드]

1. 혹시 모르니 기존 테터툴즈를 백업하고, 활성화된 플러그인을 비활성화 한다.
2. 텍스트큐브 파일을 다운받는다.
3. 기존 테터툴즈가 있는 계정에 blog, component, image, language, lib, script, style 폴더들을 삭제한다 (삭제 안해도 됨)
4. 텍스트큐브 폴더 및 파일을 기존 테터툴즈와 같은 위치에 덮어씌운다.
5. 업로드가 모두 되었으면,인터넷 주소창에 http://자신의 사이트주소/checkup 를 입력한다. (DB 구조 업데이트 과정)

성공이란 메세지를 확인하면 모든게 끝납니다. [자세히보기]

기존에 적용되어있던 스킨은 모두 그대로 이며, 플러그인만 활성화 시키면 됩니다.

어라? 사용자단은 변한게 없네? 카피라이터 쪽을 보시면 Text cube 로 바뀐 모습을 볼수 있습니다.
이제 관리자 단 메인으로 들어가 봅시다.

오~ 신경 많이 썻네? 그렇습니다. 관리자단이 깔끔해 진걸 느낄수가 있습니다.

플러그인쪽도 예전과 틀리게 이미지로 표현이 됐군요.. 기존에는 사실 찾기가 어려운점이 있긴 했습니다.

깔끔해진 관리자 인터페이스와 Open ID 까지.. 아직 전체적인 기능은 확인을 못했습니다..
여러분도 손쉽게 갈아타보시기 바랍니다.^^