Pada artikel kali ini saya akan berbagi cara tentang widget slide box yang terdapat pada
blog saya ini ketika mouse Anda scroll ke bawah nanti akan muncul kotak rekomendasi.
 |
Klik Gambar Untuk Melihat
Lebih Jelas |
Artikel ini saya tulis berdasarkan salah satu permintaan artikel dari loyal visitor di blog ini yaitu
+Ri-Uz Athamir yang memerlukan informasi tentang slide box rekomendasi tersebut yang biasanya ada di detik.com.
Dulu saya juga menginginkan sekali memiliki sebuah blog atau website yang tiba-tiba ketika membaca sebuah artikel atau berita tiba-tiba saja muncul kotak tersebut. Alasannya adalah PV akan tinggi.
Tapi sebelumnya saya sudah minta ijin kepada yang share pertama kali tentang widget yang keren dan dapat meningkatkan PV Blog atau Website Anda.
Kode-kode untuk membuat widget tersebut berasal dari
1. Sliding Statis Social Widget dari Kompi Ajaib.
2. Related Post with Thumbnail dari DTE.
Kode tersebut kemudian diolah kembali oleh seorang blogger yang sudah tidak asing lagi yaitu Kang Ismet.
Sekali lagi saya memberikan penekanan terkait widget yang satu ini karena terbukti sekali ampuh "menggoda" pengunjung blog Anda untuk terus membantu membaca artikel-artikel yang ada pada blog Anda.
Manfaat dari PV ini tentunya mengurangi bounce rate dan exit rate blog Anda, maka baca artikel yang yang berjudul
cara menurunkan bounce rate dan sekaligus baca juga
penyebab bounce rate.
Diharapkan setelah Anda membaca artikel tersebut maka semakin mantap untuk memasang widget ini.
Baiklah langsung saja berikut cara pasangnya.
1. Copy Kode dibawah diatas kode
]]></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. Copy kode dibawah ini di atas kode </head>
<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>3. Terakhir Copy kode di bawah ini di bawah kode <div class='post-footer'> pilih yang kedua saja.<!-- Related Post with Sliding by Kang Ismet --><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;'>Artikel Keren 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/AVvXsEirymaSnyR_h9p7i5gr-7rShf-NUeSFDk-3MXzBOR-VqbGGND4Unc7KkK3c0K4RGwxin0sl7KmvskUTLHhizBNvzaouuTAk51g9ms22Le6_OqedbCAb-2cI3E_3TzzKCEHPJfroccnD/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/AVvXsEiG7rDqNmdGYG84I_2Vb439ZCRQGXWuQKz3SVZhOmQAH9sNMXSxjAXyE7a6Alsw-t1xBbJZHUGd9YEk7OeCao70fyU3ago76BREAUaf8OjuRajhx0KuZ48VwOifNA16eTUYBHIALciI/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/AVvXsEjIuEyANPJLEUIZVsFYAYW4rubwf0C2Gt2veoShN02pDXHr6-FtoZd22PtLNGitM_nZoPAcW8LOox38JBCG0oGOtUM5u4o5b43J19EcBKxdvqgxRmr89Ct_NH6wB5W1uQgjmMpgaeiN/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><!-- Related Post Widget End --> 4. Selesai simpan template blog Anda dan lihat perbedaannya, semoga semakin keren blog Anda.Source Kode Klik Disini.Cara diatas selain mampu membuat blog menjadi keren yaitu mampu membuat blog atau website menjadi lebih seo karena PV meningkat.
