Slide Recommended Widget With Random Posts Blogger

Slide Recommended Widget With Random Posts Blogger

Bola Hero Gawai

Slide Recommended Widget With Random Posts Blogger

Slide Recommended Widget
Hal ini tentunya sudah banyak beredar dengan tutorial yang +Kang Ismet buat yang diambil dari jquery sliding statis social widget. Dan kali ini saya akan membuat hal serupa yaitu slide recommended widget yang diisi dengan random posts yang disertai gambar.


Namun kali ini saya akan membuat widget recommended ini dengan jquery yang lebih sederhana sehingga akan lebih mudah dipahami dan gampang dalam penulisannya. Seperti telah kita ketahui, widget ini akan terbuka (slide) di sisi blog ketika halaman postingan di-scroll atau digulung dan disembunyikan kembali dengan menekan tombol close. Silahkan lihat demonya pada link di bawah ini.


Untuk mencobanya, silahkan copy kode-kode di bawah ini.

Kode CSS


.slidebox {
    position:fixed;
    bottom:100px;
    right:-300px;
    width:290px;
    height:150px;
    font-size:30px;
    color:white;
    background:#333;
    transition:all .4s ease-in-out;
    padding-right:10px;
    border-radius:3px 0 0 3px;
}
.header-slidebox{
    position:absolute;
    top:0;
    left:0;
    text-align:left;
    font-family:Arial;
    font-size:18px;
    font-weight:400;
    background:#505050;
    border-bottom:1px solid #282828;
    padding:0 10px;
    height:30px;
    width:100%;
    line-height:30px;
    border-radius:3px 0 0;
}
.closeslidebox{
    color:#333;
    position:absolute;
    top:0px;
    right:0px;
    font-family:Arial;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    background:#ddd;
    text-align:center;
    width:30px;
    height:30px;
    line-height:30px;
    border-bottom:1px solid #282828;
    transition:all .3s ease-in-out;
}
.closeslidebox:hover{
    background:#cacaca;
}
#random-posts img{
    float:left;
    margin:0 10px 10px 0;
    background:#FFF;
    width:130px;
    height:100px;
    padding:0;
    transition:all .3s ease-in-out;
    border-radius:3px;
}
#random-posts img:hover{
    opacity:.7;
}
ul#random-posts{
    list-style:none;
    margin-top:40px;
    margin-left:-30px;
    font-family:Arial;
    font-size:16px;
    line-height:1.2em;
}
ul#random-posts li a{
    color:#eee;
    text-decoration:none;
}
.readmorerandom a{
    position:absolute;
    bottom:0;
    right:0;
    font-family:Arial;
    font-size:14px;
    font-weight:400;
    background:#505050;
    text-align:center;
    display:block;
    padding:2px 8px;
    transition:all .3s ease-in-out;
    color:#eee!important;
    border-radius:3px 0 0
}
.readmorerandom:hover a{
    color:#333!important;
    background:#cacaca;
}

Kode HTML Dan JavaScript
Silahkan simpan kode di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='slidebox'>
  <div class='header-slidebox'>Recommended For You</div>
<ul id='random-posts'>
<script type='text/javascript'>
//<![CDATA[
var rdp_numposts=1;
var rdp_snippet_length=100;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
    function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');document.write('<div class="readmorerandom"><a href="'+rdp_posturl+'" rel="nofollow" title="Read More">Read More</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
//]]>
</script>
</ul>
    <div class='closeslidebox'>&#215;</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
    if ($(this).scrollTop() > 400) {
       $('.slidebox').stop().animate({ right: '0px' });
    }
});
$(function() {
    $('.closeslidebox').click(function () {
    $('.slidebox').css({right:'-300px'});
    $('.slidebox').fadeOut();
});
     });
});
//]]>
</script>
</b:if>

Widget ini akan muncul ketika halaman blog di-scroll, dan setelah ditutup dengan klik tombol close maka widget ini tidak akan muncul lagi walaupun halaman digulung berulang-ulang.

Jika ingin widget ini bisa keluar lagi ketika halaman di-scroll lagi setelah tombol close diklik, silahkan hapus kode berikut ini pada kumpulan kode javascript yang paling bawah.


$('.slidebox').fadeOut();

Selesai... Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

15 Comments Add Comment

Heheehehe silahkan mas :)

Balas

Kang lamun eusi rekomendasina kmh urnk kmh tah??

Balas

Maksadna kang Kudhen hoyong kode random posts na hungkul?

Balas

Eta geuning kang, pami di scroll th pan an muncul random post snes? tah ieu mh nu munculna th ulah random post tp khyg urnk nyalira,manual intinamah..

Balas

Akhirnya ketemu juga :-d

Balas

Warnanya kalo diedit lagi bisa tambah keren kali ya :D

Balas

ijin bookmark dulu mas Adhi,
belum punya waktu buat ngoprek template lagi.. :)

Balas

di liat dari demonya kok,agak lambat munculnya ya mas,apa karena line internetku yg lemah ya?
mas kalo buat template kompi males jadi ful lebarnya dan menunya jadi seperti kompi ajaib sekarang ini gimana?
share tutornya ya......
*Maksa ;)

Balas

Coba hapus css yang berhubungan dg random-posts kemudian hapus kode html dari kode <ul id='random-posts'> sampai </ul>

Demo: http://jsfiddle.net/kompiajaib/35p8ob74/2/

Balas

Heheheehe akhirnya ya mas :)

Balas

Iya silahkan edit sesuai selera mas :)

Balas

Silahkan mas :)

Balas

Iya karena settingnya seperti itu harus lebih ke bawah dulu baru muncul, coba silahkan perkecil angka 400 pada javascript paling bawah misalnya jadi 100.

Hehehehe maksa ni yee hehehe :D iya nanti saya coba buatkan :)

Balas

Keren kang :D tapi udh ada sy diblog, hehehe.. bookmark aja dah siapa tau mau ganti model.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×