Membuat Popup Widget Subscribe
Popup Widget Subscribe - Sebuah widget berlangganan artikel di blog, baik berupa Form berlangganan via email maupun chicklet reader berupa Ikon feed atau tombol sosial media, dapat memberikan akses kepada pengguna untuk mendapatkan pembaruan konten terbaru dan terupdate dari sebuah website/ Blogs secara online dan tanpa harus mengunjungi website tersebut untuk mendapatkan informasi konten terbaru.
Selain untuk mempasilitasi pengguna tetap agar dapat dengan mudah untuk mendapatkan pembaruan konten, dapat juga digunakan untuk menjaring pengguna baru, sehingga diharapkan dapat meningkatkan lalulintas atau trafik blog.
Berikut ini sebuah widget berlanggnan feeds Artkel, sebagai contoh saya menggunakan RSS Feedburner dari Google untuk menampilkan Entri Blog yang dapat diakses oleh pengguna.
Widget berlangganan ini berupa box popup, sudah responsif dan memiliki 5 efek berbeda yang dapat digunakan. selain itu box popup widget berlangganan ini dapat ditampilkan otomatis dengan kontrol frekuensi dan siklus yang dapat disesuaikan sendiri.
Demo Popup Widget Subscribe dengan 5 Efek berbeda:
slidedown starwars newspaper wiggle swing
Menampilkan Widget Berlangganan secara Manual
Walaupun widget berlangganan ini dapat ditampilkan otomatis, dapat juga ditampilkan secara manual, dengan membuat sebuah tombol atau link berlangganan artikel untuk menanpilkan widget. Lihat demo contoh berikut ini:
Untuk membuatnya, gunakan syntax seperti berikut ini:
<button onClick="blossomfeaturebox.showfeaturebox(1)">Subscribe now</button>
Untuk membuat Popup Widget Subscribe seperti pada demo diatas, berikut ini Source Code yang dapat digunakan,
Source Code
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/blossomfeaturebox.css" />
<link rel="stylesheet" href="assets/optincontent.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/blossomfeaturebox.js">
/**
* JK Responsive Gallery Script
* Copyright JavaScript Kit (www.javascriptkit.com)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
*/
</script>
<script>
jQuery(function($){ // on DOM load
blossomfeaturebox.init({
optinfile: 'assets/optincontent.txt', // #id of feature box markup on page or path to .txt file with markup
fxeffect: 'swing',
displaytype: 'immediate', // displaytype: '5s', // 'integer%" OR 'integer PLUS 's' OR "always"
displayfreq: {duration: 'always', cookiename: 'featurebox'}
})
})
</script>
</head>
<body>
<button onClick="blossomfeaturebox.showfeaturebox(1)">Open Feature Box Again</button>
<div style="height:1500px"></div>
</body>
</html>
Custom Initial code
Dalam tag <head> pada Source Code, lihat Jquery seperti berikut ini:
<script>
jQuery(function($){ // on DOM load
blossomfeaturebox.init({
optinfile: 'assets/optincontent.txt', // #id of feature box markup on page or path to .txt file with markup
fxeffect: 'swing',
displaytype: '20%', // 'integer%" OR 'integer PLUS 's' OR "always"
displayfreq: {duration: 'always', cookiename: 'featurebox'}
})
})
</script>
Pada Jquery diatas, cari code seperti berikut ini:
optinfile: 'assets/optincontent.txt', // #id of feature box markup on page or path to .txt file with markup
optincontent.txt merupakan konten konten yang akan ditampilkan, seperti Form Berlangganan, Criclet reader dan lain sebagainya. Lihat contoh optincontent.txt berikut ini:<div class="optindescription">
<div class="optinimage">
<img src="assets/lab.png" />
</div>
<h2>Sign up for exclusive content</h2>
Enter your email address below to receive exclusive scripts not found on the site. Also, get our monthly newsletter packed with tricks and bonus goodies.
</div>
<div class="optinform">
<form method="post" action="">
<input type="email" name="youremail" pattern="\S+@\S+\.\S+" placeholder="Enter Email Address" required /> <input type="submit" value="Subscribe!" />
</form>
</div>Untuk mendefinisikan Markup
optincontent.txt tersebut agar dapat ditampilkan, bisa dilakukan dengan 2 cara, melalui file penyimpanan external dan Internal.+ Sebagai file External yang tersimpan dalam server dan diambil melalui Ajax
optinfile: 'http://' + location.hostname + '/assets/optincontent.txt',+ File Internal yang tersimpan di sumber HTML dalam template
optinfile: '#optincontent',Jika
optincontent.txt tersimpan di sumber HTML dalam template, letakan dalam elemen DIV yang disembunyikan. Contoh,<div id="optincontent" style="display:none">
<!-----optincontent.txt----->
</div>Itulah sekilas tentang cara membuat Popup Widget Subscribe dan fitur popup ini juga bisa digunakan untuk menampilkan konten konten lain, seperti pengumuman atau bahkan sebuah Iklan. terimakasih www.dynamicdrive.com semoga bermanfaat untuk semua.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon