Cara Pasang PopUp Fun-Fact Hadis Harian Populer

Ada sebuah pepatah mengatakan "Sambil menyelam minum airnya", nah sambil blogging mudah-mudahan bisa dapat pahala juga karena selain memberikan informasi yang berguna kepada pengunjung (visitor), dengan memasang widget PopUp Fun-Fact Hadis Harian Populer kita juga memberikan tambahan informasi tentang hadis nabi yang diharapkan bisa membawa barokah dan manfaat kedalam blog kita. Gimana, super keren kan ? oke sobat blogger dilanjut tutorialnya sampai selesai, mantab.

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.

PERHATIAN

Penggunaan widget ini hanya cocok digunakan bila anda memiliki niche konten blog relijius, konten berita serta konten blog yang tidak bertentangan dengan norma agama dan norma sosial masyarakat pada umumnya.

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.

Informasi Singkat

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

# Cara Pemasangan Widget Pada Blogger

Cara pemasangan dari Widget PopUp Fun-Fact Hadis Harian Populer ini cukup mudah, anda bisa memasang script pada kode template blog atau bisa juga ditaruh ke dalam kotak gadget blogger. Anda dapat menggunakan tombol Add to blogger untuk mempercepat proses pemasangan kode sekaligus meminimalkan kesalahan pada saat proses pemasangan. Berikut cara pemasangan kode jika ditaruh pada kode template blog.

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 </body>.


