Setiap blog pasti terdapat widget yang fungsinya bermacam-macam. Tapi ada beberapa widget yang fungsinya kurang berguna & hanya memberatkan saja. Seperti pemasangan jam dll.
Sah-sah saja sih mau pasang atau tidak. "Emangnya punya mbah....!" menambahkan pernak-pernik di media blog memang menjadi suatu kebiasaan yang baik karena dapat melatih kreatifitas & pemahaman koding jadi lebih mendalam.
Menambah widget yang sebenarnya tidak terlalu dibutuhkan saja sudah baik apa lagi menambahkan widget yang memang dibutuhkan. Seperti Related post, Popular post, Recent post dll. Nah kali ini mbah mau bagikan cara membuat random post tapi sesuai label kategori.
Random post akan menampilkan posting secara acak sesuai label kategori yang ditentukan. Untuk lebih jelasnya langsung dipraktekkan saja atau klik halaman Demo di bawah.
Berikut kode CSS-nya
Membuat random post mbah membutuhkan javascript sehingga untuk blog yang menggunakan AMP HTML harus menggunakan cara lain.
Berikut kode Javascript-nya, letakkan pada sidebar di tata letak atau terserah anda
Ganti yang di tandai warna kuning diatas sesuai Jumlah Posting yang ditampilkan, URL Blog & Kategori yang ingin ditampilkan. CSS diatas akan menampilkan widget dalam bentuk vertical cocok untuk sidebar. jika ingin pasang dalam bentuk Horizontal (cocok untuk dibawah posting) ganti CSS diatas dengan CSS di bawah ini :
Keuntungan menggunakan Random post adalah posting yang sudah lama atau tenggelam akan ditampilkan lagi (cara cek : coba refresh halaman demo). Sehingga pembaca dapat dengan mudah mengetahuinya & mengaksesnya.
Selamat mencoba
Sah-sah saja sih mau pasang atau tidak. "Emangnya punya mbah....!" menambahkan pernak-pernik di media blog memang menjadi suatu kebiasaan yang baik karena dapat melatih kreatifitas & pemahaman koding jadi lebih mendalam.
Menambah widget yang sebenarnya tidak terlalu dibutuhkan saja sudah baik apa lagi menambahkan widget yang memang dibutuhkan. Seperti Related post, Popular post, Recent post dll. Nah kali ini mbah mau bagikan cara membuat random post tapi sesuai label kategori.
Random post akan menampilkan posting secara acak sesuai label kategori yang ditentukan. Untuk lebih jelasnya langsung dipraktekkan saja atau klik halaman Demo di bawah.
Berikut kode CSS-nya
/* Random post Label by.MBahas.com */
#random-posts {
min-height: 70px;
margin: 10px 10px 14px 7px;
padding: 0;
}
#random-posts img{
padding:4px;
border:4px solid #ccc;
height:85px;
width:90px;
}
ul#random-posts li {
padding:0;
width:100px;
margin:10px 22px 10px 0;
list-style:none;
}
#random-posts p {
margin: -100px 0 0 115px;
padding: 0;
position: absolute;
text-align: left;
text-overflow: ellipsis;
width: 160px;
}
#random-posts a {
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color: #333;
outline: medium none;
}
Membuat random post mbah membutuhkan javascript sehingga untuk blog yang menggunakan AMP HTML harus menggunakan cara lain.
Berikut kode Javascript-nya, letakkan pada sidebar di tata letak atau terserah anda
<ul id='random-posts'>
<script type="text/javascript">
var rdp_numposts=6;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(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src="http://www.mbahas.com/feeds/posts/default/-/AMP HTML?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var a=false;var b=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==b){a=true;break}};if(a){i--}else{rdp_current[i]=b}}};function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
</script>
<script type="text/javascript">
function random_posts(b){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var c=b.feed.entry[i];var d=c.title.$t;if('content'in c){var e=c.content.$t}else{if('summary'in c){var e=c.summary.$t}else{var e=""}};e=e.replace(/<[^>]*>/g,"");if(e.length<rdp_snippet_length){var f=e}else{e=e.substring(0,rdp_snippet_length);var g=e.lastIndexOf(" ");f=e.substring(0,g)+"…"};for(var j=0;j<c.link.length;j++){if('thr$total'in c){var h=c.thr$total.$t+' '+rdp_comment}else{h=rdp_disable};if(c.link[j].rel=='alternate'){var k=c.link[j].href;if(y!=-1){k=k+'?m=0'}var l=c.published.$t;if('media$thumbnail'in c){var m=c.media$thumbnail.url}else{m="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<a href="'+k+'" rel="nofollow" alt="'+d+'" title="'+d+'"><img alt="'+d+'" title="'+d+'" src="'+m+'"/></a>');document.write('<div><a href="'+k+'" rel="nofollow" alt="'+d+'" title="'+d+'"><p>'+d+'</p></a></div>');if(rdp_info=='yes'){document.write('<span>'+l.substring(8,10)+'/'+l.substring(5,7)+'/'+l.substring(0,4)+' - '+h)+'</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="http://www.mbahas.com/feeds/posts/default/-/AMP HTML?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Ganti yang di tandai warna kuning diatas sesuai Jumlah Posting yang ditampilkan, URL Blog & Kategori yang ingin ditampilkan. CSS diatas akan menampilkan widget dalam bentuk vertical cocok untuk sidebar. jika ingin pasang dalam bentuk Horizontal (cocok untuk dibawah posting) ganti CSS diatas dengan CSS di bawah ini :
/* Random post Label by.MBahas.com */
#random-posts {
min-height: 70px;
margin: 0px 10px 14px 7px;
padding: 0;
}
#random-posts img{
padding:4px;
border:4px solid #ccc;
height:85px;
width:90px;
}
ul#random-posts li {
padding:0;
width:100px;
float:left;
margin:10px 22px 10px 0;
list-style:none;
}
#random-posts a {
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color: #333;
outline: medium none;
}
#random-posts p {
padding:0;
margin:0;
text-align:center;
}
Keuntungan menggunakan Random post adalah posting yang sudah lama atau tenggelam akan ditampilkan lagi (cara cek : coba refresh halaman demo). Sehingga pembaca dapat dengan mudah mengetahuinya & mengaksesnya.
Selamat mencoba
