Cara Membuat Widget Blogger Ucapan Selamat Datang

Ngebait.com - Halo, dalam kesempatan kali ini, saya ingin berbagi mengenai cara menambahkan widget ucapan selamat datang di Homepage atau beranda blog Anda. Penambahan ini dapat memberikan nilai estetika tambahan pada blog Anda. Bisa sebagi ringkasan singkat isi dalam blog, ucapan selamat datang, ataupun bisa kamu atur sebagai media promosi lainnya dengan mengatur text di dalamnya. Tentu ucapan yang ditampilkan di halaman depan sangat berperan dalam memberikan kesan pertama kepada pengunjung.

Dengan menyambut mereka menggunakan kata-kata yang ramah dan menarik, tentu menambah kesan positif. Ucapan tersebut juga bisa memberikan gambaran singkat mengenai tujuan dan isi dari blog tersebut. Hal ini membantu pengunjung untuk memahami apa yang mereka harapkan dari blog tersebut dan sejauh mana relevansi dengan minat atau kebutuhan mereka.

Berikut demo dari Widget Ucapan selamat datang:

Demo

Salin Css di bawah ini kemudian letakkan pada bagian <style>

.wave{animation-name:wave-animation;/* Refers to the name of your @keyframes element below */

  animation-duration:2.5s;/* Change to speed up or slow down */

  animation-iteration-count:infinite;/* Never stop waving:) */

  transform-origin:70% 70%;/* Pivot around the bottom-left palm */

  display:inline-block}

@keyframes wave-animation{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}/* The following five values can be played with to make the waving more or less extreme */  20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}/* Reset for the last half to pause */  100%{transform:rotate(0deg)}}

