[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.

Simple Random Posts Widget For Blogger

7/12/2016 Add Comment
Random Posts Widget for Blogger

Random Posts merupakan salah satu fitur yang berguna untuk menampilkan post/artikel secara acak ketika halaman dimuat, baik itu post/artikel terbaru ataupun yang sudah lama.

Dengan adanya widget Random Posts ini, artikel-artikel yang sebelumnya tidak terlihat oleh pengunjung memiliki potensi untuk bisa dilihat.

Singkatnya, Random Posts sangat membantu dalam meningkatkan jumlah page views suatu blog.

Tertarik untuk memasang Widget Random Posts di blog Anda?
Berikut langkah-langkahnya :
1. Buka Blogger
2. Tata Letak/Layout
3. Tambahkan Widget
4. Simpan Kode di bawah ini ke dalam widget :

<style scoped='' type="text/css">
#wiki-random ul{list-style:none;margin:0;padding:0}#wiki-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#wiki-random li:last-child{border-bottom:0;}
#wiki-random li a{color:#444;}#wiki-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='wiki-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'https://wikiwidgets.blogspot.com',
    maxResults = 10,
    containerId = 'wiki-random';
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
function WikiRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=WikiRandomPosts"></scr' + 'ipt>');
//]]>
</script>


Widget Settings


Ganti dan sesuaikan kembali kode yang ditandai berikut ini :

var homePage : Ganti https://wikiwidgets.blogspot.com dengan URL blog Anda.
maxResults : Jumlah judul artikel yang ditampilkan. Misal : 10

5. Simpan 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.

How To Add Contact Form Widget into (Blogger) Static Page

7/09/2016 Add Comment
Widget Contact Form merupakan salah satu widget/gadget yang terdapat di dalam Blogger yang berfungsi untuk memfasilitasi pengunjung blog agar mereka dapat melakukan interaksi secara personal dengan pemilik blog yang dikunjunginya dengan menggunakan email.

Disamping fungsinya sebagai fasilitas dan sarana komunikasi personal antara users dan site-owner. Widget Contact Form juga dianggap sebagai widget yang wajib ada dalam sebuah blog karena widget tersebut merupakan salah satu faktor yang dipercaya dapat meningkatkan 'kepercayaan' pengunjung terhadap blog yang Ia kunjungi.

Anda pasti paham SEO, dan Anda pasti tahu betapa pentingnya faktor kepercayaan pengunjung. So, then, bagi Anda yang belum memasang widget contact form di dalam blognya, berikut adalah Tutorial Memasang Widget Contact Form di Halaman Statis Blogger.

Just follow the steps, and let the magic happens :D


7 Langkah Membuat Widget Contact Form di Halaman Statis Blogger


Contact Form Widget for Blogger


1. First of all, tambahkan terlebih dahulu widget contact form. (Lihat gambar)
Gadget Contact Form Blogger
Gambar 1.1 - Menambahkan Gadget Contact Form Blogger

Note :
Pastikan template yang Anda gunakan saat ini mendukung fitur FontAwesome.

Namun apabila di dalam template Anda tidak terdapat FontAwesome, Anda cukup menambahkan link berikut sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Next > buka dan edit Template, kemudian simpan kode CSS berikut tepat sebelum </style> atau ]]></b:skin>

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

3. Save/Simpan Template.

4. Kembali ke dashboard blogger kemudian pilih Pages/Laman.
Blogger Pages/Laman Blogger
Gambar 1. 2 - Dashboard Blogger, Laman Blogger

5. Buat laman baru > tambahkan judul laman, dan sesuaikan pengaturan laman Anda seperti gambar berikut :
Membuat Contact Form di Halaman Statis Blogger
Gambar 1. 3 - Pengaturan Laman Blogger dan Penerapan kode Contact Form

6. Finally, tambahkan kode di bawah ini pada tab HTML
(Lihat gambar yang dilingkari sebelumnya).

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

7. Publikasikan laman tersebut, and You're done!

Make An Appealing Recent Post Widget with Image Slider

7/08/2016 Add Comment
Bagi seorang blogger yang seringkali memberikan informasi terbaru dan terupdate, Recent Posts Widget tentunya menjadi salah satu tool yang paling dibutuhkan oleh Blogger; dimana fungsi dari Recent Posts Widget itu sendiri untuk menampilkan posts/entri atau artikel terbaru dan relevan dari blog itu sendiri.

Selain itu, dengan adanya Widget Recent Posts untuk Blogger ini tentunya akan menambah nilai positif untuk Navigasi Situs Anda; pengunjung akan dengan mudah menemukan konten terbaru dan relevan di situs Anda.

Disamping memudahkan pengunjung dalam menavigasi situs Anda, Widget Recent Posts juga cukup membantu dalam menurunkan Bounce Rate blog Anda. Tentunya kita sebagai pemilik blog harus "kreatif" dalam menampilkan konten situs kita sendiri agar menarik minat para pengunjung sehingga mereka betah berlama-lama di situs kita dengan menyuguhkan konten baru yang relevan.


Widget Recent Posts with Slider


Widget Recent Posts Blogger

1. Go to your Bloggers' dashboard.
2. layout.
3. Add new widget/gadget [HTML/JavaScript].
4. Add the code below.

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOn0yQPD_o9srkfB0kMC4wK3JrF4qdvXPguXsWhrOnx9vJ0zhe7iENkcja76nXst7uJ9mRkupHlgydS_l2YDSf22Oio0ky_GV5SfardilvChSXpQLPKGV4Il8bUxWwhRfE8lr0bBE3fY/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="recentpostside"></div>
<script type='text/javascript'>
function RecentPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
RecentPostSide({
  blogURL: "http://wikiwidgets.blogspot.com",
  MaxPost: 8,
  idcontaint: "#recentpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>


Widget Settings


  • BlogURL : Replace the https://wikiwidgets.blogspot.com with your blog URL.
  • MaxPost : A number of post you want to show. Choose what number are likely to be good for your blog. On my case, 8, which it's my date of birth :D
  • ImageSize : The size of the image (pixels).
  • interval : The time in which the slider should be move.
  • autoplay : Change the value into "false" if you wanted to turn off the slider.
  • tagName : Change the value "false" in to your own label name if you wish to show your recent post in a particular label. e.g., tagName: Travels

Done!


Untuk memaksimalkan tampilannya agar selalu fresh, caranya pun cukup sederhana; update terus kontennya :p