Cara membuat slidingbox (box rekomendasi) pada blog

Kali ini saya akan memberitahu ganis (agan-agan dan sista-sista) untuk belajar cara membuat box rekomendasi (slidingbox). Slider ini seperti yg ganis ketahui, terletak di samping kanan bawah blog ganis, dan bekerja saat ganis.

Artikel ini saya ambil dari reffrensi blog.kangismet.net

Caranya hanya tiga langkah saja langsung saja caranya adalah :

1. Simpan kode di bwah ini, tepat di atas ]]></b:skin>

/* 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: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 rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}

.related-post-style-2 li {margin-left:-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: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 */

2. Simpan kode dibawah ini, tepat diatas kode </head>

<script type='text/javascript'>

$(window).scroll(function(){

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

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

        } else {

            $(&#39;#kislidingbox').css({'right':'-360px'});

        }

    });



$(document).ready(function(){

var kislidingbox      = $(&#39;#kislidingbox');

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

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

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



    maximize.hide();



    closed.click(function(){

        kislidingbox.css({&#39;right':'-350px'});

        kislidingbox.fadeOut(&#39;slow');

    })

    minimize.click(function(){

        kislidingbox.toggleClass(&#39;hide');

        $(this).hide();

        maximize.show();

    })

    maximize.click(function(){

        kislidingbox.toggleClass(&#39;hide');

        $(this).hide();

        minimize.show();

    })

});

</script>

3. Simpan kode dibawah ini, tepat di bawah kode <div class='post-footer'> yang ke 2



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

<div class='show' id='kislidingbox'>

    <div class='kislidingbox-title kislidingbox-www'>

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

        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbfsAsEz216WELqmWCTlLVUC3VZFfX20GpZo8IPTUw0BaVT3SdCj-umx5wgs106cALPEU32jiSZIj1GE8zNX1QKeg1QIQhJ6lnYgmVHlwMd0Pip2gOacFryG1aMX_M9u56hbGVKXRh/s1600/close.png' title='close'/></a></span>

        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPYg5zvbwL6OS_mfoF7fd1z1InnyFx-wH3FLnFG81rEOKlScDWkvbdJvEEdREucG2jCLxqdMeYpkphs3dGQrrlgBik9aBolnNj0oMsUtv7oxn3I3e1Xrdd2ecEIby4-JRXDKDLK8h/s1600/minimize.png' title='minimize'/></a></span>

        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOeg9cbVNtE-L8GssQ-wpxfU_d9Goiq-y4XN8aP9vhyphenhyphenqvVSBRZIGNFDfifYKFxCg8U0dNem2F4GuyCyIa4eaxXA-8b7Z2XiiqfMJTNSCRGgXI-0vipKBo5ACoB7uHrPle9akt6Q7/s1600/maximize.png' title='maximize'/></a></span>

    </div>

    <div class='kislidingbox-container'>

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

<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'>

          "<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: 2,

      summaryLength: 0,

      titleLength: "auto",

      thumbnailSize: 45,

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

      containerId: "sliding-tab",

      newTabLink: false,

      moreText: "",

      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>

Demikian lah artikel ini,terimakasih telah mengunjungi website saya http://alfarisiku.blogspot.com semoga bermanfaat

Cara membuat slidingbox (box rekomendasi) pada blog

Artikel Terkait Cara membuat slidingbox (box rekomendasi) pada blog :

Soal SMB Polban

Entri Populer

Topik