Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat Kotak subscribe box keren diblog

views



Sobat desain kali ini saya akan membahas mengenai bagaimana cara untuk membuat subscribe box atau kotak subscribe responsif didalam blog kita

Namun sobat desain harus tahu mengenai kebijakan Blogger untuk tidak menggunakan layanan email untuk berlangganan artikel pada sebuah blog di blogger

Kebijakan baru berlangganan email untuk artikel tersebut akan dimulai pada bulan Juli 2021 nanti

Tetapi tidak ada salahnya untuk membuat atau mempelajari desain mengenai pembuatan subscribe box ini, untuk dipelajari


Cara penerapan


Oke sobat desain untuk memulai membuat kotak subscribe box ini yang perlu kamu lakukan menaruh kode CSS didalam Template kamu untuk pengguna blogger ya ๐Ÿ˜Ž

Berikut ini adalah kode CSS yang harus kamu letakkan diatas kode ]]></b;skin> atau sebelum kode ]]></b;skin>
/* Subscribe Box by Desain Limited */

#DLsubscribe{width:300px;height:auto;background-color:#fff;border:2px solid #e8ad11;border-radius:5px;display:block;margin:auto;line-height:40px;padding:0}#DLsubscribe .email__{padding:15px 15px 5px}#DLsubscribe .email{margin:auto;color:#e8ad11;text-align:center}#DLsubscribe .email:before{content:'';width:50px;height:50px;display:block;text-align:center;margin:auto;border-radius:100px;transition:all .3s ease;-webkit-animation:DLring 5s 0s ease-in-out infinite;-webkit-transform-origin:50% 4px;-moz-animation:DLring 5s 0s ease-in-out infinite;-moz-transform-origin:50% 4px;animation:DLring 5s 0s ease-in-out infinite;transform-origin:50% 4px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23e8ad11'/%3E%3C/svg%3E") center center/50px no-repeat}#DLsubscribe .medsos__{padding:15px 0;line-height:0;border-top:1px solid #e8ad11}#DLsubscribe form{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin:0 0 15px;padding:0;position:relative}#DLsubscribe form:before{left:15px;position:absolute;display:block;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23e8ad11'/%3E%3C/svg%3E") no-repeat;content:''}#DLsubscribe input{width:calc(100% - 35px);background-color:#fff;line-height:1.5em;border:1px solid #ccc;border-right:0;padding:8px 10px 8px 40px;font-size:12px;text-align:left!important;border-radius:50px 0 0 50px;outline:0;outline-width:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#DLsubscribe button{background-color:#e8ad11;width:40px;min-width:40px;height:36px;margin:0;padding:0;border:0;box-shadow:none;vertical-align:top;cursor:pointer;transition:all .3s ease;background-image:unset;border-radius:0 50px 50px 0}#DLsubscribe button:focus,#DLsubscribe button:hover{background-color:#1d2129}#DLsubscribe button:before{display:inline-block;width:20px;height:20px;margin:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;content:'';vertical-align:-3px}#DLsubscribe .medsos{width:100%;text-align:center}#DLsubscribe .medsos svg{width:20px;height:20px;margin-top:7px}#DLsubscribe .medsos svg path{fill:#fff}#DLsubscribe .medsos a{display:inline-block;margin-right:7px;width:35px;height:35px;transition:all ease-in-out .3s;border-radius:100px}#DLsubscribe .medsos a:last-child{margin-right:0}#DLsubscribe .medsos a:hover{box-shadow:0 23px 15px -3px rgba(0,0,0,.25);transform:translate(0,-10px) scale(1.05)}#DLsubscribe .medsos .facebook{background:#3a579a}#DLsubscribe .medsos .twitter{background:#00abf0}#DLsubscribe .medsos .googleplus{background:#df4a32}#DLsubscribe .medsos .youtube{background:#cc181e}#DLsubscribe .medsos .instagram{background:#992ebc}#DLsubscribe .medsos .pinterest{background:#e60023}@-webkit-keyframes DLring{0%{-webkit-transform:rotateZ(0)}1%{-webkit-transform:rotateZ(30deg)}3%{-webkit-transform:rotateZ(-28deg)}5%{-webkit-transform:rotateZ(34deg)}7%{-webkit-transform:rotateZ(-32deg)}9%{-webkit-transform:rotateZ(30deg)}11%{-webkit-transform:rotateZ(-28deg)}13%{-webkit-transform:rotateZ(26deg)}15%{-webkit-transform:rotateZ(-24deg)}17%{-webkit-transform:rotateZ(22deg)}19%{-webkit-transform:rotateZ(-20deg)}21%{-webkit-transform:rotateZ(18deg)}23%{-webkit-transform:rotateZ(-16deg)}25%{-webkit-transform:rotateZ(14deg)}27%{-webkit-transform:rotateZ(-12deg)}29%{-webkit-transform:rotateZ(10eg)}31%{-wekit-transform:rotateZ(-8deg)}33%{-webkit-transform:rotateZ(6deg)}35%{-webkit-transform:rotateZ(-4deg)}37%{-webkit-transform:rotateZ(2deg)}39%{-webkit-transform:rotateZ(-1deg)}41%{-webkit-transform:rotateZ(1deg)}43%{-webkit-transform:rotateZ(0)}100%{-webkit-transform:rotateZ(0)}}@-moz-keyframes DLring{0%{-moz-transform:rotate(0)}1%{-moz-transform:rotate(30deg)}3%{-moz-transform:rotate(-28deg)}5%{-moz-transform:rotate(34deg)}7%{-moz-transform:rotate(-32deg)}9%{-moz-transform:rotate(30deg)}11%{-moz-transform:rotate(-28deg)}13%{-moz-transform:rotate(26deg)}15%{-moz-transform:rotate(-24deg)}17%{-moz-transform:rotate(22deg)}19%{-moz-transform:rotate(-20deg)}21%{-moz-transform:rotate(18deg)}23%{-moz-transform:rotate(-16deg)}25%{-moz-transform:rotate(14deg)}27%{-moz-transform:rotate(-12deg)}29%{-moz-transform:rotate(10deg)}31%{-moz-transform:rotate(-8deg)}33%{-moz-transform:rotate(6deg)}35%{-moz-transform:rotate(-4deg)}37%{-moz-transform:rotate(2deg)}39%{-moz-transform:rotate(-1deg)}41%{-moz-transform:rotate(1deg)}43%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(0)}}@keyframes DLring{0%{transform:rotate(0)}1%{transform:rotate(30deg)}3%{transform:rotate(-28deg)}5%{transform:rotate(34deg)}7%{transform:rotate(-32deg)}9%{transform:rotate(30deg)}11%{transform:rotate(-28deg)}13%{transform:rotate(26deg)}15%{transform:rotate(-24deg)}17%{transform:rotate(22deg)}19%{transform:rotate(-20deg)}21%{transform:rotate(18deg)}23%{transform:rotate(-16deg)}25%{transform:rotate(14deg)}27%{transform:rotate(-12deg)}29%{transform:rotate(10deg)}31%{transform:rotate(-8deg)}33%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}37%{transform:rotate(2deg)}39%{transform:rotate(-1deg)}41%{transform:rotate(1deg)}43%{transform:rotate(0)}100%{transform:rotate(0)}}



