Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog

Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog

Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog - Gan"!!! Jumpa lagi nih. Pada pagi tadi, ane dah posting artikel yang ada kaitannya dengan dunia Blogging.

Nah, pada malam hari ini, ane bakalan post lagi artikel buat para Blogger.

Fanspage...

Apa Itu Fanspage?

Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog
Facebook Fanspage
Fanspage adalah sebuah halaman yang dibuat untuk membantu penggemar dari selebriti, acara televisi, film, dan tidak terkecuali website / blog

Pada tutor kali ini, saya khususkan untuk Fanspage website / blog.

Tujuan dibuatnya Fanspage yaitu untuk memberikan info terbaru dari website / blog kepada penggemar yang me-like halaman yang telah dibuat.

Langsung aja disimak tutorialnya!

Artikel Terkait >> Tutorial Blogger : Cara Buat Sitemap Yang Keren

Persiapan :
  • PC
  • Blog
  • Fanspage

Artikel Terkait >> Tutorial Blogger : Cara Mengganti Template Blog

Langkah-Langkah :
1. Copy script dibawah ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 420px;
    height: 270px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</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_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/blog.dunia.teknologi&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 400px; height: 250px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://www.dunia-teknologi.com" rel="nofollow">Dunia Teknologi</a></div>
</div>
</div>
*NB : Ganti teks yang berwarna merah dengan ID Fanspage kalian

2. Buka Blogger >> Tata Letak >> Tambahkan Gadget
Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog
Blogger >> Tata Letak >> Tambahkan Gadget
3. Klik Tambahkan Gadget
Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog
Klik Tambahkan Gadget
4. Akan terbuka jendela baru, klik HTML / JavaScript
Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog
Klik HTML / JavaScript
5. Pada jendela ini, atur setelannya sebagai berikut :
  • Judul : biarkan kosong agar tampak teks pada blog
  • Konten : paste script yang telah di copy sebelumnya

Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog
Setting HTML / JavaScript
Dibawah ini adalah screenshot hasil dari experiment diatas :
Widget Like Box Fanspage Melayang Keren
Hasil Experiment

Nah, itulah yang sempat saya bagikan pada malam hari ini. Jika kalian menyukai artikel yang berjudul Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog ini, silahkan di share di social media. Terima kasih!

loading...

Subscribe to receive free email updates:

0 Response to "Tutorial Blogger : Cara Membuat Widget Like Box Fanspage Melayang Di Blog"

Posting Komentar

Silahkan komentar tentang Artikel ini, yang saya harapkan kalian bisa berkomentar megikuti peraturan seperti di bawah ini :

1. Harap berkomentar yang sopan.
2. Dilarang komentar link aktif, karna akan dianggap Spam.

Komentar akan dilihat banyak orang, jadi keluarkanlah komentar terbaik anda !!