Cara Membuat Lorem Ipsum Generator Pribadi

Lorem Ipsum adalah teks dummy yang sering digunakan dalam industri percetakan dan desain grafis sebagai pengganti teks aktual saat merancang atau mencetak materi grafis seperti brosur, majalah, situs web, dll. Tujuannya adalah untuk mengisi ruang dengan teks yang memiliki tata letak yang mirip dengan teks aktual, sehingga desainer dapat melihat bagaimana tata letak akan terlihat ketika diisi dengan teks sebenarnya.

Sejarah Lorem Ipsum

Teks Lorem Ipsum berasal dari bagian pertama dari teks Latin klasik yang ditulis oleh Cicero pada tahun 45 SM, yaitu "De Finibus Bonorum et Malorum" (Tentang Batas-Batas Keberhasilan dan Keburukan). Teks tersebut telah diacak dan diubah sedemikian rupa sehingga tidak memiliki arti yang jelas, tetapi memiliki distribusi huruf dan kata yang mirip dengan bahasa Inggris.

Fungsi Lorem Ipsum Dalam Dunia Blogger

Untuk mengisi contoh artikel
Sering dipakai untuk membuat Blog demo
Generatornya untuk menambah fitur di Blog

Kelebihan Lorem Ipsum Saifullah.id

Tidak di enskripsi
Tidak pakai Javascript
Mudah di edit dan dimodifikasi
Ringan karena tidak pakai kode dari luar
Tidak disisipkan link pelacak, berbahaya, dan tersembunyi

Tutorial Buat Lorem Ipsum Generator

A. Membuat Halaman Generator

Buka Dashboard Blogger
Pilih Halaman
Tekan +Halaman Baru
Tulis Judul: Lorem Ipsum Generator
Tekan icon 🖉 Pensil ganti jadi < > Edit HTML
Masukkan kode berikut di dalamnya

<script>
function generateRandomizedLoremIpsum() {
var paragraphCount = document.getElementById("paragraphCount").value;
var paragraphSeparator = document.getElementById("paragraphSeparator").value;
var loremIpsumText = "";

// Array dengan teks Lorem Ipsum yang akan diacak
var loremIpsumArray = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet congue orci quis blandit. In sed rhoncus est. Suspendisse vitae enim at mauris vestibulum feugiat. Fusce luctus fringilla faucibus. Sed tempus ligula dolor, et aliquam elit facilisis ut. Donec ultrices maximus tortor ut imperdiet. Phasellus aliquam, sapien id fermentum auctor, lectus est vestibulum sapien, a consequat neque velit at erat. Nam mi justo, pharetra ac lorem sed, euismod venenatis turpis. Donec pellentesque dui non neque fermentum egestas. Praesent tincidunt risus sit amet quam ultrices viverra. Aliquam dictum dapibus ullamcorper.",
"Donec quis libero id dolor condimentum porta. Sed suscipit dapibus ullamcorper. Praesent at hendrerit leo, non feugiat mi. Mauris ipsum risus, congue ut ligula in, facilisis congue risus. Nulla tempus mi lectus, a sollicitudin elit pharetra sit amet. Ut id mauris sapien. Pellentesque iaculis sapien auctor odio tincidunt, a hendrerit lorem tempor. Duis eu consequat lacus, eget feugiat lorem. Sed at justo vehicula, hendrerit felis pretium, euismod purus. Integer quis augue sed ante egestas mollis. Sed non nunc et odio bibendum cursus non non elit. Sed leo quam, tristique sed tellus vel, tempor rutrum massa. Sed mollis nunc eu justo eleifend pulvinar. Etiam nunc quam, egestas ut nulla nec, lobortis cursus ante. Ut vulputate cursus sollicitudin. Etiam sed est vel ipsum vehicula malesuada et et nisl.",
"Suspendisse varius urna faucibus, ornare neque id, consectetur nunc. Fusce venenatis fermentum sem eget ultrices. Quisque iaculis consequat finibus. Nullam ut vulputate nibh. Praesent ultricies molestie est, sit amet semper enim interdum interdum. Proin luctus euismod dictum. Sed felis enim, pretium id finibus non, hendrerit a est. Nam nunc justo, imperdiet sit amet sem vitae, hendrerit consequat dui. Duis ipsum enim, porttitor vitae orci nec, efficitur posuere nulla. Vestibulum suscipit dolor a est porttitor, id pharetra metus finibus. Aenean consequat odio lectus, eu imperdiet lacus scelerisque vel. Suspendisse tincidunt ullamcorper leo sed pulvinar. Curabitur aliquam ex nec ligula fermentum, ac volutpat mauris sodales.",
"Phasellus sed nibh faucibus, ultrices nibh quis, egestas velit. Aenean et ex fermentum, condimentum nunc et, fringilla ex. Mauris cursus mauris ut dolor semper, eu luctus erat luctus. Morbi dictum diam vel magna porttitor tristique. Aenean mattis condimentum turpis, quis suscipit felis aliquet vitae. Aliquam vel mi purus. Vestibulum sed commodo orci. Proin ut velit at est semper euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut elit lobortis, aliquam est in, faucibus mauris. Integer vitae sagittis dui, a consectetur odio. Praesent interdum mi lectus, ac blandit tellus egestas eget. Nulla bibendum metus in orci sodales tempor. Vestibulum dictum quis lacus sit amet aliquet.",
];

// Loop untuk menghasilkan jumlah paragraf yang diinginkan
for (var i = 0; i < paragraphCount; i++) {
var randomIndex = Math.floor(Math.random() * loremIpsumArray.length);
loremIpsumText += loremIpsumArray[randomIndex] + paragraphSeparator;
}

document.getElementById("output").innerHTML = loremIpsumText;
}
</script>



<div>
<label for="paragraphCount">Jumlah Paragraf:</label>
<input type="number" id="paragraphCount" value="1" min="1">
</div>
<div class='hidden'>
<label for="paragraphSeparator">Pemisah Paragraf (gunakan "\n" untuk newline):</label>
<input type="text" id="paragraphSeparator" value="<br><br>">
</div>
<div>
<button onclick="generateRandomizedLoremIpsum()">Generate Randomized Lorem Ipsum</button>
</div>
<label for="paragraphCount">Hasilnya:</label>
<div id="output">

</div>



<style>
input{width:70px}
font-family: Arial, sans-serif;
}

.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f7f7f7;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="number"],
input[type="text"],
button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}

button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#output {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
white-space: pre-line;
}
</style>
Tekan Publikasikan

B. Memasang Menu Generator

Agar Lorem Ipsum Generator yang sudah dibuat mudah diakses dan digunakan oleh kita maupun pengunjung Blog, kita harus menaruhnya di main menu navigasi.

Khusus pengguna template Plus UI 2.6.2, kalian bisa mengikuti langkah berikut untuk melakukan pemasangan.

Buka Dashboard Blogger
Pilih Tema
Pilih Edit HTML
Cari kode ini
Copy-Paste kode berikut tepat di bawahnya
<li itemprop='name'><a href='/p/lorem-ipsum-generator.html' itemprop='url'><span><b:include name='folder-icon'/>Lorem Ipsum Generator</span></a></li>
Simpan Tema

DEMO

TugaSiswa.com