Cara Membuat Slide Rekomendasi Berdasarkan Artikel Terkait

Memasang Slide rekomendasi ditujukan untuk memberitahu pengunjung anda artikel terkait yang dibaca oleh pengunjung anda, pengunaan slide rekomendasi ini juga bisa untuk media promosi artikel anda jadi pengunjung anda tidak akan bosan untuk berkunjung.

Cara Memasangnya : 

• Login dulu di Blogger
• Setelah Itu masuk di Template > Edit Html
• Cari kode ]]></b:skin> ( Gunakan Ctrl + F Untuk Mencari ) dan copy kode dibawah ini lalu paste kan di atas kode ]]></b:skin>

#kislidingbox{border:3px solid #000;background:#f6f6f6;border-top:3px solid #000;width:320px;height:200px;position:fixed;overflow:hidden;border:1px #00;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .kislidingbox-title{background:none;color:#000;display:block;height:35px;width:100%;font-size:16px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px} .kislidingbox-title span a{float:right;height:35px;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:-35px;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 :#000 !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 {}

• Jika sudah dipaste, cari kode </head> dan copy kode dibawah ini lalu paste kan kodenya diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> <script type='text/javascript'> $(window).scroll(function(){ if ($(this).scrollTop() > 400) { $('#kislidingbox').css({'right':'0px'}); } else { $('#kislidingbox').css({'right':'-360px'}); } }); $(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':'-350px'}); kislidingbox.fadeOut('slow'); }) minimize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); maximize.show(); }) maximize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); minimize.show(); }) }); </script>

• Kode Jquery diatas silahkan digunakan apabila belum terdapat kode tersebut, apabila sudah maka lebih bagus untuk dihapus, Ganti 400 sesuai kebutuhan anda semakin besar angkanya maka semakin kebawah slide box munculnya.
• Kemudian cari kode <div class='post-footer'> dan copy kode dibawah ini lalu paste kan tepast di bawahnya <div class='post-footer'> , jika terdapat lebih gunakan 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;'>Baca Juga Artikel Ini</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/AVvXsEjCJA0MywN_rMuoqqSxPEUL2hhIpOJdJxY-qi_M_ZdLmCv83pDZxGhN_zJBLgY35e46tnzTV-YuP6XJ-hhr2PUuvbstIWCBgKDKa9Z-4rCQFCFp1UUSmx33SttCdaPsk-6qtij4MTt_/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/AVvXsEhEVzKhkaEzkWIi8nTw2U1rdcK__5D-dfG0stLc_oMBcO0QHDYXndwy96pgJIhil7H5vOQF8AB7FTPA9qvg_-VQaprlTrPO0r6m06FhruO9e3QrVjFJWgqV1GAX5PAdCoYRXFQqksE7/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/AVvXsEhjhDA9-wwF0kHrTrLJjdG4HVBoazB3eWAB0hg18MdOnr_PcsY0jXxEiGKqGhCvTYwO7pqDXeUe89aMcoVo57wlVGHEi8tS4kkb4d3Pno_5S3T2ku6i9CU9wtmxXGnkp01YFLjN9N2p/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: 35, 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>

• Kemudian Save Template

Share :

Tweet

✚

Related Post