Cara Membuat Widget Form Berlangganan di Footer

Cara Membuat Widget Form Berlangganan di Footer Blogspot

Halo sobat, gimana cara Membuat Widget Form Berlangganan di Footer seperti gambar?
Untuk Contoh, Silahkan Cek disini.

Tanpa basa basi, cek tutorial Lengkapnya di bawah ini :

TAHAP PERTAMA


1. Login ke Akun Blogger milik sobat.

2. Dasbor - Template - Edit HTML

3. Tempelkan Kode CSS berikut tepat di atas ]]></b:skin> ( Cari menggunakan CTRL + F )
( Bagian ini tidaklah harus, Tapi terkhusus untuk Pengguna Template Viomagz, bisa mencobanya. )


/* FORM BERLANGGANAN */
.blogbasecampscribe {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.blogbasecampscribe {
color: $(subjudul.color);
}
.blogbasecampscribe {
margin-bottom: 30px;
}
.blogbasecampscribe:before {
z-index: 1;
content: "";
width: 100%;
height: 2px;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}
.blogbasecampscribe:before {
background: $(subjudul.border);
}
.blogbasecampscribe h2 {
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
    font-size: 16px;
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 4px 16px;
    font-weight: 500;
    border: 2px solid $(subjudul.border);
    border-radius: 15px;
}

4. Kemudian SAVE.

( Lanjut Halaman 2 )

TAHAP KEDUA

1. Masih di Dasbor Blogger

2. Klik Tata Letak atau Layout

3. Lihat di Atas Footer , kemudian Tambahkan Gadget

4. Kemudian Klik HTML/Javascript

5. Tempelkan Kode ini di dalamnya.


<script type='text/javascript'> 
var uri = window.location.toString(); if (uri.indexOf("%3D","%3D") > 0) {var clean_uri = uri.substring(0, uri.indexOf("%3D")); window.history.replaceState({}, document.title, clean_uri);}var uri = window.location.toString();if (uri.indexOf("%3D%3D","%3D%3D") > 0) {var clean_uri = uri.substring(0, uri.indexOf("%3D%3D")); window.history.replaceState({}, document.title, clean_uri);} 
var uri = window.location.toString(); if (uri.indexOf("&m=1","&m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("&m=1")); window.history.replaceState({}, document.title, clean_uri);}
var uri = window.location.toString();if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1")); window.history.replaceState({}, document.title, clean_uri);}
</script>

<div class='widget enews-widget' id='enews-ext-2'><center><div class='blogbasecampscribe'><h2><b>BERLANGGANAN</b></h2></div></center><form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BloggerBasecamp', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p></p><input type='text' name='email' placeholder='Alamat Email'/><input type='hidden' value='BloggerBasecamp' name='uri'/><input type='hidden' name='loc' value='en_US'/><input type='submit' value='Lanjutkan'/></form></div><style type='text/css'>.enews-widget {background-color:#374148;color:#FFF;padding:20px !important;margin-top:10px}.enews-widget h4 {font:17px/18px 'Oswald',Arial;margin:0 0 20px 0}.enews .screenread {height:1px;left:-1000em;overflow:hidden;position:absolute;top:-1000em;width:1px}.enews-widget input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#FFF;border:2px solid #FFF;color:#333;padding:9px 11px;width:100%}.enews-widget input[type="submit"] {font:16px/20px "Oswald",Arial;background-color:#4381ce;color:#000;margin:0;width:100%;border:none;cursor:pointer}.enews-widget input[type="submit"]:hover {background-color:#fff}</style>

Catatan :
- Ubah tulisan berwarna merah dengan URL Feedburner milik sobat
- Ubah tulisan #374148 dengan kode warna Footer milik sobat
- Ubah tulisan #4381ce dengan kode warna Tombol ' LANJUTKAN '

Kemudian Klik Save.

UPDATE

Tambahkan SCRIPT BERIKUT Di Atas Variable definitions end
   ========================*/ 
( Terkhusus Pengguna Template Viomagz )


<Group description="Sub Judul" selector=".bloggerbasecampscribe">
<Variable name="subjudul.color" description="Color" type="color" default="#6495ED" value="#6495ED"/>
<Variable name="subjudul.border" description="Border Color" type="color" default="#6495ED" value="#6495ED"/>
   </Group>


Bagaimana sobat? sudah ada yang berhasil? 
Jika ada yang mengalami kesulitan , silahkan komentar ya :) atau hubungi kami disini.
Semoga Bermanfaat.

Salam.

0 Response to "Cara Membuat Widget Form Berlangganan di Footer"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel