Membuat Widget Recent Posts Untuk Blog

Widget Recent Posts adalah widget yang berisi artikel terbaru dari sebuah blog.  Widget ini bisa Anda jadikan untuk memberitahukan kepada pengunjung artikel terbaru dari blog Anda. Widget ini lebih simpel karena hanya menampilkan judul artikel saja, jadi tidak memberatkan terhadap blog.

Cara Memasang Widget Recent Posts Pada Blog

Silakan salin dan simpan kode dibawah ini pada widget blog Anda, pada HTML/JavaScript

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kang-mousir.blogspot.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"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></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>

Demo

Pengaturan

Icon	Teks
var homePage	Isi dengan URL blog Anda
numPosts	Isi dengan jumlah artikel yang ingin ditampilkan

Untuk mengatur jumlah artikel yang ingin ditampilkan silakan lihat keterangan diatas dan ganti kode yang Saya tandai ;)

Download Template BAGAS31.COM Gratis

Template adalah salah satu penunjang blog, template ibarat sebuah baju. Kalian para downloaders pasti sudah mengenal BAGAS31.COM salah satu situs besar tempat download software dan games gratis. Tampilan dari BAGAS31.COM ini yang membuat pengunjung betah berlama - lama di blognya. Kali ini Anda bisa mendapatkan template BAGAS31.COM dengan gratis.

Berhubung pada tanggal 30 Mei 2014 kemarin blog BAGAS31.COM dihapus pihak blogger dan kini sudah pindah ke self hosting WordPress. Admin BAGAS31.COM secara cuma - cuma membagikan templatenya.

Versi Blogger : Blue One Blogger Template

Blue One Blogger Template

Preview

Download

Ini adalah template BAGAS31.COM saat menggunakan platform blogger, template ini sangat keren. Mungkin ini beberapa fitur pada template ini :
- Full Ads Ready
- Hight CTR ( Google Adsense )
- User Friendly

Versi WordPress : Silver Mag Lite Wordpress Theme

Silver Mag Lite Wordpress Theme

Preview

Download

Sedangkan template yang satu ini adalah versi WordPress nya, ini merupakan adaptasi dari template dulu BAGAS31.COM saat menggunakan plarfor blogger. Mungkin ini fitur yang ada pada template Silver Mag Lite Wordpress Theme :
- SEO Friendly
- Ads Ready
- Hight CTR ( Google Adsense )
- Responsive
- Disqus Comment
- User Friendly

Silakan Anda download sekarang juga template milik BAGAS31.COM ini secara gratis dan cuma - cuma serta sudah di sediakan panduan langsung ;)

Tampilan Baru Fans Page Facebook 2014

Fans page adalah sebuah halaman yang di sediakan Facebook untuk para penggemar suatu web, artis, halaman, atau yang lainnya. Kini tampilan fans page facebook ini sudah berubah tampilan.  Silakan update tampilan fans page facebook  Anda.

Jika sebelumnya tampilan facebook terkesan ribet menurut Saya, kini tampilan lebih mudah untuk digunakan. Tampilannya kini menyerupai tampilan profile facebook milik Kita. Silakan Anda lihat sendiri perbedaan yang dulu dengan yang sekarang atau bisa lihat gambar dibawah ini.

Tampilan barunya lebih keren bukan, ayo update sekarang juga Fans Page Anda ;).

Memasang Back To Top Button Pada Blog

Memasang back to top button sangat penting agar memudahkan pengunjung, bila sebelumnya Saya share tentang Membuat Back To Top Unik Dengan Cacing. Kali ini saya share back to top button sederhana. Pada versi ada agak sedikit berbeda, yaitu ada penambahan efek smoothing.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jika belum pasang jQuery ini diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

/*Back To Top*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}

3. Kemudian simpan kode ini diatas kode </body>

<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZYkEi4Seli-4iniQWamFqKnFqHjedNGDRJwbhzKuKBfkwqEQ2gLK_7Fc7Ll93CtNOKTk79COeryfx4J2ZjIUG6PYgAF24Q5UQOL7QyzWidxBr1fJvaDDJhyphenhyphen4Xpv7v4dj05NNfULb7_9f/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>

Demo