Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Kotak Berlangganan (Subscribe Box Via Email) Ala Masmalven

 Awalnya hanya membuat widget subscribe box via email standar versi template VioMagz Cara Membuat Kotak Berlangganan (Subscribe Box via Email) ala Masmalven

Awalnya cuma menciptakan widget subscribe box via email kriteria model template VioMagz. Kali ini saya akan menyertakan ikon lonceng lengakp dengan imbas gerakan mirip dikala lonceng berdering. Selain itu, aku juga menyertakan variasi berupa tombol media umum. Kaprikornus sangat keren kan, bila kotak subscribe dan tombol media sosial menyatu dalam kawasan yang sama.

Beberapa blogger juga menanyakan hal ini di WhatsApp aku, daripada penasaran karenanya saya sekalian bagikan tutorialnya.

Sebelum masuk ke pembahasan, kau harus membuat akun di FeedBurner terlebih dahulu. Jika masih gundah cara menciptakan dan mengaktifkan fitur subscribe, aku akan membuat tutorialnya secara terpisah di postingan selanjutnya.

Cara Membuat Kotak Berlangganan (Subscribe Box) Blog Melalui Email dan Tombol Media Sosial 

Setelah kamu memiliki akun Feedburner dan mengaktifkan email subscribe, kita cuma tinggal memasang aba-aba CSS dan HTML ke dalam pengaturan blog.

Baca Juga: Kotak Donasi PayPal di Bawah Artikel ala Masmalven

Langkah Pertama: Simpan aba-aba CSS ini diatas atau ]]>.

/* Subscribe Box by masmalven.com */ #masmalvenSubscribe width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px #masmalvenSubscribe .email__ padding:15px 15px 5px; #masmalvenSubscribe .email margin:auto; color:#555; text-align:center; #masmalvenSubscribe .email:before content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:masmalvenRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:masmalvenRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:masmalvenRing 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='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat; #masmalvenSubscribe .medsos__ padding:15px 0px; line-height:0px; border-top:1px solid #ccc; #masmalvenSubscribe form display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative; #masmalvenSubscribe 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='%23717171'/%3E%3C/svg%3E") no-repeat; content:''; #masmalvenSubscribe input width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; #masmalvenSubscribe button background-color:#3d85c6; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px; #masmalvenSubscribe button:hover, #masmalvenSubscribe button:focus background-color:var(--color-hover); #masmalvenSubscribe button:before display:inline-block; width:20px; height:20px; margin:0px; 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; #masmalvenSubscribe .medsos width:100%; text-align:center; #masmalvenSubscribe .medsos svg width:20px;height:20px;margin-top:7px #masmalvenSubscribe .medsos svg path fill:#fff #masmalvenSubscribe .medsos a display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px; #masmalvenSubscribe .medsos a:last-child margin-right:0px; #masmalvenSubscribe .medsos a:hover box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05); #masmalvenSubscribe .medsos .facebookbackground:#3a579a #masmalvenSubscribe .medsos .twitter background:#00abf0 #masmalvenSubscribe .medsos .googleplus background:#df4a32 #masmalvenSubscribe .medsos .youtube background:#cc181e #masmalvenSubscribe .medsos .instagram background:#992ebc #masmalvenSubscribe .medsos .pinterest background:#e60023 @-webkit-keyframes masmalvenRing   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(10deg);    31%  -webkit-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 masmalvenRing   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 masmalvenRing   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);  

Yang di tandai warna BIRU width:300px adalah lebar dari kotak subscribe. Jika kau ingin lebarnya otomatis mengikuti kawasan, ganti menjadi width:100%.

Setelah itu kamu simpan instruksi HTML ini dimanapun kau mengharapkan kotak berlangganan timbul. Saya akan kasih teladan untuk memasang di sidebar. Masuk Layout (Tata Letak), kemudian klik Add a Gadget (Tambahkan Gadget) yang berada di area sidebar dan pilih HTML/Javascript.

 

Kamu ganti yang ditandai masmalven (ada 3 buah) dengan username Feedburner masing-masing.
Sementara yang ditandai xxxx ialah username atau ID dari setiap media sosial dan ganti dengan milik kau sendiri.


Untuk Subscribe box diatas memakai ikon SVG sehingga tidak memberatkan blog sama sekali. Karena tidak perlu memuat script atau library external apapun. Jika kamu ingin mengubah ikon lonceng atau ikon media umum.