1.Addiction

Designer's Comments

Look carefully for specific instructions

*Note: All my layouts are best viewed in Google Chrome****

^^ Addiction Part 1 is based on Code V's song "중독"
There are three segments based on this song. +One extra just cause I wanted to continue the segment :]

Part 1: My current layout
Part 2: For Rachel
Part 3. For Umi
Part 4. For Micho

ᵅᵈᵈᶦᶜᵗᶤᵒᶰ중독 Segments: Part One, Part Two, Part Three, Part Four

Using This Layout

For specific instructions read designer's comments

1. Log into blogger.com
2. Click on Template
3. Copy (ctrl c) and paste (ctrl v) code to EDIT HTML

Layout Code

Copy and paste to Template

Help

/***********************************************
* DD Drop Down Panel- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at htmtp://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

if (setting.dir=="up"){ //if "up", output CSS to hide panel contents
document.write('<style type="text/css">n')
document.write('#'+setting.ids[1]+'{height:' + parseInt(setting.stateconfig.initial) + 'px; overflow:hidden}n')
document.write('</style>n')}

setting.stateconfig.initial=parseInt(setting.stateconfig.initial)
this.setting=setting

if (setting.pointerimage.enabled){ //preload images
var img1=new Image(), img2=new Image()
img1.src=setting.pointerimage.src[0]
img2.src=setting.pointerimage.src[1]}
 
var thispanel=this
if (window.addEventListener) //if non IE browsers, initialize panel window.onload
ddpanel.addEvent(window, function(e){thispanel.initpanel(setting)}, "load")
else //else if IE, add 100 millisec after window.onload before initializing
ddpanel.addEvent(window, function(e){setTimeout(function(){thispanel.initpanel(setting)}, 100)}, "load")
ddpanel.addEvent(window, function(e){thispanel.uninit(setting)}, "unload")}

ddpanel.events_array=[] //object array to contain events created by script

ddpanel.addEvent=function(target, functionref, tasktype)
{var evtmodel=target.addEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "addEventListener" : "attachEvent"
var i=this.events_array.push({ //store event info in ddpanel.events_array[] and return current event's index within array
target: target,
tasktype: (evtmodel=="ie"? "on" : "")+tasktype,
listener: evtmodel=="ie"? function(){return functionref.call(target, window.event)} : functionref
})-1

target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener, evtmodel=="w3c"? false : null)}

ddpanel.removeEvent=function(target, functionref, tasktype)
{var evtmodel=target.removeEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "removeEventListener" : "detachEvent"
target[evtaction](tasktype, functionref, evtmodel=="w3c"? false : null)}

ddpanel.getCookie=function(Name)
{var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.c00kie.match(re)) //if cookie found
return document.c00kie.match(re)[0].split("=")[1] //return its value
return null}

ddpanel.setCookie=function(name, value){document.c00kie = name+"=" + value + ";path=/"}

ddpanel.addpointer=function(target, className, imagesrc)
{var pointer=document.createElement("img")
pointer.src=imagesrc
pointer.className=className
pointer.style.borderWidth=0
target.appendChild(pointer)
return pointer}

ddpanel.prototype={

togglepanel:function(dir){ //public function that toggles the panel's state. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
var pcontent=setting.pcontent, dir=setting.dir
pcontent._currentheight=(dir=="down")? pcontent._actualheight : setting.stateconfig.initial
pcontent.style.height=pcontent._currentheight+"px"
if (setting.pointerimage.enabled){
setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"}
ddpanel.setCookie(setting.ids[0], setting.dir)},

togglepanelplus:function(dir){ //public function that toggles the panel's state w/ animation. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
if (setting.pointerimage.enabled)
setting.arrow.style.visibility="hidden"
clearTimeout(setting.revealtimer)
this.revealcontent()},

revealcontent:function()
{var setting=this.setting
var pcontent=setting.pcontent, curH=pcontent._currentheight, maxH=pcontent._actualheight, minH=setting.stateconfig.initial, steps=setting.animate.steps, dir=setting.dir
if (dir=="down" && curH<maxH || dir=="up" && curH>minH){
var newH = curH + (Math.round((maxH-curH)/steps)+1) * (dir=="up"? -1 : 1)
newH=(dir=="down")? Math.min(maxH, newH) : Math.max(minH, newH)
pcontent.style.height=newH+"px"
pcontent._currentheight=newH}

else{if (setting.pointerimage.enabled)
{setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"}
return}
 
var thispanel=this
setting.revealtimer=setTimeout(function(){thispanel.revealcontent()}, 10)},

initpanel:function()
{var setting=this.setting
var pcontainer=setting.pcontainer=document.getElementById(setting.ids[0])
var pcontent=setting.pcontent=document.getElementById(setting.ids[1])
var tdiv=setting.tdiv=document.getElementById(setting.ids[2])
pcontent.style.overflow="scroll"
pcontent._actualheight=pcontent.scrollHeight
setTimeout(function(){pcontent._actualheight=pcontent.scrollHeight}, 100)
pcontent.style.overflow="hidden"
pcontent._currentheight=(setting.dir=="down")? pcontent._actualheight : setting.stateconfig.initial
var thispanel=this
ddpanel.addEvent(tdiv, function(e){ //assign click behavior when toggle DIV tab is clicked on
if (setting.animate.enabled)
thispanel.togglepanelplus()
else
thispanel.togglepanel()
if (e.preventDefault) e.preventDefault()
return false}, "click")
if (setting.pointerimage.enabled)
{var pointer1=new Image(), pointer2=new Image()
pointer1.src=setting.pointerimage.src[0]
pointer2.src=setting.pointerimage.src[1]
setting.arrow=ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointerimage", setting.pointerimage.src[setting.dir=="down"? 1:0])}
if (setting.closepanelonclick.enabled){ //assign click behavior when panel content is clicked on (links within panel or elements with class "closepanel"
ddpanel.addEvent(pcontent, function(e)
{var target=e.srcElement || e.target
if (/(^|s+)closepanel($|s+)/.test(target.className) || target.tagName=="A" || (target.parentNode && target.parentNode.tagName=="A"))
{thispanel.togglepanel("up")}
}, "click")}},

uninit:function()
{var setting=this.setting
if (setting.stateconfig.persiststate){
ddpanel.setCookie(setting.ids[0], setting.dir)}
for (prop in setting){setting[prop]=null}}
} //end of ddpanel object

//initialize instance of DD Drop Down Panel:

var defaultpanel=new ddpanel({
 ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
 stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
 animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
 pointerimage: {enabled: true, src:  ["http://img340.imageshack.us/img340/1830/addiction.png", "http://img59.imageshack.us/img59/9634/addiction2.png"]},
 closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})
</script>

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 180 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function closebar(){
if (persistclose)
document.c00kie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

#navbar-iframe{display: none;height: 0;}

a:link,a:active,a:visited {font: 10px arial; color: #aaa; border-bottom: 1px solid #f0f0f0; text-decoration: none;text-transform: none;letter-spacing: 0px; }
a:hover { color: #8BC4C4;  border-bottom: 1px solid #e8e8e8;background: #f2f2f2; text-decoration: none; -webkit-transition: 1s;}

a.nav, a:link.nav, a:visited.nav, a:active.nav {font-size: 10px;letter-spacing: 1px;line-height: 150%;color: #aaa; padding-left:18px;
 text-decoration: none;border-bottom: 1pt solid #f8f8f8; color: #c2c2c2;background:#f2f2f2; display: block;text-transform: ;}
a:hover.nav {letter-spacing: 2px;background: #ececec; color: #aaa;background: #eee; -webkit-transition: 1s;}

body{background: #FFFFFF; font: 11px arial;color: #999;line-height: 150%;}
td { background: #f8f8f8;font: 11px trebuchet ms;color: #ffffff;line-height: 150%;padding:4pt; }

.left { width: 460px; text-align:justify; }
.right { width: 180px;font: bold 11px arial;color: #c8c8c8; }

img{
filter: alpha(opacity=70);
moz-opacity: .70;
opacity:.70;}

img:hover{
filter:alpha(opacity=100); 
moz-opacity: 1.0; 
opacity: 1.0;
-webkit-transition: 1s;}

.blah { -webkit-transition-duration: .5s;}

.transparent
{
   filter:alpha(opacity=70); 
   -moz-opacity: 0.7; 
   opacity: 0.7; 
}

.transparent:hover{
filter:alpha(opacity=90); 
moz-opacity: 0.9; 
opacity: 0.9;
-webkit-transition: 1s;}

.navigations {left:0; width: 250px; font: 18px arial; color: #aaa; line-height: 200%;text-transform: lowercase; letter-spacing: -2px; }
.icon {border: 20px solid #eee; width:100px; height:100px;}
.h1 { font: normal 30px Arial; letter-spacing: -2px; text-transform: uppercase; text-shadow: #AAA 1px 1px 1px; color: #D9BCB0;}
.h2 { font: normal 10px Arial; letter-spacing: 4px; text-transform: lowercase; text-shadow: #AAA 1px 1px 1px; color: #A3CCCA;  }

b { color: #D68DA7;font-weight:bold; }
i { color: #A3CCCA; }
u { color: #D9BCB0; text-decoration: none; border-bottom: 2px #F2DED8 solid; }
s { color: #ddd; }
em {font-family: georgia}

blockquote{padding: 8px; background: #e6e6e6; color: #999 }
blockquote:hover{padding: 8px; background: #F2F2F2; color: #D9BCB0; -webkit-transition: 1s;}

#topbar{
position: absolute;
border: 0px solid black;
padding: 0px;
background-color: #F3f3f3;
opacity:0.7;
width: 820px;
visibility: hidden;
z-index: 100;
}

.ddpanel .ddpanelcontent{BACKGROUND-COLOR: #fff; border-bottom:0px solid #f3f3f3; border-top:6px solid #f3f3f3;font:10pt normal helvetica; }
.ddpanel .ddpaneltab{padding:20px; font:10pt normal helvetica;}
.ddpanel .ddpaneltab a{ float: left; background:#000000;}
.ddpanel .ddpaneltab a span{float:left; display:block; background:transparent; padding:1 12 4 13; cursor:help;}
.ddpanel .ddpaneltab a span img.pointerimage{margin-top:2px; margin-left:5px;}
.ddpanel .ddpaneltab a:hover{padding-top:8;}
.ddpanel .ddpaneltab a:active, .ddpanel .ddpaneltab a:focus{outline:0;}
.ddpanel .ddpaneltab a:hover span{background-color:;}

</style></head>
<body>

<select style=" border:0px solid #FFFFFF; width:125px; background-color:#FFFFFF; color: #222; font:8pt arial;" name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Months</option><BloggerArchives>
<option value="<$BlogArchiveURL$>">➩<$BlogArchiveName$></option>
</BloggerArchives></select><select style=" border:0px solid #FFFFFF; width:125px; background-color:#FFFFFF; color: #222; font:8pt arial;" name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Days</option><BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>">➡<$BlogPreviousItemTitle$></option>
</BloggerPreviousItems></select><br>
<img src= http://img638.imageshack.us/img638/538/codepi.jpg height="130" width="250"><br>
<embed src="http://www.youtube.com/watch?v=gyPPseD0AyQ" autostart="true" loop="true" hidden="true"></embed> 
<img src="http://cbimg6.com/layouts/10/08/36476aa.jpg"><br>
     <b>이제</b> <i>모두</i> <u>지워버릴게</u><br>
          Best viewed in Google Chrome (1024x768)<br>
  ᵅᵈᵈᶦᶜᵗᶤᵒᶰ중독 Segments: <a href="http://nootherthanyou.blogspot.com/">Part One</a>, <a href="http://lucky-paper-star.blogspot.com/">Part Two</a>, Part Three

<div id="mypanel" class="ddpanel" style="width:250px; overflow:hidden">
<div id="mypanelcontent" class="ddpanelcontent" style="width:250px; overflow:hidden">
<p style="padding:10;">
<div id="panel">
<center>
<div class="navigations">
<script>function changeNavigation(id){document.getElementById('box').innerHTML=document.getElementById(id).innerHTML}</script>
<div class="blah" style="background: #fff; text-decoration: blur;" onMouseOver="this.style.cursor='pointer';
         this.style.color='#ffffff'; this.style.background='#F2F2F2'" onMouseOut="this.style.color='#aaa'; this.style.background='#fff'"
         onclick="changeNavigation('about')">友世 ♔ вαвʏ ∂σℓℓ's нσʋƨɛ-----∞♡∞♡</div>

<div class="blah" style="background: #fff; text-decoration: blur;" onMouseOver="this.style.cursor='pointer';
         this.style.color='#ffffff'; this.style.background='#F2F2F2'" onMouseOut="this.style.color='#aaa'; this.style.background='#fff'"
         onclick="changeNavigation('profile')">::☆ ᵇᵅᵇᵞ友世』</div>

<div class="blah" style="background: #fff; text-decoration: blur;" onMouseOver="this.style.cursor='pointer';
         this.style.color='#ffffff'; this.style.background='#F2F2F2'" onMouseOut="this.style.color='#aaa'; this.style.background='#fff'"
         onclick="changeNavigation('exits')">╚►Exits</div>

</center>
<img src="http://cbimg6.com/layouts/10/08/36476ab.gif" /> <marquee scrollamount=2 width=89%><font size=2 color=#333><a href="http://www.youtube.com/watch?v=gyPPseD0AyQ"><i>코드브이 - ᵅᵈᵈᶦᶜᵗᶤᵒᶰ중독</i></a></font></marquee><br>

</div></p></div></div></div></p>

<div  class="transparent" style="position: absolute; top: 280px; left: 270px; width: 730px; height: auto; background-color: #f8f8f8; text-align: ; padding: 12px;"><center><b>You</b> are my <i>love</i> <u>addiction</u>.</center>
</div></div><br><br>

<div style="position: absolute; top: 5px; left: 790px; width: 285px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<font size="+3" color="#D5E0A3"><em>You know,</em></font><bR>
<font size="+2" color="#FFFFFF" style="letter-spacing:-1">I can't live without your love.</font><br><br><center>
<img src="http://cbimg6.com/layouts/10/08/36476ad.jpg" width=170 height=120></center>
</div>

<div style="position: absolute; top: 5px; left: 270px; width: 500px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<font style=" font: normal 30px Arial; letter-spacing: -2px; text-transform: uppercase; text-decoration:underline; text-shadow: #AAA 1px 1px 1px; color: #BFD071;">《♪ 우리 사랑이야기 ♬》</font><br>
<blockquote>
사랑하면 할수록, 깊어지면 질수록, 너를 밀어낼수록 난 더 더 더<br>
아프고 아파도 또 다시 난 너에게 빠져 너를 찾고 말거야<br>
Tell me why why why why (Why don't you love me)<br>
사랑에 나 취해 너에게 나 취해<br>
미치겠다 너에게서 멀어지는 순간, 내 가슴이 무너져 내 맘도 다가져 갔어 <bR>
난 아무것도 없어 Please come a little closer<br>
멍든 가슴이 찢어진다, 이 내 마음이 무너진다, 이렇게 애타게 기다릴게<bR>
</blockquote>
 </div>

<div id="profile" style="display:none">
<div style="position: absolute; top: 5px; left: 790px; width: 285px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<font size="+3" color="#E0A3B4"><em>I will fall for you,</em></font><bR>
<font size="+2" color="#FFFFFF" style="letter-spacing:-1">no matter how much it hurts.</font><br><br><center>
<img src="http://cbimg6.com/layouts/10/08/36476ae.jpg"  width=170 height=120></center>
</div>

<div style="position: absolute; top: 5px; left: 270px; width: 500px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<img align=left src=http://cbimg6.com/layouts/10/08/36476af.gif>
<span class="cloud">
<font face="tahoma" size="1" color= #CCC>Name: <br>
D.O.B: <br>
Birthplace: <br>
Ethnicity: <br>
Height/Weight: <br>
Zodiac Sign: <br>
Blood type: <bR>
Favorite Color: <br>
Favorite Food/Drink: <br>
Hobbies: </font>

</span><br>
 </div>
 
<div style="position: absolute; top: 250px; left: 270px; width: 800px; height: auto; background-color: #f8f8f8; text-align: ; padding: 12px;">
  
<Blogger>
<div class="h1"><$BlogItemTitle$></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> / <$BlogItemDateTime$></div><br>
<$BlogItemBody$><br>
</Blogger>
</body>

<div id="exits" style="display:none">
<div style="position: absolute; top: 5px; left: 790px; width: 285px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<font size="+3" color="#D9BCB0"><em>These cold words,</em></font><bR>
<font size="+2" color="#FFFFFF" style="letter-spacing:-1">easily took my feelings away.</font><br><br><center>
<img src="http://cbimg6.com/layouts/10/08/36476ag.jpg"  width=170 height=120></center>
</div>

<div style="position: absolute; top: 5px; left: 270px; width: 500px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<a href="http://cbox.ws">cbox</a>, <a href="http://www.shoutmix.com/main/">shoutmix</a>, etc. <br>
width no bigger than 499, height no bigger than 399.<br>
 </div>

<div style="position: absolute; top: 5px; left: 270px; width: 500px; height: 200px; background-color: #F2F2F2;color: #fff; padding:8px; padding-top:15px ">
<font style=" font: normal 30px Arial; letter-spacing: -2px; text-transform: uppercase; text-decoration:underline; text-shadow: #AAA 1px 1px 1px; color: #6EBDCF;">朋宮殿</font><br>
<blockquote>
    Designed using <a href=http://www.adobe.com/products/dreamweaver/>Adobe Dreamweaver</a>, <a href=http://www.adobe.com/products/flash/>Flash Professional</a>, <a href=http://www.adobe.com/products/photoshop>Photoshop</a>. DHtml and JavaScripts from <a href=http://dynamicdrive.com>Dynamic Drive</a>. References: <a href=http:/dahong.co.kr>Dahong</a>, <a href=http://cyworld.co.kr>Cyworld</a>, <a href=http://dynamicdrive.com>Dynamic Drive</a>, and <a href=http://w3schools.com>W3Schools</a>. Layout made by <a href="http://tomo-kyuuden.blogspot.com">Tomo Toggi</a>. Banner: <a href="http://www.cyworld.com/mall/c2/preview/mall5_c2_gift_preview.asp?wishid=&present_seq=123923">행복카메라</a> by <a href="http://colorcode.cmaker.com">컬러코드</a>.
Images from <a href="http://cyworld.co.kr">Cyworld</a>, and <a href="http://dahong.co.kr">Dahong</a>. 
Copyright © <a href= http://tomo-kyuuden.blogspot.com>ᵅᵈᵈᶦᶜᵗᶤᵒᶰ중독 Part2</a> 2010.
<br><i>
***Credits must stay for legal purposes. Plagiarism is a crime punishable by law. Please avoid getting involved with the government. Please credit all sources if possible.*<br>
P.S. I will send a mad grizzly bear to hunt you down. :]</i>
<br>
           </blockquote>
<br>
 </div>

</body>
</html>

Layout Comments

Showing latest 10 of 14 comments

its nice but the color scheme is a little too bright on the eyes. i am thinking its one of those faded picture things as you click onto i because all i saw that was clear was the bunny and thats pretty much it.

By koobecaf on Jan 8, 2011 7:50 pm

I love this layout :)
I can't wait to play with it a little and edit things around.
Of course credit stays!

By ANewEra on Nov 19, 2010 12:30 pm