<style id="cflWidthStyle">
:root {--cflWidth:300px;--cflHeight:380px;--cflAlign:center;}
.cflWidget{width:var(--cflWidth);left:calc(50% - (var(--cflWidth)/2));top:calc(50% - (var(--cflHeight)/2));z-index:+99;margin:0;padding:0 10px 10px 10px;position:fixed;background-size:100% 100%;background-repeat:no-repeat;box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.cflWidgetImg{position:relative;text-align:left;padding:0;}.headerCflWidget,.contentCflWidget{background-size:100% 100%;background-repeat:no-repeat;}.headerCflWidget{font-size:16px;font-weight:600;height:110px;position:relative;padding:0;color:#fff;}.closeBtnCflWidget{position:absolute;top:2px;right:2px;transition:color .3s,background-color .3s linear .3s;}.titleHeaderCflWidget,.closeBtnCflWidget{box-sizing:border-box;text-align:center;}.titleHeaderCflWidget,.closeBtnCflWidget{height:30px;}.closeBtnCflWidget{color:#fff;padding:5px 10px;border-radius:5px;cursor:pointer;}.titleHeaderCflWidget{font-family:'Arial';font-size:20px;text-shadow:-2px 2px 1px #000;position:absolute;width:100%;cursor:move;top:55px;}.contentCflWidget{text-align:var(--cflAlign);width:100%;height:auto;box-sizing:border-box;color:#fff;padding:0 10px;font-size:15px;border-width:0 8px 8px 8px;border-color:#f3b02f;border-style:solid;background: linear-gradient(to bottom, rgb(33 91 153) 0%,rgba(48,157,207,1) 100%);}.closeBtnCflWidget:hover{background-color:rgba(246,205,41,1) !important;color:red !important;}.closeBtnCflWidget:hover>i{-webkit-animation:scaleDir .7s linear infinite;animation:scaleDir .7s linear infinite;}@keyframes fontSizeAnim{0%{font-size:20px;}50%{font-size:24px;}100%{font-size:20px;}}@-webkit-keyframes zoomin{100%{-webkit-transform:scale(1,1);}}@keyframes zoomin{100%{transform:scale(1,1);}}.aktifCflElmWidget{-webkit-animation:zoomin 2s;animation:zoomin 2s;-webkit-transform:scale(0,0);transform:scale(0,0);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}#bgCflWidCounter,.btnCflWidget,#btnCflWidget{height:24px;width:100%;}.btnCflWidget{margin:0px;}#bgCflWidCounter{background:#9dd53a;background:-moz-linear-gradient(top,#9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);background:-webkit-linear-gradient(top,#9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);background:linear-gradient(to bottom,#9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',endColorstr='#7cbc0a',GradientType=0 );box-sizing:border-box;transition:width .2s ease;}.btnCflWidget{background-color:#0083da;position:relative;}#btnCflWidget{position:absolute;top:0;text-align:center;padding:0 5px 2px 5px;font-size:20px;font-weight:800;color:#000;}#btnCflWidget:hover{animation:fontSizeAnim 1s linear infinite;}.ctnTextBodyArabic{font-family:'Arial',Monotype;font-size:1.5em;text-shadow: -2px 2px 1px #000;}.ctnTextBodyLatin{margin-top:10px;}.cflWidgetImgShare{position:absolute;top:10px;left:115px;}
.fa-facebook.cflWiget,.fa-twitter.cflWiget,.fa-whatsapp.cflWiget{border-radius:5px;display:inline-block;cursor:pointer;color:#fff;font-size:13px;padding:6px 12px;text-decoration:none;text-shadow:0px 1px 0px #333;margin-right:5px;transition:all .5s ease;}
.fa-twitter.cflWiget{border:1px solid #10578a;box-shadow:inset 0px 1px 0px 0px #54a3f7;background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);background-color:#007dc1;}
.fa-facebook.cflWiget{border:1px solid #405ec5;box-shadow:inset 0px 1px 0px 0px #7a8eb9;background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);background-color:#637aad;}
.fa-whatsapp.cflWiget{border:1px solid #1c6104;box-shadow:inset 0px 1px 0px 0px #87e271;background:linear-gradient(to bottom, #25a90f 5%, #20770c 100%);background-color:#20770c;}
.fa-facebook.cflWiget:hover,.fa-twitter.cflWiget:hover,.fa-whatsapp.cflWiget:hover{background:#333;box-shadow:inset 0px 1px 0px 0px #ccc;}
</style>
<script id="cflWidthScript">
//<![CDATA[
/*-- Main Setting --*/
var useTimer='15';
var titleBox='﷽';/* unicode arabic ﷽ */
var decImageURL='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyo4tLXH-6cG7wzM2ZjyzCnIehoGzGVagrRaJd6QdWq0OZgo0EhjtbY9oh_Cgr_KWx7gsi55d1ORl2VZA-eTt1Jc11vJs1HHVXdET4HZnXmzyOVgDpwEG6VFc0gnL29n9lQuosLGaSVQ/s100/muslim-kid.png';
/*-------------------------------*/
/*--Initial Variabel Component--*/
var cflWidgetData = sessionStorage.getItem('cflWidgetData');
if(cflWidgetData === null){
/*--Set Variabel and Data Array--*/
var ntfCflBoxshow,ntfCflBoxshow,bgGTPrWidth;var ntfCflBoxstart=useTimer;
var hrTxtArray01=new Array();var hrTxtArray02=new Array();var hrTxtArray03=new Array();var hrTxtArrayLn=new Array();
hrTxtArray01[0]='مَنْ سَتَرَ مُسْلِمًا سَتَرَهُ اللَّهُ يوم القيامة';
hrTxtArrayLn[0]='Man satara musliman satarahullaahu yaumal qiyamah';
hrTxtArray02[0]='Siapa menutupi aib seorang muslim maka Allah akan menutupi aibnya pada hari kiamat';
hrTxtArray03[0]='Muslim';
hrTxtArray01[1]='اَلْيَدُ اْلعُلْياَ خَيْرٌ مِنَ اْليَدِ السُّفْلَى';
hrTxtArrayLn[1]='Al yadul ulya khairun minal yadis suflaa';
hrTxtArray02[1]='Tangan di atas lebih baik daripada tangan di bawah';
hrTxtArray03[1]='Muslim';
hrTxtArray01[2]='اَلأَنَاةُ مِنَ اللَّهِ وَالْعَجَلَةُ مِنَ الشَّيْطَانِ';
hrTxtArrayLn[2]='Al-anaatu minallahi wal \'ajalatu minas syaithan';
hrTxtArray02[2]='Kehati-hatian datangnya dari Allah dan ketergesa-gesaan datangnya dari setan';
hrTxtArray03[2]='Tirmizi';
hrTxtArray01[3]='لدَّالُّ عَلَى الْخَيْرِ كَفَاعِلِهِا';
hrTxtArrayLn[3]='Ad daallu \'alal khairi kafaa\'ilihi';
hrTxtArray02[3]='Orang yang mengajak kebaikan mendapat pahala yang sama dengan orang yang diajaknya';
hrTxtArray03[3]='Tirmizi';
hrTxtArray01[4]='مَنْ بَنىَ لِلّهِ مَسْجِدًا بَنىَ اللهُ لَهُ بَيْةً فِي الجَنَّةِ';
hrTxtArrayLn[4]='Man banaa lillahi masjidan banallahu lahuu baytan fil jannah';
hrTxtArray02[4]='Barangsiapa membangun masjid karena Allah maka Allah akan bangunkan rumah baginya di dalam surga';
hrTxtArray03[4]='Muslim';
hrTxtArray01[5]='الطُّهُورُ شَطْرُ الإِيمَانِ';
hrTxtArrayLn[5]='At thuhuuru syathrul imaan';
hrTxtArray02[5]='Kebersihan adalah sebagian iman';
hrTxtArray03[5]='Muslim';
hrTxtArray01[6]='مَنْ دَلَّ عَلَى خَيْرٍ فَلَهُ مِثْلُ أَجْرِ فَاعِلِهِ';
hrTxtArrayLn[6]='Man dalla \'ala khayrinn falahu mitslu akhri faa \'ilihi';
hrTxtArray02[6]='Barangsiapa yang menunjuki kepada kebaikan maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya';
hrTxtArray03[6]='Muslim';
hrTxtArray01[7]='رِضَى الرَّبِّ في رِضَى الْوَالِدِ';
hrTxtArrayLn[7]='Ridhar Rabbii fii ridhal waalid';
hrTxtArray02[7]='Ridha Allah terletak di dalam ridha orang tua';
hrTxtArray03[7]='Tirmizi';
hrTxtArray01[8]='وَمَنْ كَانَ يُؤْمِنُ بِاللَّهِ وَالْيَوْمِ اْلآخِرِ فَليَقُلْ خَيْرًا أَوْ لِيَصْمُتْ';
hrTxtArrayLn[8]='Wa Man Kaana Yu\'minu Billaahi Wal Yawmil-Akhir Falyaqul Khayran aw Liyashmut';
hrTxtArray02[8]='Barang siapa yang beriman kepada Allah dan hari akhir maka hendaknya dia berkata yang baik atau diam';
hrTxtArray03[8]='Bukhari, Muslim';
hrTxtArray01[9]='مَنْ أَحَبَّ أَنْ يُبْسَطَ لَهُ فِيْ رِزْقِهِ، وَيُنْسَأَ لَهُ فِيْ أَثْرِهِ فَلْيَصِلْ رَحِمَهُ';
hrTxtArrayLn[9]='Man ahabba ayyubsatha lahu firrizqihi, wayunsa\'a lahu fii atsrihi fal yashil rahimahu';
hrTxtArray02[9]='Barangsiapa yang ingin diluaskan rizkinya dan dipanjangkan umurnya, maka hendaklah ia menyambung silautrahim';
hrTxtArray03[9]='Muslim';
/* for data extend use this array format *//*
hrTxtArray01[]='';
hrTxtArrayLn[]='';
hrTxtArray02[]='';
hrTxtArray03[]='';
*//*---------------------------------------*/
/*--Set Element--*/
var elmCflWidget='<div class="cflWidget" id="cflWidget" style="display:none;">';
elmCflWidget +='<div class="headerCflWidget"><div class="titleHeaderCflWidget">...</div>';
elmCflWidget +='<div class="closeBtnCflWidget" id="closeBtnCflWidget" onclick="closeCflWidget()" title="Close"><i aria-hidden="true" class="fa fa-times"></i></div></div>';
elmCflWidget +='<div class="contentCflWidget"><div id="ctnTextBody">...</div>';
elmCflWidget +='<div class="cflWidgetImg"><img src="" border="0" title="Get this widget !" style="cursor:pointer;"/><div class="cflWidgetImgShare"><div style="margin-bottom:10px;"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> Share :</div>';
/*--Start Share Option --*/
elmCflWidget +='<i class="fa fa-facebook cflWiget" aria-hidden="true" title="Facebook"></i>';
elmCflWidget +='<i class="fa fa-twitter cflWiget" aria-hidden="true" title="Twitter"></i>';
elmCflWidget +='<i class="fa fa-whatsapp cflWiget" aria-hidden="true" title="WhatsApp"></i>';
/*--End Share Option --*/
elmCflWidget +='</div></div></div>';
elmCflWidget +='<div class="btnCflWidget"><div id="bgCflWidCounter"></div><div id="btnCflWidget">...</div></div></div>';
/*--Load HTML Eelement--*/
$('body').append(elmCflWidget);
var hrTxtRandom = Math.floor(Math.random() * hrTxtArray01.length);
$('#ctnTextBody').html('<div class="ctnTextBodyArabic">'+hrTxtArray01[hrTxtRandom]+'</div><div class="ctnTextBodyLatin">'+hrTxtArray02[hrTxtRandom]+'</div><hr><div style="text-align:right;"><i class="fa fa-user-circle-o" aria-hidden="true"></i> HR. '+hrTxtArray03[hrTxtRandom]+'</div>');
/*--Logic Code--*/
$(window).bind('load',function(){
setTimeout(function(){
$('.headerCflWidget').css('background-image','url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4TzVX9wTf7YSON90jofmTwVQ91z7AoejvshOWAXqR-QJ44CW-1w6QSq6VhdOIZsewG-mbagTf4fPtdga6hdhhvlFshEEs4NL1BvBR_4l4iVVK3QxXZdMqsyNGHrKrWDK-XRDP4e7SDM/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<[o:o]> 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();});
}
//]]>
</script>


tmp
KETERANGAN
- 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.

Demikian artikel blog tentang Cara Pasang PopUp Fun-Fact Hadis Harian Populer terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

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

Incoming Search Term

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, popup box widget blogger, widget islam blog, kumpulan widget islami untuk blogger, pasang popup pesan islami saat pertama kali loading, bikin pesan box hadis random harian, Islamic Widgets for Blogs, Cara menambahkan widget islam pada blog, Widget Kalender Islam Masehi-Hijriah hadis nabi untuk Blogger, widget blog keren, widget blog unik, widget blog islami, widget blog gratis