Cara Membuat Kotak Berlangganan (Subscribe By Email) dan Media Sosial - Subscribe By Email adalah sebuah utilitas blogger yang hebat yang menggunakan layanan Feedburner untuk mendorong pemberitahuan ke email pengguna setiap kali anda menerbitkan artikel baru. Pada kesempatan ini saya akan membagikan utilitas Subscribe By Email yang indah dan profesional kepada anda, sepenuhnya menggunakan HTML / CSS.
Subscribe By Email ini mirip dengan punya nya mbk Igniel di postingannya yang berjudul Kotak Berlangganan (Subscribe Via Email) dan Media Sosial Ala Igniel. Tapi secara keseluruhan kode yang dipakai sangat berbeda. Postingan ini menggunakan Font Awesome Versi 5 yang diimplementasikan dengan sistem Widget v2.
1.CSS
Ini adalah CSS dasar seperti demo, Anda dapat menyesuaikannya lebih lanjut sesuai dengan keinginan Anda. Kunjungi halaman pengeditan HTML dan masukkan kode CSS berikut diatas tag ]]></b:skin>
/* Subscribe Box by anaz.my.id*/
.fbe-icon {
text-align: center
}
.fbe-icon svg {
width: 50px;
height: 50px
}
.fbe-text {
text-align: center;
font-size: 17px;
color: #666
}
.fbe {
margin-bottom: 20px;
padding-bottom: 25px;
border-bottom: 1px solid #ccc
}
.fbe form {
margin-top: 20px;
padding: 0;
border: 1px solid #ccc;
border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative
}
.fbe form::before {
content: '';
display: inline-block;
position: relative;
top: 7px;
left: 15px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path 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'></path></svg>") no-repeat
}
.fbe form .fbe-address {
border: 0;
outline: 0;
font-size: 15px;
width: calc(100% - 110px);
background: transparent;
display: block;
padding-bottom: 2px
}
.fbe form .fbe-submit {
display: inline-block;
width: 35px;
height: 35px;
line-height: 45px;
background: #008c5f;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 2px;
border: 0;
border-radius: 0 50px 50px 0;
cursor: pointer
}
.fbe-social {
display: table;
max-width: 100%;
margin: auto
}
.fbe-social a {
text-decoration: none;
cursor: pointer
}
.fbe-social a:hover i {
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px)
}
.fbe-social a i {
text-align: center;
display: inline-block;
border-radius: 30px;
background: #ccc;
margin: 0 7px;
width: 35px;
line-height: 35px;
height: 35px;
color: #fff;
-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4)
}
.fbe-social a i.f-facebook {
background: #3b5998
}
.fbe-social a i.f-twitter {
background: #1da1f2
}
.fbe-social a i.f-linkedin {
background: #0077b5
}
.fbe-social a i.f-youtube {
background: #ff0000
}
.fbe-social a i.f-instagram {
background: #833ab4
}Kemudian klik "Simpan"
2.Kode HTML
Masukkan kode widget berikut ini diposisi yang ingin sobat tampilkan (b:section atau di Sidebar)
<!-- Subscribe Box by anaz.my.id -->
<b:widget id='FollowByEmail69' locked='false' title='Follow By Email' type='FollowByEmail' version='2' visible='true'>
<b:includable id='main'>
<b:include name='widget-title' />
<b:include name='content' />
</b:includable>
<b:includable id='content'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></link>
<div class="widget-content">
<div class="fbe">
<div class="fbe-header">
<div class="fbe-icon">
<svg fill="#008c5f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>
</div>
<div class="fbe-text">
Get the lastest articles every day
</div>
</div>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("https://feedburner.google.com/fb/a/mailverify?uri=AnazDzgn", "popupwindow", "scrollbars=yes,width=550,height=520"); return true"
target="popupwindow">
<input autocomplete="off" class="fbe-address" name="email" placeholder="Email Address ..." required="" type="email">
<button class="fbe-submit" type="submit"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" fill="#fff"></path></svg></button>
<input name="uri" type="hidden" value="AnazDzgn">
<input name="loc" type="hidden" value="en_US">
</form>
</div>
<div class='fbe-social'>
<a class='fbe-facebook' href='#'><i class='fab fa-sm fa-facebook f-facebook'/></a>
<a class='fbe-twitter' href='#'><i class='fab fa-sm fa-twitter f-twitter'/></a>
<a class='fbe-linkedin' href='#'><i class='fab fa-sm fa-linkedin f-linkedin'/></a>
<a class='fbe-youtube' href='#'><i class='fab fa-sm fa-youtube f-youtube'/></a>
<a class='fbe-instagram' href='#'><i class='fab fa-sm fa-instagram f-instagram'/></a>
</div>
</div>
</b:includable>
</b:widget>Ganti URL Feedburner di atas (anazdzgn) dengan alamat Feedburner blog sobat. Dan ganti tanda # dengan link media sosial sobat.
Kemudian Klik "Simpan"
Jika sobat tidak tahu alamat Feedburner sobat, klik "Tata Letak" dan pilih widget "Ikuti Lewat Email", la yang diberi tanda Panah Merah tersebut adalah kode Feedburner sobat.
Dan selanjutnya Cek blog sobat, apakah tombol Subscribe by Email sudah terpasang? Jika sudah, berarti sobat sudah
Demikian artikel dari saya tentang Cara Membuat Utilitas Subscribe By Email, Semoga artikel diatas bermanfaat bagi sobat. Jika ada yang ingin ditanyakan, silahkan tinggalkan di kolom komentar
Posting Komentar