Beranda Blogger

Cara Membuat Tool Generator Lorem Ipsum di Blog

Huda
Huda
Diperbarui: • 0 • menit membaca
Daftar Isi
tool lorem ipsum generator

Membuat tool generator text dummy atau disebut juga dengan lorem ipsum. Cara membuat lorem ipsum generator di blogspot atau blogger dapat dibuat dengan menggunakan javascript murni.

Lorem ipsum ini biasa digunakan sebagai teks pendukung untuk membuat demo template blogger. Text dummy ini menjadi tulisan pengganti yang simpel untuk pengujian demo template tersebut.

Membuat generator ini terdapat tiga bagian yaitu html, css dan javascript. Kamu dapat memasangnya di halaman blogger. Generator lorem ipsum ini berguna untuk designer sebagai reprentasi visual sebelum teks yang sebenarnya dibuat.

Walaupun tidak memiliki kata-kata yang jelas, tetapi teks ini berisi frasa latin dari Cicero. Sehingga, menggunakan lorem ipsum tidak menyinggung suatu topik tertentu.

Nah, ituh pengertian singkat mengenai teks Lorem ipsum atau teks dummy. Berikut cara memasang tools generator lorem ipsum di blogspot;

Cara Membuat Generator Lorem Ipsum di Blog

Membuat tools generator lorem ipsum cukup mudah, kamu tinggal menyalin script yang saya bagikan di bawah dan meletakkan di halaman statis blogger. Berikut tutorial membuat generator lorem ipsum ;

  1. Masuk ke Blogger.
  2. Pilih menu Halaman.
  3. Pilih Halaman Baru.
  4. Silahkan paste kode script dibawah ini, di mode html. 
    <!-- HTML -->
<span>Masukkan jumlah paragaraf yang ingin anda hasilkan, maksimal 9 paragraf.</span>
<section class="section-center">
<form class="lorem-form">
<label name="amount">paragraphs:</label>
<input type="number" name="amount" id="amount" placeholder="1" />
<button type="submit" class="btn">generate</button>
</form>
<article class="lorem-text"></article>
</section>
<!-- End HTML -->
	
<!-- CSS -->
<style>
.section-center {
  font-family: 'Helvetica', Arial, sans-serif;
  background-color: #fff;
  margin: 2px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.lorem-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  margin-top: 8px;
}


span{
  margin-bottom: 15px;
}

label {
  margin-bottom: 10px;
  color: #555;
  font-size: 16px;
}

input[type='number'] {
  padding: 8px;
  width: 60px;
  font-size: 16px;
  border-radius: 4px;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #3367d6;
  color: white;
  border: none;
  border-radius: 4px;
}

.btn:hover {
  background-color: #3e8e41;
}

