Recent Posts Widget Paling Mudah dan Trendi

Halo semua apa kabar ? saya harap kalian baik-baik saja karena pada kesempatan kali saya akan membahas tentang widget blog. Setelah lama sekali tidak berbagi widget, di postingan sekarang ini saya akan membagikan cara memasang Widget Recent Posts.

Widget Recent Posts merupakan tempat menampilkan himpunan post ter-update dari blog milik anda. Di widget yang akan dibuat pada kali ini, artikel terbaru dilihat dari dalam daftar teks judul dengan hyperlink artikel punya anda. Visitor atau Pengunjung blog pasti akan membutuhkan navigasi yang bagus seperti widget ini.

Kebanyakan pemilik blog merasa sangat terbantu dengan widget ini, salah satunya adalah saya sendiri yang juga menggunakannya di blog. Melihat dari segi fungsionalnya, manfaat dari widget ini cukup banyak. Itu semua dapat diungkapkan sesuai pendapat masing-masing dari pengunjung baik pemilik blog.

Widget ini terbilang cukup ringan, ditambah lagi dengan tampilan yang bersih dan modis. Cocok sekali bagi blog yang menjunjung tinggi fast loading dan flat design. Ya, saya merancangnya khusus untuk situs blog dengan tampilan sederhana dan warna yang enak dilihat. Penambahan Font Awesome Icon meningkatkan kesan bagus pada desainnya. Untuk itu dibawah ini cara membuat widget tersebut.

Recent Posts Widget Paling Mudah dan Trendi

Cara Membuat Recent Posts Widget paling enteng dan trendi

Sebelum memasang widget, pastikan anda telah menyimpan kode tag Font Awesome Icon di HTML blog. Jika belum, salin dan letakkan kode berikut di sesudah kode <head>.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' />

Letak link tag Font Awesome Icon

1. Masuk ke Blogger.com milik anda.
2. Kemudian ke Dasbor dan masuk ke Tata Letak blog.
3. Tambahkan Gadget di tempat yang anda inginkan.

Menambahkan Widget di Tata Letak

4. Sekarang anda bisa mulai menambahkan widget, klik tanda plus pada HTML/JavaScript.

Menambahkan HTML atau JavaScript

5. Setelah sukses masuk ke konfigurasi HTML/JavaScript, tulislah judul widget dan tempelkan kode berikut pada bagian kolom konten.

Konfigurasi Widget

<style scoped='' type="text/css">
ul#artikel-terbaru{list-style:none;margin:0;padding:0}
li.artikel-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e5e5e5;word-break:break-word;padding:10px 0;margin:0;transition:all .3s;}
li.artikel-terbaru:last-child{border-bottom:0;}
li.artikel-terbaru:hover{padding-left:3px}
li.artikel-terbaru a{color:#333;}
li.artikel-terbaru a:hover{#666;}
li.artikel-terbaru a:before{content:"\f046";font-family:fontAwesome;color:#c7cbd4;font-style:normal;top:0;left:0;margin-right:12px;}
li.artikel-terbaru :hover::before{color:#398dcc;}
</style>
<ul id="artikel-terbaru"></ul>
<script>
//<![CDATA[
var homePage = "http://www.librasbr.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("artikel-terbaru")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("artikel-terbaru");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="artikel-terbaru"><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>

Keterangan:
var homePage isi dengan alamat blog anda, contoh http://www.librasbr.com.
numPosts isi dengan jumlah artikel yang ingin ditampilkan, contoh 5.

6. Jika sudah selesai, nda tinggal klik tombol Simpan atau Save.

Widget Recent Posts telah sukses dibuat diblog anda. Apabila ada pertanyaan seputar widget ini, jangan sungkan untuk berkomentar. Sekian dulu Cara Membuat Recent Posts Widget Paling Mudah dan Trendi di blog. Semoga Bermanfaat
Tag: HTML, Widget

Berlangganan: Masukkan e-mail Anda untuk memperoleh kiriman artikel teraktual dari librasbr.com tepat di pesan kotak masuk.

feedburner

0 Komentar untuk "Recent Posts Widget Paling Mudah dan Trendi"

KETENTUAN BERKOMENTAR

↳ Berkomentarlah sesuai isi dan topik artikel
↳ Dilarang menyisipkan PRANALA (link) AKTIF