Membuat Random Post Template LinkMagz Support Dark Mode [Text Only]

Daftar Isi

• Random Post Paling Mudah
• Random Post Optimasi Template LinkMagz
• Kesimpulan

Salah satu widget yang mungkin akan kamu butuhkan yang berpeluang untuk meningkatkan pageview pada blog kamu. Karena widget Random Post ini akan menampilkan artikel-artikel yang sudah lama maupun yang baru pada blog kamu secara acak.

Widget ini saya dapatkan di blog ternama dte.web.id disana tempat saya belajar banyak tentang kode-kode template blogger dan widget-widget kerennya juga. Widget random post dari mas Taufik ini sangat berbeda dengan widget random post yang bertebaran digoogle, karena widget ini lebih ringan dan tidak terlalu memberatkan loading blog.

Tampilan Random postnya sebagai berikut:

Tampilan Random Post Support Dark Mode

Saya akan membagikan dua cara memasang Random Post ini, cara pertama akan sangat mudah kamu terapkan sedangkan cara kedua akan sulit kamu terapkan, namun akan lebih baik untuk optimasi blog dan template LinkMagz kamu.

---

Random Post Paling Mudah

Untuk cara yang pertama ini sangat mudah, kamu hanya perlu menambahkan widget baru pada blog kamu dengan cara masuk ke Tata Letak - Tambahkan Gadget dan selanjutnya pilih Gadget HTML/Javascipt, pada halaman kosong kamu copy seluruh kode dibawah ini :

<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'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage='https://www.iwnefndi.com',maxResults=5,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>

Kamu perlu menyesuaikan beberapa hal seperti berikut :

1. Ganti alamat url https://www.iwnefndi.com dengan alamat blog kamu sendiri.
2. Selanjutnya ganti nilai maxResults=5 dengan berapa banyak random post yang kamu ingin tampilkan, rekomendasi saya tetep 5 saja.

Selanjutnya kamu perlu klik Simpan dan lihat hasilnya.

---

Random Post Optimasi Template LinkMagz

Untuk cara selanjutnya ini mungkin lebih ribet namun akan sangat baik untuk optimasi kecepatan template dan loading blog. Karena kode-kode utama akan tetap kita simpan di pengaturan template dan menggabungkan javascript dengan javascript lainnya yang digunakan pada template, terutama template LinkMagz.

Kalau kamu tidak memahami sama sekali tentang Edit HTML template blogger, saran saya kamu jangan coba mengikuti tutorial dibawah ini, cukup pakai cara yang pertama saja untuk menerapkan Widget Random Post ini.

Memasang CSS Widget Random Post

Sebelumnya sesuai judul blog ini kita akan memasang widget Random Post yang tentunya sudah support Dark Mode versi Template LinkMagz dari Mas Sugeng. Widget ini juga dimungkinkan untuk template blogger lainnya, jadi bisa kamu sesuaikan sendiri yah, kalau bingung mari kita bahas dikomentar saja.

Pertama kamu perlu masuk ke Edit HTML template blogger kamu, dan tambahkan kode berikut ini tepat diatas kode ]]></b:skin> :

#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}

Setelah kamu copy pasang kode tersebut ikut langkah selanjutnya dibawah ini.

Memasang Script Random Post

Selanjutnya kamu perlu menambahkan dan sedikit menyesuaikan kode script Random Postnya, copy dan paste kode script berikut tepat didalam kode berikut :

Baca Juga: loading

<b:includable id='allJavaScripts'>...</b:includable>

Dari kode tersebut tambahkan kode dibawah ini tepat diatas kode </b:includable> pada template LinkMagz tersebut.

var homePage='https://www.iwnefndi.com',maxResults=5,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>')
 

Kamu perlu sesuaikan beberapa hal seperti :

1. Ganti alamat url https://www.iwnefndi.com dengan alamat blog kamu sendiri.
2. Selanjutnya ganti niali maxResults=5 dengan berapa banyak random post yang kamu ingin tampilkan, rekomendasi saya tetep 5 saja.

Jika sudah berhasil kamu perlu menyimpan perubahan yang kamu lakukan dengan cara klik Simpan tema seperti biasa.

Menambah Widget dan memasang kode pemanggil

Sama seperti cara yang pertama kamu harus dan tetap memanggil atau meletakkan widget random postnya dimanapun kamu inginkan. masuk ke Tata Letak - Tambahkan Gadget dan selanjutnya pilih Gadget HTML/Javascipt, pada halaman kosong kamu copy kode singkat berikut :

<div id='akses-random'>Memuat...</div>

Setelah itu kamu bisa klik Simpan dan lihat hasilnya.

---

Kesimpulan

Kesimpulannya pada cara yang pertama kamu akan memanggil seluruh kode-kode serta css dan juga script nya dalam satu lingkup Widget HTML/Javascipt blogger yang berpotensi menambah laoding sebuah blog karena akan menambah inline style css lagi.

Dan juga scriptnya akan terpisah dengan script yang lain mengakibatkan bertambahnya loading blog kamu. Jadi saya sarankan jika kamu pengguna template LinkMagz, kamu bisa menggunakan cara yang kedua. Namun kalau kamu tidak pandai ataupun tidak paham dengan cara yang kedua, kamu bisa pakai saja cara yang pertama yang lebih simple. Tentukan pilihanmu dan selamat mencoba.