.lorem-text {
  margin-top: 20px;
  padding: 16px;
  border-radius: 4px;
  line-height: 1.6;
  font-size: 16px;
  color: #333;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}
</style>
<!-- End CSS -->
	
<!-- JavaScript -->
<script>
const text = [
`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mattis vulputate enim nulla aliquet porttitor. Arcu risus quis varius quam quisque. Mauris ultrices eros in cursus turpis massa. Massa sed elementum tempus egestas sed sed risus pretium quam. Volutpat sed cras ornare arcu dui vivamus arcu. In nisl nisi scelerisque eu ultrices vitae. Tempor id eu nisl nunc. Convallis convallis tellus id interdum velit laoreet id donec. Sed turpis tincidunt id aliquet. Semper quis lectus nulla at volutpat. Quisque sagittis purus sit amet. Consequat ac felis donec et odio pellentesque diam volutpat commodo.`,
`Sagittis nisl rhoncus mattis rhoncus. Nunc vel risus commodo viverra maecenas accumsan. Mi in nulla posuere sollicitudin aliquam ultrices. Mus mauris vitae ultricies leo integer. Consectetur a erat nam at lectus urna duis convallis. Blandit aliquam etiam erat velit scelerisque. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Viverra suspendisse potenti nullam ac tortor. At varius vel pharetra vel turpis. Volutpat blandit aliquam etiam erat velit scelerisque in dictum. Ipsum consequat nisl vel pretium. Habitasse platea dictumst vestibulum rhoncus est. Sed lectus vestibulum mattis ullamcorper velit sed. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque.`,
`Posuere ac ut consequat semper. Mauris sit amet massa vitae. In nisl nisi scelerisque eu ultrices. Risus quis varius quam quisque id diam vel quam. Vitae turpis massa sed elementum tempus. Ornare arcu odio ut sem nulla pharetra diam sit amet. Nullam eget felis eget nunc lobortis mattis. Senectus et netus et malesuada fames ac turpis egestas sed. Fames ac turpis egestas integer eget aliquet nibh praesent. Nisl rhoncus mattis rhoncus urna neque viverra justo nec. Quis commodo odio aenean sed adipiscing. Nisi vitae suscipit tellus mauris a diam maecenas sed. Integer quis auctor elit sed.`,
`Nec dui nunc mattis enim ut. Proin libero nunc consequat interdum varius sit amet. Integer enim neque volutpat ac tincidunt. Tincidunt ornare massa eget egestas. Lectus sit amet est placerat in egestas erat. Ultricies leo integer malesuada nunc vel risus commodo. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Blandit aliquam etiam erat velit scelerisque in. Nunc sed id semper risus in hendrerit gravida rutrum. Fermentum dui faucibus in ornare quam. Urna id volutpat lacus laoreet non. Turpis massa tincidunt dui ut ornare lectus. Aliquet bibendum enim facilisis gravida neque convallis a cras. Quam elementum pulvinar etiam non. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Fames ac turpis egestas sed tempus urna. Risus at ultrices mi tempus imperdiet nulla malesuada.`,
`A diam sollicitudin tempor id. Purus in mollis nunc sed id semper risus in. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Pellentesque nec nam aliquam sem et tortor consequat id porta. Hac habitasse platea dictumst vestibulum. Vitae tortor condimentum lacinia quis vel. Quis commodo odio aenean sed adipiscing diam. Lacinia quis vel eros donec. Dictum fusce ut placerat orci. Feugiat in ante metus dictum at tempor commodo ullamcorper a.`,
`Amet commodo nulla facilisi nullam vehicula ipsum a. In pellentesque massa placerat duis. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Varius morbi enim nunc faucibus a pellentesque sit amet. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Mi sit amet mauris commodo quis imperdiet. Pulvinar pellentesque habitant morbi tristique senectus. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nulla facilisi etiam dignissim diam. Lobortis elementum nibh tellus molestie. Varius duis at consectetur lorem donec massa sapien. Commodo elit at imperdiet dui accumsan. Arcu non odio euismod lacinia at quis risus. Nibh mauris cursus mattis molestie a iaculis at erat.`,
`Ultrices dui sapien eget mi proin sed libero. Amet dictum sit amet justo. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Aliquet nec ullamcorper sit amet risus nullam eget felis. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Vitae tortor condimentum lacinia quis. Tristique et egestas quis ipsum suspendisse ultrices. Ultrices gravida dictum fusce ut placerat orci nulla. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Adipiscing commodo elit at imperdiet dui accumsan. Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Mattis molestie a iaculis at erat pellentesque.`,
`Arcu felis bibendum ut tristique et egestas quis ipsum. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Mattis aliquam faucibus purus in massa. At quis risus sed vulputate odio. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. In dictum non consectetur a erat nam at lectus urna. Velit egestas dui id ornare. Integer feugiat scelerisque varius morbi. Nibh praesent tristique magna sit amet purus gravida. Nisi lacus sed viverra tellus in hac. Diam sit amet nisl suscipit adipiscing. Enim praesent elementum facilisis leo vel fringilla.`,
`Integer quis auctor elit sed vulputate. Mauris cursus mattis molestie a iaculis at erat. Nisl purus in mollis nunc. Amet mauris commodo quis imperdiet massa tincidunt. Ut tellus elementum sagittis vitae. Orci dapibus ultrices in iaculis nunc. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ac ut consequat semper viverra. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Placerat orci nulla pellentesque dignissim enim sit amet. Sapien eget mi proin sed libero enim sed faucibus.`,
];
const form = document.querySelector(".lorem-form");
const amount = document.getElementById("amount");
const result = document.querySelector(".lorem-text");
form.addEventListener("submit", function (e) {
// A click on a form submit button – initiates its submission to the server.
e.preventDefault();
const value = parseInt(amount.value);
const random = Math.floor(Math.random() * text.length);
if (isNaN(value) || value < 0 || value > 9) {
result.innerHTML = `<p class="result">${text[random]}</p>`;
} else {
let tempText = text.slice(0, value);
tempText = tempText
.map(function (item) {
return `<p class="result">${item}</p>`;
})
.join("");
result.innerHTML = tempText;
}
});
</script>
<!-- End JavaScript -->
  5. Klik publikasikan.

Hasil dari script diatas akan seperti demo ini.

Penutup

Membuat generator lorem ipsum dapat mempermudah memuat rentetan text dummy yang berguna untuk para designer template. Semoga artikel ini dapat bermanfaat, sekian dari saya dan terima kasih.

Huda
Huda Hallo saya adalah penulis di blog bunghuda.com. Saya blogger biasa, cuma kebetulan suka menulis.

Posting Komentar