Cara Membuat Widget Subscribe Box Di Blog

 


Hi Sobat Ngehits! kembali lagi di Ini Hits. Kali ini Ini Hits akan berbagi tutorial Cara Membuat Widget Subscribe Box Di Blog.

Widget Kotak Langganan artikel atau Subscribe Box bagi blogger memiliki banyak fungsi. Selain memiliki banyak fungsi, Widget Kotak Langganan atau Subscribe Box juga bermanfaat bagi blog untuk berlangganan update artikel yang akan langsung dikirim via email dan juga manfaat bagi pemilik blog yaitu meningkatkan jumlah pembaca blog yang merupakan hal positif bagi perkembangan blog.

Oke langsung saja kita ke tutorialnya. Oiya pastikan agar kamu mengcopy semua kode yang disediakan agar dapat berjalan dengan baik.

 

Cara Membuat Widget Subscribe Box Di Blog

  • Pertama, buka Blogger  >>  Tata Letak (Layout)  >>  Tambahkan Gadget  >>  HTML/JavaScript.
  • Tambahkan kode berikut di Gadget yang baru saja dibuat.

 <div class='section' id='sidebar-sticky'><div class='widget HTML' data-version='2' id='HTML1'>

<div class='widget-content'>

<div id="container-suscribe">

  <h3 class="title-suscribe">News Letter</h3>

  <div id="subscribe-box">

    <p>

      Get notifications from this blog

    </p>

    <div class="emailfield">

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

        <input required="required" type="text" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email Address&quot;;}" onfocus="if (this.value == &quot;Email Address&quot;) {this.value = &quot;&quot;;}" value="Email Address" />

        <input class="submitbutton" type="submit" id="email-submit" value="Subscribe" />

        <label class="submitbuttonlabel" for="email-submit">

        <svg class="icon" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 3.000000)"><path d="M14.1972579,8.17124146e-14 C17.3979916,0.00978563072 19.990286,2.62120148 20,5.84554455 L20,5.84554455 L20,7.30693069 L19.99354,7.4036631 C19.9466817,7.75161611 19.6506049,8.01980198 19.2923485,8.01980198 L19.2923485,8.01980198 L19.2835029,8.0019802 L19.1721336,7.99309967 C19.0257158,7.96959451 18.889286,7.90013647 18.7831177,7.79318503 C18.6504073,7.65949573 18.5758514,7.47817413 18.5758514,7.28910891 L18.5758514,7.28910891 L18.5758514,5.84554455 C18.5518871,3.41954659 16.6054921,1.45879454 14.1972579,1.43465347 L14.1972579,1.43465347 L5.80274215,1.43465347 C3.39450789,1.45879454 1.44811291,3.41954659 1.42414861,5.84554455 L1.42414861,5.84554455 L1.42414861,12.1544554 C1.44811291,14.5804534 3.39450789,16.5412055 5.80274215,16.5653465 L5.80274215,16.5653465 L14.1972579,16.5653465 C16.6054921,16.5412055 18.5518871,14.5804534 18.5758514,12.1544554 C18.6163388,11.7890822 18.922975,11.5127474 19.2879257,11.5127474 C19.6528764,11.5127474 19.9595126,11.7890822 20,12.1544554 C19.990286,15.3787985 17.3979916,17.9902144 14.1972579,18 L14.1972579,18 L5.80274215,18 C2.599996,17.995093 0.00487110525,15.3808258 -1.42108547e-14,12.1544554 L-1.42108547e-14,12.1544554 L-1.42108547e-14,5.84554455 C-1.42108547e-14,2.61713944 2.59797615,8.17124146e-14 5.80274215,8.17124146e-14 L5.80274215,8.17124146e-14 Z M4.29443312,5.38692655 C4.48070099,5.36682207 4.6671823,5.42289927 4.81203008,5.54257426 L4.81203008,5.54257426 L8.96948253,8.85742574 C9.48880627,9.2678976 10.2192875,9.2678976 10.7386112,8.85742574 L10.7386112,8.85742574 L14.8518355,5.54257426 L14.8606811,5.54257426 L14.9473987,5.48291804 C15.2462388,5.30808809 15.6344967,5.37260085 15.8602388,5.64950495 C15.9785304,5.79800076 16.0329385,5.98799536 16.0113373,6.17714498 C15.9897361,6.36629461 15.8939207,6.53887938 15.7452455,6.65643564 L15.7452455,6.65643564 L11.6320212,9.98019802 C10.5861526,10.8280382 9.09540423,10.8280382 8.0495356,9.98019802 L8.0495356,9.98019802 L3.92746572,6.65643564 L3.8513546,6.58355583 C3.61891283,6.32594359 3.59998262,5.92999594 3.821318,5.64950495 C3.93770999,5.50163353 4.10816526,5.40703103 4.29443312,5.38692655 Z"></path></g></svg>

        </label>

        <input name="uri" type="hidden" value="xxxxx " />

        <input name="loc" type="hidden" value="en_US" /></form>

    </div>

  </div>