.ucapan{position:relative;font-size:2.1rem;padding:1rem;font-weight:bold;letter-spacing:0.1rem;text-align:left;overflow:hidden;background:#f4f4f4;color:#3c4043;;margin:0;border-radius:10px;overflow:hidden;opacity:.9}

.ucapan svg{width:40px;height:40px}

.ucapan p{font-size:1.1rem;padding:0rem 0.5rem 0rem 0.5rem;font-weight:bold;text-align:left;overflow:hidden}

.ucapan p span.typed-text{font-weight:normal;color:#3367d6}

.ucapan p span.cursor{display:inline-block;background-color:#444;margin-left:0.1rem;width:2px;animation:blink 1s infinite}

.ucapan p span.cursor.typing{animation:none}

@keyframes blink{0%{background-color:#444}49%{background-color:#444}50%{background-color:transparent}99%{background-color:transparent}100%{background-color:#444}}

Copy javascript dibawah dan Paste kode Css tersebut tepat di atas </body>

<scripttype='text/javascript'>//<![CDATA[
	const typedTextSpan = document.querySelector(".typed-text"); const cursorSpan = document.querySelector(".cursor"); const textArray = [ "tutorial seputar blogging.", "membuat widget blogger.", "tutorial css, html dan javascript.", "membuat tools di blogger."
	]; const typingDelay = 200; const erasingDelay = 100; const newTextDelay = 2000; // Delay between current and next text
	let textArrayIndex = 0; let charIndex = 0; functiontype() { if (charIndex < textArray[textArrayIndex].length) { if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex); charIndex++; setTimeout(type, typingDelay); } else { cursorSpan.classList.remove("typing"); setTimeout(erase, newTextDelay); } } functionerase() { if (charIndex > 0) { if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); typedTextSpan.textContent = textArray[textArrayIndex].substring( 0, charIndex - 1
	); charIndex--; setTimeout(erase, erasingDelay); } else { cursorSpan.classList.remove("typing"); textArrayIndex++; if (textArrayIndex >= textArray.length) textArrayIndex = 0; setTimeout(type, typingDelay + 1100); } } document.addEventListener("DOMContentLoaded", function () { // On DOM Load initiate the effect
	if (textArray.length) setTimeout(type, newTextDelay + 250); }); //]]></script>

*Ubah kalimat yang di tandai sesuai keinginan.

Kemudian Tambahkan Gadget pada menu layout bloggger, pilih HTML / Javascript. Sesuaikan dengan letak Widget Ucapan Selamat Datang ini sesuai keinginan.

<div class="ucapan">Selamat datang! <spanclass="wave"><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"role="img"style="vertical-align: -0.125em;"width="1em"height="1em"preserveaspectratio="xMidYMid meet"viewbox="0 0 64 64">
	<pathfill="#42ade2"d="M16.1 48.5c-.5-.1-.9-.2-1.4-.4c-.5-.2-.9-.3-1.3-.5c-.9-.4-1.7-.9-2.5-1.5C9.3 45 8 43.5 7 41.7C6 40 5.4 38 5.3 36.1c-.1-1 0-1.9.1-2.9c.1-.5.2-.9.3-1.4c.1-.5.3-.9.4-1.4l.1 1.4c0 .5.1.9.2 1.4c.1.9.3 1.8.5 2.6c.4 1.7 1 3.3 1.9 4.8c.9 1.5 1.9 2.9 3.2 4.2c.6.6 1.3 1.2 2 1.8c.3.3.7.6 1.1.9l1 1m-.3 3.6c-.3.2-.7.3-1.1.4c-.4.1-.7.2-1.1.2c-.7.1-1.5.2-2.3.1c-1.5-.1-3.1-.5-4.4-1.2c-1.4-.7-2.6-1.8-3.4-3.1c-.4-.6-.8-1.3-1.1-2c-.1-.3-.2-.7-.3-1.1c0-.3-.1-.6-.1-1c.3.3.5.5.7.8c.3.3.5.6.7.8c.5.5.9 1 1.4 1.4c1 .9 2 1.7 3.2 2.3c1.1.6 2.4 1.1 3.6 1.5c.6.2 1.3.3 2 .5c.3.1.7.1 1 .2c.5.1.8.1 1.2.2M38.4 3.5c.5.1.9.3 1.4.5c.5.2.9.4 1.3.6c.9.5 1.7 1 2.5 1.6c1.6 1.2 2.9 2.8 3.8 4.6c.9 1.8 1.4 3.8 1.4 5.7c0 1-.1 1.9-.3 2.9c-.1.5-.2.9-.4 1.4c-.2.5-.3.9-.5 1.3l-.1-1.4c0-.5 0-.9-.1-1.4l-.3-2.7c-.3-1.7-.9-3.4-1.7-5c-.8-1.6-1.8-3-3-4.3c-.6-.7-1.3-1.3-1.9-2c-.3-.3-.7-.6-1.1-.9l-1-.9m8.7-.4c.4.1.7.2 1 .4c.3.1.7.3 1 .5c.6.4 1.2.8 1.8 1.3c1.1 1 2 2.2 2.5 3.6c.6 1.4.8 2.9.6 4.4c-.1.7-.3 1.4-.5 2.1c-.1.3-.3.7-.4 1c-.2.3-.3.6-.6.9v-2c0-.7-.1-1.3-.1-1.9c-.2-1.3-.4-2.5-.9-3.6c-.5-1.2-1.1-2.2-1.8-3.3c-.4-.5-.8-1.1-1.2-1.6c-.2-.3-.4-.5-.7-.8c-.2-.5-.5-.8-.7-1"></path>
	<pathfill="#fed0ac"d="M10 18c-2 .9-2.7 3.3-1.8 5.3l12.6 26.3l7-3.3l-12.6-26.4c-.9-2-3.2-2.9-5.2-1.9m33.1 20.9l7.4-3.5l-14.4-30c-1-2-3.4-2.9-5.5-1.9c-2 1-2.9 3.4-1.9 5.5l14.4 29.9"></path>
	<pathfill="#e0a372"d="M30.7 3.4c-.2.1-.4.2-.6.4c1.9-.5 3.9.4 4.8 2.2l14.4 30l1.3-.6l-14.4-30c-1-2.1-3.4-3-5.5-2"></path>
	<pathfill="#fed0ac"d="m27.8 46.2l7.7-3.7l-14.7-30.6c-1-2.1-3.6-3.1-5.7-2.1s-3 3.6-2 5.7l14.7 30.7"></path>
	<pathfill="#e0a372"d="M15.1 9.9c-.2.1-.4.2-.6.4c1.9-.5 4.1.4 5 2.3l9.1 19.1l2.2 1.3l-10-21c-1-2.2-3.5-3.1-5.7-2.1"></path>
	<pathfill="#fed0ac"d="m34.3 40.1l7.7-3.7L27.3 5.8c-1-2.1-3.6-3.1-5.7-2c-2.1 1-3 3.6-2 5.7l14.7 30.6"></path>
	<pathfill="#e0a372"d="M21.6 3.7c-.2.1-.4.3-.6.4c1.9-.5 4.1.4 5 2.3L36.3 28l2.2 1.3L27.3 5.8c-1-2.2-3.6-3.1-5.7-2.1M10 18c-.2.1-.4.2-.6.4c1.8-.5 3.7.4 4.5 2.2l7.5 15.7l2.2 1.3L15.2 20c-.9-2.1-3.2-3-5.2-2"></path>
	<pathfill="#fed0ac"d="M60.8 15c-2.7-2.1-7.1.2-9.3 7.4c-1.5 5-1.7 6.5-4.9 8l-1.8-3.7S16.4 40.4 17.5 42.6c0 0 3.4 10.6 9.2 15.5c8.6 7.4 28.7-.5 29.6-19.6c.5-11.1 7.4-21.2 4.5-23.5"></path>
	<gfill="#e0a372">
	<pathd="M60.8 15c-.5-.4-1.1-.6-1.7-.7c.1.1.3.1.4.2c3 2.3-.1 7.6-1.8 12.4c-1.4 3.8-2.6 7.7-2.4 11.5c.8 16.6-15.9 24.5-25.9 21.5c9.8 4.1 28-3.7 27.2-21c-.2-3.8.9-7.5 2.4-11.5c1.6-4.8 4.7-10.1 1.8-12.4"></path>
	<pathd="M47.5 30c-6.2.7-15.3 9.6-8.9 19.3c-4.7-9.8 3-16.4 7.9-18.7c.5-.4 1-.6 1-.6"></path>
	</g>
	</svg></span>
	<p>Selamat datang di blog yang sederhana ini. Semoga Anda dapat mengambil manfaat dari setiap artikel yang saya berikan mengenai <span class="typed-text"></span><spanclass="cursor">&nbsp; </span></p>
	</div>

Saat menempatkan widget pada menu layout atau tata letak blogger pada Homepage, widget akan otomatis tampil juga pada halaman dan postingan artikel. Untuk itu tambahkan cond='data:view.isHomepage' pada kode <b:widget, berfungsi untuk mengatur Widget ini hanya tampil pada homepage saja. Untuk memudahkan pecarian pada menu Edit HTML tekan Ctrl + F, ketik "Selamat datang" untuk mencari kode widget <b:widget, kemudian tambahkan cond='data:view.isHomepage'.

Begitulah Cara Membuat Widget Blogger Ucapan Selamat Datang. Menarik bukan? Tanyakan di komentar jika di rasa masih ada kesulitan. Selamat mencoba.

Sumber:
Bunghuda.com