Menunggu...

Cara Membuat Slide Box Rekomendasi

Cara Membuat Slide Box Rekomendasi
Sahabat blogger pemula yang baik hatinya, artikel cara membuat slide box rekomendasi ini adalah jawaban untuk sahabat Nur Abrar Isa yang menanyakan di salah satu kolom komentar.

Sekedar informasi slide box rekomendasi adalah sebuah widget blogger yang berfungsi untuk menawarkan / merekomendasikan kepada pembaca (pengunjung blog) tentang artikel lain yang mungkin diminati oleh pengunjung untuk dibaca.

Slide box rekomendasi ini muncul di sebelah kanan ketika pengunjung membaca sebuah artikel dan menggulirkan halaman kebawah, untuk lebih jelasnya silahkan sobat gulir kebawah halaman ini maka akan muncul slide box rekomendasi pada sisi kanan.

Isi dari box rekomendasi ini berupa related post dengan thumbnail, dan yang lebih menarik dari widget ini adalah box rekomendasi hanya muncul pada halaman postingan sementara pada halaman depan tidak akan dimunculkan. Selain menampilkan related post widget ini juga akan menampilkan rendom post ketika pengunjung berkali-kali mengunjungi halaman yang sama, keren kan??

Untuk sahabat yang ingin menerapkan box rekomendasi ini, silahkan ikuti beberapa langkah mudah berikut :

  • Setelah login ke pengaturan Template silahkan sobat klik Edit HTML
  • Cari kode ]]></b:skin> pada template HTML
  • Letakkan kode berikut tepat di atasnya
/* Related Post with Sliding */
 #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 CSS Related Post with Sliding */

  • Langkah berikutnya adalah cari kode </head> dan letakkan kode berikut tepat diatasnya
<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 selanjutnya yang terakhir adalah cari kode <div class='post-footer'> dan letakkan kode berikut tepat dibawah kode yang kedua
<!-- Related Post with Sliding -->
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIK9BT9Xbyp6tkzrKihue4yK_U8kBUencpUsaHfSRlqCLi2eGMgWkUU6MGbSensyrBnZsUIFSZ-4SFEpeBWoDV5bGGt5lzRsBD6aT0wc3lAYxLZq_EHQkjpUmMP1Jbbt_JdfW7fZ98/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/AVvXsEisVYRymX4tjOhkDfP1lALskBpa-QWd8Fj3xq80Es37LCJQh6CQ5SOTugfFRD7wRYCiRDpE2V8xJ5TQOHP1I8LL0FF2b7XcGr-2pZq6EQHUAkNSbJztv0CR7M6p14gTwmcxmjuK-f9p/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/AVvXsEguo2UrJORdOyLtq7qVTYLzyCO6Wtd54sHgquJ09cVUD8E8FDfa9OtoO7mJFtqDuWQ1Hzk76soyu988SVdFUdJXhqNqPF_hYCaDgx2h9AtmYdPNZ5K5s3o9mFP-XUUs8jiat3lKdikM/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 -->

  •  Silahkan Save template
Dalam memasukkan kode selalu perhatikan tulisan yang berwarna tebal, sobat bisa mengganti tulisan yang berwarna merah dengan kalimat yang sobat inginkan. Biasanya berupa " Rekomendasi untuk anda" atau "Artikel menarik lainya" bisa juga dengan kalimat lain yang sobat inginkan.

Kode diatas saya peroleh dari blognya Kang Ismet yang baik hatinya, untuk pertanyaan silahkan sobat sampaikan pada kolom komentar dibawah.
Salam dan terimaksih...
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 42 komentar:

avatar

Widget ini bagus, saya sering melihatnya di situs besar seperti merdeka, kompas, dll. Sehingga dengan pasang widget ini, bisa memeberikan referensi bacaan lebih banyak kepada para pengunjung blog :)

avatar

pada template saya, widget ini gk berhasil dipasang sob, entah kenapa, jadi malas pasangnya juga :D

avatar

keren dan asik sekali mas, banyak BW menemukan rekomendasi yang menggantung seperti ini, dan saya agak kepengen. hehehe

avatar

keren ya...seperti di inilahdotcom...saya jg jadi ingin mencoba :)

