logo blog
Background Header
Selamat Datang Di Blog Ikerenki
Terima kasih atas kunjungan Anda di blog Ikerenki,
semoga apa yang saya share di sini bisa bermanfaat bagi kita semua.
Selalulah berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.

Cara Membuat Slide Box Rekomendasi Keren di...

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.

Cara Membuat Slide Box Rekomendasi Keren di...
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() &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>
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 == &quot;item&quot;'>
<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='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></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 --> 
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.
Next
« Prev Post
Previous
Next Post »

32 komentar

Yupp saya sudah berkunjung mas .. saya akan coba praktekan saja segera mungkin .. :D

Balas

Berkunjung dimana ya? :d

Balas

mas mau nanya,kayak seperti itu apa gak papa buat blog adsense

Balas

Kunjungan siang, dengan mencoba untuk lebih mengeratkan silaturahmi di antara kita :)

Balas

Kok akun saya masih aman ya? Hehe

Balas

oke makasih, tapi maaf lagi jarang blogwalking.

Balas

Bisa diterapkan nich slide box kerennya utk saya pasang di blog, makasih mas Ri-Uz Athamir yg telah request artikel ini ke bang master, hehehe (f)

Balas

Selamat sore jelang Malam Mas Baskoro. keren artikelnya Mas bisa buat
Ngurangin bounce rate pada blog saya ijin bookmark Mas salam sukses deh Mas (c)

Balas

Saya juga ikutan mengeratkan tali silaturahmi antar Blogging Mas Dadang
Dan salam kenal yah Mas. Lho kenapa Mas Baskoro koq jarang Blogwalking
Saya kangen lho dengan Sahabat sebaik Mas Bas ini smangat aja Mas saya Support

Balas

Ijin saya boorkmark dulu mas, tertarik untuk menerapkan nya di blog saya.

Balas

sesuai judulnya, benar-benar keren (h)

Balas

Lumayan juga kode css yang mau disimpan ini mas,lain waktu diblog lain bisa dicoba mas :)

Balas

weh, keren slide box nya mas..

Balas

kodenya panjang banget, apa ndak bikin berat loading blog mas???

Balas

ijin bookmarks mas, barangkali butuh nanti :D

Balas

ohooo, kereeeen, request saya di jawab

Makasih banyak yah Mas, makasih makasih :)

:d iya sih, saya emang langganan baca blog ini, banyak ilmu pentingnya :)

Balas

keren jg ni sob.., makasih ya..
mf lg rajin blogwalking ni hhehe.. :>)

Balas

kodenya sangat menggelora hehee... banyak banget dan membuat saya mengurungkan niat untuk memasang :D trims udah share ya

Balas

Kebetulan saya sudah pasang Mas.. memang mantap slide box ini kelihata seperti blog profesional :)

Balas

maaf mas nanya itu yang kalau disentuh pindah sendiri itu ya
makasih

Balas

Terimakasih Untuk yang sudah berkomentar.

Balas

ijin bookmark dulu kang ;) ntar diprakteking ;)

hihi salam blogwalking

Balas

thanks mas infonya... segera meluncur...

Balas

<div class='post-footer' yang kedua maksudnya apa mas?

Balas

mohon solusi untuk slide box nggak jalan karena div class footernya hanya satu harus di simpan dimana posisi div class footer yang ke duanya di tunggu pencerahannya mampir
www.zaidans.blogspot.com

thank's

Balas

coba disimpan di div class footernya yang pertama lebih tepatnya dibawahnya.

Balas

masing-masing template beda karakteristik, coba cari code tersebut diblog kamu, and kalau cuma ada satu ya di kasih dibawahnya saja.

Balas

gak muncul gan kenapa ya ?? padahal udah disimpan div class='post-footer yang kedua :( mohon pencerahannya

Balas

saya sudah terapkan tapi kok gak muncul slinde box artikel mohon penjelasanya mass,
terus div class footer-nya hanya satu. harusnya berapa mas mohon penjelasanya mass yang diterapkan

voobo.blogspot.com

Balas

Terima Kasih atas kunjungan anda, merupakan suatu kehormatan bagi kami. Silahkan berikan komentar anda sesuai dengan aturan yang tercantum di bawah, insya Allah akan kami tanggapi.

Mohon maaf kalau mengganggu kenyamanan :
1. Komentar yang mengandung SPAM, pornografi dan iklan akan dihapus.
2. Mencantumkan link hidup akan otomatis dihapus.
3. Anda bisa mendapatkan back link dengan berkomentar sebagai Nama/URL.
4. Komentar dari Anonymous dianggap spam dan tidak akan di tanggapi.

Sekali lagi terima kasih atas kunjungannya :)

Copyright © 2014. Ikerenki - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger