Membuat Slide Related Post di Blog - Recommended Slide

Ilmu Informatika : Membuat Slide Related Post di Blog - Recommended Slide. Mungkin beberapa dari temen-temen pernah melihat slide recommended dari website-website yang pernah anda kunjungi. Gimana menurut sobat? Apakah akan tertarik untuk membuka yang ditawarkan?
Tentunya akan membuat pengunjung lebih tertarik untuk membukanya, karena bersifat interaktif dengan kata lain bergerak dan meminta diklik tanpa mengganggu pengunjung saat menikmati membaca artikel dan tentunya slide recommended ini yang ditawarkan memiliki kaitan dengan artikel yang dibaca karena slide recommended ini merupakan related post dengan thumbnail.

Berikut adalah tampilan dari slide recommended.

Membuat sliding related post

1. Buka blogger -> Template -> Edit HTML. (Usahakan untuk membackup template terlebih dahulu)

2. Cari kode ]]></b:skin> kemudian pastekan kode berikut diatasnya.

/* Related Post with Sliding CSS isrul.com */
#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 */ 

3. Copy kode berikut diatas </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>

4. Simpan kode berikut dibawah <div class='post-footer'> atau dibawah related post.

<!-- Related Post with Sliding isrul.com -->
<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 Menarik Lainnya</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 -->

Kekurangan dari code ini adalah jika anda menggunakan script related post dari Taufik Nurrohman => http://gplus.to/tovic maka related post anda tidak akan muncul, melainkan yang muncul hanya slide recommended saja.
Demikian artikel mengenai Membuat Slide Related Post di Blog - Recommended Slide. Semoga bermanfaat untuk sobat semua.
Nikmati Jasa & Layanan yang ada di www.isrul.com, diantaranya:
1. Jasa Pembuatan dan Verifikasi Akun Paypal dengan VCC (Valid 2 atau 3 Tahun)
2. Jual Akun Adsense Non Hosted Indonesia (0899-5832-699)
3. Penulis Tamu di Isrul.com

0 Response to "Membuat Slide Related Post di Blog - Recommended Slide"

Post a Comment

Jika anda bertanya, jangan lupa mencentang "Notify Me" di bagian kanan bawah, agar mendapat pemberitahuan jika pertanyaan anda telah kami jawab.
Terimakasih telah menyempatkan waktu berkomentar...