Cara Membuat Subscribe Box Desain Keren di Blog

Salam Blogger, pada kesempatan kali ini DespaTekno akan memberi tutorial blogger yaitu cara membuat kotak berlangganan di blogger dengan desain yang keren. Bagi yang belum tahu kegunaan dari Subscription Box ini adalah memberi fasilitas bagi pengguna blog kalian semua dalam berlangganan artikel/postingan tak hanya itu saja dengan memasang widget ini di blog, Anda juga bisa mendapatkan views dari para langganan blog. . Sekeren apa sih desain Subscriber Box yang akan saya bagikan? Berikut contohnya.

Widget ini dapat dipasang sesuai keinginan Anda, bisa dipasang di sidebar atau footer. Bagi kalian yang ingin memasang subscription box ini harap ikuti langkah-langkah berikut ini.

Cara Membuat Subscription Box Desain Keren di Blogger

1. Buka Blogger dan Login > Tema > Edit HTML > Tambahkan kode di bawah ini tepat berada di sebelum kode </head> > Simpan

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

1. Buka Blogger dan Login > Tata Letak > Klik Tambahkan Gadget > Pilih HTML/JavaScript > Kemudian masukkan kode di bawah ini.

<style>
/* ----------------------------------------------------
Design : http://despatekno.blogspot.com
-----------------------------------------------------*/
#subsription-box {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
}
#subsription-box .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: #FF5959;
}
#subsription-box .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;
}
#subsription-box 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;
}
#subsription-box .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#subsription-box .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;
}
#subsription-box .rssform .button:hover {
  background: #000000;
}
#subsription-box .rssform .button {
  background: #FF5959;
  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;
}
#subsription-box form {
  margin-bottom: 10px !important;
}
</style>
<div id="subsription-box">
            <div class="main_tagline">Berlangganan</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
<div class="rssform">
                 <p>Langganan gratis agar tidak ketinggalan update terbaru</p>
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DespaTekno', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address..." />
            <input type="hidden" value="DespaTekno" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input value="Langganan" class="button" type="submit" />
            </form>
            </div></div>

2. Selanjutnya ganti kode ID feedburner (bewarna merah) dengan kode miliki Anda dan jika kalian ingin mengkostimasi sesuai keinginan Anda silakhan ganti kode warna dengan yang kalian kehendaki.

3. Setelah langkah di atas telah selesai, Simpan

Ya, itulah tadi Cara Membuat Subscribe Box Desain Keren di Blogger. Apabila pada tips kali ini ada yang mungkin belum dipahami, kalian dapat bertanya melalui kolom komentar di bawah. Sekian dan Semoga Bermanfaat.

Tweet

Lanngganan untuk menerima update terbaru via email: