Langsung ke konten utama

Cara Membuat Widget Recent Post Multi Color Keren di Blogger

Recent posts adalah widget untuk menampilkan artikel-artikel terbaru, widget ini adalah solusi terbaik agar pemirsa blog kita dapat melihat postingan terakhir yang kita buat. Pada tutorial kali ini saya akan memberikan cara membuat widget recent post multi color keren di blogger.

Di artikel kali ini saya akan membuat recent post yang dapat membuat tampilan blog kalian lebih menarik serta mempermudah bagi viewer blog kalian membaca artikel-artikel terbaru dari blog kalian.

(Baca juga : Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar)

Recent post ini adalah widget yang paling sering dipakai oleh para blogger, karena widget ini dapat meningkatkan view pada suatu blog. Yang membuat recent post ini berbeda dari recent post yang lain adalah gambar thumbnail yang bulat serta setingan yang mudah.
Cara Membuat Widget Recent Post Multi Color Keren di Blogger

Kenapa dikatakan mudah, karena kalian hanya cukup mengaturnya tanpa menambahkan link blog kalian. Jadi widget recent post ini bisa di gunakan secara otomatis.

Tidak usah panjang lebar langsung saja saya akan menunjukan Cara membuat widget recent post multi color keren di blogger, berikut adalah langkah-langkahnya.

(Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll)

Cara Membuat Widget Recent Post Multi Color Keren di Blogger

  • Langkah pertama buka akun Blogger kalian.
  • Pilih menu Tata Letak, pilih Tambahkan Gadget di sidebar kalian. Kemudian pilih HTML/Javascript.
  • Di dalam widget konfigurasi, masukan Judul recent post kalian. Kemudian masukan script CSS berikut di kolom Konten.
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PuWQV360rG1qLZ_1QZ9R_1O2JAwgtd6UyehmsyS8jhw2z4s_berEqv_LP-2dcZLIknFG37o034Sli2rUOAHrgYyD7dI8AWDIb2AcWzcDRr-_P5iJ_u6A6KDVeK1fD6XBF75JnRDHFqf6/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
  • Pengaturan Widget :
    • var posts_number = 5; ( Jumlah Postingan yang ingin ditampilkan )
    • var showpostswiththumbs = true; ( Untuk menampilkan gambar thumbnail )
    • var insidereadmorelink = false; ( Untuk menampilkan readmore )
    • var showcomments = false; ( Untuk menampilkan jumlah komen )
    • var posts_date = false; ( Untuk menampilkan tanggal postingan )
    • Ketikan true untuk menampilkan settingan, dan false untuk menyembunyikan settingan.
  • Setelah settingan selesai silahkan pilih Simpan.
    Cara Membuat Recent Post Keren di Blogspot

(Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog)

Sekarang kalian sudah menambahkan recent post di blog kalian. Tentunya ini akan mempermudah para pemirsa blog kalian, dan kemungkinan artikel kalian akan dilihat oleh pengunjung blog kalian lebih meningkat. Untuk tutorial yang lain dari saya, tetap kunjungi tutorialumum.com.

Terima kasih sudah berkunjung di blog saya, jika ada pertanyaan serta kritik dan saran silahkan masukan di kolom komentar. Karena pertanyaan serta kritik dan saran dari kalian sangat berguna bagi saya dalam membangun sebuah blog.

Postingan populer dari blog ini

Inovasi Teknologi dan Seni Menuju Riau Berbudaya

Inovasi Teknologi dan Seni Menuju Riau Berbudaya - Riau adalah salah satu provinsi yang sedang giat dalam pembangunan jangka menengah, diantara salah satu misinya adalah meningkatkan pelayanan pendidikan. Peningkatan pelayanan pendidikan dilakukan karena peran para generasi muda dalam meningkatkan pembangunan sangatlah di butuhkan baik dari segi Inovasi Teknologi ataupun Seni, agar masyarakat Riau menjadi masyarakat yang berbudaya. Dimanakah peran generasi muda Riau dalam inovasi di bidang teknologi informasi? Peran Generasi Muda Riau Dalam Inovasi di Bidang Teknologi Informasi Program Riau Go.IT , adalah salah satu inovasi terbaru pemerintah dalam bidang teknologi informasi, sehingga memudahkan Pemerintah Provinsi Riau dalam meningkatkan pelayanan masyarakat, dan juga penyebarluasan informasi yang ada di Provinsi Riau. Sumber : http://humas.riau.go.id Program Riau Go.IT , adalah program Pemerintah Provinsi Riau pada saat ini, sehingga kemungkinan besar jika program ini sudah ter...
Baca Lebih Lanjut »

Cara Membuat Filter Gambar Dengan CSS

Filter gambar biasanya digunakan pada saat kita mengedit gambar. Biasanya juga kita hanya menggunakan aplikasi untuk memfilter gambar tersebut sehingga dapat berubah sesuai yang kita inginkan. Tetapi ternyata ada cara untuk memfilter gambar tersebut dengan menggunakan CSS , untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat filter gambar dengan CSS . (Baca juga :  Cara Membuat Gambar Flat Design Secara Otomatis ) Beberapa filter gambar yang bisa di gunakan antara lain. Filter Gambar yang Bisa di Gunakan dengan CSS 1. Blur Agan pasti sudah pernah mendengar istilah blur, efek blur pada gambar di gunakan untuk menyamarkan gambar. 2. Brightness Brightness di gunakan untuk membuat filter gambar menjadi lebih cerah, sehingga dapat disimpulkan filter ini di gunakan untuk mencerahkan gambar. 3. Contrast Kontras. Secara umum kontras diartikan sebagai perbedaan gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang, atau warna...
Baca Lebih Lanjut »

Cara Mudah Membuat Banner Iklan Sederhana dengan Paint

Banner iklan adalah hal umum dalam sebuah blog . Dengan iklan yang muncul di sebuah blog, menandakan bahwa blog tersebut sudah terpercaya. Banner iklan ada berbagai ukuran tetapi yang paling umum adalah banner iklan sidebar dan header. (Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog ) Google AdSense adalah sebuah perusahaan yang paling terkenal untuk periklanan . Dengan bergabung menjadi publisher google adsense, hal ini memungkinkan untuk menampilkan iklan di halaman blog yang kita miliki. Lalu bagaimana cara membuat banner iklan sendiri? Sebetulnya caranya sangat mudah. Kita bisa membuat iklan kita sendiri dengan berbagai software ataupun aplikasi editor gambar yang ada. Untuk itu kali ini saya akan membagikan cara membuat banner iklan sederhana dengan software paint. Hanya dengan software Paint? Ya, software yang paling awam ini juga bisa di gunakan untuk membuat banner iklan. Kenapa memilih Paint? Paint adalah software yang pasti selalu ada di dalam se...
Baca Lebih Lanjut »

Cara Membuat Judul Blog dengan Gambar Teks Keren

Pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat judul blog dengan gambar teks keren . Kita sering melihat header judul sebuah blog menggunakan teks dengan bentuk font biasa seperti Arial , tetapi kita juga sering melihat judul blog berupa gambar , tetapi menggunakan font yang unik. (Baca juga :  Cara Membuat Slideshow di Blogger Keren ) Lalu bagaimana cara membuat judul blog dengan gambar teks keren? Kita sebenarnya juga bisa menggunakan aplikasi atau software editor gambar seperti Adobe Photoshop , Corel Draw , dan editor gambar lainnya. Namun jika kalian tidak memiliki skill membuat judul blog dengan gambar teks yang bagus, kalian bisa menggunakan cara dari saya. Nah, untuk cara membuat judul blog dengan gambar teks keren, silahkan kalian ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Cara Membuat Judul Blog dengan Gambar Teks Keren Karena di sini saya tidak bilang ingin menggunak...
Baca Lebih Lanjut »

Cara Mudah Membuat Widget Artikel Pilihan Di Blog

Widget adalah suatu komponen yang penting dalam sebuah blog. Widget di blog ada berbagai macam jenisnya, dari mulai bawaan blog ataupun kita sendiri yang membuatnya. Pada kesempatan kali ini, saya akan memberikan cara mudah membuat widget artikel pilihan . Widget artikel pilihan ini di gunakan untuk menampilkan list atau menu postingan di widget secara acak. Widget artikel pilihan ini adalah widget yang di rekomendasikan, bagi anda yang ingin mendaftar menjadi pusblisher Google AdSense . (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Tampilan widget artikel pilihan ini cukup simple, yaitu hanya berupa teks saja. Bagi anda yang ingin menampilkan widget ini dengan tampilan gambar thumbnail silahkan gunakan widget ini . (Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger ) Jika anda penasaran bagaimana bentuk atau tampilan dari widget artikel pilihan ini, di bawah ini saya tampilkan bentuk tampilan dari widget artikel pilihan tersebut. Langsun...
Baca Lebih Lanjut »