Seiring berjalannya dan berkembangnya dunia blog. semakin lengkap dengan widgets yang sangat bermanfaat bagi blog atau website itu tersendiri. seperti adanya fitur sosial fans page seperti yang diberikan oleh developer milik facebook.com. Dan sering juga kita melihat diblog. seperti diblog ini menggunakan fans page pada blog tersebut. namun bagaimana jika kita membuat sesuatu lebih keren, unik, dan menarik untuk pengunjung blog kita. tentu sangat mengasikkan.
maka dari itu disini kita akan belajar bersama tentang bagaimana cara memasang widgets fans page pop up di blog dengan keren.
Bagaimana ? penasaran bukan tentang bagaimana carana. jika kamu tertarik untuk menggunakan di blog atau website kamu. silahkan lanjutkan diskusi kita tentang bagaimana cara membuatnya.
Namun sebelum kita membuat atau memasang widgets fans page pop up di blog. silahkan untuk mendahului tentang bagaimana cara membuat fans page facebooknya dahulu di "cara membuat fans Page facebook di blog". disitu anda akan dipandu bagaimana langkah-langkah untuk membuat fanspagenya dahulu di facebook.
Apabila anda sudah memiliki akun facebook dan fans page yang akan anda gunakan di blog. mari kita lanjutkan tentang bagaimana cara membuatnya sebagai POP Up di blog kita. dan tentunya pula disini kita bisa mengatur waktunya dan seberapakali muncul. agar tidak mengganggu para pengunjung web atau blogger kita.
Bagaimana Cara memasang widgets fans page pop up di blog ?
Langsung aja dah diikutin langkah-langkahnya :
1. Yang paling pertama silahkan buka akun blog. dan blog yang akan anda pasang
2. Setelah itu. menuju ke tata letak blogger > Tambah widget
3. Copas kode ini
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></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%;
}
#JasperRoberts {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-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: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNBB7StUZ4jOvLPuBJcHy8iZGyqUGPlyEELPnC4cDJPC3xM9QqsTWy4fVD9AJCJMItHP_1JjPjh6PgL54U5CDq84lgGy5ajncBwNq3yYMu-iVAET3_tPLeXxgUuba9SB0gkATp_8J2Ga8/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
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_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/onlinenetz21&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts Consulting</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Widget</a></span></center>
</div>
</div>
5. simpan. dan lihat blog anda.
Bang. Cara Mengaturnya biar tambah keren bagaimana ?
Oh iya sob. ini justru yang sangat penting. sebelum kita menampilkannya di blog kita.
Aturan-aturannya ialah.:
1. Masukin alamat Fans Page Milik Kamu
Silahkan anda ganti kode html yang kaya gini ( http://www.facebook.com/onlinenetz21 ) Dengan alamat url milik kamu.
2. Mengatur waktu tampilan.
di pengaturan default. ini akan menampilkan pop up selama 20 detik. Jika anda ingin mengurangi atau menambahkan waktu tampilan pop up apda blog anda. anda bisa mencari kode ( 20000 ). dan kemudian ganti sesuai dengan keinginan anda untuk seberapa lama ditampilkan.
Contohnya :
1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.
3. Mengatur agar tampil di setiap halaman
Secara default. ini akan menampilkan fans page pop up hanya pada pertama kali pengunjung datang di blog anda. yang artinya tidak akan menampilkan untuk kedua-ketiga-atau selanjutnya. namun, bagi anda yang ingin jika pop ini selalu tampil di blog atau halaman anda. silahkan cari kode dan hapus kode tersebut.
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
4. Menampikan hanya pada Home Page
nah silahkan anda buka template > Html. Kemudian silahkan anda cari kode </body>. dan silahkan anda masukkan atau tambah kode ini
<b:if cond="data:page.type == "index"">
SEKALIAN MASUKIN KODE WIDGET YANG KAYA LANGKAH PERTAMA
ADA MASALAH DALAM MEMASANG WIDGETS FANS PAGE POP UP DI BLOG ? Bagi anda yang masih bingung dan pusing. silahkan anda bertanya dan diskusi di kolom komentar atau hubungi admin di bawah halaman.
happy Blogging
Terima Kasih Atas Kunjungan Anda
DITULIS OLEH Mashudi
Jika mengutip harap berikan link yang menuju ke artikel Cara memasang widgets fans page pop up di blog ini. Jika artikel ini bermanfaat, ajak kawan mu untuk ambil manfaatnya. Terima kasih atas perhatiannya, baca juga yang lainnya yah.
DITULIS OLEH Mashudi
Jika mengutip harap berikan link yang menuju ke artikel Cara memasang widgets fans page pop up di blog ini. Jika artikel ini bermanfaat, ajak kawan mu untuk ambil manfaatnya. Terima kasih atas perhatiannya, baca juga yang lainnya yah.
Tag :
Tips dan tricks Blogger
0
Comments
