Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Membuat Slide Box Rekomendasi di Blogger

Membuat Slide Box Rekomendasi di Blogger-Pernahkah Anda melihat blog/web yang menggunakan Slide box dengan bertulisan Rekomendasi untuk Anda, lebih tepatnya kotak yang bergeser kesamping ketika mouse digulir kebawah.

Untuk lebih jelasnya Anda dapat melihat demonya dengan menggulirkan mouse Anda kebawah akan muncul kotak slide disebelah kanan bawah. Anda juga dapat memasang kotak tersebut pada blog Anda dengan menambah script pada template.

Kode ini saya dapatkan dari blognya kang ismet dan sudah saya gunakan langkah-langkah ini pada blog saya yang satu lagi dan berhasil. Bagi Anda yang tertarik ingin memasang Slid Box Rekomendasi di Blogger berikut ini adalah langkah-langkahnya:

  • Langkah pertama cari kode ]]></b:skin>
  • Copy kode dibawah ini lalu pastekan diatas kode ]]></b:skin>
Klik Untuk Membuka
/* 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 */
  • Langkah kedua cari kode </head> lalu copy dan pastekan kode dibawah in tepat datas kode </head>
Klik Untuk Membuka
<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>

  • Langkah ketiga cari kode <div class=’post-footer’> yang ke 2, lalu copy dan paste kode dibawah ini dibawah kode <div class=’post-footer’>
Klik Untuk Membuka
<!– 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;’>Rekomendasi 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 –>

Langkah terakhir simpan.

Sedangkan jika Anda pengguna wordpress, nanti saya akan buatkan langkah-langkahnya di artikel selanjutnya. Mungkin cukup sekian untuk artikel kali ini tentang Membuat Slide Box Rekomendasi di Blogger semoga artikel kali ini dapat bermanfaat.

Loading...

Add a Comment

Your email address will not be published. Required fields are marked *

More in Blogger
Cara Memasang atau Mengaktifkan Komentar Google+ di Blogger

Cara Memasang atau Mengaktifkan Komentar Google+ di Blogger-Sebelumnya Admin seudah...

Close