Widget recent post atau yang kita kenal dengan widget artikel terbaru berfungsi untuk menunjukkan warta kepada visitor untuk membaca postingan terbaru yang ada pada blog tersebut.
Sebelumnya aku sudah pernah menciptakan tutorial modifikasi widget popular post keren dengan warna-warni ibarat pelangi. Widget popular post ini merupakan fitur yang sudah tersedia di blogger oleh alasannya itu penggunaan widget ini jauh lebih banyak di bandingkan dengan widget recent post.
Berbeda dari widget popular post, widget recent post ini tidak tersedia pada fitur blogger, maksudnya ialah saat Anda ingin menambahkan widget gres biasanya di bab tata letak blog saat Anda klik tambahkan gadget maka akan muncul widget-widget yang cukup banyak untuk dapat Anda gunakan pada blog.
Karena widget artikel terbaru atau recent post ini tidak tersedia di blogspot, maka kita perlu membuatnya dengan cara manual yaitu memakai sedikit derma arahan JavaScript.
Jika Anda ingin mengedit tampilan widget recent post ini dapat Anda gunakan arahan css, di sini aku akan menunjukkan arahan css yang dapat menciptakan widget recent post terlihat lebih keren dari biasanya dengan warna warni ibarat pelangi.
Jika Anda tertarik menciptakan widget recent post atau ingin memodifikasinya supaya terlihat anggun dan keren silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Widget Recent Post di Blogger
1. Masuk ke Blogger.com.2. Klik Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Kemudian Copy dan Paste arahan JavaScript di bawah ini.
<div id='recent-wrapper' class='recent-wrapper'> <ul id="recent-posts"></ul> <script> //<![CDATA[ numPosts = 10; 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="√ Cara Membuat Widget Recent Post Keren Warna Warni di Blog" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script> </div>4. Klik Simpan.
Catatan:
Anda dapat mengatur jumlah postingan yang di tampilan pada widget recent post, caranya cukup mengubah bab arahan
numPosts = 10; silahkan ganti 10 dengan jumlah yang Anda inginkan. Namun saran aku tidak mengubahnya lebih dari 10 postingan.Cara Modifikasi Widget Recent Post Keren Warna Warni
1. Masuk ke Blogger.com.2. Klik Tema > Edit HTML.
3. Cari arahan
]]></b:skin> atau </style>.4. Kemudian Copy arahan CSS di bawah ini, kemudian Paste sebelum arahan
]]></b:skin> atau </style>./* Recent Post */ #recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px} #recent-wrapper ul{margin:0;padding:0;list-style-type:none;} #recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #recent-wrapper ul li:first-child {background:#E11E28;width:100%} #recent-wrapper ul li:first-child:after{content:"01";} #recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%} #recent-wrapper ul li:first-child + li:after{content:"02";} #recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%} #recent-wrapper ul li:first-child + li + li:after{content:"03";} #recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;} #recent-wrapper ul li:first-child + li + li + li:after{content:"04";} #recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;} #recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";} #recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%} #recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";} #recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%} #recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";} #recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%} #recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";} #recent-wrapper ul li:first-child:after, #recent-wrapper ul li:first-child + li:after, #recent-wrapper ul li:first-child + li + li:after, #recent-wrapper ul li:first-child + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after, #recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after, #recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after {position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700} #recent-wrapper ul li a{color:white;text-decoration:none}5. Klik Simpan tema.
Catatan:
Kode CSS di atas berfungsi jikalau artikel terbaru atau widget recent post yang Anda gunakan tidak lebih dari 10 postingan, jikalau Anda menampilkan lebih dari 10 postingan pada widget recent post maka tampilannya tidak akan terlihat keren lagi.
Code by Bung Frangki
Itulah artikel mengenai cara menciptakan widget recent post keren warna-warni di blog, caranya cukup gampang bukan? selamat mencoba dan supaya bermanfaat.
Sumber http://www.caramanual.com