</div>

<style type="text/css">

  /* Subscribe Box */

#container-suscribe:after{content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#eceef1,#e6e9ec);background-position:50%;background-repeat:no-repeat;border-radius:120px 0 0}

 

#container-suscribe {

    padding: 20px;

}

#container-suscribe {

    position: relative;

    overflow: hidden;

    padding: 20px;

    border: 1px solid #fff;

}

.sidebar #container-suscribe {

    padding: 0;

}

.sidebar #container-suscribe {

    background-color: #fff;

    margin-bottom: 20px;

    padding: 20px;

    border-radius: 8px;

}

#container-suscribe {

    margin: 0 0 20px;

        margin-bottom: 20px;

    clear: both;

}

#container-suscribe {

    word-wrap: break-word;

}

 

.sidebar h3, .sidebar h4 {

    font-size: 16px;

    margin-bottom: 15px;

}

h3 {

    font-size: 160%;

}

 h3 {

    color: #454545;

    font-weight: 500;

    line-height: 1.2;

    margin: 0 0 10px;

        margin-bottom: 10px;

}

#subscribe-box p {

    font-size: 14px;

    color: #767676;

    margin: 0 0 15px;

    padding: 0;

    line-height: normal;

}

#subscribe-box .emailfield {

    position: relative;

    margin: auto;

    z-index: 1;

}

#subscribe-box .emailfield form {

    position: relative;

}

#subscribe-box .emailfield input {

    background: rgba(255,255,255,.9);

    padding: 13px 20px;

    color: #aaa;

    border: 1px solid rgba(0,0,0,0.05);

    font-size: 14px;

    margin-bottom: 16px;

    border-radius: 99em;

}

input, select, textarea {

    background-color: #fff;

    border: 1px solid #ddd;

    color: #5a5a5a;

    font-weight: 300;

    padding: 10px 12px;

    width: 100%;

}

#container-suscribe h2::after, #container-suscribe h3::after, #subscribe-box .emailfield input[type="submit"] {

    display: none;

}

#subscribe-box .emailfield .submitbutton {

    display: block;

    position: relative;

    overflow: hidden;

    background: rgba(255,255,255,.25);

    color: #fff;

    width: 100%;

    font-size: 15px;

    font-weight: bold;

    border: 0;

    margin: auto;

    box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.13);

    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);

}

 

#subscribe-box .emailfield input {

    background: rgba(255,255,255,.9);

    padding: 13px 20px;

    color: #aaa;

    border: 1px solid rgba(0,0,0,0.05);

    font-size: 14px;

    margin-bottom: 16px;

    border-radius: 99em;

 

}

#subscribe-box .emailfield .submitbuttonlabel {

    position: absolute;

    top: 3px;

    right: 8px;

    display: inline;

    padding: 8px 12.5px 8px 20px;

    cursor: pointer;

    font-size: 13px;

}

#subscribe-box .emailfield .submitbuttonlabel svg {

    fill: #767676;

    width: 22px;

    height: 22px;

    vertical-align: middle;

    transition: all .3s;

}

#subscribe-box .emailfield .submitbuttonlabel svg:hover, #subscribe-box .emailfield .submitbuttonlabel svg:focus {

    fill: #568af5;

}

.dark-mode #container-suscribe:after{background-image:linear-gradient(50deg,#2d2d30,#2d2d30);}

.dark-mode .sidebar #container-suscribe{background:#252526}

    @media screen and (max-width:768px){

      .sidebar #container-suscribe {

    background-color: #fff;

    margin-bottom: 20px;

    padding: 20px;

    border-radius: 8px;

}          

                 

</style></div></div></div>

Perhatikan kode yang ditandai XXXXX, ganti semua dengan alamat feedburner blog anda.

Kemudian klik tombol Simpan.

{alertInfo}


  • Kemudian klik tombol Simpan.


Gimana guys tutorial cara membuatnya, mudah bukan? Jika ingin menerapkannya pada blog sobat, pastikan dengan seksama tutorial diatas. Demikian tutorial Cara Membuat Widget Subscribe Box Di Blog. Terima kasih sudah mengikuti tutorialnya, semoga bermanfaat.

Ini Hits

✉️ info.inihits@gmail.com for personal or business inquiry

Posting Komentar

Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE. Kebijakan Komentar

Lebih baru Lebih lama