Cara Membuat Kotak Berlangganan (Subscribe By Email) dan Media Sosial Ala AnazDzgn.com


Cara Membuat Kotak Berlangganan (Subscribe By Email) dan Media Sosial Ala AnazDzgn.com - 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.



Postingan ini menggunakan Font Awesome 5, 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 anazdzgn.com */
.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 anazdzgn.com -->
<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(&quot;https://feedburner.google.com/fb/a/mailverify?uri=AnazDzgn&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); 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 yang ditandai Merah diatas dengan alamat Feedburner blog 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?

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

Post a Comment

0 Comments

close