Baca Juga
Blog Oon 23 - Cara Buat Pop Up Random Post Keren Di Blogger Update 6 Januari 2017 - Selamat Pagi Sahabat Blog Oon semuanya .. Semoga semuanya dalam keadaan baik - baik saja .. aamiin .. di kesempatan pagi ini alhamdulilah masih ada kesempatan untuk buat postingan disini lagi .. Rasanya udah lama ya .. setahun gk buat postingan disini .. dari november 2016 sekarang udah 2017 lagi :v ..
ok lah next tanpa banyak basa basi lagi .. langsung saja ke intinya .. intinya sih kita cuma memerlukan dua bahan saja .. yang pertama kerangka ( Pop Up ) nya .. dan yang kedua tentu isi nya .. mendengar kata Pop Up mungkin sudah tidak asing lagi .. karena dari setiap tahun nya .. bahkan setiap harinya mungkin ada aja yang memposting soal cara buat pop up .. entah itu pop up like box fb / Subcribe Via email / Follow Twitter / G+ .. atau dibuatkan untuk Baner iklan ataupun profil author ??? ..
jadi apa pun juga itu bentuknya .. yang nama nya pop up emang nyebelin .. karena mengganggu pemandangan .. apa lagi jika muncul setiap saat .. tapi ya tergantung sobat sih mau pasang apa tidak .. toh yang terganggu juga pembaca kok .. saya sendiri aja pasang .. bodo amat pembaca mau terganggu apa tidak .. hahahaha :v ..
nah .. jadi sekarang intinya sudah jelaskan .. yang kita perlukan sebuah script untuk membuat pop up nya dulu .. kalau masalah isi nya sih tergantung sobat aja .. mau di isi dengan Recent Post / Random Post .. namun yang saya bahas disini Random Post :v .. dan biar gk penasaran seperti apa jadinya .. silahkan sobat lihat kedua gambar contoh dibawah ini ..
gimana setelah lihat hasilnya .. masih ada yang mau lanjut dan ingin mencobanya ?? .. kalau tidak ada .. ya sudah abaikan saja :v .. awalnya saya cuma buat Random Post model pop up ini .. di blog DP BBM 23 seperti contohnya pada gambar kedua .. namun setelah dilihat lihat Ok juga kalau di blog ini saya pasang juga .. dan lumayan jadi punya bahan untuk buat postingan .. setelah sekian lama gk buat postingan karena kehabisan ide :v ..
ok next .. dari kedua contoh di atas sama saja menggunakan script yang sama .. namun model Pop Up nya saja yang berbeda .. jika ingin lebih keren sesuai keinginan masing - masing .. tinggal di modif ulang aja lagi .. atau buat sendiri .. jika tidak mau repot .. silahkan sobat copas semua script pop up nya dulu di bawah ini .. ingat semuanya ya dan edit yang sekiranya perlu di edit aja .. selebihnya biarkan saja .. dan untuk ukuran width dan height silahkan sobat atur ulang lagi dan sesuaikan dengan resolusi layar yang lebih besar / kecil lagi .. karena saya disini cuma bisa ngasih review menggunakan hp samsung V Plus .. gk menggunakan PC karena gk punya :v ..
nah jika kode diatas sudah sobat copas sekarang saat nya copas kode random postnya .. namun jika sobat sudah punya script JS nya silahkan pakai punya sendiri aja .. kalau yang belum punya dan ingin buat sendiri .. silahkan buat sendiri aja .. bisa sobat upload script JS nya di Google Code atau yourjavascript atau juga bisa sobat upload di dropbox .. terserah sobat mau di upload script JS nya di mana .. yang penting cuma untuk di ambil link / URL nya saja ..
kalau saya sendiri di upload lewat dropbox .. tapi kenapa saya malah ngebahas soal upload script ya ?? :v .. yupss saya bahas karena jika sobat memakai script dari sini .. di dalamnya sudah saya sisipkan link yang menuju ke blog saya yang satunya .. so dengan begitu jika pembaca ada yang mengklik gambar thumbnail nya maka bukanlah postingan sobat yang kebuka .. melainkan menuju blog saya ..
jadi kenapa saya bahas soal tempat upload file ?? .. gunanya jika sobat mengedit ulang JS nya dan mengganti link saya itu .. nanti bisa sobat upload lagi file script JS nya .. menurut yang agan suka .. mau di dropbox / yourjavascript / google code dsb'y .. tapi jika sobat tidak mau ribet harus edit ulang dan di upload lg .. cuma terasa melamakan :v .. ya sudah sobat gunakan saja semua kode script yang saya sahre ini .. soal link blog saya itu biarin aja ya itung - itung amal :v ..
ok Next bray :v biar gk cape bacanya .. silahkan langsung saja sobat copas semua kode script random post nya di bawah ini .. dan paste di dalam pop up tadi ( di tengah kode script pop up ) atau lebih tepat nya hapus tulisan ini //Letakan Kode Script Random Post nya Disini// dan ganti dengan script random post dibawah ini ..
Keterangan
ok next saya rasa cukup sampe disini dulu perjumpaan kita dipagi hari ini .. kurang lebihnya mohon d maklum saja .. dan terimakasih sudah membaca Cara Buat Pop Up Random Post Keren Di Blogger Update 6 Januari 2017 dari awal sampe akhir .. semoga bermanfaat .. dan sampai ketemu lagi dilain waktu dan lain kesempatan .. akhir kata saya ucapkan Wassalamu'Alaikum WR.WB
Posting Sebelumnya
Baca Juga : CARA BUAT BOOTSTRAP TOOLTIP
Baca Juga : CARA BUAT ZONA DOWNLOAD MP3, VIDEO, GAMBAR, APLIKASI DI WAPKA DENGAN TEMPLATE KEKINIAN ALA WEBSITE PROFESIONAL ??
Baca Juga : CARA MUDAH MENGGANTI FONT BLOG DENGAN GOOGLE WEB FONTS ATAU DENGAN CARA MENGGANTI JENIS FONT DI BLOG BLOGGER DIBAGIAN CSS ( CASCADING STYLE SHEET )
Baca Juga : CARA MEMBUAT CSS LOADER
Baca Juga : CARA BUAT CSS TOGGLE SWITCH
Tag : #Pop Up, #Pop Up Like Box Fb, #Pop Up Random Post, #Cara, #Cara Buat, #Cara Membuat, #Cara Ngebuat, #Cara Bikin, #Cara Membikin, #Cara Ngebikin, #Cara Buat Pop Up Random Post Keren Di Blogger Update 6 Januari 2017, #Blog Si Oon, #Blog Oon, #Oon 23
ok lah next tanpa banyak basa basi lagi .. langsung saja ke intinya .. intinya sih kita cuma memerlukan dua bahan saja .. yang pertama kerangka ( Pop Up ) nya .. dan yang kedua tentu isi nya .. mendengar kata Pop Up mungkin sudah tidak asing lagi .. karena dari setiap tahun nya .. bahkan setiap harinya mungkin ada aja yang memposting soal cara buat pop up .. entah itu pop up like box fb / Subcribe Via email / Follow Twitter / G+ .. atau dibuatkan untuk Baner iklan ataupun profil author ??? ..
jadi apa pun juga itu bentuknya .. yang nama nya pop up emang nyebelin .. karena mengganggu pemandangan .. apa lagi jika muncul setiap saat .. tapi ya tergantung sobat sih mau pasang apa tidak .. toh yang terganggu juga pembaca kok .. saya sendiri aja pasang .. bodo amat pembaca mau terganggu apa tidak .. hahahaha :v ..
nah .. jadi sekarang intinya sudah jelaskan .. yang kita perlukan sebuah script untuk membuat pop up nya dulu .. kalau masalah isi nya sih tergantung sobat aja .. mau di isi dengan Recent Post / Random Post .. namun yang saya bahas disini Random Post :v .. dan biar gk penasaran seperti apa jadinya .. silahkan sobat lihat kedua gambar contoh dibawah ini ..
gimana setelah lihat hasilnya .. masih ada yang mau lanjut dan ingin mencobanya ?? .. kalau tidak ada .. ya sudah abaikan saja :v .. awalnya saya cuma buat Random Post model pop up ini .. di blog DP BBM 23 seperti contohnya pada gambar kedua .. namun setelah dilihat lihat Ok juga kalau di blog ini saya pasang juga .. dan lumayan jadi punya bahan untuk buat postingan .. setelah sekian lama gk buat postingan karena kehabisan ide :v ..
ok next .. dari kedua contoh di atas sama saja menggunakan script yang sama .. namun model Pop Up nya saja yang berbeda .. jika ingin lebih keren sesuai keinginan masing - masing .. tinggal di modif ulang aja lagi .. atau buat sendiri .. jika tidak mau repot .. silahkan sobat copas semua script pop up nya dulu di bawah ini .. ingat semuanya ya dan edit yang sekiranya perlu di edit aja .. selebihnya biarkan saja .. dan untuk ukuran width dan height silahkan sobat atur ulang lagi dan sesuaikan dengan resolusi layar yang lebih besar / kecil lagi .. karena saya disini cuma bisa ngasih review menggunakan hp samsung V Plus .. gk menggunakan PC karena gk punya :v ..
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:#ff1493;
width:240px;
height:310px;
position:absolute;
overflow: auto;
border:2px dashed #fff;
top:10%;
left:10%;
margin:10px 0 0 10px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 10px 0 0 10px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQ5aVlysmXZQPQsxauYcHHkh2KSXClauQ1-RBTzX8VUQshsNeplVYeD2zf1stHLAxlmoSIQwHfh81SuVYTVoomZckM3dgL50ZL3Emrx0STrkCFLtCrRZbQj0_FI44laJvksORwFeBO_dj/s1600/fanclose.png) no-repeat;
height:15px;
padding:10px;
position:relative;
padding-right:40px;
margin-top:3px;
margin-right:22px;
}
.remove-borda {
height:1px;
width:206px;
margin:0 auto;
background:#Ff1493;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#fff;
font-size:10px;
margin: 0 auto 5px auto;
float:justify;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options)
{
// key and at least value given, set cookie...
if (arguments.length > 1 &&
String(value) !== "[object Object]")
{
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number')
{
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value :
encodeURIComponent(value),
options.expires ? '; expires=' +
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : '' ].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=
([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_like') != 'yes'){
$('#fanback').delay(1000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
});
</script>
<div id='fanback'>
<div id='fan-exit'></div>
\
<div id='fanbox'>
\
<div id='fanclose'></div>
<div class='remove-borda'></div>
//Letakan Kode Script Random Post nya Disini//
</div></div>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:#ff1493;
width:240px;
height:310px;
position:absolute;
overflow: auto;
border:2px dashed #fff;
top:10%;
left:10%;
margin:10px 0 0 10px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 10px 0 0 10px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQ5aVlysmXZQPQsxauYcHHkh2KSXClauQ1-RBTzX8VUQshsNeplVYeD2zf1stHLAxlmoSIQwHfh81SuVYTVoomZckM3dgL50ZL3Emrx0STrkCFLtCrRZbQj0_FI44laJvksORwFeBO_dj/s1600/fanclose.png) no-repeat;
height:15px;
padding:10px;
position:relative;
padding-right:40px;
margin-top:3px;
margin-right:22px;
}
.remove-borda {
height:1px;
width:206px;
margin:0 auto;
background:#Ff1493;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#fff;
font-size:10px;
margin: 0 auto 5px auto;
float:justify;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options)
{
// key and at least value given, set cookie...
if (arguments.length > 1 &&
String(value) !== "[object Object]")
{
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number')
{
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value :
encodeURIComponent(value),
options.expires ? '; expires=' +
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : '' ].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=
([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_like') != 'yes'){
$('#fanback').delay(1000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
});
</script>
<div id='fanback'>
<div id='fan-exit'></div>
\
<div id='fanbox'>
\
<div id='fanclose'></div>
<div class='remove-borda'></div>
//Letakan Kode Script Random Post nya Disini//
</div></div>
nah jika kode diatas sudah sobat copas sekarang saat nya copas kode random postnya .. namun jika sobat sudah punya script JS nya silahkan pakai punya sendiri aja .. kalau yang belum punya dan ingin buat sendiri .. silahkan buat sendiri aja .. bisa sobat upload script JS nya di Google Code atau yourjavascript atau juga bisa sobat upload di dropbox .. terserah sobat mau di upload script JS nya di mana .. yang penting cuma untuk di ambil link / URL nya saja ..
kalau saya sendiri di upload lewat dropbox .. tapi kenapa saya malah ngebahas soal upload script ya ?? :v .. yupss saya bahas karena jika sobat memakai script dari sini .. di dalamnya sudah saya sisipkan link yang menuju ke blog saya yang satunya .. so dengan begitu jika pembaca ada yang mengklik gambar thumbnail nya maka bukanlah postingan sobat yang kebuka .. melainkan menuju blog saya ..
jadi kenapa saya bahas soal tempat upload file ?? .. gunanya jika sobat mengedit ulang JS nya dan mengganti link saya itu .. nanti bisa sobat upload lagi file script JS nya .. menurut yang agan suka .. mau di dropbox / yourjavascript / google code dsb'y .. tapi jika sobat tidak mau ribet harus edit ulang dan di upload lg .. cuma terasa melamakan :v .. ya sudah sobat gunakan saja semua kode script yang saya sahre ini .. soal link blog saya itu biarin aja ya itung - itung amal :v ..
ok Next bray :v biar gk cape bacanya .. silahkan langsung saja sobat copas semua kode script random post nya di bawah ini .. dan paste di dalam pop up tadi ( di tengah kode script pop up ) atau lebih tepat nya hapus tulisan ini //Letakan Kode Script Random Post nya Disini// dan ganti dengan script random post dibawah ini ..
<p/><center><span style="background:#000;border-radius:5px;border:2px dotted #fff;font-family:oswald;font-size:11px;color:#fff;padding:3px;">Artikel Yang Banyak Dibaca Secara Acak</span></center><p/>
<style type="text/css">
/*widget*/
#rp_plus_img{overflow:auto;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#fff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:11px;font-family:oswald;}
#rp_plus_img .news-text{display:block;font-size:9px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/zm9rpesyue35t/random-post-dpbbm23.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 120;
var numchars = 0;
</script>
<script src="http://oon23.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul>
<!-- /end -->
<style type="text/css">
/*widget*/
#rp_plus_img{overflow:auto;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#fff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:11px;font-family:oswald;}
#rp_plus_img .news-text{display:block;font-size:9px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/zm9rpesyue35t/random-post-dpbbm23.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 120;
var numchars = 0;
</script>
<script src="http://oon23.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul>
<!-- /end -->
Keterangan
- Ganti Artikel Yang Banyak Dibaca Secara Acak dengan kata kata sobat .. atau dihapus saja jika dirasa tidak perlu ..
- Ganti / Rubah 400 ( Kecepatan Antara Perpindahan Judul judul postingan ) .. dan juga 3500 ( Jeda Antara Waktu Jarak Perpindahan antara postingan satu dan yang lainnya ) ..
- Ganti / Rubah 120 sesuai jumlah postingan yang mau sobat terapkan .. minimal 5 postingan .. max 10 post .. mau semua postingan ya gk apa apa .. dan 0 jika ingin ditambahkan deskripsi singkat sekilas isi postingan sobat .. silahkan ganti angka "0" jadi 130 / 150 dan seterusnya .. 130 / 150 ( jumalah karakter huruf ) ..
- Terakhir tentu saja ganti yang ini http://oon23.blogspot.com sesuai link feed blog sobat .. untuk menampilkan judul judul postingan yang ada di blog sobat .. dan ingat yang perlu di ganti cuma link nya saja ..
ok next saya rasa cukup sampe disini dulu perjumpaan kita dipagi hari ini .. kurang lebihnya mohon d maklum saja .. dan terimakasih sudah membaca Cara Buat Pop Up Random Post Keren Di Blogger Update 6 Januari 2017 dari awal sampe akhir .. semoga bermanfaat .. dan sampai ketemu lagi dilain waktu dan lain kesempatan .. akhir kata saya ucapkan Wassalamu'Alaikum WR.WB
Posting Sebelumnya
Baca Juga : CARA BUAT CSS BUTTON, ANIMATED BUTTON, ROUNDED BUTTON, COLORED BUTTON BORDER, HOVERABLE BUTTON
Baca Juga : CARA BUAT BOOTSTRAP TOOLTIPBaca Juga : CARA BUAT ZONA DOWNLOAD MP3, VIDEO, GAMBAR, APLIKASI DI WAPKA DENGAN TEMPLATE KEKINIAN ALA WEBSITE PROFESIONAL ??
Baca Juga : CARA MUDAH MENGGANTI FONT BLOG DENGAN GOOGLE WEB FONTS ATAU DENGAN CARA MENGGANTI JENIS FONT DI BLOG BLOGGER DIBAGIAN CSS ( CASCADING STYLE SHEET )
Baca Juga : CARA MEMBUAT CSS LOADERBaca Juga : CARA BUAT CSS TOGGLE SWITCHTag : #Pop Up, #Pop Up Like Box Fb, #Pop Up Random Post, #Cara, #Cara Buat, #Cara Membuat, #Cara Ngebuat, #Cara Bikin, #Cara Membikin, #Cara Ngebikin, #Cara Buat Pop Up Random Post Keren Di Blogger Update 6 Januari 2017, #Blog Si Oon, #Blog Oon, #Oon 23