Cara menampilkan


Setelah kamu meletakkan kode CSS yang saya berikan diatas, maka tampilan dari kotak subscribe box nya belum muncul

Mengapa ๐Ÿคท? Bagaimana mau muncul jika kita belum memasang kode pemanggil HTML unik menampilkannya

Dikarnakan desain subscribe box ini dibuat menggunakan CSS dan HTML, jadi kamu harus meletakkan kode yang saya berikan didalam template kamu

Berikut ini adalah kode yang bisa kamu salin untuk menampilkan subscribe box nya
<div id="DLsubscribe">

  <div class="email__">

    <div class="email">

      Aktifkan Notifikasi

      <form action="https://feedburner.google.com/fb/a/mailverify?uri=Icloudice" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Icloudice', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

        <input name="email" class="email" placeholder="Contoh: nama@gmail.com"/>

        <input name="uri" type="hidden" value="It-smkonecom" /> <input name="loc" type="hidden" value="en_US" />

        <button type="submit"></button>

      </form>

    </div>

  </div>

  <div class="medsos__">

    <div class="medsos">

      <a class="facebook" title="Facebook" href="https://www.facebook.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>

      <a class="twitter" title="Twitter" href="https://twitter.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>

      <a class="youtube" title="Youtube" href="https://www.youtube.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>

      <a class="instagram" title="Instagram" href="https://www.instagram.com/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>

    </div>

  </div>

</div>

Tempelkan atau letakkan didalam template kamu, kamu bisa menggunakan menu edit HTML atau menggunakan Tata letak danpada menu Tambahkan widget, mengerti Ndak ๐Ÿคจ


Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
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.