Beranda / Bisnis online

Cara Membuat Widget Random Post yang Dapat Meningkatkan Viewer Blog

Oleh Admin X Posting Komentar
Navigasi Info - Widget Random post ( Artikel Acak ) kegunaannya kurang lebih hampir sama dengan populer post yang terdapat pada widget blogger bawaan yang mana berfungsi untuk menampilkan artikel yang terdapat pada blog kalian.

Cara Membuat Widget Random Post
Cara Membuat Widget Random Post

Tetapi jika kalian menggunakan widget populer post itu hanya menampilkan artikel - artikel yang sering di akses oleh pembaca tidak dapat memaksimalkan kegunaan widget tersebut untuk menampilkan berbagai artikel yang terdapat pada blog kalian .

Sedangkan jika kalian menggunakan widget random post ia akan menampilkan berbagai artikel dalam blog kalian secara acak dengan kata lain artikel yang tampil di widget random post bervariasi sehingga besar kemungkinan para pengunjung blog kalian akan mengeklik / mengakses artikel yang tampil di widget random post tersebut sehingga itu akan meningkatkan viewer blog kalian.

Selain itu pembaca kalian akan lebih berlama - lama membaca blog kalian dikarenakan mereka dapat melihat berbagai artikel yang ada di blog kalian.

Oleh sebab itu saya akan membagikan kodingan tentang cara membuat widget random post dibawah ini.

Cara Membuat Widget Random Post

Jika kalian masih bingung kalian bisa mengikuti langkah-langkahnya untuk membuat widget random post pada video di bawah ini :



Cara Membuat Widget Random Post Bergambar


<style>#random-posts img{border-radius: 0px;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: 13px;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=4;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)+"&#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;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/AVvXsEiyLT0dL-g53Ec2uUfkZD1sMhqt0w7iDNPBe2ccnxEyRM42xZHh7uYF-wgyWk654YInr6gFOlAINy-30eWlp6oF0u5FNHKFKK8X8OBTzWCcHkvTbek8YWfIXFhQWCD9hBN14iPF29XfABNh/s1600/diet-langsing-wanita-Jepang.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>
Noter : Nomor berwarna biru di ganti untuk menentukan jumlah artikel yang tampil.

  • Pertama - Tama copy koding diatas
layout / tata letak
layout / tata letak

  • Kemudian menuju dasbor blog kalian
  • Lalu pilih layout / tata letak
add a gadget

add a gadget

  • Selanjutnya klik add a gadget
HTML/JavaScript

HTML/JavaScript

  • Langkah berikutnya pilih HTML/JavaScript
  • Berikutnya paste / tempel koding
  • Langkah akhir save / simpan

Tampilannya seperti gambar di bawah ini
Cara Membuat Widget Random Post
Widget Random Post gambar

Cara buat random post dengan gambar berbentuk lingkaran


<style>#random-posts img{border-radius:50px ;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: 13px;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)+"&#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;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/AVvXsEhoHACtj7vCaBs2ZWu2aq6EPE5dRPBTHqkYt-N9ErGyfB7Zir7Oa9ejb9dJnBPdOb3Ka3M1shXxMCpzknHhvak0dJAdOWxQaEHbV1brYCJ7ayi0rU-Zc7Wn-YZwqgdRPNPZijXSYdKVsMI/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>
 Noter : Nomor berwarna biru di ganti untuk menentukan jumlah artikel yang tampil.
  1. Pertama - Tama copy koding diatas
  2. Kemudian menuju dasbor blog kalian
  3. Lalu pilih layout / tata letak
  4. Selanjutnya klik add a gadget
  5. Langkah berikutnya pilih HTML/JavaScript
  6. Berikutnya paste / tempel koding
  7. Langkah akhir save / simpan


Tampilannya seperti gambar di bawah ini.

Random post gambar berbentuk lingkaran

Random post gambar berbentuk lingkaran


Cara Membuat Widget Random Post Text dengan anak panah


