Showing posts with label Plugin. Show all posts
Showing posts with label Plugin. Show all posts

[No Thumbnail] Simple Recent Posts Widget For Blogger

7/16/2016 Add Comment
Berbeda dengan widget sebelumnya yang serupa yaitu; Recent Posts Widget with Image Slider, widget recent posts kali ini lebih sederhana tanpa menggunakan thumbnail gambar.

Simple Recent Posts Widget ini cocok digunakan untuk blog yang sedikit sekali menggunakan gambar di setiap postingan/artikelnya.

Simple Recent Posts Widget For Blogger

Bagi yang ingin mencoba, berikut penerapannya :
  • Buka Blogger
  • Tata Letak/Layout
  • Tambahkan widget baru/Add widget
  • Save kode dibawah kedalam widget tersebut

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.URL_BLOG_ANDA.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Note :
Ganti kode yang ditandai dengan URL blog Anda dan jumlah postingan/artikel yang akan ditampilkan pada widget Recent Posts tersebut.

Simpan widget dan lihat hasilnya.

[Blogger] Memasang Komentar Facebook Responsive

7/11/2016 Add Comment
Ada banyak plugin komentar yang bisa dipasang di blog dengan flatform Blogger selain dari komentar bawaan Blogger dan komentar Google+, yaitu :
  1. Disqus,
  2. Powr, dan
  3. Facebook (Social Plugin) Comment Box.

Dari beberapa plugin komentar diatas, Facebook merupakan salah satu flatform social media yang banyak digunakan terutama oleh orang Indonesia selain dari Twitter.

Disamping itu, Facebook juga memiliki fitur Social Plugin ; dimana para pemilik web bisa menggunakan sejumlah plugin Facebook seperti; Facebook Like Button atau yang sekarang dikenal dengan Facebook Pages (Fan Page), dan Facebook Comments.

Tentunya hal tersebut menjadi nilai tambah dan memiliki sejumlah keuntungan tersendiri bagi mereka yang memasang plugin komentar Facebook di blognya jika dilihat dari sisi pengguna dan kemudahannya.


Cara Memasang Komentar Facebook Responsive


Facebook Social Plugin

1. Simpan meta tag Facebook berikut ini di dalam template setelah <head>

<meta content='Kode ID Facebook admin' property='fb:admins'/>
<meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/>

Note :
Lewati langkah di atas jika kode tersebut sudah terpasang di template Anda.

2. Simpan kode berikut ini sebelum </head>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
 var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width(); 
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( ); 
  });
//]]>
</script>

3. Sisipkan kode berikut ini tepat di bawah kode <data:post.body/> yang terdapat di halaman post.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>

4. Simpan.

Finally, you're done!

Untuk demo komentar facebook responsive, bisa dilihat di blog Wiki Widgets ini.

Responsive Popup Facebook Like Box (Facebook Pages)

7/10/2016 Add Comment
Facebook merupakan salah satu media sosial yang erat sekali kaitannya dengan Blogger. Selain digunakan sebagai media promosi, Facebook juga merupakan salah satu alat komunikasi yang biasa digunakan oleh pengunjung situs dan pemiliknya selain dari Twitter.

Tidak sedikit situs yang memiliki traffic hingga ribuan, bahkan ratus ribuan dari penggunaan Facebook sebagai media promosi blognya.

Selain promosi, salah satu faktor yang mempengaruhi banyak atau tidaknya traffic yang di dapatkan dari Facebook adalah jumlah likes dan subscribes dari halaman situs itu sendiri.

Sama halnya dengan blog yang menghasilkan, umumnya; semakin banyak pengunjung, semakin besar kesempatan untuk mendapatkan penghasilan yang lebih banyak.

Begitupun dengan Fan Page Facebook; semakin banyak likes dan subscribes,semakin besar kesempatan untuk mendapatkan banyak pengunjung.

Ada banyak cara untuk mendapatkan jumlah likes dan subscribe, salah satunya dengan cara menambahkan widget Facebook Like Box di blog yang Anda miliki.

Responsive Popup Facebook Like Box


Popup Facebook Like Box

Dengan menggunakan popup, pengunjung akan sedikit 'dipaksa' untuk melihat fan page dari blog Anda sebelum mereka bisa sepenuhnya membaca/melihat konten blog tersebut.

Buka blogger > Tata letak > Tambahkan Gadget > Pilih HTML/JavaScript > Simpan kode di bawah ini pada widget tersebut ;

<style scoped='' type='text/css'> 
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #414B82;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#414B82;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink 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) {
// Pengaturan 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(''));
}
// Dapatkan 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'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<div class='fb-like-box' data-href='https://www.facebook.com/wikiwidgets' data-width='402' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div>
</div>
</div>

Facebook Pages Settings :


Ganti url https://www.facebook.com/wikiwidgets dengan url dari fan page blog Anda.

Jika Anda ingin memunculkan popup facebook like box setiap kali halaman blog dibuka, hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); pada kode di atas, kemudian non-aktifkan cookie : false pada script dibawah ini (jika sudah terpasang pada template).

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI',
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Untuk mengatur jeda waktu munculnya pop up like box ini, silakan atur nilai dari kode ini:  .delay(3000)

Simpan Widget setelah Anda selesai melakukan penyesuaian diatas.

Terakhir, simpan kode berikut tepat setelah <body> atau </body>

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=562901580420523&amp;version=v2.0&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;


Simpan dan lihat hasilnya.