Membuat Widget Berlangganan keren melalui email di Blog

Cara Membuat Widget Berlangganan keren dan Fast loading melalui email di Blog,- Setelah sebelumnya saya sudah memposting mengenai Daftar Situs Backlink Social Bookmarking High PR 2017, kali ini saya akan membagikan mengenai widget berlangganan. Widget berlangganan melalui email adalah salah satu widget penting dalam sebuah blog, karena dengan adanya widget ini memudahkan para pembaca mendapat info terbaru mengenai blog kita melalui email. Dengan begitu kita akan mendapatkan pengunjung tetap dari widget tersebut. Dalam postingan kali ini saya akan membagikan mengenai Cara Membuat Widget Berlangganan di Blogger. Berikut postingannya.

Cara Membuat Widget Berlangganan keren dan Fast loading melalui email di Blog

Widget berlangganan ini merupakan salah satu dari sekian banyak widget yang dianjurkan bahkan diwajibkan ada disetiap blog untuk menaikkan SEO dari blog tersebut. Hal ini dikarenakan betapa pentingnya dan bergunanya fungsi dari widget ini karena dapat mendapatkan pelangganan atau pembaca tetap setiap ada postingan terbaru. Oleh karena itu, kali ini saya membagikan Cara Membuat Widget Berlangganan keren dan Fast loading melalui email di Blog.

Cara kerja dari widget berlangganan di blog ini adalah pengunjung diharuskan memasukkan emailnya, dimana email tersebut nantinya akan mendapatkan berita terbaru atau pemberitahuan terbaru mengenai postingan terbaru dari blog kita. Jadi, pembaca dapat dengan mudah mengakses mengenai blog kita melalui emailnya.

Langsung saja, berikut tutorial cara membuat widget berlangganan keren dan fast loading melalui email di blogger.

1. Pertama login ke blogger,

2. Buka Template lalu edit HTML,

3. Setelah itu cari kode </head> pada edit HTML,

4. Lalu masukkan kode berikut diatasnya, lalu simpan,

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

5. Setelah itu, buka tata letak, lalu pilih javascript,setelah itu masukkan kode berikut,


<style>
#twist-blogger-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
  color: white;
}
#twist-blogger-sbox-v2 .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #4CB6EA;
}
#twist-blogger-sbox-v2 .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#twist-blogger-sbox-v2 p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#twist-blogger-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform .button:hover {
  background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
  background: #4CB6EA;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox-v2 .text {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#twist-blogger-sbox-v2 .text a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
            <div class="main_tagline">Ayo Berlangganan</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Dapatkan berbagai macam jenis design dan info lainnya secara gratis!</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MogDesignBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address..." />
            <input type="hidden" value="MogDesignBlog" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input value="Join Now" class="button" type="submit" />
            </form>
            </div>
   <div class="text">
Cek Inbox Email Anda untuk Konfirmasi
   </div>
            </div>

Catatan :

Ubah yang berwarna Merah dengan kata kata anda

Ubah yang berwarna Kuning dengan akun feedburner anda

7. Setelah itu simpan.

Itulah postingan saya mengenai Cara Membuat Widget Berlangganan keren dan Fast loading melalui email di Blog, semoga postingan diatas dapat bermanfaat dan dapat menjadi acuan untuk anda yang ingin membuat widget berlangganan yang keren dan fast loading.

Bagikan Artikel ini