<style> #bo-rp-box { float: left; margin-bottom: 10px; margin-top: 0px; } #bo-rp-box ul { margin: 0px; float: left; margin-left: 20px; padding: 0px; } #bo-rp-box li { vertical-align: middle; list-style: disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rsWyMRZjQ7v9GpJqI1zEHkqOQFWBnMFQMWjxiel8Ox5CBSS8zFSqkyTQyAf6899iz6C2xUi3rzJ4-6iDWHGh_SJa3CgaPjmUZhhipAArUDOKczgfh0FUALb-WDuX-Tdq1bqrwdM0V3VJ/s1600/b1.png"); margin-bottom: 0; width: auto; margin-top: 0; padding: 10px 0; } #bo-rp-box a { color: #0F0F0F; text-decoration: none; font-size: 14px; } #bo-rp-box a:visited { text-decoration: none; color: blue; } #bo-rp-box a:hover { color: blue; } </style> <script> function rp_results_label(r) { for(var e=0;e<r.feed.entry.length;e++){var l=r.feed.entry[e];rpTitles[rpTitlesNumb]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){rpUrls[rpTitlesNumb]=l.link[t].href,rpTitlesNumb++;break; }}} function removeRandomDuplicate() { for(var r=new Array(0),e=new Array(0),l=0;l<rpUrls.length;l++)contains(r,rpUrls[l])||(r.length+=1,r[r.length-1]=rpUrls[l],e.length+=1,e[e.length-1]=rpTitles[l]);rpTitles=e,rpUrls=r; } function contains(r,e) { for(var l=0;l<r.length;l++)if(r[l]==e)return!0;return!1; } function showRandomLabels() { for(e=0;e<rpUrls.length;e++)rpUrls[e]==currentposturl&&(rpUrls.splice(e,1),rpTitles.splice(e,1));var r=Math.floor((rpTitles.length-1)*Math.random()),e=0;for(rpTitles.length>1&&document.write("<ul>");e<rpTitles.length&&e<20&&e<maxresults;)document.write('<li><a href="'+rpUrls[r]+'">'+rpTitles[r]+"</a></li>"),r<rpTitles.length-1?r++: r=0,e++; document.write("</ul>"); } var rpTitles=new Array,rpTitlesNumb=0,rpUrls=new Array; </script> <div id="bo-rp-box"> <script src="/feeds/posts/default?alt=json-in-script&amp;callback=rp_results_label&amp;max-results=10"></script> <script> var currentposturl=""; var maxresults=5; removeRandomDuplicate(); showRandomLabels(); </script> </div>

Noter : Nomor berwarna biru di ganti untuk menentukan jumlah artikel yang tampil.

  1. Pertama - Tama copy koding diatas
  2. Kemudian menuju dasbor blog kalian
  3. Lalu pilih layout / tata letak
  4. Selanjutnya klik add a gadget
  5. Langkah berikutnya pilih HTML/JavaScript
  6. Berikutnya paste / tempel koding
  7. Langkah akhir save / simpan

Tampilannya seperti gambar di bawah ini.

Random post
Random post

Cara Membuat Widget Random Post Text dengan simbol one piece

