Theme

If you came from the other tutorial, here’s the optional method to change the style of the solid color shadow.

Step 1: Click the styles located on right side (above) then choose the one you think will fit the photo best. (I’m using CS5 so I really have no idea where you’ll find it in CS6)  Here it is:

I already circled the one I chose so the result would look like this:

Step 2: Tweak around either of the two effects or both by doubling clicking it  to achieve your preference.

Step 3: My final result of the solid color layer:

(second photo when you want your shadow less visible.)

Locate  <img src=”{image:Sidebar Image}”> in the search box of your theme html.

Copy and paste the script code below over that sidebar image html code. Hence, removing,   “<img src=”{image:Sidebar Image}”> ”

Then start changing the url of “image1.gif” to your preferred image or gif.

You’re all set! Good luck!

Note: You can freely edit this to match your preferred setting.

Part 1:

/* ————————————– Beginning of Update tab place this in the Head section, put it directly after <style type=“text/css> ———————————————————————————- */

#update { position:fixed; width: 150px; height:100%; right:0px; top:0px; text-decoration:none; -webkit-transition:opacity 0.8s linear; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; transition:all 0.5s ease-out; background-color:transparent; text-align:center; }

#updatetext{ top:155px; opacity:0; position:fixed; right:-180px; width:100px; visibility:hidden; -webkit-transition:opacity 0.8s linear; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; transition:all 0.5s ease-out; line-height:10px; }

#updatetext a{ display:inline-block; font-size:11px; font-family:calibri; /* ———————– Change color of your text below ————- */ color:black; /*———————————————————————–*/ letter-spacing:0px; line-height:9px; }

#update:hover #updatetext{ opacity:1; right:25px; visibility: visible; -webkit-transition:opacity 0.8s linear; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }

#updateimage{ position:relative; left:0px; top:20px; height:150px; width:150px; /*————————- Change image here, just change the link to the image you’d like! ————————————————–*/ background-image:URL(‘http://media.tumblr.com/ea65104adc348bad5d002b0f38ead786/tumblr_inline_mu50omtWw51s5a91z.png’); /* ——————————————————————*/ background-size:100px; background-position: top 25px right 25px; background-repeat: no-repeat; -webkit-transition:opacity 0.8s linear; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }

#updateimage b{ visibility:visible; text-decoration:none; font-size:12px; font-family:calibri; text-align:center; color:{color:Updatetext}; line-height: 10px; text-transform:uppercase; -webkit-transition:opacity 0.8s linear; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }

/* ————————————– End of Update tab head section ——————————— */

Part 2:

<!—————— Beginning of Update tab place this directly after < body > NOT </ body > this will be in the middle of the code somewhere. If after the first time of trying it doesn’t show up place it directly before </ body > ——>

<div id ="update”> <div id=“updateimage”> <center>

<!————————————- Change UPDATES to whatever you want your title to be or delete if you don’t want there to be a title —————————————————->

<b>Updates</b> </center> </div>

<div id=“updatetext”>

<!——————————— Place the text you want in your update tab here, I’ve given examples normal text goes between <a text=“> and </a> whilst links are the href ones! Use as many of these as you need —————>

<a text=”>Currently Watching:<br>FMA:B<br><br></a> <a text=“>Currently Reading:<br>Nothing<br><br></a> <a text=”>Currently Singing:<br>The Lightning Strike<br>by Snow Patrol<br><br></a> <a href='http://jabberjais.tumblr.com’>The Prim to My Katniss<br><br> </a> <a href='http://gingerbreadpeeta.tumblr.com/post/70208299861/the-hunger-games-mockingjay-part-one-inspired-by’>Latest Edit </a> </div> </div>