Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat pesan welcome menggunakan svg di blogger
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Pesan Welcome
Apakah itu pesan welcome di blogger? pesan welcome di blogger merupakan pesan yang di tampilkan secara otomatis menurut waktu ketika yang sudah di tentukan, nah pada pembahasan sebelumnya juga admin telah membahas mengenai bagaimana caranya membuat pesan selamat pagi, siang, dan juga malam, di blogger secara otomatis di blogger mungkin kamu bisa mempelajari nya karena pada postingan kali ini hampir hampir sama, hanya saja perbedaannya terletak pada penggunaan icon SVG sehingga membuat tampilan semakin menarik tentunya
Tampilan Views
Selain pesan welcome tersebut, tersedia juga pesan tampilan views, yang mana fungsi dari tampilan views tersebut adalah untuk menampilkan statistik kunjugan halaman postingan, atau jika di rasa ingin mengubah fungsi bisa saja jika kreatif semisal mengubah fungsi menjadi pesan emoji pada waktu waktu tertentu di blogger atau juga bisa yang lainnya
Contoh Tampilan
Jika kamu sudah penasaran dengan bagaimana kah contoh tampilan dari pesan welcome dan tampilan views di blogger tersebut kamu bisa menggunakan tombol di bawah ini untuk melihatnya
Info: Bagaimana sobat dengan contoh tampilan nya luar biasa keren yak
Cara pembuatan
Jika kamu sudah penasaran dengan bagaimana kah cara pembuatan dari pesan welcome di blogger silahkaj ikuti tutorial kali ini secara benar dan perlahan, sediakan cemilan jika di mungkinkan
Kode CSS
Langkah pertama seperti biasanya salin kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>
.salamrah{display:flex;justify-content:space-between;position:relative;font-size:13px;padding-top:6px;padding-bottom:20px;}
.salamrah >*{padding:10px;background:#fffdfc;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:25px;display:flex;align-items:center;justify-content:center}
.salamrah >*:first-child{margin-right:5px}
.salamrah >*:last-child{margin-left:5px;}.salamrah .salamrah-vw.hidden,.rahsalam:checked ~ .salamrah .salamrah-tx::after,.rahsalam:checked ~ .salamrah .salamrah-vw::after{display:none}.salamrah .salamrah-tx::after{content:attr(data-text);transition:all .2s ease}
.salamrah .salamrah-vw::after{content:attr(data-text) ' Views'}
.salamrah svg{width:15px;height:15px;margin-right:6px} .salamrah svg.line{stroke-width:1.5}.dark-mode .salamrah >*{background:var(--rah-dark-bg)}
.rahsalam:checked ~ .salamrah .svg1{display:inline-block}
.rahsalam:checked ~ .salamrah .svg-1,.salamrah .svg1{display:none}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya kamu bisa menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan di atas kode <data:post.body/>
<div class="salamrah">
<label class="salamrah-tx" data-text="Welcome!" for="rahassalam" id="rahgreetings">
<svg class="svg-1" viewbox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" fill-rule="evenodd">
</path>
<path class="svg-c" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683z">
</path>
<path class="svg-c" d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z">
</path>
</svg>
<svg class="svg1" viewbox="0 0 24 24">
<path d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z">
</path>
</svg>
</label>
<label class="salamrah-vw pu-views" data-add="true" data-text="53000" for="rahassalam" id="postviews">
<svg class="line" viewbox="0 0 24 24">
<g transform="translate(2.000000, 4.000000)">
<path class="svg-c" d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z">
</path>
<path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z">
</path>
</g>
</svg>
</label>
</div>
<script type="text/javascript">
/*<![CDATA[*/ var welElem = document.querySelector("#rahgreetings"); var curHr = new Date().getHours(); var welMes = ["Semoga mimpi indah!", "Selamat pagi!", "Selamat Sore!", "Selamat malam!", "Selamat malam!", "Waktunya tidur!"]; let welText = ""; if (curHr < 4) welText = welMes[0]; else if (curHr < 12) welText = welMes[1]; else if (curHr < 17) welText = welMes[2]; else if (curHr < 19) welText = welMes[3]; else if (curHr < 22) welText = welMes[4]; else welText = welMes[5]; welElem.setAttribute('data-text', welText); /*]]>*/
</script>Info: Atau juga kamu bisa meletakkannya pada posisi yang kamu inginkan semisal menggunakan fitur Add Widget pada menu Layout atau pada bagian body yang lainnya