How to Make Floating Recommendation in Blog



Floating Recommendation in Blog


How to Make Floating Recommendation in Blog - Maybe my friend had visited several sites that use slidebox recommendation, or box that is shifted to the side when the mouse down discroll containing writings Recommendations For You at this time for the demo you can see this blog.

Immediately, from the snout of my many, if you want to install follow the steps from me:

1. Login to your blogger
2. Choose a Template
3. Then click Edit Template

Findthe code ]]></b:skin> and then save the following code just above it:

/* Related Post with Sliding CSS by Kang Ismet*/#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s
ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-
align:left!important;letter-spacing:0;}.kislidingbox-title{background:none;border-top:1px solid
#ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-
transform:capitalize;font-weight:bold;padding-right:25px}.kislidingbox-title span
a{float:right;height:40px;width:20px;}a#kislidingbox-close, a#kislidingbox-close {margin-
right:15px;}.kislidingbox-title &gt; span &gt; h2{font-size:20px!important;font-
weight:normal!important;}.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0
!mportant;}.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}.kislidingbox-container &gt; div{border:none;height:20px;margin:3px;padding:0px;}.kislidingbox-container &gt; div &gt; span {font-size:14px;}.kislidingbox-container img{float:left;margin:3px 5px;width:20px;border:1px solid
#ccc;}.show{bottom:80px;}.hide{bottom:-145px;}.related-post {margin:2em auto 0;font:normal normal 11px/1.4
Arial,Sans-Serif;}.related-post h4 {font-size:150%;margin:0 0 .5em;}.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:0px;padding-top:10px;list-style:none;}.related-post-style-2 li {margin-
left:-10px;style:none;}.related-post-style-2 li {padding:0 0px 0px 0px;overflow:hidden;}.related-post-style-2
li:first-child {border-top:none}.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-
width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0
0;border:1px solid #ccc;}.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-
transform:capitalize;}a.related-post-item-title {color :#333 !important;}a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}.related-post-style-2 .related-post-item-summary
{display:block;overflow:hidden;}.related-post-style-2 .related-post-item-more {}/* End CCSS Related Post with Sliding */


4. Then find the code </head> , and store the code below just above it:

<script type='text/javascript'> $(window).scroll(function(){ if ($(this).scrollTop() &gt; 400) { $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;}); } else { $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;}); } }); $(document).ready(function(){ var kislidingbox = $(&#39;#kislidingbox&#39;); var closed = $(&#39;#kislidingbox-close&#39;); var minimize = $(&#39;#kislidingbox-minimize&#39;); var maximize = $(&#39;#kislidingbox-maximize&#39;); maximize.hide(); closed.click(function(){ kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;}); kislidingbox.fadeOut(&#39;slow&#39;); }) minimize.click(function(){ kislidingbox.toggleClass(&#39;hide&#39;); $(this).hide(); maximize.show(); }) maximize.click(function(){ kislidingbox.toggleClass(&#39;hide&#39;); $(this).hide(); minimize.show(); }) }); </script>


5. The next step is looking <div class='post-footer'> to 2 and then save the following code just below it:
<!-- Related Post with Sliding by Kang Ismet --><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='show' id='kislidingbox'> <div class='kislidingbox-title kislidingbox-www'> <span style='float: left;margin:14px 0 0 15px;'>Recommendation To You</span> <span><a href='javascript:void(0);' id='kislidingbox-close' title='Exit'><img alt='Exit Button' class='a' src='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='Exit'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='Minimize'><img alt='Minimize Button' src='http://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='Minimize'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='Maximize'><img alt='Maximize button' src='http://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/s1600/maximize.png' title='Maximize'/></a></span> </div> <div class='kislidingbox-container'><b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='related-post' id='sliding-tab'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;, numPosts: 2, summaryLength: 0, titleLength: &quot;auto&quot;, thumbnailSize: 45, noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;, containerId: &quot;sliding-tab&quot;, newTabLink: false, moreText: &quot;&quot;, widgetStyle: 2, callBack: function() {} }; </script> <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/></b:if> </div></div></b:if><!-- Related Post Widget End -->


6. Save Template


yX Media - Monetize your website traffic with us
yX Media - Monetize your website traffic with us