Tips Cara Mudah Membuat Widget Random Post dengan Gambar atau Thumbnail di Blog
Pada hari-hari menunggu panggilan kerja ini, penulis akan memaparkan tips atau cara mudah membuat widget random post di blog.
Baca Juga:
Bagi sobat yang ingin menampilkan post secara acak di blog sobat silahkan mengikuti tutorial dibawah ini:
- Pertama-tama silahkan sobat login terlebih dahulu di blogger
- Klik menu tata letak yang berada disamping kanan
- Lalu klik tulisan berwana biru “Tambahkan Gadget” seperti gambar dibawah ini:
- Maka akan muncul tampilan seperti dibawah ini:
- Selanjutnya silahkan sobat klik HTML/Java Script seperti gambar di atas
- Lalu masukan kode dibawah ini:
<style>
#random-posts img{border-radius: 50px</span>;float:left;margin-right:5px;
width:75px;height:75px;background-color: #FFFFF;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id=’random-posts’>
<script type=’text/javaScript’>
var rdp_numposts=5;
var rdp_snippet_length=120;
var rdp_info=’no’;
var rdp_comment=’comment’;
var rdp_disable=’Comments Disabled’;
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’>
function random_posts(json){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)+”…”;};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;var rdp_postdate=entry.published.$t;if(‘media$thumbnail’in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwS8Blhjcw4PjEOfF1MgQT1tYG5vEpb3SbCfxmQFeN-ASjKgew_3b9fscy7hgPM64TIIoV0J1MUQWR0zi5aB9aoytY3qXMpg4Pnv1MxO2fr39ShX4mwk5pBEXXR3XCN4jrkWDWabxUZUw/s1600/no-image-available.jpg“}}};document.write(‘<li>’);document.write(‘<a href=”‘+rdp_posturl+’” rel=”nofollow”><img alt=”‘+rdp_posttitle+’” src=”‘+rdp_thumb+’”/></a>’);document.write(‘<div><a href=”‘+rdp_posturl+’” rel=”nofollow” title=”‘+rdp_snippet+’”>’+rdp_posttitle+'</a></div>’);if(rdp_info==’yes’){document.write(‘<span><div class=”rp-info”>’+rdp_postdate.substring(8,10)+’/’+rdp_postdate.substring(5,7)+’/’+rdp_postdate.substring(0,4)+’ – ‘+rdp_commentsNum)+'</div></span>’};document.write(‘<div class=”rp-snippet”>’+rdp_snippet+'</div><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>
Note:
border-radius: 50px = jika sobat ingin gambarnya kotak silahkan rubah 50px menjadi 0px
var rdp_numposts=5; = untuk mengatur jumlah post yang akan ditampilkan
var rdp_snippet_length=120; = untuk mengatur jumlah kata yang akan di tampilkan
var rdp_info=’no’; = ganti dengan yes jika ingin menampilkan info post
var rdp_comment=’comment’; = kata comment akan muncul bila di bagian info sobat memilih yes, sobat bisa menggantinya dengan kata lain, komentar misalnya.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwS8Blhjcw4PjEOfF1MgQT1tYG5vEpb3SbCfxmQFeN-ASjKgew_3b9fscy7hgPM64TIIoV0J1MUQWR0zi5aB9aoytY3qXMpg4Pnv1MxO2fr39ShX4mwk5pBEXXR3XCN4jrkWDWabxUZUw/s1600/no-image-available.jpg = adalah link gambar untuk menampilkan gambar pada post yang tidak memiliki gambar. Sobat bisa menggantinya dengan gambar sobat.
sumber: tutorial89
- Nah terakhir silahkan klik simpan
Setelah itu silahkan test membuka blog sobat, apakah skrip yang ditanamkan dapat memunculkan random post atau tidak.
Jika skripnya berjalan maka akan memunculkan gambar seperti dibawah ini:
Jika dengan menggunakan kode skrip di atas tidak berhasil, cobalah dengan menggunakan kode
versi arlina design dibawah ini:
<style scoped='' type="text/css">#caretet-random ul{list-style:none;margin:0;padding:0}#caretet-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}#caretet-random li:last-child{border-bottom:0;}#caretet-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}</style><div id='caretet-random'>Memuat...</div><script>//<![CDATA[// Random Post Widgetvar homePage = 'https://www.caretet.com', maxResults = 10, containerId = 'arlina-random';function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;}function shuffleArray(arr) { var i = arr.length, j, temp; if (i === 0) return false; while (--i) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr;}function caretetRandomPosts(json) { var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');}function randomPosts(json) { var link, ct = document.getElementById(containerId), entry = shuffleArray(json.feed.entry), skeleton = "<ul>"; for (var i = 0, len = entry.length; i < len; i++) { for (var j = 0, jen = entry[i].link.length; j < jen; j++) { link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; } skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; } ct.innerHTML = skeleton + '</ul>';}document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=caretetRandomPosts"></scr' + 'ipt>');//]]></script>Note:
- Silahkan sobat ubah homepage dan maxresults yang sudah penulis tandai sesuai dengan kebutuhan sobat.
Namun, jika masih saja tidak berhasil, maka sebenarnya yang bermasalah bukanlah script diatas. Melaikan theme/ template yang sobat gunakan tidak sesuai dengan skirp. Sebaiknya sobat hubungi penyedia template blog sobat, atau silahkan sobat lihat lagi dokumen yang diberikan oleh penyedia template yang sobat gunakan.
Nah itu lah tutorial membuat widget random post, semoga bermanfaat. Thanks and regard
