Cara Membuat Slider Recomended Posts Widget Mirip Kaskus

July 24, 2015 /
Recomended Posts with Slider - Salam ganteng dan semoga elu dalam keadaan ganteng-ganteng aja. Tempo hari, gue udah bilang sebelumnya gue bakalan tulis semua hal yang berhubungan dengan blog ini, baik desain ataupun tulisan.

Karena gue orangnya gak pernah ingkar janji. Maka kali ini gue mau berbagi cara bikin slider, pop-up atau apa kek suka-suka elu mau nya disebut apa ini widget. Tapi gue pribadi nyebutnya "Ciluk-Baa Recomended Posts" - nyahaha~


Cara Membuat "Ciluk-Baa" Slider Recomended Posts Widget


Sebenernya tutorial atau cara ini bukan asli bikinan gue bray. Ini aslinya gue dapet dari blog nya Kompiajaib, cuma gue rubah-rubah dikit biar nyetel ama tampilan blog gue yang sama gantengnya kaya gue. Temen gue bilang sih, "agak" mirip slide recomended for you-nya kaskus, entahlah.

Recomended For You Widget

Nah kalo punya nya Kang Adhy, kurang lebih penampakanya kaya gitu bray. Keren kan bray?
Bedanya sama punya gue, kalo punya gue gak pake gambar dan gak ada read more nya bray.
Jadi buat elu yang satu selera sama gue, elu tinggal pake aja punya gue bray.

Cara Pemasangya enteng bray. Simak baek-baek, niscaya blog elu akan semakin seru.
Pertama elu kudu punya blog -haha beneran tapi bray ah elahhh~
Kedua, elu tau lah harus kemana. Template - Edit HTML
Kemudian elu taro lah CSS dibawah ini pada tempatnya, inget bray jangan taro di atas meja apalagi di kulkas, yang bener itu di simpen di atas penutup </b:skin> atau </style>


.slidebox {position:fixed;bottom:100px;right:-300px;width:290px;height:150px;font-size:12px;color:#444;background:#fff;transition:all .4s ease-in-out;padding-right:10px;border:1px solid #E3E3E3;border-radius:3px 0 0 3px;}
.header-slidebox{position:absolute;top:0;left:0;text-align:left;font-size:12px;font-weight:600;background:#f5f5f5;border-left:5px solid #3A99D9;border-bottom:1px solid #E3E3E3;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-size:12px;font-weight:400;cursor:pointer;background:#f5f5f5;text-align:center;width:30px;height:30px;line-height:30px;transition:all .3s ease-in-out;}
.closeslidebox:hover{background:#f5f5f5;}
#random-posts img{display:none;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:10px;font-size:12px;line-height:2.2em;}
ul#random-posts li a{color:#3A99D9;text-decoration:none;border-bottom:1px dashed #e3e3e3;}

Kemudian elu cari dah tuh kode </body>
Kalo udah ketemu, elu tinggal simpen kode HTML ama JavaScript dibawah ini. Inget simpenya di atas </body> bray.


<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() > 250) {

       $('.slidebox').stop().animate({ right: '0px' });

    }

});

$(function() { 

    $('.closeslidebox').click(function () {

    $('.slidebox').css({right:'-300px'});

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

});

     });

});

//]]> 

</script>

</b:if>

Seperti yang elu liat pada blog gue, "Ciluk-Baa" Recomended Posts Widget ini bakalan muncul ketika elu melakukan scroll ke bawah. Kalo punya gue munculnya rada atasan dikit, mungkin tengah-tengah kali ya?

Tapi kalo elu mau munculnya entaran aja begitu udah di scroll sampe bawah, elu bisa atur di bagian if ($(this).scrollTop() > 250) { ini. Ubah yang 250 itu ke angka yang lebih tinggi, misal 300 atau 400, pokoknya elu coba-coba aja dah.

Sekian unusual tips gue kali ini. Kalo bingung, tanya aja rumput yang bergoyang, kalo gak goyang jangan elu tanya bray. Soalnya doski gak tau apa-apa -haha~

Pokoknya kalo elu tanya, gue jawab sebisa dan setau gue. Karena gue bukan orang yang pinter ngajarin orang apalagi ngasih tutor ama orang. Lah orang gue aja masih perlu di ajarin.
Yo bay!
Previous
Next Post »

Mau dapetin update-an terbaru untuk setiap artikel dan tulisan menarik dari blog Bete Gak Sih?

Subscribe aja bray!

2 komentar

Write komentar
Rachmat Andrian
13 May, 2015

KEREN CUK

Reply
avatar
13 May, 2015

sebanding lah sama yang punya

Reply
avatar