<style>#bo-rp-box {    float: left;    margin-bottom: 10px;    margin-top: 0px;}
#bo-rp-box ul {    margin: 0px;    float: left;    margin-left: 20px;    padding: 0px;}
#bo-rp-box li {    vertical-align: middle;    list-style: disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_xVXI5QFvR0sHucfoC0ehx2s4CEqob0CjOC-RR6-4g38KK0VPZgLT7weW8ArCt4BTF1iZVkmG5q8rm9TAPuDmENwZcRAHr-wb0GA3uJaus_6SLmXDDw4CTYXqWlcJRfnlfXnjoqsgdg/s1600/download%252B%2525285%252529%252B%2525281%252529.jpeg");    margin-bottom: 0;    width: auto;    margin-top: 0;    padding: 10px 0;}
#bo-rp-box a {    color: #0F0F0F;    text-decoration: none;    font-size: 14px;}
#bo-rp-box a:visited {    text-decoration: none;    color: blue;}
#bo-rp-box a:hover {    color: blue;}</style><script>function rp_results_label(r) {    for(var e=0;e<r.feed.entry.length;e++){var l=r.feed.entry[e];rpTitles[rpTitlesNumb]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){rpUrls[rpTitlesNumb]=l.link[t].href,rpTitlesNumb++;break;}}}
function removeRandomDuplicate() {    for(var r=new Array(0),e=new Array(0),l=0;l<rpUrls.length;l++)contains(r,rpUrls[l])||(r.length+=1,r[r.length-1]=rpUrls[l],e.length+=1,e[e.length-1]=rpTitles[l]);rpTitles=e,rpUrls=r;}
function contains(r,e) {    for(var l=0;l<r.length;l++)if(r[l]==e)return!0;return!1;}
function showRandomLabels() {    for(e=0;e<rpUrls.length;e++)rpUrls[e]==currentposturl&&(rpUrls.splice(e,1),rpTitles.splice(e,1));var r=Math.floor((rpTitles.length-1)*Math.random()),e=0;for(rpTitles.length>1&&document.write("<ul>");e<rpTitles.length&&e<20&&e<maxresults;)document.write('<li><a href="'+rpUrls[r]+'">'+rpTitles[r]+"</a></li>"),r<rpTitles.length-1?r++: r=0,e++;    document.write("</ul>");}
var rpTitles=new Array,rpTitlesNumb=0,rpUrls=new Array;</script><div id="bo-rp-box"><script src="/feeds/posts/default?alt=json-in-script&amp;callback=rp_results_label&amp;max-results=10"></script><script>var currentposturl="";var maxresults=5;removeRandomDuplicate(); showRandomLabels();</script></div>

Noter : Nomor berwarna biru di ganti untuk menentukan jumlah artikel yang tampil.

  1. Pertama - Tama copy koding diatas
  2. Kemudian menuju dasbor blog kalian
  3. Lalu pilih layout / tata letak
  4. Selanjutnya klik add a gadget
  5. Langkah berikutnya pilih HTML/JavaScript
  6. Berikutnya paste / tempel koding
  7. Langkah akhir save / simpan

Tampilannya seperti gambar di bawah ini.

Random post dengan simbol one piece
Random post dengan simbol one piece

Cara Membuat Widget Random Post Text polos




<style scoped='' type="text/css">
#akses-random ul{list-style:none;margin:0;padding:0 15px;background:#ffffff}#akses-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:2px solid #f8fafa;font-weight:700;word-break:break-word;padding:10px 0;margin:0}#akses-random li:last-child{border-bottom:0}#akses-random li a{color:#575a5f}#akses-random li a:hover{color:#2675A6;text-decoration:none}body.darkmode #akses-random li a{color:#eee}body.darkmode #akses-random li{border-bottom:2px solid #2f2f2f}body.darkmode #akses-random ul{background:#323232}
</style>
<div id='akses-random'>tunggu dulu ya gaes...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage='https://navigasiinfo.blogspot.com',maxResults=10,containerId='akses-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!1;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}
return arr}
function AksesRandomPost(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>')}
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=AksesRandomPost"></scr'+'ipt>')
 //]]>
</script>
Note : tulisan yang berwarna biru ganti dengan nama blog atau web kalian

  1. Pertama - Tama copy koding diatas
  2. Kemudian menuju dasbor blog kalian
  3. Lalu pilih layout / tata letak
  4. Selanjutnya klik add a gadget
  5. Langkah berikutnya pilih HTML/JavaScript
  6. Berikutnya paste / tempel koding
  7. Langkah akhir save / simpan


Tampilannya seperti gambar di bawah ini
Widget Random Post Text
Widget Random Post Text

Note : yang di tandai warna tinggal kalian sesuaikan dengan situs web kalian dan angka tersebut untuk jumlah postingan.

Selamat mencoba semoga bermanfaat dan dapat meningkatkan viewer kalian jika ada pertanyaan dapat berkomentar dibawah.

Posting Komentar untuk "Cara Membuat Widget Random Post yang Dapat Meningkatkan Viewer Blog"