First time sliding box

TutorNecio -First time sliding box like this are the results of my mind, because I personally frequently visited portals compass and Legal. Then my mind flashed how ya if I also posted a blog like this, it's cool.

But the difficulty is how to make it? point first light I encounter a blog is having its mas Adly www.kompiajaib.com , there is no mas Adly share ( how to create a static sliding social widgets ). there I began to think if we combine it with related articles can. Having my test in merger CSS, Script and HMTL, only failure I have encountered, How not annoyed, almost one week you know mate. But I do not give a damn, I know there must be one person who is able to do this. Yeah, he is a shaman tutorial ( Kang Ismet ) which is located blog.kangismet.net. After I ask ismet kang can not make it? He also said, may be, after a few days, eh, it was ready and had to share. [ Link ]. , but because there are a few of my friends asked about only one image appears and there is previewed, then I share over here.

One that I apply is this blog. 01. Find code <head> who are at the top, if you have found FONTS paste the code below right under <head> . If your blog has no fonts like this then skip this step.

==========================

<head>

===============

=======================

]]></b:skin>

02. The second step is looking for the code ]]> </ b: skin> , if it is paste the following CSS code just above ]]> </ b: skin>

=======================

/* Related Post with Sliding CSS by Kang Ismet*/

#kislidingbox{background:#DFE9E9;box-shadow: 0 2px 6px rgba(0,0,0,0.2);transition:all 0.6s ease-out;width:400px;height:172px;border-radius:4px 0 0 4px;position:fixed;overflow:hidden;border:none;right:-405px;z-index:9999;text-align:left!important;letter-spacing:0;}

.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#26B337;display:block;height:30px;width:100%;font:bold 22px PT Sans Narrow;padding-right:25px;}

.kislidingbox-title span a{float:right;height:40px;width:25px;}

a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}

.kislidingbox-title > span > 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 > div{border:none;height:40px;margin:3px;padding:10px;}

.kislidingbox-container > div > span {font-size:14px;}

.kislidingbox-container img{float:left;margin:3px 5px;width:25px;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 #D0B2B2;margin-top:-20px;padding-top:15px;list-style:none;}

.related-post-style-2 li {margin-left:-50px;margin-top:-10px;style:none;}

.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}

.related-post-style-2 li:first-child {border-top:none}

.related-post-style-2 .related-post-item-thumbnail {width:110px;height:70px;background:#FFF;padding:3px;border-radius:2px;box-shadow: 0px 0px 1px 0px rgba(69,62,69,1);float:left;margin:2px 10px 0 0;border:1px solid #ccc;}

.related-post-style-2 .related-post-item-title {font:bold 18px PT Sans Narrow;}

a.related-post-item-title {color :#0366A3 !important;}

a:hover.related-post-item-title {color :#0491ea !important;text-decoration:underline;}

.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}

.related-post-style-2 .related-post-item-more {}

#infofacebook {margin-top:24px;}

/* End CCSS Related Post with Sliding */

====================

</head>

03. Third step is to find Kede </ head> , paste the script below if it is right in the code </ head> .

======================

$(window).scroll(function(){

if ($(this).scrollTop() > 400) {

$('#kislidingbox').css({'right':'0px'});

} else {

$('#kislidingbox').css({'right':'-405px'});

}

});

$(document).ready(function(){

var kislidingbox = $('#kislidingbox');

var closed = $('#kislidingbox-close');

var minimize = $('#kislidingbox-minimize');

var maximize = $('#kislidingbox-maximize');

maximize.hide();

closed.click(function(){

kislidingbox.css({'right':'-405px'});

kislidingbox.fadeOut('slow');

})

minimize.click(function(){

kislidingbox.toggleClass('hide');

$(this).hide();

maximize.show();

})

maximize.click(function(){

kislidingbox.toggleClass('hide');

$(this).hide();

minimize.show();

})

});

</script>

=====================

04. Fourth step there looking <div class='post-footer'>, save this code under the class='post-footer'> <div to 2.

======================

<b:if cond='data:blog.pageType == "item"'>

<span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Berita Lainnya</span>

<b:if cond='data:blog.pageType == "item"'>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop></b:if>];

var relatedPostConfig = {

homePage: "<data:blog.homepageUrl/>",

widgetTitle: "<h4></h4>",

numPosts: 1,

summaryLength: 70,

titleLength: "auto",

thumbnailSize: 45,

noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

containerId: "sliding-tab",

newTabLink: false,

moreText: "",

widgetStyle: 2,

callBack: function() {}

};

</script>

<div class='fb-like' data-action='like' data-colorscheme='light' data-height='The pixel height of the plugin' data-href='https://www.facebook.com/Your id Facebook' data-layout='button_count' data-send='false' data-show-faces='true' data-width='The pixel width of the plugin'/><a class='twitter-follow-button' data-lang='id' data-show-count='true' href='https://twitter.com/Id Twitter'>Ikuti @Nama Twitter</a>

</b:if>

</div>

</b:if>

===============

05. Discover this code https://googledrive.com/host/0B7jh8ZI9-4vpOUpJbzV5eHFBbDQ and save it on your drive masing2 google.

06. Replace that read ( Your Facebook id ) with your id.

07. Replace that read ( Id Twitter ) with your id, replace ( Twitter name ) with your twitter name.

08. Save and see the results. hopefully useful. If confused, leave your comment below.

===============

Important!!

This box has no sliding back to top, if your template is no back to top then just delete your previous back to top.

==========================================

Leony Li
By Tutornecio
Published: 2014-05-30T23:58:00-07:00
First time sliding box
4.5 11 reviews

Tutornecio