Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar Script dan dunia blogging untuk admin bahas secara detai dan juga transparan, agar sedikit pengetahuan yang admin dapatkan bisa bermanfaat buat kamu semua ok
Kali ini admin membagikan sebuah informasi mengenai sebuah Script untuk menampilkan text secara random diblogger, textnya akan berganti setelah halaman direfresh atau dimuat ulang
Info : Ok bagi kamu yang sudah penasaran, mari kita mulaikan saja pembahasan nya
Text Random
Untuk menampilkan sebuah Text secara random diblogger, yang dibutuhkan adalah sebuah Script dan juga text yang akan kamu tampilkan, sebenarnya dengan script text random yang akan saya bagikan disini bisa digabungkan sesuai keinginan jika kamu, memahami akan sedikit element CSS dan juga HTM
Dibuat dengan Javascript
Sebagai pengetahuan: Didalam pembuatan Text random ini mengandung unsur element javascript didalmnya, namun tidak semua element dari kode javascript ditambah unsur text juga didalmnya, nantinya Unsur text tersbut bisa kamu ubah sesuai keinginan kamu, ok
Pemberitahuan: Script kode dari Text random ini bisa digunakan pada seluruh mode HTML, jadi apabila script ini kamu tempelkan diatas Header Blog maka Text random tersebut akan langsung muncul tepat dimana kamu meletakkannya
Kode Text Random
Baiklah tanpa berlama lama lagi, dibawah ini Adalah script kode dari Text Random, salin dan tempelkan didalam template kamu
<script>//<![CDATA[
quote = new Array(11);
quote[0] = "Kezaliman akan terus ada, bukan karena banyaknya orang-orang jahat. Tapi karena diamnya orang-orang baik (Ali bin Abi Thalib)";
quote[1] = "Jangan melihat siapa yang bicara tapi lihatlah apa yang dibicarakannya (Ali bin Abi Thalib)";
quote[2] = "Jangan takut berjalan lambat, takutlah jika hanya berdiri diam";
quote[3] = "Maka sesungguhnya bersama kesulitan itu ada kemudahan (QS Al Insyirah 5)";
quote[4] = "Jangan menjelaskan tentang dirimu kepada siapapun. Karena yang menyukaimu tidak butuh itu, dan yang membencimu tidak percaya itu (Ali bin Abi Thalib)";
quote[5]="Jangan sekali-kali membuat keputusan dalam kemarahan, dan jangan pula membuat janji dalam kebahagiaan (Ali bin Abi Thalib)"
quote[6]="Apabila sesuatu yang kau senangi tak terjadi, maka senangilah apa yang terjadi saat ini (Ali bin Abi Thalib)";
quote[7]="Tidak perlu sempurna untuk menginspirasi orang lain. Biarkan orang lain terinspirasi oleh bagaimana kamu menangani ketidaksempurnaanmu";
quote[8]="Banggalah dengan siapa dirimu, dan jangan malu dengan cara orang lain melihatmu";
quote[9]="Kita adalah makhluk yang suka menyalahkan dari luar, tidak menyadari bahwa masalah biasanya dari dalam (Abu Hamid Al Ghazali)";
quote[10]="Kekayaan yang hakiki bukanlah dari banyaknya harta. Namun kekayaan yang hakiki adalah hati yang selalu merasa cukup (HR. Bukhari & Muslim)";
index = Math.floor(Math.random() * quote.length);
document.write("\n");
document.write(quote[index]);
//]]></script>Info: Jika kamu bingung, mau menaruh kodenya dimana kamu bisa meletakkan pada mode "Add Widget" atau didalam penulisan artikel pada mode HTML diblogger
Tambah Unsur Text
Untuk menambah lagi unsur textnya untuk ditampilkan, ubah bilangan atau nilai dari new Array(11)
Misal : Kamu ingin menampilkan text random sebanyak 20, maka new Array(11) nya diganti menjadi new Array(21)
Dan gunakan kode dibawah ini untuk membungkus textnya, kemudian letakkan tepat dibawah urutan nomor tersebut
quote[11]="Letakkan Textnya Disini, ok";
quote[12]="Letakkan Textnya Disini, ok";
quote[13]="Letakkan Textnya Disini, ok";
quote[14]="Letakkan Textnya Disini, ok";Contoh Tampilan
Untuk mengetahui contoh Tampilan dari Text randomnya, kamu bisa melihat contoh dibawah ini
Saran : Coba deh kamu refresh halaman ini, maka text tersebut akan berganti secara otomatis, keren bukan
Penggabungan Kode CSS
Nah sobat IcloudZer kode javascript tersebut bisa digabungkan bersama dengan kode CSS juga Lo seperti contoh berikut ini
Kode CSS
Contoh kode CSS untuk membuat text randomnya semakin menarik, seperti contohnya dibawah ini
.icloudice-txrdm{font-style:bold;font-size:12px;border-radius:3px;margin:2px}
.icloudice-txrdm:before{content:'Quotes :';margin-buttom:8px;color:#880000; font-size:15px;}Kode JavaScript
Kemudian untuk menampilkan javascript bersama kode CSS nya, tambahkan kode <div class='icloudice-txrdm'> dan tutup kode javascript dengan kode </div>, nah jadi kode lengkapnya seperti dibawah ini
<div class='icloudice-txrdm'><script>//<![CDATA[
quote = new Array(11);
quote[0] = "Kezaliman akan terus ada, bukan karena banyaknya orang-orang jahat. Tapi karena diamnya orang-orang baik (Ali bin Abi Thalib)";
quote[1] = "Jangan melihat siapa yang bicara tapi lihatlah apa yang dibicarakannya (Ali bin Abi Thalib)";
quote[2] = "Jangan sekali-kali membuat keputusan dalam kemarahan, dan jangan pula membuat janji dalam kebahagiaan (Ali bin Abi Thalib)";
quote[3] = "Apabila sesuatu yang kau senangi tak terjadi, maka senangilah apa yang terjadi saat ini (Ali bin Abi Thalib)";
quote[4] = "Jangan menjelaskan tentang dirimu kepada siapapun. Karena yang menyukaimu tidak butuh itu, dan yang membencimu tidak percaya itu (Ali bin Abi Thalib)";
quote[5]="Tidak perlu sempurna untuk menginspirasi orang lain. Biarkan orang lain terinspirasi oleh bagaimana kamu menangani ketidaksempurnaanmu"
quote[6]="Banggalah dengan siapa dirimu, dan jangan malu dengan cara orang lain melihatmu";
quote[7]="Jangan takut berjalan lambat, takutlah jika hanya berdiri diam";
quote[8]="Maka sesungguhnya bersama kesulitan itu ada kemudahan (QS Al Insyirah)";
quote[9]="Kita adalah makhluk yang suka menyalahkan dari luar, tidak menyadari bahwa masalah biasanya dari dalam (Abu Hamid Al Ghazali)";
quote[10]="Kekayaan yang hakiki bukanlah dari banyaknya harta. Namun kekayaan yang hakiki adalah hati yang selalu merasa cukup (HR. Bukhari & Muslim)";
index = Math.floor(Math.random() * quote.length);
document.write("\n");
document.write(quote[index]);
//]]></script></div>hasil demo
Maka hasil demo dari penggabungan Text tersebut seperti contoh dibawah ini
Nah sobat bagaimana mudah bukan semoga bermanfaat dan jangan lupa bagikan setiao artikel disini agar semakin bermanfaat, sampai jumpa