TUTORIAL IT

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='hlslidein_place_holder'></div>
</b:if>

<style>
    .ht-title-one {border-bottom: 1px solid #808080; font-weight: bold; font-family: Arial; font-size: 18px !important; letter-spacing: none !important; color: #101010 !important;}
   #hlslidein img {
    -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
    width: 70px !important;
    height: 70px !important;
    }
    #hlslidein img:hover {
opacity: 1;
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;  rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
    #hlslidein{
z-index:500;
width:390px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #000;
position:fixed;
right:-430px;
bottom:0;
-moz-box-shadow:-2px 0 5px #aaa;
-webkit-box-shadow:-2px 0 5px #aaa;
box-shadow:-2px 0 5px #aaa;
font-family:Arial, Helvetica, sans-serif;
}#hlslidein p{
font-size:12px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#hlslidein_title{
color:#c0c0c0;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;   
}
#hlslidein a,#hlslidein a:hover,#hlslidein_title{
text-decoration:none;
color:#808080;
}
    #hlslidein a:hover {color: #000;}
#hlslidein .close,#hlslidein .expand,#hlslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;
font-size:17px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
    margin-top: -5px;
}
#hlslidein .help{
right:35px;
}
#hlslidein_title,#hlslidein_image{
float:left;
width:80px;
}
#hlslidein_title{
width:290px;
}</style>
<div id="hlslidein" style="display:none;"> <div class="expand">^</div> <div class="close">X</div> <p class="ht-title-one">You May Also Like</p> <div id="hlslidein_image"></div> <div id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i ){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://dl.dropboxusercontent.com/s/dwqlxb9ukrr2ddp/js%20recommended%20for%20you.js",function(){},"hl-out-slide")},"jQueryjs")} </script>