Widget PopUp Fun-Fact Hadis Harian Populer merupakan sebuah widget premium codeflare untuk menambah daya tarik blog dan meningkatkan interaksi pengunjung agar blog anda terlihat dinamis dan menarik. Widget ini memiliki tombol share ke facebook, twitter dan whatsapp sehingga pengunjung bisa membagikan hadis harian yang secara acak muncul pada saat widget ini tampil. Tak lupa dilengkapi juga dengan link sumber URL blog, jadi hadis harian yang dibagikan (share) mencakup link sumber dimana pengunjung melihat widget hadis ini. Link sumber ini juga bagian dari promosi lho sehingga bisa mendapatkan promosi gratis untuk alamat URL blog anda.
Informasi hadis secara default sudah saya buatkan sampai 10 dan data hadis yang ditampilkan akan dipilih secara acak agar widget terlihat dinamis dan uptodate. Selain 10 hadis yang sudah saya buatkan, anda masih bisa menambahkan lagi dengan mudah tanpa perlu memodifikasi keseluruhan script.
Seperti yang mungkin sudah anda ketahui popup window (kotak box yang muncul secara tiba-tiba pada viewport/layar browser) baik yang internal maupun external window banyak digunakan untuk memaksimalkan tampilan informasi yang diberikan kepada pengunjung (visitor) pada halaman web atau blog, biasanya banyak digunakan untuk menampilkan iklan, penawaran produk, info blog dan sejenisnya.
Beda hal dengan penggunaan popup window pada umumnya, penggunaan popup window kali ini admin akan menjadikannya sebagai widget yang digunakan untuk menampilkan informasi berupa hadis harian populer ditambah dengan tampilan yang super ciamik. Sebagai contoh seperti yang terlihat pada popup window yang muncul di halaman ini atau seperti yang terlihat pada gambar di bawah ini.
Tuh kan bener sambil menyelam bisa minum airnya, artinya selain memberikan informasi yang berguna, widget ini dapat memberikan pahala baik bagi pengunjung maupun bagi pemilik/developer blog. Asikan bisa dapet kebaikan pahala yang berlipat-lipat. Oke kalo sudah cocok tinggal kita bungkus.
Widget blogger hadis harian populer menggunakan kode script sessionStorage jadi widget hanya akan muncul ketika pengujung melakukan new session (sesi baru dan bukan refresh page) ke halaman blog anda, apabila pengunjung beralih ke halaman artikel lainnya widget ini tidak akan muncul lagi. Widget ini juga sudah dibuat responsif jadi full kompatible dengan berbagai perangkat yang digunakan oleh pengunjung blog anda.
Oh yaa pastikan juga anda sudah memasang library jQuery pada kode template blog anda.
Etimologi
Hadis secara harfiah berarti "berbicara", "perkataan" atau "percakapan". Dalam terminologi Islam istilah hadis berarti melaporkan, mencatat sebuah pernyataan dan tingkah laku dari Nabi Muhammad.
Menurut istilah ulama ahli hadis,[siapa?] hadis yaitu apa yang diriwayatkan dari Nabi, baik berupa perkataan, perbuatan, ketetapannya (bahasa Arab: تقرير, translit. taqrīr), sifat jasmani atau sifat akhlak, perjalanan setelah diangkat sebagai Nabi (bahasa Arab: بعثة) dan terkadang juga sebelumnya, sehingga arti hadis di sini semakna dengan sunnah.
Kata hadis yang mengalami perluasan makna sehingga disinonimkan dengan Sunnah, maka pada saat ini bisa berarti segala perkataan (sabda), perbuatan, ketetapan maupun persetujuan dari Nabi Muhammad ﷺ yang dijadikan ketetapan ataupun hukum. Kata hadis itu sendiri adalah bukan kata infinitif, maka kata tersebut adalah kata benda.
Sumber : Wikipedia
- Silakan login dahulu ke blog Anda.
- Klik tombol Tema untuk masuk ke tema editor jika anda ingin memasang kode widget kedalam kode template blog.
- Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
- Geser scrollbar ke posisi paling bawah.
- Letakan kode dibawah ini tepat diatas kode
.
';
elmCflWidget +='
';
elmCflWidget +='
elmCflWidget +='
/*--Start Share Option --*/
elmCflWidget +='';
elmCflWidget +='';
elmCflWidget +='';
/*--End Share Option --*/
elmCflWidget +='
';
elmCflWidget +='
';
/*--Load HTML Eelement--*/
$('body').append(elmCflWidget);
var hrTxtRandom = Math.floor(Math.random() * hrTxtArray01.length);
$('#ctnTextBody').html('
');
/*--Logic Code--*/
$(window).bind('load',function(){
setTimeout(function(){
$('.headerCflWidget').css('background-image','url(https://1.bp.blogspot.com/-fmVFJ97TbdM/X-iCie2yBhI/AAAAAAAADkM/FSVN0wNbomIDT-uy42Dz8FxAbufrWxWjACLcBGAsYHQ/s0/bgheader01.png)');
$('.cflWidget').css({'display':'inline-block'});
$('.titleHeaderCflWidget').html(titleBox);
$('.cflWidgetImg').find('img').attr({'src':decImageURL,'onclick':'shareCflWidget("g")'});
$('.cflWidget').addClass('aktifCflElmWidget');
$('.fa-facebook.cflWiget').attr('onclick','shareCflWidget("f")');
$('.fa-twitter.cflWiget').attr('onclick','shareCflWidget("t")');
$('.fa-whatsapp.cflWiget').attr('onclick','shareCflWidget("w")');
$("#cflWidget").draggable();
bgGTPrWidth=parseInt($('#btnCflWidget').css('width'));
cflWidgetData = sessionStorage.setItem('cflWidgetData',true);
if(useTimer==''||useTimer==0){$('.btnCflWidget').hide();$('.closeBtnCflWidget').css({'background-color':'rgba(246,205,41,.4'});}
else{ntfCflBoxshow=setInterval(ntfCflBoxtimer,1000);}
}, 1000);});}else{if($('#cflWidget')){$('#cflWidget,#cflWidthStyle,#cflWidthScript').remove();}}
function ntfCflBoxtimer(){
ntfCflBoxstart -= 1;
$('#btnCflWidget').html(ntfCflBoxstart);
$('#bgCflWidCounter').css({'width':bgGTPrWidth-((ntfCflBoxstart/useTimer)*bgGTPrWidth)+'px'});
if(ntfCflBoxstart==0){clearInterval(ntfCflBoxshow);
$('#cflWidget').animate({opacity: 0},1000,function(){$(this).remove();$('#cflWidthStyle,#cflWidthScript').remove();});
}}
function shareCflWidget(x){
var txt=escape('*'+hrTxtArrayLn[hrTxtRandom]+'*\n\n'+hrTxtArray02[hrTxtRandom]+'\n\n[] HR. '+hrTxtArray03[hrTxtRandom]+' []');
var url=escape(window.location.href);
if(x=='g'){window.open('https://codeflare.blogspot.com','blank');}
var has=escape('#codeflare,#hadist,#widget,#blog,#blogger,#blogspot');
var wa=txt+escape('\n\n from :\n')+url;
if(x=='f'){window.open('https://www.facebook.com/sharer/sharer.php?u='+url+'&t='+txt,'blank');}
if(x=='t'){window.open('https://twitter.com/intent/tweet?text='+txt+'&url='+url+'&hashtags='+has,'blank');}
if(x=='w'){window.open('https://api.whatsapp.com/send?phone=&text='+wa,'blank');}
}
function closeCflWidget(){
clearInterval(ntfCflBoxshow);ntfCflBoxstart=0;
$('#cflWidget').animate({opacity: 0},1000,function(){$(this).remove();$('#cflWidthStyle,#cflWidthScript').remove();});
}
- Jika kode di atas akan ditaruh ke dalam kode template blogspot maka kode di atas perlu diparsing terlebih dahulu, apabila tidak diparsing maka akan muncul pesan kesalahan pada saat kode template hendak disimpan. Tool untuk parsing kode html bisa dilihat pada tombol link di bawah ini.
Alat Parse Kode Blogspot
Catatan !
Cukup kode javascript saja yang diparser karena hanya kode javascript yang perlu dikonversi agar tidak menimbulkan pesan error ketika kode template blogspot sudah diimplementasikan dengan kode safelink codeflare.
semua kode script yang di dalam tag script dimasukan ke dalam kotak parser editor, tag script (text berwarna merah) tidak perlu diikutsertakan. - Pada kode variabel Array digunakan untuk data informasi hadis, silakan gunakan format diatas ditambahkan dengan nomor urut yang sesuai di dalam braket [no urut]. Pada kode diatas sudah ada data informasi hadis sampai dengan nomor urut 9 yang terakhir, apabila mau menambahkan maka kode variabel Array seperti format di bawah ini.
Contoh :
hrTxtArray01[10]='Data Tulisan Unicode Arabic';
hrTxtArrayLn[10]='Data Text Dalam Tulisan Latin';
hrTxtArray02[10]='Data Terjemahan Hadis';
hrTxtArray03[10]='Data Riwayat Hadis'; - Pada kode :
--elmWidth:300px;
--elmHeight:380px;
--elmAlign:center;
Merupakan konfigurasi untuk lebar elemen, tinggi elemen dan posisi elemen. Silakan anda sesuaikan konfigurasi tersebut sesuai dengan kebutuhan dari dimensi popup notifikasi yang ingin anda tampilkan. - Pada kode :
var useTimer='21';
var titleBox='Notifikasi';
Merupakan kode untuk mengatur waktu hitungan mundur dan judul box popup notifikasi. Apabila tidak ingin menggunakan waktu penghitung mundur maka silakan variabel kode useTimer dikosongkan saja.
var useTimer='';
Contoh apabila tidak ingin menggunakan waktu penghitung mundur.
blog, blogger, blogspot, widget, popup, funfact, hadis, harian, islamic, islam, random, rotate, zoomin, css, html, javascript, jquery, keren, gratis, premium, dinamis, uptodate, kece, ciamik, cara, pasang, bikin, nabi, pesan, notif, notifikasi, melayang, float, responsif, responsive
Widget blogger islamic, random hadist quote blogspot widget, bikin pesan melayang di halaman blog, widget hadis nabi dengan tampilan super premium unik dan menarik, kutipan hadis populer harian dalam bentuk widget blogger, Funfact tentang hadis harian populer, popup window dengan tampilan arab, notif box melayang dengan tampilan keren, box notification float window on blogger
