Seperti yang kita ketahui bahwa widget
Random post
mampu menampilkan artikel blog kita secara acak dan bergantian pada saat widget tersebut kita load (bekerja), dimana
Script
widget tersebut akan menampilkan beberapa artikel/postingan blog kita sesuai dengan pengaturan yang kita terapkan pada
Script widget tersebut dengan cara mengatur nilai yang akan di tampilkan, sebagai contoh
maxResults = 7;
script tersebut akan menampilkan artikel/postingan acak sebanyak (
7) artikel.
Akan tetapi mau tidak mau Saya harus mengatakan bahwa widget
random post
itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan
membuang-buang tenaga, karena mereka bekerja dengan cara memanggil
feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:
<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>
Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget
random post
termasuk juga widget artikel terkait tanpa sadar telah menerima beban
begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget
random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka
semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter
max-results
pada
feed menunjukkan angka
99999
yang artinya bahwa semua
feed posting akan “diusahakan” untuk dipanggil (
diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).
Mengacak Indeks Permulaan
Saya menyadari terdapat sebuah peluang untuk menciptakan widget
random post
yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting
dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih
baik jika kita mengacak nilai
start-index
pada
feed sehingga posting yang dimuat bisa dimulai dari urutan sembarang:
- function randomPosts(json) {
- // Ubah JSON menjadi HTML...
- }
-
- var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
- document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');
Ada
satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang
tercipta nilainya lebih besar dari total posting blog Anda saat ini,
maka widget
random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari
1
dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.
Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek
json.feed.openSearch$totalResults.$t
:
- // Konfigurasi
- var homePage = 'http://nama_blog.blogspot.com',
- maxResults = 7;
-
- // Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- // Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
- function createRandomPostsStartIndex(json) {
- // Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
- var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
- // Tampilkan pesan log
- 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&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan
log indeks pemanggilan posting yang berubah-ubah seperti ini:
Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter
start-index
seperti ini:
- function createRandomPostsStartIndex(json) {
- var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - 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>');
- }
Pada bagian akhir URL
feed terdapat parameter
callback=randomPosts
.
randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON
Blogger menjadi widget:
- function randomPosts(json) {
- var link, ct = document.getElementById('random-post-container'),
- entry = 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>';
- }
Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi pengacak
array
sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:
- // Fungsi untuk mengacak array
- 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;
- }
-
- // Widget
- function randomPosts(json) {
- var link, ct = document.getElementById('random-post-container'),
- 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>';
- }
Hasil Akhir Tanpa Thumbnail Dan Css
- <div id='random-post-container'>Memuat...</div>
-
- <script type="text/javascript">
- //<![CDATA[
- // Feed configuration
- var homePage = 'http://nama_blog.blogspot.com',
- maxResults = 7,
- containerId = 'random-post-container';
-
- // Function to generate random number limited from `min` to `max`
- // Used to create a valid and safe random feed `start-index`
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- // Function to shuffle arrays
- // Used to randomize order of the generated JSON feed
- 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;
- }
-
- // Get a random start index
- function createRandomPostsStartIndex(json) {
- var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
- if (window.console && window.console.log) 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>');
- }
-
- // Widget's main function
- 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=createRandomPostsStartIndex"></scr' + 'ipt>');
- //]]>
- </script>
Dengan Thumbnail Dan Deskripsi
- <div id='random-post-container'>Memuat...</div>
-
- <script type="text/javascript">
- //<![CDATA[
- // Feed configuration
- var homePage = 'http://nama_blog.blogspot.com',
- maxResults = 7,
- summaryLength = 170,
- noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
- containerId = 'random-post-container';
-
- // Function to generate random number limited from `min` to `max`
- // Used to create a valid and safe random feed `start-index`
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- // Function to shuffle arrays
- // Used to randomize order of the generated JSON feed
- 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;
- }
-
- // Get a random start index
- function createRandomPostsStartIndex(json) {
- var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
- if (window.console && window.console.log) 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>');
- }
-
- // Widget's main function
- function randomPosts(json) {
- var link, summary, img,
- ct = document.getElementById(containerId),
- entry = shuffleArray(json.feed.entry),
- skeleton = "<ul>";
- for (var i = 0, len = entry.length; i < len; i++) {
- summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '…' : "";
- img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
- 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>';
- skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
- skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
- skeleton += '<span>' + summary + '</span>';
- skeleton += '<span class="clear"></span></li>';
- }
- ct.innerHTML = skeleton + '</ul>';
- }
-
- document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
- //]]>
- </script>
Hasil Akhir Dengan Sedikit Sentuhan Css Tanpa Thumbnail Dan Deskripsi
- <style type='text/css'>
- #random-post-container {
- width: auto;
- margin-left: 15px;
- }
-
- #random-post-container ul {
- margin: 7px 0 0;
- padding: 0;
- }
-
- #random-post-container li {
- list-style: none;
- margin: 0 0 2px;
- background-color: #e5e5e5;
- padding: 0 7px 0 7px;
- line-height: 24px;
- height: 24px;
- overflow: hidden;
- border-bottom: 1px dotted #ccc;
- }
-
- #random-post-container a {
- text-decoration: none;
- }
-
- #random-post-container a:hover {
- text-decoration: underline;
- }
-
- #random-post-container strong {
- font: normal bold 13px/1.4 Arial,Sans-Serif;
- }
- </style>
- <div id='random-post-container'>Memuat...</div>
- <script type='text/javascript'>
- //<![CDATA[
- /* Performa Widget Random Post
- * By Anarchyta
- * http://bit.ly/anarchyta
- * http://plus.google.com/118396814444756975267/posts
- */
-
- var homePage = 'http://nama_blog.blogspot.com',
- maxResults = 7,
- containerId = 'random-post-container';
- // Function to generate random number limited from `min` to `max`
- // Used to create a valid and safe random feed `start-index`
-
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
- // Function to shuffle arrays
- // Used to randomize order of the generated JSON feed
-
- 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;
- }
- // Get a random start index
-
- function createRandomPostsStartIndex(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>');
- }
- // Widget's main function
-
- function randomPosts(json) {
- var link, ct = document.getElementById(containerId),
- entry = shuffleArray(json.feed.entry),
- skeleton = "<strong>Random Post</strong><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=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">►DH-F</a></div>');
- //]]>
- </script>
Menggunakan Thumbnail Dan Deskripsi
- <style type='text/css'>
- #random-post-container {
- margin-bottom: 5px;
- background-color: #333;
- border: 4px solid #ddd;
- width: 400px;
- // Style by: www.dhf.web.id/;
- }
-
- #random-post-container a {
- text-decoration: none;
- color: #fff;
- }
-
- #random-post-container a:hover {
- text-decoration: underline;
- }
-
- #random-post-container ul {
- padding: 0 7px;
- }
-
- #random-post-container li {
- border-top: 1px solid #444;
- border-bottom: 1px solid #222;
- padding: 5px 7px;
- color: #aaa;
- list-style: none;
- overflow: hidden;
- }
-
- #random-post-container img {
- display: block;
- float: left;
- margin: 2px 7px 5px 0;
- padding: 4px 4px;
- background-color: #222;
- border: 1px solid #111;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- -webkit-box-shadow: 0 1px 0 #444;
- -moz-box-shadow: 0 1px 0 #444;
- box-shadow: 0 1px 0 #444;
- }
-
- #random-post-container a {
- font-weight: bold;
- font-size: 110%;
- }
-
- #random-post-container .clear {
- display: block;
- clear: both;
- }
- </style>
- <div id='random-post-container'>Memuat...</div>
-
- <script type='text/javascript'>
- //<![CDATA[
- /* Performa Widget Random Post
- * By Anarchyta
- * http://bit.ly/anarchyta
- * http://plus.google.com/118396814444756975267/posts
- */
-
- // Feed configuration
- var homePage = 'http://nama_blog.blogspot.com',
- maxResults = 5,
- summaryLength = 150,
- noImageUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkah71WkV1WMS_UejZw1aAU1BuB2aw0wiiH6yug-ies3L8rpQKAh04l-HB9UD7fVgFRhr3gyRxPrrV4B5SYcpf-k5yixLxosne6cTFdmL9kH4e833nDNaeXf-C_veeIzcbCmQjewgAoHpd/s1600/dHF-logo1.png',
- containerId = 'random-post-container';
-
- // Function to generate random number limited from `min` to `max`
- // Used to create a valid and safe random feed `start-index`
-
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- // Function to shuffle arrays
- // Used to randomize order of the generated JSON feed
-
- 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;
- }
-
- // Get a random start index
-
- function createRandomPostsStartIndex(json) {
- var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
- if (window.console && window.console.log) 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>');
- }
-
- // Widget's main function
-
- function randomPosts(json) {
- var link, summary, img,
- ct = document.getElementById(containerId),
- entry = shuffleArray(json.feed.entry),
- skeleton = "<ul>";
- for (var i = 0, len = entry.length; i < len; i++) {
- summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '…' : "";
- img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
- 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>';
- skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
- skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
- skeleton += '<span>' + summary + '</span>';
- skeleton += '<span class="clear"></span></li>';
- }
- ct.innerHTML = skeleton + '</ul>';
- }
-
- document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:18px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">►DH-F</a></div>');
- //]]>
- </script>