For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat pesan welcome beserta jumlah views blogger

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.