saya follow blognya ya mas

avatar

wah bisa di coba nih,, udah lama ga bongkar rumah . hehe

avatar

aku peke yang permanent saja ..nggak model slide :-)

avatar

sip deh mas.. dengan slid box ini pembaca akan merasa tertarik jika judul rekomendasi dalam box menarik.. sid deh.. ijin simpan dulu ya mas...??

avatar

Benar mba Ririn selain mempercantik penampilan widget ini juga akan memudahkan pengunjung untuk menelusuri artikel di blog kita, hehee :d

avatar

Silahkan dicoba mas Agus :)

avatar

Jadi terlihat lebih menarik dari yang biasanya ya?? Silahkan sob,, saya akan follow back :d

avatar

Sesekali rumah perlu di cat ulang agar terlihat lebih indah :d

avatar

Mungkin karena lebih sederhana ya gan? kembali keselera masing2 :))

avatar

Ok silahkan sahabat Nady :)

avatar

Coba letakkan kode yang ketiga diatas kode div class='post-footer' yang kedua sob, semoga berhasil, pada template tertentu memang kadang tidak berfungsi.. :)

avatar

bkini berat kaga gan?

avatar

Tidak terlalu memberatkan ko, sobat bisa test di blog ini.. berat gak?? :)

avatar

website besar seperti website saya ya. :p :p memang jadi lebih ngetren widget.

avatar

Maklum dia pemula sob hahaha :p

avatar

Ya itu salah satunya sob,, :)

avatar

Sepertinya kalau masih menggunakan domain blogspot, kurang tepat disebut website mas hehe :D :)

avatar

Menarik artikelnya sangat membantu para sobat blogging
seperti saya, karena dengan adanya widget Rekomendasi ini
Artikel kita yang dulu terpendam bisa di munculkan oleh widget
Ini secara Otomatic, nice share nya :D Salam sukses Mas Adjie :) hh :-)

avatar

Wah ramai dan antosias yah dengan widget Rekomendasi ini
Sampai Sobat Master blogger dan Master Web site ada semua
Salam saja (h) saya blogging Pemula (f) yang masih harus
Kerja keras :-s untuk bisa berbagi untuk bisa berguna buat Sobat :))

avatar

(c) diminum dulu kopinya sob :d

avatar

Yang ini tidak demo ya...baru tau saya..
maaf lambat singgah

avatar

wah.. sama nih blogger pemula, terima kasih nih tutorialnya, sangat bermanfaat heheheh.. :)

avatar

intan@
pasang saja kode pemanggil pas dibawah artikel terkait sebelumnya. pastikan Jquery anda dengan versi 1.8.3. tidak ada template yang tak dapat menggunakan tutorial ini.

avatar

thx gan, ditunggu kunnjungan baliknya

http://diakuin.blogspot.com

avatar

Thanks sahabat Leony Li, sukses dengan horornya, ckckckckckk :d

avatar

pengen masang,.. .tapi pengunjung masih sedikit dan juga gak stabil, .. .smoga saja bisa seperti pengunjungnya mas Adjie umbara,.. . (o)

avatar

Lebih aktif lagi Blogwalkingnya sob, amiin...

avatar

Saya pasang di temlate saya kok tidak muncul yah gan??dan kode div class='post-footer' cuma ada satu,terimaksih...mohon pencerahan nya gan.

avatar

Sama punya saya juga gak bisa, code ini cuma ada satu, jadi dimana letak yg keduanya ??? :-)

avatar

Nggak berhasil-berhasil sob

avatar

thanks gan info nya... akan meluncur..

avatar

di blog ane ko ga jalan ya! apanya yang salah? mohon pencerahannya!

avatar

masih gabisa gan , knpa yah?

avatar

mantha gan,mampir juga ke blog saya gan http://si-kudil.blogspot.com/

avatar

wah cocok nih di pasang di blog saya

avatar

makasih infonya jangan lupa mampir di
gegesek.blogspot.com tentang ilmu pengetahuan
musikhehe.blogspot.com tentang download musik

avatar

thanx, this is very Informational Post to Read now I am Waiting for your next post
Descolab

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda