Membuat Widget Newsletter Responsive di Blog

Daftar Isi [Tampilkan]
Membuat Widget Newsletter Responsive di Blog
Berlangganan artikel melalui Email (Follow by Email) adalah cara yang sangat bagus menggunakan layanan FeedBurner untuk mendorong pemberitahuan ke email pengguna setiap kali anda menerbitkan artikel baru. Pada artikel ini, Ensikology akan membagikan kepada temen", tutorial ini sepenuhnya menggunakan HTML / CSS.

Langkah pertama adalah menggunakan FontAwesome, jika di tempat anda belum memasang nya.
Kemudia, pastekan css ini di blog anda.
.ensikology-icon {
    text-align: center
}

.ensikology-icon svg {
    width: 50px;
    height: 50px
}

.ensikology-text {
    text-align: center;
    font-size: 17px;
    color: #666
}

.ensikology {
    margin-bottom: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc
}

.ensikology 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
}

.ensikology 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
}

.ensikology form .ensikology-address {
    border: 0;
    outline: 0;
    font-size: 15px;
    width: calc(100% - 110px);
    background: transparent;
    display: block;
    padding-bottom: 2px
}

.ensikology form .ensikology-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
}

.ensikologysocial {
    display: table;
    max-width: 100%;
    margin: auto
}

.ensikologysocial a {
    text-decoration: none;
    cursor: pointer
}

.ensikologysocial 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)
}

.ensikologysocial 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)
}

.ensikologysocial a i.f-facebook {
    background: #3b5998
}

.ensikologysocial a i.f-twitter {
    background: #1da1f2
}

.ensikologysocial a i.f-linkedin {
    background: #0077b5
}

.ensikologysocial a i.f-youtube {
    background: #ff0000
}

.ensikologysocial a i.f-instagram {
    background: #833ab4
}

Kemudia simpan widget ini di template anda.
<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'>
        <div class='widget-content'>
            <div class='ensikology'>
                <div class='ensikology-header'>
                    <div class='ensikology-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'/></svg>
                    </div>
                    <div class='ensikology-text'>
                        Get the lastest articles every day
                    </div>
                </div>
                <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;'
                    method='post' target='popupwindow'>
                    <input autocomplete='off' class='ensikology-address' expr:placeholder='data:messages.emailAddress + &quot; ...&quot;' name='email' required='' type='email' />
                    <button class='ensikology-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'/></svg></button>
                    <input expr:value='data:feedPath' name='uri' type='hidden' />
                    <input name='loc' type='hidden' value='en_US' />
                </form>
            </div>
            <div class='ensikologysocial'>
                <a class='ensikology-facebook' href='#'><i class='fab fa-sm fa-facebook f-facebook'/></a>
                <a class='ensikology-twitter' href='#'><i class='fab fa-sm fa-twitter f-twitter'/></a>
                <a class='ensikology-linkedin' href='#'><i class='fab fa-sm fa-linkedin f-linkedin'/></a>
                <a class='ensikology-youtube' href='#'><i class='fab fa-sm fa-youtube f-youtube'/></a>
                <a class='ensikology-instagram' href='#'><i class='fab fa-sm fa-instagram f-instagram'/></a>
            </div>
        </div>
    </b:includable>
</b:widget>

Kemudian lihat pada bagian tata letak, dan silahkan diisi dengan FeedBurner kalian.
Membuat Widget Newsletter Responsive di Blog

Artikel ini tidak ada yang rumit untuk apa yang anda harapkan. Tinggalkan komentar jika Anda mengalami kesulitan :D

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel