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, sanggup memperlihatkan saluran kepada pengguna untuk mendapat pembaruan konten terbaru dan terupdate dari sebuah website/ Blogs secara online dan tanpa harus mengunjungi website tersebut untuk mendapat informasi konten terbaru.
Selain untuk mempasilitasi pengguna tetap supaya sanggup dengan gampang untuk mendapat pembaruan konten, sanggup juga dipakai untuk menjaring pengguna baru, sehingga diperlukan sanggup meningkatkan lalulintas atau trafik blog.
Berikut ini sebuah widget berlanggnan feeds Artkel, sebagai pola saya memakai Entri Blog yang sanggup diakses oleh pengguna.
Widget berlangganan ini berupa box popup, sudah responsif dan mempunyai 5 efek berbeda yang sanggup digunakan. selain itu box popup widget berlangganan ini sanggup ditampilkan otomatis dengan kontrol frekuensi dan siklus yang sanggup diadaptasi sendiri.
Demo Popup Widget Subscribe dengan 5 Efek berbeda:
slidedown starwars newspaper wiggle swing
Menampilkan Widget Berlangganan secara Manual
Walaupun widget berlangganan ini sanggup ditampilkan otomatis, sanggup juga ditampilkan secara manual, dengan menciptakan sebuah tombol atau link berlangganan artikel untuk menanpilkan widget. Lihat demo pola berikut ini:
Untuk membuatnya, gunakan syntax menyerupai berikut ini:
<button onClick="blossomfeaturebox.showfeaturebox(1)">Subscribe now</button> Untuk menciptakan Popup Widget Subscribe menyerupai pada demo diatas, berikut ini Source Code yang sanggup 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 menyerupai 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 menyerupai 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, menyerupai Form Berlangganan, Criclet reader dan lain sebagainya. Lihat pola 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 supaya sanggup ditampilkan, sanggup 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 wacana cara menciptakan Popup Widget Subscribe dan fitur popup ini juga sanggup dipakai untuk menampilkan konten konten lain, menyerupai pengumuman atau bahkan sebuah Iklan. terimakasih www.dynamicdrive.com semoga bermanfaat untuk semua.
